graphics - 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 页面的主体为白色时，效果就会出现。不过，我没有解释。

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

1

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

于 2011-12-23T17:35:33.743 回答

4 回答 4