Threejs Shader - 带Alpha的gl_FragColor(不透明度不透明)

Rob*_*bie 4 shader three.js

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

  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;
  }
Run Code Online (Sandbox Code Playgroud)

着色器肯定是在没有错误的情况下运行的 - 屏幕的右半部分是我的threejs场景,屏幕的左半部分是红色(当它应该是透明的时候).我读过,也许我需要调用glBlendFunc(GL_SRC_ALPHA); - 但是当我尝试这个时我遇到了错误.为此,我做了renderer.context.blendFuncSeparate(GL_SRC_ALPHA); 在我的主js文件中(不是着色器).我应该把它放在其他地方让它起作用吗?

任何帮助,将不胜感激.作为参考,我将我的着色器应用于标准的effectsComposer,shaderPass等 - 大多数三个着色器示例都使用它.

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

Wes*_*ley 5

仅使用部分信息和代码片段很难帮助您,因此我只能进行有根据的猜测.

默认情况下,EffectComposer使用具有RGB格式的渲染目标.有没有说明RGBA

你指定material.transparent = true了吗?

three.js r.56

  • 在你的情况下,它将是`window.effect.material.transparent = true;`. (2认同)