在WebGL中与HTML背景混合

Question

在WebGL中与HTML背景混合

5

我正在将平面颜色和纹理绘制到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的白色三角形时，我可以看到背景图案在三角形交叉处的位置。这是正确的行为吗？

- Ivan Kuckir

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brendan Kenny · Accepted Answer

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来分别设置颜色混合和alpha混合函数，而不是使用gl.blendFunc。在这种情况下，您需要调用：

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

另一种选择是利用带有预乘alpha通道的颜色（实际上WebGL默认假定您正在使用该方法，例如当从纹理中采样颜色时）。如果您在颜色中已经通过alpha通道进行了预乘（因此一个半透明白色三角形将使gl_FragColor设置为vec4(.5, .5, .5, .5)），那么您可以使用混合模式。

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

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