112 Three.js postProcess 后处理内置shader包

threejs的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，可以直接使用内置的着色器包，避免了复杂的着色器代码编写。

效果示例：

实现方式：

初始化效果组合器

composer=new THREE.EffectComposer(renderer);//该参数是WebGLRenderer对象

为了保证组合器的正常使用，必要的引用包，在工程文件下可找到，这四个都是必须的，并且注意引用的顺序，如果顺序不对，浏览器控制台会报错的

<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script><script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/shaders/CopyShader.js"></script>

新建场景通道，如果不再建一个场景，主场景会被覆盖掉，什么也看不到

var renderPass=new THREE.RenderPass(scene,camera);
composer.addPass(renderPass);

添加各种处理效果

//1.将原始图像输出为灰度点集
var dotScreenShader=new THREE.ShaderPass(THREE.DotScreenShader);
dotScreenShader.uniforms['scale'].value=4;
composer.addPass(dotScreenShader);//2.将RGB三种颜色分离
var RGBshiftShader=new THREE.ShaderPass(THREE.RGBShiftShader);
RGBshiftShader.uniforms['amount'].value=0.0015;
composer.addPass(RGBshiftShader);

最后渲染，注意放在帧循环中

function render(){composer.render();//renderer.render(scene,camera);//可以去掉原来的渲染
}

可以监听窗口变动时，自动改变渲染尺寸

composer.setSize(window.innerWidth,window.innerHeight);

后处理基础包：

RenderPass.js：

该通道会在当前场景和摄像机的基础上渲染出一个新场景，和普通的webGLRenderer一样。
引用：js/postprocessing/RenderPass.js
参数：
scene，场景对象
camera，相机对象
用法示例：

var renderPass=new THREE.RenderPass(scene,camera);
composer.addPass(renderPass);

ShaderPass.js：

该通道接受自定义的着色器作为参数，以生成一个高级、自定义的后期处理通道, 产生各种模糊效果和高级滤镜。
引用：js/postprocessing/ShaderPass.js
参数：各种threejs内置着色器包或自定义着色器
THREE.DotScreenShader：输出灰度点集
THREE.MirrorShader：创建镜面效果
THREE.HueSaturationShader：改变颜色的色调和饱和度
THREE.VignetteShader：添加晕映效果
THREE.ColorCorrectionShader：调整颜色的分布
THREE.RGBShiftShader：将红绿蓝三种颜色分开
THREE.BrightnessContrastShader：改变亮度和对比度
THREE.ColorifyShader：将某种颜色覆盖到整个屏幕
THREE.SepiaShader：创建类似于乌贼墨的效果
THREE.KaleidoShader：类似于万花筒的效果
THREE.LuminosityShader：提高亮度
THREE.TechnicolorShader：模拟类似老电影里面的两条彩色效果
THREE.HorizontalBlurShader和THREE.VerticalBlurShader：可以向水平和垂直方向创建模糊效果
THREE.HorizontalTiltShiftShader和THREE.VerticalTileShiftShader：可以在水平和垂直方向创建倾斜平移的效果
THREE.TriangleBlurShader：基于三角形的方法创造一种模糊效果
THREE.BleachBypassShader：创造一种镀银的效果
THREE.EdgeShader：找到图片的边界并显示
THREE.FXAAShader：添加抗锯齿的效果
THREE.FocusShader：创建中间比较尖锐，周围比较模糊的效果。
用法示例：

var dotScreenShader=new THREE.ShaderPass(THREE.DotScreenShader);
dotScreenShader.uniforms['scale'].value=4;
composer.addPass(dotScreenShader);

GlitchPass.js：

该通道会随机在屏幕上显示电脉冲。
引用：js/postprocessing/GlitchPass.js
参数：无
属性：
goWild，默认为false，为true则会持续显示全屏电子脉冲
用法示例：

glitchPass=new THREE.GlitchPass();//该通道需要添加着色器依赖包
composer.addPass(glitchPass);glitchPass.goWild=true;//持续全屏电子脉冲

在使用该通道时需要添加对应的着色器依赖包（js/shaders/DigitalGlitch.js），添加后就能直接看到效果。

MaskPass.js：

该通道可以在当前图像上添加掩码，后续的通道只会影响掩码区域，如果取消掩码需要加入THREE.ClearMaskPass通道。需要注意使用掩码前，要将composer.renderTarget.stencilBuffer设置为true,用于限制渲染区域。另外，使用完掩码后，需要使用ClearMaskPass()去掉掩码区域。
用法示例：

var composer = new THREE.EffectComposer(renderer);
composer.renderTarget1.stencilBuffer = true;
composer.renderTarget2.stencilBuffer = true;

FilmPass.js：

该通道会使用扫描线和失真来模拟电视屏幕效果。
配置项：
noiseIntensity：场景的粗糙程度
scanlinesIntensity：扫描线的显著程度
scanLinesCount：扫描线的数量
gratScale：是否使用灰度图输出
用法示例：

BloomPass.js：

该通道会增强场景中的亮度。
配置项：
Strength：光的强度
kernelSize：光的偏移
sigma：光的锐利程度
Resolution：光的精确度，值越低，光的方块化越严重
用法示例：

var renderPass = new THREE.RenderPass(scene, camera);
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
//CopyShader是为了能将结果输出，普通的通道一般都是不能输出的，要靠CopyShader进行输出
effectCopy.renderToScreen = true;//设置这个参数的目的是马上将当前的内容输出var bloomPass = new THREE.BloomPass(3, 25, 5.0, 256);composer1.addPass(renderScene);//渲染当前场景
composer1.addPass(bloomPass);//添加光效
composer1.addPass(effectCopy);//输出到屏幕

OutlinePass.js：

该通道可以为物体（场景中被添加到通道中的物体）的边缘添加一个发光效果。
配置项：
edgeStrength：强度，默认3
edgeGlow:：强度默认1
edgeThickness:：边缘浓度
pulsePeriod:：闪烁频率，默认0 ，值越大频率越低
usePatternTexture：使用纹理
visibleEdgeColor：边缘可见部分发光颜色
hiddenEdgeColor：边缘遮挡部分发光颜色

TexturePass.js：

保存当前通道的输出，作为后续使用。
用法示例：

var renderScene = new THREE.TexturePass(composer1.renderTarget2);//保留当前输出结果
composer2.addPass(renderScene);//将保留的输出结果加入到别的composer中即可

常用着色器包：

CopyShader.js：

将效果输出，普通的通道一般都是不能输出的，要靠CopyShader进行输出。
引用：js/shaders/CopyShader.js

DotScreenShader.js：

该通道会将原始图像输出为灰度点集。
引用：js/shaders/DotScreenShader.js
配置项：
scale：点的大小
center：点的偏移量
angle：点的对其方式
用法示例：

vardotScreenShader=new THREE.ShaderPass(THREE.DotScreenShader);
dotScreenShader.uniforms['scale'].value=4;
composer.addPass(dotScreenShader);

RGBShiftShader.js：

该通道会将图像的红绿蓝三种颜色分离。
引用：js/shaders/RGBShiftShader.js
配置项：
amount：颜色深浅度
用法示例：

var RGBshiftShader=new THREE.ShaderPass(THREE.RGBShiftShader);
RGBshiftShader.uniforms['amount'].value=0.0015;
composer.addPass(RGBshiftShader);