Alpha rendering difference between OpenGL and WebGL

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

• Turn off alpha

  If you don't need alpha in your destination you can turn it off

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

  Now the alpha will effectively be 1

• Set the alpha to 1 at the end of a frame

  // clear only the alpha channel to 1
  gl.clearColor(1, 1, 1, 1);
  gl.colorMask(false, false, false, true);
  gl.clear(gl.COLOR_BUFFER_BIT);
  

  don't forget to set the color mask back to all true if you need to clear the color buffer later

• Set the canvas's background color to black

  canvas { background-color: #000; }
  

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