WebGL semi-transparent appears white

0
votes

I am having a problem with WebGL. Semi-transparent textures appear semi-transparent, but they're also getting white, color from the texture isn't considered while rendering...

That's what I've set:

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

What are the possible solutions?

1
opengl-eswebglalphaalphablending
Is using multitexturing the only solution? How could it be done using fragment shader? – esz
This is way too vague. Please post a complete code sample, preferable with image of the problem so we can see what you're talking about. – Tim

1 Answers

0
votes

Typically if white appears unexpectedly in a WebGL scene, it's blending in from the CSS background of the web page itself (which defaults to white unless you change it).

In other words, with the default WebGL settings, any shader that writes alpha values less than 1.0 to the color buffer will make the <canvas> itself become translucent and show the web page's background. I believe you can change the WebGLContextAttributes settings to disable this behavior, or just make sure your shaders always output alpha values of 1.0.