0

I found strange behavior of WebGL when it is rendering with blending turned off. I reproduced it on this simplest tutorial. Just change strings:

gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); to gl_FragColor = vec4(0.0, 0.0, 0.0, 0.5);

and gl.clearColor(0.0, 0.0, 0.0, 1.0); to gl.clearColor(1.0, 1.0, 1.0, 1.0);

So, since blending is turned off, I supposed to see black shapes on white background (alpha 0.5 of the pixel shouldn't make influence). But I see gray shapes on white backgound. I believe I missed something, but I can't undertand what. Any ideas?

P.S. gl.disable(gl.BLEND) doesn't change the result.

genpfault
  • 51,148
  • 11
  • 85
  • 139
GLaz
  • 295
  • 1
  • 11
  • What might be happening is that OpenGL is rendering black shapes on a white background so the RGB is exactly what you expect, but the A channel that it renders out is 0.5 for the black shapes. The question is, how does the windowing system composite the output of the OpenGL with the browser window? If the compositing process uses the alpha channel for blending, and the background is white, then that'd explain the grey shapes you're seeing. – Columbo Feb 17 '16 at 08:22

1 Answers1

1

This is basically already answered here

Alpha rendering difference between OpenGL and WebGL

What you're seeing is that WebGL canvases are, by default, blended with the background. Either the background color of the canvas or whatever it's a child of. The default background color for HTML is white so if you draw with [0.0, 0.0, 0.0, 0.5] that's 50% alpha black blended with the white webpage.

See the link above for how to fix it.

Community
  • 1
  • 1
gman
  • 100,619
  • 31
  • 269
  • 393