找回密码
 立即注册
首页 业界区 业界 ThreeJs-13效果合成与后期处理

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

格恳绌 前天 19:16
一.合成效果原理与设置

什么是效果合成,就是可以把一些效果经过后期处理再放出来
原来的物体是直接通过render渲染出来,而现在则是经过一条render通道,可以处理也可以叠加处理后再放出来
1.png

首先正常加载模型
2.png

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

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

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

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

7.png

8.png

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

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

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

11.png

发光效果
12.png

13.png

当然通过官网的例子的gui也可以去调节一些参数
三.使用shaderpass实现自定义合成效果

首先导入
14.png

首先使用的默认的
15.png

添加到通道
16.png

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

那如果只是想对当前这个效果合成器,所有效果一起叠加使用
首先正常设置uv,在片段着色器这边我们当前这个通道所有的效果都是默认传了一个纹理进来,并且名字如下,把他作为颜色即可
18.png

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

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

21.png

22.png

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

有一张法向纹理图案
想实现的效果,头盔周围都是六边形网格,中间部分可以反射
23.png

加载纹理
24.png

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

值传进来
26.png

然后片段着色器拿到传进来的值
这是光线角度,参数是光线打进来的位置,normalize只是让他变成单向量
统一设置光线dot函数即可,由于normalcolor是一个四维向量所以只取xyz,加上光线形成思维向量
而clamp函数,设置一个区间,小于0就是0,大于1就是1
27.png

28.png

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

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

30.png

然后加上时间
31.png

32.gif


来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册