three.js 后处理 理解

后处理的效果也实现了几种了，但仅限于cv，都还未做理解，借着对自定义shader的实现，谈谈对后处理接口的使用理解。

要实现后处理效果，应有3个步骤

1:初始化后处理的入口，即  new THREE.EffectComposer(renderer);  后处理的基础包，使用它来渲染场景、应用通道和输出结果。

2 var renderPass = new THREE.RenderPass(scene, camera);  该通道会在当前场景和摄像机的基础上渲染出一个新场景，可以理解为保存当前的场景

3 ShaderPass  ：该通道接受自定义的着色器作为参数，以生成一个高级、自定义的后期处理通道, 产生各种模糊效果和高级滤镜。FXAAShader，LuminosityShader都是在此基础上的封装

 

完整的   也可以自定义

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：创建中间比较尖锐，周围比较模糊的效果。

 

4 在添加自定义shader之后，还要将第二步renderPass生成的场景输出的屏幕上，第二步的内容只是生成了，并未渲染到屏幕上

 var effectCopy = new THREE.ShaderPass(THREE.CopyShader);//CopyShader是为了能将结果输出，普通的通道一般都是不能输出的，要靠CopyShader进行输出
        effectCopy.renderToScreen = true;//设置这个参数的目的是马上将当前的内容输出

5将2,3，4的结果依次加入到EffectComposer 中

 

完整顺序

    var renderPass = new THREE.RenderPass(scene, camera);
    var customGrayScale = new THREE.ShaderPass(SweepingLightShader);
    customGrayScale.needsUpdate=true
    var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
    effectCopy.renderToScreen = true;


    var composer = new THREE.EffectComposer(renderer);
    composer.addPass(renderPass);
    composer.addPass(customGrayScale);

    composer.addPass(effectCopy);
    composer.render()