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

Question

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

因此，对于这个例子中，我使用THREE.ColorifyShader，但启动时，整个现场瞬间收到预期的颜色

我怎样才能“不透明度申请/阿尔法”后处理？

代码示例：

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

我通过在colorify着色器中添加一个“不透明”制服来解决了这个问题。这允许通过增加不透明度或其他方式平滑地从正常的彩色场景混合到某种颜色。

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

}; 

Answer 2

你可以添加一个计时器，慢慢增加了RGB值。或者将它添加到渲染循环中，我将使用一个计时器，但完全相同的循环可以应用于渲染函数中。

var interval = 200; //interval for the animation in ms 
var darkness = 1; //we'll start with a fade in, so we need the darknes at its biggest value 
var fade = 'in'; 

var effectTimer = setInterval(function(){ 
    switch(fade){ 

     case 'in': 
      if(darkness > 0){ 
       darkness -= 0.1; 
      } 
      else{ 
       fade = 'off'; 
      } 
     break; 

     case 'out': 
      if(darkness < 1){ 
       darkness += 0.1; 
      } 
      else{ 
       fade = 'off'; 
      } 
     break; 
    } 
    effectColorify.uniforms['color'].value.setRGB(darkness, darkness, darkness); 
}, interval)