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

在WebGL中，我使用

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

我先前的回答实际上是错误的。这就是您所描述的预期结果。

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)表示所得的alpha为

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

因此它将是完全不透明的。接下来，在绘制了白色三角形(alpha = .5)之后，两个三角形相交处的像素将具有

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

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

一种方法是将您的Alpha与gl.ONE，gl.ONE_MINUS_SRC_ALPHA混合在一起

这就是您通常需要的Alpha混合功能。但是，您希望颜色仍与gl.SRC_ALPHA，gl.ONE_MINUS_SRC_ALPHA融合。您可以使用gl.blendFuncSeparate代替gl.blendFunc分别设置颜色混合和alpha混合功能。在这种情况下，您会致电

另一种选择是利用带预乘Alpha的颜色(例如，WebGL实际上已经假设您正在使用的是从纹理中采样颜色时使用的颜色)。如果您绘制的第二个三角形的alpha值已经乘以颜色(因此半透明的白色三角形会将gl_FragColor设置为vec4(.5, .5, .5, .5))，则可以使用混合模式

并且它会根据您的需要同时使用颜色和Alpha。

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