三.js 淡入/淡出后处理着色器

Question

我想将场景淡入灰度，但这也适用于我想淡入或淡出的其他后期处理效果。

所以在这个例子中，我使用了 THREE.ColorifyShader，但是当激活它时，整个场景会立即收到预期的颜色

如何在后期处理中“应用不透明度/alpha”？

代码示例:

var effectColorify,
    copyPass;

    effectColorify = new THREE.ShaderPass(THREE.ColorifyShader);
    effectColorify.uniforms['color'].value.setRGB(0.8, 0.8, 0.8); // Grayscale

    copyPass = new THREE.ShaderPass(THREE.CopyShader);
    copyPass.renderToScreen = true;

    this.composerGrayscale = new THREE.EffectComposer(this.engine.renderer);
    this.composerGrayscale.addPass(this.renderPass);
    this.composerGrayscale.addPass(effectColorify);
    this.composerGrayscale.addPass(copyPass);

Answer 1

我通过向着色着色器添加“不透明度”统一解决了这个问题。这允许通过增加不透明度或相反的方式从正常的彩色场景平滑地混合到某种颜色。

effectColorify.uniforms['opacity'].value = 0.5; // 50% scene-color, 50% shader-color.

这是您可以复制到 ColorifyShader.js 中的调整后的着色器代码，它向后兼容以前的版本，因为默认不透明度为 1.0:

THREE.ColorifyShader = {

    uniforms: {

        "tDiffuse": { type: "t", value: null },
        "color":    { type: "c", value: new THREE.Color( 0xffffff ) },
        "opacity":  { type: "f", value: 1.0 }

    },

    vertexShader: [

        "varying vec2 vUv;",

        "void main() {",

            "vUv = uv;",
            "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

        "}"

    ].join("\n"),

    fragmentShader: [

        "uniform float opacity;",
        "uniform vec3 color;",
        "uniform sampler2D tDiffuse;",

        "varying vec2 vUv;",

        "void main() {",

            "vec4 texel = texture2D( tDiffuse, vUv );",

            "vec3 luma = vec3( 0.299, 0.587, 0.114 );",
            "float v = dot( texel.xyz, luma );",

            "vec3 finalColor = vec3(",
                "(opacity * v * color.x) + ((1.0 - opacity) * texel.x),",
                "(opacity * v * color.y) + ((1.0 - opacity) * texel.y),",
                "(opacity * v * color.z) + ((1.0 - opacity) * texel.z)",
            ");",

            "gl_FragColor = vec4( finalColor, texel.w );",

        "}"

    ].join("\n")

};