Three.js着色器 - 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)——但是当我尝试这样做时，会出现错误。为了做到这一点，我在我的主要js文件（而不是着色器）中执行了renderer.context.blendFuncSeparate(GL_SRC_ALPHA)。我应该把它放在别的地方才能让它正常工作吗？

非常感谢您的帮助！为了参考，我正在使用标准的effectsComposer、shaderPass等来应用我的着色器——这是大多数threejs着色器示例所使用的。

- Robbie

Answer 1

仅凭部分信息和代码片段很难帮助您，所以我只能做出合理的猜测。

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

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

three.js r.56

- WestLangley

---

WestLangley - 不好意思没有提供完整的代码 - 在这里 (http://108.171.176.74/~rtilton1/stackOverflow/)。感谢您澄清EffectComposer默认使用RGB格式而不是RGBA。我想我还没有理解在哪里访问具有效果的合成器材料，因为我无法执行“composer.transparent = true;”。 - Robbie

在您的情况下，应该是 window.effect.material.transparent = true;。 - WestLangley

Answer 2

我曾遇到过这个问题，对我来说，原因是材质没有启用透明度。

let myMaterial = new THREE.ShaderMaterial({
  uniforms: myUniforms,
  fragmentShader: myFragmentShader(),
  vertexShader: myVertexShader(),
});
myMaterial.transparent = true;

- Paul Slocum