webgl:使用透明度(alpha)时的白色边框

Question

渲染具有Alpha通道的纹理时,非透明部分周围会出现白色边框(边框似乎是alpha> 0且<1的像素):

原始纹理在Illustrator中创建并导出为png.这里是:

(好吧,似乎stackoverflow改变了图像,调整了不完全不透明/透明的像素,所以这里是一个链接)

它可能是混合,虽然我不知道设置有什么问题:

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

你的抽奖顺序是什么？对我来说，这看起来像是深度缓冲问题 \xe2\x80\x94 你从白色背景开始，绘制带有边框的东西，以便它合成在白色上，然后绘制带有边框的东西后面的东西。边框与原始白色背景混合的那些区域将在深度缓冲区中存储一个等于其平面深度的值，因此当随后绘制后面的对象时，该区域中的其像素将被丢弃。

\n\n

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

\n