[SOLVED] Alpha blending of black visibly goes through white color


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.

[1]: https://i.stack.imgur.com/fujcZ.png

This is the rectangle.

enter image description here

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).


Issue is very well described here:

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:

    premultipliedAlpha: false,
    alpha: false

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;
    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).
enter image description here

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.

people found this article helpful. What about you?