Question

我试图将一个纹理叠加到另一个纹理上，但我在边缘处有alpha混合问题。我尝试了许多混合组合而没有运气。我哪里错了？

帧缓冲的当前状态（不透明）：

在屏幕外帧缓冲区中呈现的透明纹理：

当我尝试混合两者时的结果。注意圆圈上的边缘：

这里是blendFunc：

_gl.blendFuncSeparate( _gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );

这是着色器。只是纹理的基本渲染：

uniform sampler2D texture;
varying vec2 vUv;

void main() {
    vec4 tColor = texture2D(texture, vUv);

    gl_FragColor = tColor;
}

Answer 1

您的纹理很可能使用预乘alpha，因此您的混合函数应为

_gl.blendFunc(_gl.ONE, _gl.ONE_MINUS_SRC_ALPHA);

如果您的纹理不是预乘的，您可能希望在着色器中预乘它们

gl_FragColor.rgb *= gl_FragColor.a

或加载它们时（在致电gl.texImage2D之前），您可以告诉浏览器预先加倍它们

_gl.pixelStorei(_gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

你可能会发现这也是相关的