WebGL alpha混合

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);

This document probably explains the issues better

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

WebGL: How to correctly blend alpha channel png