ThreeJs-13效果合成与后期处理

news/2025/2/6 15:39:10/文章来源:https://www.cnblogs.com/heymar/p/18701148

一.合成效果原理与设置

什么是效果合成,就是可以把一些效果经过后期处理再放出来

原来的物体是直接通过render渲染出来,而现在则是经过一条render通道,可以处理也可以叠加处理后再放出来

image-20241228200144882

首先正常加载模型

image-20241228200708400

首先导入效果合成器以及一些自带的效果

image-20241228200742594

创建合成效果渲染器,跟之前渲染器差不多,但是要注意注意添加渲染通道这个效果

image-20241228200832690

然后不再是渲染render而是用合成效果render

image-20241228200914816

此时就能看到基本的render一样的效果,然后就可以开始一些其他的效果有哪些效果可以在这个目录查看,实现效果可以上threejs官网查看

image-20241228201026206

image-20241228201043344

image-20241228201053234

二.实现抗锯齿,点效果,发光,屏幕闪动等特效

什么是抗锯齿,一个物体在边缘处很容易出现锯齿感

image-20241228202248255

而开启抗锯齿就是会把一些有锯齿感的地方经过计算,变得模糊看起来顺滑

image-20241228202339597

image-20241228202348630

发光效果

image-20241228202505293

image-20241228202517239

当然通过官网的例子的gui也可以去调节一些参数

三.使用shaderpass实现自定义合成效果

首先导入

image-20241228202950511

首先使用的默认的

image-20241228203033067

添加到通道

image-20241228203048301

会发现此时整个页面都是黄色,因为这个后期效果是对整个场景渲染

image-20241228203115339

那如果只是想对当前这个效果合成器,所有效果一起叠加使用

首先正常设置uv,在片段着色器这边我们当前这个通道所有的效果都是默认传了一个纹理进来,并且名字如下,把他作为颜色即可

image-20241228203531369

但是要注意一下,这个默认值要先设置在外面

image-20241228203717241

静态效果,可以去设置一些颜色,比如整个色调偏蓝一点

image-20241228203916708

image-20241228203940310

image-20241228204004695

四.使用法向纹理合成特色渲染镜头

有一张法向纹理图案

想实现的效果,头盔周围都是六边形网格,中间部分可以反射

image-20241228204237030

加载纹理

image-20241228204332941

在刚才自定义特效定义法向纹理默认值

image-20241228204509127

值传进来

image-20241228204532490

然后片段着色器拿到传进来的值

这是光线角度,参数是光线打进来的位置,normalize只是让他变成单向量

统一设置光线dot函数即可,由于normalcolor是一个四维向量所以只取xyz,加上光线形成思维向量

而clamp函数,设置一个区间,小于0就是0,大于1就是1

image-20241228205302300

image-20241228205631101

五.运用时间打造水底波浪动态渲染效果

形成波浪效果首先得用sin函数,变的是uv

image-20241228205914137

image-20241228210018519

然后加上时间

image-20241228210049115

GIF

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/879684.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决Windows11可能出现的自动获取到错误的DNS地址问题

现象 当一个wifi再射中中配置了手动的DNS地址,如114.114.114.114/114.114.115.115,连接其他新wifi的时候,虽然默认自动获取DNS,但是获取的却不是路由配发的DNS,而是之前设置的114.114.114.114/114.114.115.115 解决方案 1、首先打开旧ui的网卡的设置,确定处于自动dns。2、…

docker在mac-m1芯片部署并启用tomcat

手把手教你使用docker在mac-m1芯片部署并启用tomcat 1,下载docker并安装 登陆官网下载dockr,选择mi芯片的docker下载 下载地址:https://www.docker.com/get-started 2,配置docker的阿里云加速器(也可以配置其他加速器) 在设置---docker engine 中添加阿里云的加速器 {&quo…

JS-51 事件代理(事件委托)

由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父结点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)var ul =document.querySelector(ul);ul.addEventListenr(click,function(event){if(event.target.tagN…

docker搭建jenkins导入python包

title: docker搭建jenkins导入python包 tags: - docker - centos - jenkins categories: - docker1. 项目概述 2. 环境准备 3. 创建 Dockerfile 4. 创建 Docker Compose YAML 文件 services volumes5. 同级目录放requirements.txt 6. 启动 Jenkins 服务 7. 访问 Jenkins 8. 验…

普通人做短剧需要哪些证书?

短剧行业爆火,但在制作短剧需持有相关资质,否则就属于违规经营。不管是想在各大平台宣传推广,还是想上架小程序等途径都是要求三证齐全的。 那应该先取得什么样的资质才可以开展这项业务? 第一个就是增值电信业务经营许可证—ICP许可证这是从事互联网行业的基本要求,它的申…

DeepSeek如何在资源优化时做到了性能领先?

问题:DeepSeek如何在资源优化时做到了性能领先? DeepSeek V3的Benchmark如图3所示,该图显示DeepSeek V3在主要数据集测试时超越了业界LLM同类标杆的水平,这给了业界一个初步的惊喜,尤其是训练阶段花费了少于业界LLM同类标杆十分之一的代价:图3:DeepSeek V3如何以更少资源…

【ABAP】使用vscode+cline+deepseek进行abap的开发

声明:本文主要进行的是演示,实际项目中的应用还需要大家的探索 前置条件: 1. vscode 安装abap的插件 2. 注册deepseek的api key 或者 硅基流动的 apikey (最近deepseek遭受攻击不太稳定,推荐使用硅基流动的deepseek模型)deepseek api平台硅基流动注册 3. vscode安装clin…

vxe-table 如何实现全部单元格都能拖拽调整列宽,表头和表体都支持拖拽

vxe-table 如何实现全部单元格都能拖拽调整列宽,表头和表体都支持拖拽 官网:https://vxetable.cn 效果代码 通过 resizable-config.isAllColumnDrag 启用所有单元格允许拖拽调整列宽 <template><div><vxe-grid v-bind="gridOptions"></vxe-gr…

初探集群联邦

本文分享自天翼云开发者社区《初探集群联邦》,作者:echooo 一.什么是集群联邦?集群联邦(Federation)是将多个kubenetes集群注册到统一的控制平面,为用户提供统一API入口的多集群解决方案。集群联邦设计的核心是提供在全局层面对应用的描述能力,并将联邦对象实例化为kub…

DeepSeek开源o1击毙OpenAI,强化学习惊现「啊哈」时刻!网友:AGI来了

DeepSeek开源o1击毙OpenAI,强化学习惊现「啊哈」时刻!网友:AGI来了 AI生成摘要摘要 中国版o1刷屏全网。DeepSeek R1成为世界首个能与o1比肩的开源模型,成功秘诀竟是强化学习,不用监督微调。AI大佬们一致认为,这就是AlphaGo时刻。自由讨论详情 一觉醒来,AGI就实现了?!…

多种路径规划方案,满足应用个性化导航需求

在快节奏的都市生活中,路径规划已成为日常出行的核心环节。用户无论前往何地,都期望能够迅速获取所有可能的路线,并根据预估的出行时间,轻松挑选出最适合自己的出行方案。在现代生活中,路径规划的需求无处不在,从导航应用中的个性化路线推荐,到外卖服务中的高效配送规划…

npm ERR missing script dev

没有dev脚本 看一下你的package.json 文件里面是哪个脚本 执行 npm run serve