gl.BLEND

1. Texturing a png so alpha channel part is transparent?

   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.
2. 12-04-2010, 12:30 PM#2
   SteveBaker 

   

   Senior Member

   Join Date

   May 2010

   Posts

   208

   Re: Texturing a png so alpha channel part is transparent?

   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?
3. 12-05-2010, 06:49 PM#3
   xman84 

   

   Junior Member

   Join Date

   Sep 2010

   Posts

   15

   Re: Texturing a png so alpha channel part is transparent?

   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?
4. 12-05-2010, 07:20 PM#4
   xman84 

   

   Junior Member

   Join Date

   Sep 2010

   Posts

   15

   Re: Texturing a png so alpha channel part is transparent?

   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);
   
    That was suprisingly easy!