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

【问题标题】：webgl: white border when using transparency (alpha)webgl：使用透明度（alpha）时的白色边框
【发布时间】：2011-10-11 21:12:52
【问题描述】：

在渲染具有 alpha 通道的纹理时，不透明部分周围会出现白色边框（边框似乎是 alpha > 0 和

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

该链接后面的内容已移至eelpi.gotdns.org/blog.wiki.html，但无法通过 URL 链接到此特定的预乘 alpha 页面。每篇博客文章都被塞进一个网页，这是 Web 1.0，而不是 2.0。失宠。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：