Webgl Colors And Alpha

I have a problem with colors and alpha in webgl. A part of my JavaScript-Program: gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); And my f

Solution 1:

The result you get is because the browser blends in the background color behind the canvas. Try setting the background-color, and you get something like this:

The blending equation by default is:

blendedColor = sourceColor + destinationColor * (1 - sourceAlpha)

So with a white background, sourceColor = c = 0.5, sourceAlpha = a = 0.7, destinationColor = white = 1.0, so blendedColor = 0.8

In this context dividing by alpha doesn't make much sense. To match the middle region, you could replicate the blending process above:

else gl_FragColor = vec4(vec3(c) + vec3(1.0) * (1.0 - a), 1.0); // middle color