WebGL transparent black

shader, transparency, webgl

Solution

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  );

Problem

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.

Original source