Alpha rendering difference between OpenGL and WebGL

by

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

More Related Contents:

  1. OpenGL – vertex normals in OBJ
  2. Reflection and refraction impossible without recursive ray tracing?
  3. Transform the modelMatrix
  4. Creating a 3D sphere in Opengl using Visual C++
  5. How to compile for Windows on Linux with gcc/g++?
  6. How to properly link libraries with cmake?
  7. OpenGL Line Width
  8. OpenGL – mask with multiple textures
  9. OpenGL define vertex position in pixels
  10. OpenGL – Mouse coordinates to Space coordinates
  11. How to get the GL library/headers?
  12. Using Quaternions for OpenGL Rotations [duplicate]
  13. Converting data from glReadPixels() to OpenCV::Mat
  14. Segmentation fault at glGenVertexArrays( 1, &vao );
  15. Rotate and translate object in local and global orientation using glm
  16. How do I draw text with GLUT / OpenGL in C++?
  17. Image scaling (KeepAspectRatioByExpanding) through OpenGL
  18. Qt3d. Draw transparent QSphereMesh over triangles
  19. object loader in opengl
  20. Confusion between C++ and OpenGL matrix order (row-major vs column-major)
  21. GCC, stringification, and inline GLSL?
  22. How to load a bmp on GLUT to use it as a texture?
  23. SDL2: Fast Pixel Manipulation
  24. Glut deprecation in Mac OSX 10.9, IDE: QT Creator
  25. C++ – std::thread crashes upon execution
  26. Understanding glm::lookAt()
  27. Cmake link library target link error
  28. Where can I get windows.h for Mac?
  29. Concave GL_POLYGON doesn’t color in?
  30. true isometric projection with opengl

Leave a Comment