Question

I have a strange problem that I can’t figure out when trying to do blending in WebGL. Black is rendered fully transparent , and everything with shades of grey in it is rendered also semi transparent. I have set it to use the alpha channel as the source for transparency, and in some respect it works, every thing that isn’t black/grey is rendered differently when changing the alpha value. but even when I set the alpha to 1, black is still displayed transparent.

This is how I enable transparency:

this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
this.gl.enable(this.gl.BLEND);
this.gl.disable(this.gl.DEPTH_TEST);

And the part of the shader that does transparency:

   gl_FragColor = vec4(texColor.rgb * vLightWeight, texColor.a * uAlpha);

where texColor is the texture color that is being sampled, vLightWeight is the shadowing that is being calculated in the vertex shader, and uAlpha the uniform which I use for transparency.

Answer 1

I think you should have gl.ONE_MINUS_SRC_ALPHA where you currently have gl.ONE.

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