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等 - 大多数三个着色器示例都使用它。

先谢谢你的帮助!!!

Answer 1

很难只用部分信息和代码片段来帮助你，所以我只能做出有根据的猜测。

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

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

three.js r.56

Answer 2

我遇到了这个问题，对我来说，是该材质没有启用透明度。

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

Threejs Shader - 带Alpha的gl_FragColor（不透明度不透明）

2 个答案: