Fatal编程技术网
  • graphics/
  • Graphics webgl：使用透明度时的白色边框（alpha）

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

graphics opengl-es webgl

Graphics webgl：使用透明度时的白色边框（alpha）,graphics,opengl-es,webgl,blending,Graphics,Opengl Es,Webgl,Blending,渲染具有alpha通道的纹理时，不透明部分周围会出现白色边框（边框似乎是alpha>0且

渲染具有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页面主体的背景色为白色时，就会产生这种效果。不过我没有解释。

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

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

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

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

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

请参阅：

尝试使用0