学习Three.js——后期处理(EffectComposer)

后期处理的步骤：

1. 创建THREE.EffectComposer(效果组合器)对象
2. 配置EffectComposer对象
3. 在render循环中，使用EffectComposer来渲染场景

一般用法：

var composer = new THREE.EffectComposer(webGLRenderer)//配置composer
var renderPass = new THREE.RenderPass(scene,camera)//配置通道
composer.add(renderPass)//将通道加入composer
function render(){
    var delta = clock.getDelta();
    requestAnimationFrame(render);
    composer.render(delta);//使用组合器来渲染，而不再用webGLRenderer
}

后期处理通道

需要注意的是通道是顺序执行的，加入时要注意顺序

THREE.BloomPass

增强场景中的亮度

		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);//输出到屏幕

参数

Strength:光的强度

kernelSize:光的偏移

sigma:光的锐利程度

Resolution:光的精确度，值越低，光的方块化越严重

THREE.DotScreenPass

将原始图片输出为灰度点集

用法参考BloomPass

参数：

center:点的偏移量

angle:点的对其方式

Scale:点的大小

THREE.FilmPass

使用扫描线和失真来模拟电视屏幕效果

参数：

noiseIntensity:场景的粗糙程度

scanlinesIntensity:扫描线的显著程度

scanLinesCount:扫描线的数量

gratScale:是否使用灰度图输出

THREE.GlitchPass

随机的在屏幕上显示电脉冲

THREE.MaskPass

添加掩码，后续通道只会影响掩码区域，取消掩码需要加入THREE.ClearMaskPass通道

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

        composer.addPass(bgPass);
        composer.addPass(renderPass);
        composer.addPass(renderPass2);

        composer.addPass(marsMask);
        composer.addPass(effectColorify);
        composer.addPass(clearMask);

        composer.addPass(earthMask);
        composer.addPass(effectSepia);
        composer.addPass(clearMask);

        composer.addPass(effectCopy);

需要注意的是需要将使用掩码前，要将composer.renderTarget.stencilBuffer设置为true,用于限制渲染区域。

另外，使用完掩码后，需要使用ClearMaskPass()去掉掩码区域

THREE.RenderPass

根据scene和camera渲染出一个场景，和普通的webGLRenderer一样

THREE.TexturePass

保存当前通道的输出，作为后续使用

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

THREE.ShaderPass

自定义的通道，一般在构造函数中指定相关的参数即可，new ShaderPass(xxx)

参数：

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