Compositing layers and alpha blending

I found the problem with this help of this web page: https://limnu.com/webgl-blending-youre-probably-wrong/. In a word, I was generating images from WebGL with alpha values that were incorrect for subsequent compositing.

The author says that the usual alpha blending function

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

results in an image whose transparency is wrong for subsequent compositing, exactly what’s going on when using drawImage() to transfer a WebGL result to a Picture and then layering the result. The author suggests:

gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

for generation of images intended for subsequent compositing. And in my case, it does the trick! No more artifacts, at least in Firefox.

GOJS4

I’m still slogging through the math of the GL blend equations to try to understand this in detail. In any case, though, this issue can be closed, as I don’t see any indication that it has to do with GoJS per se.

-Luddy