How can I set webgl opacity without losing png transparency? - webgl

Question

I use webgl to draw 2d pictures, with two triangles, faster than with canvas 2d context. I keep things very simple, because I only use it to draw pictures, no 3d.
Now I am trying to add opacity to my fragment shader, because webgl context don't have .globalalpha property.
Here is my code :
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
uniform float alpha;
void main()
{
gl_FragColor = vec4(texture2D(u_image, vec2(v_texCoord.s, v_texCoord.t)).rgb, alpha);
}
</script>
...
webglalpha = gl.getUniformLocation(gl.program, "alpha");
...
gl.uniform1f(webglalpha, d_opacity);
d_opacity is the opacity value my drawing function gets as an argument.
The opacity changes, but now my transparent pngs get a black background, though the png transparency used to work before, when I was still using
gl_FragColor = texture2D(u_image, vec2(v_texCoord.s, v_texCoord.t));
How can I set opacity without losing the pngs transparency ?

Answer 1

You need to multiply the overriding alpha by the original alpha in the texture:
void main()
{
vec4 color = texture2D(u_image, vec2(v_texCoord.s, v_texCoord.t));
gl_FragColor = vec4(color.rgb, alpha * color.a);
}
For example, when texel A has a PNG opacity of 0.5 and texel B a PNG opacity of 0.3, you want these to become 0.25 and 0.15 respectively when you set your global alpha to 0.5 and not both 0.5.