graphics - webgl:使用透明度(alpha)时为白色边框

Question

渲染具有Alpha channel 的纹理时，非透明部分周围会出现白色边框(该边框似乎是Alpha> 0和<1的像素):

原始纹理在illustrator中创建，并导出为png。这里是:

(好吧，似乎stackoverflow改变了图像，调整了不完全不透明/透明的像素，所以这是link)

这可能是混合，尽管我不知道安装程序出了什么问题:

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

[更新]

这是一个渲染的版本，其中我在纹理的左侧部分添加了Alpha渐变(因此它从0的不透明度变为1直到一半)

此纹理是在此位置渲染的 唯一纹理。它似乎在a = 0.5左右是最白的。真的很奇怪。背景只是一种清除的颜色:

gl.clearColor(0.603, 0.76, 0.804, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// render objects here

深度函数如下所示:

gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);

有任何想法吗？多谢。

[更新2]

回答我自己的问题:当 Canvas 的背景颜色或html页面的正文为白色时，就会发生这种效果。不过，我没有任何解释。

Answer 1

使用预乘alpha，此问题将消失。

另请:http://home.comcast.net/~tom_forsyth/blog.wiki.html#%5B%5BPremultiplied%20alpha%5D%5D