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)更为常见，这会导致一些混淆。

在WebGL中混合使用HTML背景

1 个答案: