HTML5 GLES20 blending bug - solved

Monkey Targets Forums/HTML5/HTML5 GLES20 blending bug - solved

nullterm

(Posted 2015) [#1]

Having a blending issue. Everything looks good on desktop GLES20 (left) but on HTML5 (right) the WebGL version's blending looks completely different.

And then (just now) the weirdest thing happened. I dragged the HTML5 test page down and it switched to fullscreen, at which point the blending works! Only leaving me more confused.

This is used for the light rings, which uses a texture and additive blending for illumination. But the HTML5 version has the edges darkening what ever is behind the edges.

glEnable GL_BLEND
glBlendFunc GL_SRC_ALPHA, GL_ONE
glBlendEquation(GL_FUNC_ADD);

This is used for the board (no texture, straight vertices), which should be way darker. For some reason

glEnable GL_BLEND
glBlendFunc GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA
glBlendEquation GL_FUNC_ADD

I'm not using any depth test.

Solution
In the process of writing this post, I sorted it out. They alpha channel when WebGL was drawing the buffer to the page wasn't entirely 1.0. So I changed the glBlendFunc to glBlendFuncSeparate and everything blends correctly.

' normal alpha blending
glBlendFuncSeparate GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE

' additive alpha blending
glBlendFuncSeparate GL_SRC_ALPHA, GL_ONE, GL_ONE, GL_ONE

So the alpha channel in the framebuffer was being modified to <1.0 based on the blend equations. For desktop and fullscreen, the alpha is ignored. But windowed HTML5 needed to have 1.0 for what I'm after.