Search code examples
webglalphablendingblending

Webgl Blending is blending to white

I have written a library for webgl, it has many tests and runs those tests perfectly fine including the one I have for blending.

I've set the test to do a standard blending of Src_Alpha, One_minus_Src_Alpha and the test properly renders the result:

enter image description here

This image is produced by intersecting 1000 lines all with an alpha value of 0.2. Notice how the image does not produce washed out white colors at any given point.

This is also the current blend state as produced by using the webgl Spector plugin for chrome:

Blend State
BLEND: true
BLEND_COLOR: 0, 0, 0, 0
BLEND_DST_ALPHA: ONE_MINUS_SRC_ALPHA
BLEND_DST_RGB: ONE_MINUS_SRC_ALPHA
BLEND_EQUATION_ALPHA: FUNC_ADD
BLEND_EQUATION_RGB: FUNC_ADD
BLEND_SRC_ALPHA: SRC_ALPHA
BLEND_SRC_RGB: SRC_ALPHA

Now I use this same library and render the same edges in a layout and they render like so:

enter image description here

These edges have an opacity of 0.2. And this is the Spector blend mode:

Blend State
BLEND: true
BLEND_COLOR: 0, 0, 0, 0
BLEND_DST_ALPHA: ONE_MINUS_SRC_ALPHA
BLEND_DST_RGB: ONE_MINUS_SRC_ALPHA
BLEND_EQUATION_ALPHA: FUNC_ADD
BLEND_EQUATION_RGB: FUNC_ADD
BLEND_SRC_ALPHA: SRC_ALPHA
BLEND_SRC_RGB: SRC_ALPHA

I am beating my head on a table trying to figure out what the difference between the two scenarios could be.

The shader logic simply hands a color on the vertex to the fragment shader, so there are no premultiplied alphas.

I just need any thoughts of what else can be affecting the blending in such murderous fashion. I can post any extra information needed.

EDIT: To show same exact test in this environment, here is the wheel rendering and adding to white washout somehow:

enter image description here

Solution

  • It seems there was potentially some bad undefined behavior in my library:

    I was grabbing the gl context twice: canvas.getContext(...) and each one had the potential to have different properties for things like premultiplied alpha and alpha setting attributes for the context.

    When I fixed that issue this bizarre blending error went away. So I will assume the premultiply alpha property between the two context grabs was somehow inconsistent.