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

一.合成效果原理与设置

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

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

首先正常加载模型

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

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

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

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

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

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

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

发光效果

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

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

首先导入

首先使用的默认的

添加到通道

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

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

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

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

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

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

有一张法向纹理图案

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

加载纹理

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

值传进来

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

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

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

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

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

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

然后加上时间