PDA

View Full Version : Texturing a png so alpha channel part is transparent?



xman84
12-04-2010, 10:21 AM
Hello I have a PNG with an alpha channel I would like it so the transparent parts of the image
are transparent when I texture to a quad. Right now they just show up as white. Considering the results I'm getting I'm guessing its not as easy as giving the WebGL API a png with an alpha channel. If anyone knows how to do this I would love to hear how you did it.

SteveBaker
12-04-2010, 12:30 PM
Did you remember to enable blending?

gl.enable ( gl.BLEND ) ;

Does your shader copy the alpha channel of the texture into the alpha channel of the output?

xman84
12-05-2010, 06:49 PM
Thanks for the reply. I do not have blend enabled. I will do that.

My shader looks like this:

#ifdef GL_ES
precision highp float;
#endif
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void)
{
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}

Is what I'm doing here copying the alpha channel to the output?

xman84
12-05-2010, 07:20 PM
Using the above shader and adding these two lines of code got parts of my sprite to be transparent exactly as I wanted.

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);

:D That was suprisingly easy!