Webgl精灵渲染，α混合白色边缘

Question

我有一个带有alpha通道的精灵(第一个图像，它有纹理填充，以防止纹理出血，这就是为什么它“更厚”)。第二张图片是我渲染精灵时所看到的。奇怪的是α混合工作，因为圆圈内的浅蓝色是α蓝色，我看到它在工作。而橙色部分的边缘也有阿尔法颜色(因为抗混叠)。

但是蓝色圆圈周围的白色边缘怎么可能呢？蓝色圆圈有阿尔法，我看到它起作用了。我无法理解阿尔法混合是否有效(对于阿尔法蓝色像素)，蓝色圆圈周围的白色边缘是怎么可能的(那是阿尔法橙色像素)？

我怎样才能避免在雪碧的蓝色圆圈周围呈现白色的边缘呢？

gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

如果我把雪碧呈现给HTML画布，就像预期的那样，有alpha混合，圆圈周围没有白色的边缘。

附加的图像没有alpha通道，但它在我的应用程序中。

​

​

Answer 1

我找到了解决办法..。如果我没有在getContext关掉alpha，alpha就不能正常工作。

    const gl = canvas.getContext("webgl2", {
        alpha: false,
    });

然后，我意识到这种方法只适用于最近的纹理滤波，也适用于线性滤波和MIPMAP，您也需要：

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);