4

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

  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 着色器示例都使用这些着色器。

在此先感谢您的帮助！！！

4

2 回答 2

5

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

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

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

三.js r.56

于 2013-03-08T05:22:49.953 回答
0

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

let myMaterial = new THREE.ShaderMaterial({
  uniforms: myUniforms,
  fragmentShader: myFragmentShader(),
  vertexShader: myVertexShader(),
});
myMaterial.transparent = true;
于 2020-04-18T18:54:30.167 回答