在 WebGL 中与 HTML 背景混合

Question

我正在将平面颜色和纹理绘制到 WebGL 画布中。我的颜色和纹理具有不同的 alpha 值，我希望它们能够正确混合。我想要透明背景（它们应该与位于画布下的 HTML 内容混合）。

在 WebGL 中，我使用

gl.clearColor(0, 0, 0, 0);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);

当 HTML 背景为黑色时，它可以正常工作。但是当我将 JPG 图案设置为 的背景时，我绘制黑色三角形 (alpha=1) 和白色三角形 (alpha=0.5)，我可以在三角形相交的地方看到背景图案。这是正确的行为吗？

Answer 1

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) 表示生成的 alpha 是

A_final = A_s * A_s + (1 - A_s) * A_d

在您的示例中，在绘制黑色三角形（alpha=1）后，帧缓冲区中绘制的像素的 alpha 为

1 * 1 + (1 - 1) * 0 == 1 + 0 == 1

所以它将是完全不透明的。接下来，在绘制白色三角形（alpha=.5）之后，两个三角形相交处的一个像素的 alpha 为

.5 * .5 + (1 - .5) * 1 == .25 + .5 == .75

这意味着最终的颜色将被视为部分透明，并且当它与页面合成时，页面背景将显示出来。

这在常规 OpenGL 中是一个不太常见的问题，因为内容通常是在空白背景下合成的。但是，当您绘制到 FBO 并且必须将结果与您的上下文中的其他内容组合时，它确实会出现。有几种方法可以解决这个问题。

一种方法是让你的 alpha 与 gl.ONE、gl.ONE_MINUS_SRC_ALPHA 混合，这样你就可以得到

A_final = A_s + (1 - A_s) * A_d

这是您通常想要的 Alpha 混合。但是，您希望您的颜色仍然与gl.SRC_ALPHA、gl.ONE_MINUS_SRC_ALPHA 混合。您可以使用gl.blendFuncSeparate 而不是gl.blendFunc 分别设置颜色混合和alpha 混合功能。在这种情况下，您会调用

gl.BlendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

另一种选择是利用带有预乘 alpha 的颜色（例如，在从纹理中采样颜色时，WebGL actually already assumes you are using）。如果您绘制第二个三角形，其中 alpha 已经与颜色相乘（因此半透明的白色三角形会将 gl_FragColor 设置为 vec4(.5, .5, .5, .5)），那么您可以使用混合模式

gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)

它会在颜色和 alpha 方面随心所欲地发挥作用。

第二个选项是您通常在 WebGL 示例中看到的，因为（如前所述），WebGL 已经假定您的颜色是预乘的（所以vec4(1., 1., 1., .5) 超出了色域，渲染输出未定义，并且驱动程序/ GPU 可以输出任何它想要的疯狂颜色）。在常规 OpenGL 示例中看到gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) 更为常见，这会导致一些混乱。