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=0.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 http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBlendFuncSeparate.xml代替gl.blendFunc
分别设置颜色混合和 Alpha 混合功能。在这种情况下,您可以调用
gl.BlendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
另一种选择是利用带有预乘 alpha 的颜色(WebGL 实际上已经假设您正在使用 http://www.khronos.org/registry/webgl/specs/latest/#5.2,例如,从纹理中采样颜色时)。如果你用已经乘以颜色的 alpha 绘制第二个三角形(因此半透明的白色三角形将具有gl_FragColor
set to 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 示例中,这会导致一些混乱。