如何使 FragColor 与 alpha 一起使用？

如何解决如何使 FragColor 与 alpha 一起使用？

我对 OGL 很陌生。 我试图让片段着色器显示一个透明的 png 图像。 到目前为止，我已经设法将图像中的透明背景变成黑色，然后 alpha 通道以黑色显示，但是如何使 alpha 通道真正透明？

我已经尽力自己解决了，但没有成功。 请帮忙？

这是我的代码：

      const fragment = `
                    precision highp float;
                    precision highp int;
                    uniform sampler2D tWater;
                    uniform sampler2D tFlow;
                    uniform float uTime;
                    varying vec2 vUv;
                    uniform vec4 res;

                    void main() {

                            vec3 flow = texture2D(tFlow,vUv).rgb;

                            vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
                            vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
                            myUV -= flow.xy * (0.15 * 0.7);

                            vec3 tex = texture2D(tWater,myUV).rgb;

              gl_FragColor = vec4(tex.r,tex.g,tex.b,1.0);
                    }
            `;
    {

解决方法

您当前在着色器中将 alpha 定义为 1.0，使输出颜色不透明。如此变化

vec3 tex = texture2D(tWater,myUV).rgb;
gl_FragColor = vec4(tex.r,tex.g,tex.b,1.0);

到

vec4 tex = texture2D(tWater,myUV).rgba;
gl_FragColor = vec4(tex.r,tex.a);

还将设置 alpha 值以匹配您的纹理。

既然您正在输出 alpha 值，您还需要确保已告诉 WebGL 使用混合：

const program = new Program(gl,{
    vertex,fragment,transparent: true,// this property does that
    ...
};

而且，如果您还希望 WebGL 画布对其后面的 HTML 页面的其余部分透明，则需要通知上下文它应该处理 alpha：

const renderer = new Renderer({alpha: true});

最后，为了使您的 clearColor（即 renderer 每次渲染时重置的颜色）不会使画布不透明，请确保它的 alpha 值为 {{ 1}}：

0

另请参阅 this similar question 以获取另一个示例。