在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实际上已经假定您正在使用它).如果您绘制第二个三角形,其中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可以输出任何疯狂的颜色它想要).gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)在常规OpenGL示例中看到这种情况更为常见,这会导致一些混乱.