c++openglwebglemscripten

Alpha rendering difference between OpenGL and WebGL


I'm rendering the same scene using the same exact C++ code, once to native OpenGL on windows and once using Emscripten to WebGL. Everything in the scene looks exactly the same, except when I'm rendering something with alpha != 1.0. The difference looks like this: enter image description here

The blue cube color is (0.0, 0.0, 1.0, 0.5)
The shader used for rendering the cube does nothing except draw the color.
On the right is how it looks with OpenGL and is the expected result, just blue with half transparency. On the left is how it looks with Emscripten+WebGL. It looks like the color which is rendered is actually (0.5, 0.5, 1.0, 0.5)

The blend function I use is the standard:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

Is there some kind of difference with alpha in WebGL? What can possibly cause this to happen?


Solution

  • Did you set the canvas to be non-premultilied?

    gl = someCanvas.getContext("webgl", { premultipliedAlpha: false });
    

    The default for WebGL is true. The default for most OpenGL apps is false

    On top of that WebGL is composited with the rest of the page. At a minimum that's the background color of the canvas or whatever it's inside (the body of your document).

    To see if this is the problem try setting your canvas's background color to purple or something that will stick out

    <canvas ... style="background-color: #F0F;"></canvas>
    

    or in css

    canvas { background-color: #F0F; }
    

    OpenGL apps are rarely composited over anything where as WebGL apps effectively are ALWAYS composited.

    Some solutions

    If possible I'd pick turning off alpha. The reason if is alpha is set to off it's possible the browser can turn off blending when drawing the canvas into the browser. That could be a 10-20% or more increase in speed depending on the GPU. There's no guarantee that any browser makes that optimization, only that it's possible to does whereas with the other 2 solutions it's not possible or at least far less likely