three.js - Threejs 着色器 - gl_FragColor 与 Alpha(不透明度不变)

Question

我正在尝试编写一个简单的着色器，其中一半的场景将被显示，一半的场景将是透明的。我似乎无法弄清楚为什么透明度不起作用:

  uniform sampler2D tDiffuse;
  varying vec2 vUv;

  void main(){
        vec2 p = vUv;
        vec4 color;      

        if(p.x < 0.5){ 
              color = (1.0, 0.0, 0.0, 0.0);
        }else{
              color = texture2D(tDiffuse, p);
        }

        gl_FragColor = color;
  }

着色器运行绝对没有错误 - 屏幕的右半部分是我的 Threejs 场景，屏幕的左半部分是红色的(当它实际上应该是透明的时)。我读过也许我需要调用 glBlendFunc(GL_SRC_ALPHA); - 但当我尝试这个时，我遇到了错误。为此，我做了 renderer.context.blendFuncSeparate(GL_SRC_ALPHA);在我的主 js 文件中(不是着色器)。我应该把它放在其他地方才能让它工作吗？

如有任何帮助，我们将不胜感激。作为引用，我将我的着色器与标准effectsComposer、shaderPass 等一起应用 - 大多数 Threejs 着色器示例都使用这些。

提前感谢您的帮助!!!

Answer 1

仅凭部分信息和代码片段很难为您提供帮助，因此我只能做出有根据的猜测。

默认情况下，EffectComposer 使用 RGB 格式的渲染目标。是否指定了RGBA？

您是否指定了material.transparent = true？

三.js r.56