WebGL: How to correctly blend alpha channel png

Question

I\'m pretty new to OpenGL and even newer to WebGL. I\'m trying to draw a textured quad with an alpha channel. However I just can\'t get the blending right.

This is t

Answer 1

The basic problem is that OpenGL blends channels using post-multiplied alpha, which can result in all sorts of interesting artifacts.

You need to either:

• modify your textures so you don't have white contents in your fade out region (typically by extending the opaque color pixel outwards into the transparent region - various texturing tools will do this for you)
• or, switch to using pre-multipled alpha blending, adjusting the texture accordingly, (which can introduce quantization artefacts, as a warning)

Most off-line tools, such as photoshop, GIMP, etc, use pre-multipled alpha by default, so this is a pretty common "surprise" for real-time rendering if you mock up your scenes in photo-editing suites.

Good blog on it here:

https://developer.nvidia.com/content/alpha-blending-pre-or-not-pre