How can I make the FragColor work with alpha?

Question

I'm very new to OGL. I'm trying to get the fragment shader to show a png-image with transparency in it. So far I've managed to turn the transparent background in the image to black, the alpha channel then views in black, but how to I make the alpha channel transparent for real?

I've tried my best to figure it out on my own but it hasn't worked out. Please help?

Here's my code:

      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);
                    }
            `;
    {

score 2 · Answer 1 · answered Feb 13 '21 at 14:00

You are currently defining the alpha as 1.0 in your shader, making the output colour opaque. So changing

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

to

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

will also set the alpha value to match your texture.

Now that you are outputting the alpha value, you also need to make sure you have told WebGL to use blending:

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

and, if you also wish the WebGL canvas to be transparent to the rest of the HTML page behind it, you need to inform the context that it should handle alpha:

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

and finally, so that your clearColor (ie the colour that the renderer resets to every time it renders) doesn't make the canvas opaque, make sure it has an alpha value of 0:

gl.clearColor(0, 0, 0, 0); // the fourth 0 is alpha

Please also see this similar question for another example.

How can I make the FragColor work with alpha?

1 Answers1