Bug 33386 – WebGL does not blend correctly with other web content

• Status: RESOLVED
• Resolution: FIXED
• Component: WebGL

[Simon Fraser (smfr)]

Created attachment 46137 [details]
Testcase

WebGL does not blend as expected with the rest of the web content, and Firefox and WebKit show different behavior. See attached testcase.

[Chris Marrin]

I believe WebKit is doing the right thing here. When WebGL composites with the page, the compositor assumes that the pixels in the color buffer are premultiplied. This essentially means that any color value that is greater than the alpha value at that pixel is invalid, or oversaturated. So using a clear color of (1,0,0,0.5) as in the example results in oversaturated red pixels. And this is the result you see. If you use a value of (0.5,0,0,0.5) where you have premultiplied the red value by the alpha value, you get the expected results.

If you use this clear value, both WebKit and Firefox have compatible results. When using (1,0,0,0.5) WebKit clamps oversaturated colors to 1, which I believe is the correct behavior. But Firefox seems to replace oversaturated colors with black, which I think is wrong.

In OpenGL you setup a blendFunc so you can tell the renderer how to combine a source pixel with the destination. For instance, blendFunc(ALPHA, ONE_MINUS_ALPHA) says that source pixels are multiplied by alpha, then the destination is multiplied by 1-alpha and then the colors are added. In this case the source color is not premultiplied. You can also use blendFunc(ONE, ONE_MINUS_ALPHA), which means the source color is multiplied by 1 (unchanged), then the destination is multiplied by 1-alpha and then the colors are added. So here the source colors are assumed to be premultiplied.

The problem is that the clearColor in OpenGL is not subjected to the blendFunc. So the user has to know what the desired result is and choose a clear color accordingly.

Incidentally, WebGL has the option of assuming the color buffer DOES NOT have premultiplied alpha when being composited. This is not implemented in WebGL, but when it is, we may well have to do a separate premultiply step before compositing.

[Radar WebKit Bug Importer]

<rdar://problem/16945697>

[Jon Lee]

I see Firefox and us agree. Chrome still renders the left square differently.

[Kenneth Russell]

Apologies for the longstanding problem and lack of consistency between browsers. Filed http://crbug.com/599285 to investigate this in Chromium.

The WebGL conformance suite needs reftests that run on all browsers to enforce consistent behavior in areas like this where the results can not be tested in a pure browser environment.

[Simon Fraser (smfr)]

One question here is whether the blending of WebGL with other page content is specified by CSS or by WebGL. I would suggest the former.

Relevant:
http://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html