webgl：使用透明度（alpha）时的白色边框

Question

渲染具有alpha通道的纹理时，非透明部分周围会出现白色边框（边框似乎是alpha> 0且＆lt; 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]

回答我自己的问题：当画布的背景颜色或html页面的主体为白色时，会产生效果。但是，我没有解释。

Answer 1

使用预乘alpha，这个问题就会消失。

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

Answer 2

你的订单是什么？这对我来说看起来像一个深度缓冲问题 - 你从白色背景开始，用边框绘制东西，使它在白色上合成，然后用边框绘制物体后面的东西。边框与原始白色背景混合的那些区域将在深度缓冲区中存储一个等于其平面深度的值，因此当随后绘制后面的对象时，其像素将在该区域中被丢弃。

一般规则是在不透明对象之后绘制透明对象，通常是从后向前。如果你正在使用加性混合，那么在不透明绘制之后禁用深度缓冲区并以任何顺序绘制它们通常都足够了。

Answer 3

这是与纹理线性插值有关的问题。在边界上，一些内插像素将采用半白半绿和0.5 alpha。您应该修改纹理以使用一个绿色像素扩展边框，即使它是完全透明的。

Answer 4

在着色器中设置FragColor时，请尝试将图像RGB与图像alpha相乘。

Answer 5

回答我自己的问题：当画布的背景颜色或html页面的主体为白色时，会产生效果。但是，我没有解释。

（从我原帖的更新2中添加，只是为了让答案更容易找到）