OpenGL 和 WebGL 的 Alpha 渲染差异

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:

蓝色立方体的颜色是(0.0, 0.0, 1.0, 0.5)
用于渲染立方体的着色器除了绘制颜色之外什么也不做。
右边是 OpenGL 的样子，也是预期的结果，只是蓝色，半透明。左边是 Emscripten+WebGL 的样子。看起来渲染的颜色实际上是(0.5, 0.5, 1.0, 0.5)

我使用的混合函数是标准的：

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

WebGL 中的 alpha 有什么区别吗？什么可能导致这种情况发生？

您是否将画布设置为非预乘？

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

WebGL 的默认值是 true。大多数 OpenGL 应用程序的默认值是 false

除此之外，WebGL 与页面的其余部分合成。至少是画布或其内部的任何内容（文档正文）的背景颜色。

要查看这是否是问题所在，请尝试将画布的背景颜色设置为紫色或会突出的颜色

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

或者在CSS中

canvas { background-color: #F0F; }

OpenGL 应用程序很少在任何东西上进行合成，而 WebGL 应用程序总是有效地进行合成。

一些解决方案

• 关闭阿尔法

  如果您的目的地不需要 alpha，您可以将其关闭

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

  现在 alpha 将有效为 1

• 在帧结束时将 alpha 设置为 1

  // 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);
  

  如果需要，请不要忘记将颜色遮罩设置回全部 true 稍后清除颜色缓冲区

• 将画布的背景颜色设置为黑色

  canvas { background-color: #000; }
  

如果可能的话我会选择关闭阿尔法。如果将 alpha 设置为关闭，则浏览器可能会在将画布绘制到浏览器中时关闭混合。根据 GPU 的不同，速度可能会提高 10-20% 或更多。不能保证任何浏览器都会进行这种优化，只是可以做到这一点，而使用其他两种解决方案则不可能或至少不太可能