我正在将平面颜色和纹理绘制到 WebGL Canvas 中。我的颜色和纹理具有不同的 alpha 值,我希望它们能够正确混合。我想要透明背景(它们应该与 Canvas 下的 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),我可以在三角形相交的地方看到背景图案。这是正确的行为吗?
最佳答案
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)
,这会导致一些混淆。
关于html - 在 WebGL 中与 HTML 背景混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11521035/