Issue

This Content is from Stack Overflow. Question asked by Latawiec

I’m trying to fade out an object of the scene, but I noticed it fades first gaining value nearly to white, before disappearing due to alpha channel being 0.

For a test, I set a square that’s entirely black (0, 0, 0) and then linearly interpolate alpha channel from 1 to 0.

This is the rectangle.

Same rectangle but when alpha value is 0.1 that is vec4(0, 0, 0, 0.1). It’s brighter than the background itself.

Blending mode used:
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)

As far as I understand this mode should just lerp between the background pixel and the newly created source pixel. I just don’t see any angle where the output pixel becomes brighter, when mixing anything with (0,0,0).

Solution

Issue is very well described here:
https://stackoverflow.com/a/35459524/9956631

My color was blended with Canvas background. As I understand, it overwrites alpha, so you leave a seethrough part of canvas where your mesh is. So why my blendFuncSeparate() fixed the issue is because I was leaving DST alpha intact.

To turn it off, you can disable alpha when fetching the glContext. To get OpenGL-like rendering you should also disable premultipliedAlpha:

canvas.getContext('webgl', 
{
    premultipliedAlpha: false,
    alpha: false
})!;

Edit:
To make sure my assumption is right, I set a test.
behind the canvas I’ve placed a label. Then, on top of that I draw my canvas, with my (0, 0, 0, 0.5) color square on top. Just like this:

<label style="
    position: absolute;
    width: 400px;
    height: 400px;
    top:445px;
    left:500px;
    z-index: -1; // Behind...
    font-size: 80px;">LMAO</label>
<canvas id="glCanvas" style="z-index: 2;" width="1200" height="1200"></canvas>

As you can see, label is visible where the square is rendered. So this means, it is being blended with what’s behind the canvas instead of current contents of the canvas (as one might assume).

This Question was asked in StackOverflow by Latawiec and Answered by Latawiec It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.