ThreeJS 后处理

blog.csdn.net/A873054267/…

后处理顺序

• THREE.EffectComposer(renderer) 初始化后处理的入口，后处理的基础包，使用它来渲染场景、应用通道和输出结果。
• THREE.RenderPass(scene, camera) 该通道会在当前场景和摄像机的基础上渲染出一个新场景，可以理解为保存当前的场景
• THREE.ShaderPass(THREE.CopyShader) 该通道接受自定义的着色器作为参数，以生成一个高级、自定义的后期处理通道, 产生各种模糊效果和高级滤镜。FXAAShader，LuminosityShader都是在此基础上的封装

    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()

Three自带后处理

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