WebGL alpha blending

Question

I'm trying to layer one texture over another, but I'm having alpha blending issues around the edges. I've tried many blending combinations with no luck. Where am I going wrong?

Current state of framebuffer (opaque):

Transparent texture rendered in off-screen framebuffer:

Result when I try to blend the two. Notice the edges on the circle:

Here's the blendFunc:

_gl.blendFuncSeparate( _gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );

Here's the shader. Just basic rendering of a texture:

uniform sampler2D texture;
varying vec2 vUv;

void main() {
    vec4 tColor = texture2D(texture, vUv);

    gl_FragColor = tColor;
}

gman gman · Accepted Answer · 2016-11-18T02:50:46

Most likely your textures are using premultiplied alpha and so your blend function should be

_gl.blendFunc(_gl.ONE, _gl.ONE_MINUS_SRC_ALPHA);

If your textures are not premultiplied you probably want to premultiply them either in your shader

gl_FragColor.rgb *= gl_FragColor.a

or when you load them (before you call gl.texImage2D) you can tell the browser to premultiply them

_gl.pixelStorei(_gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

This document probably explains the issues better

and you might find this relevant as well

WebGL: How to correctly blend alpha channel png

WebGL alpha blending

1 Answers