首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >webgl:使用透明时的白色边框(alpha)

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

Stack Overflow用户
提问于 2011-10-11 21:12:52
回答 4查看 3.9K关注 0票数 10

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

原始纹理在插画中创建并作为png导出。下面是:

(看起来堆叠溢出改变了图像,调整了不完全不透明/透明的像素,所以这里是一个链接)

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

代码语言:javascript
运行
复制
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

更新

这是一个呈现的版本,我在纹理的左边添加了一个α梯度(所以它从0到1一直到一半)。

此纹理是在此位置呈现的唯一的纹理。在a=0.5周围,它似乎是最白的。真的很奇怪。背景只是一个清晰的颜色:

代码语言:javascript
运行
复制
gl.clearColor(0.603, 0.76, 0.804, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// render objects here

深度函数如下所示:

代码语言:javascript
运行
复制
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);

有什么想法吗?非常感谢。

更新2

回答我自己的问题:当画布的背景色或html页面的主体是白色时,效果就会发生。不过,我没有什么解释。

EN

Stack Overflow用户

发布于 2011-10-12 11:45:21

你的抽签顺序是什么?在我看来,这是一个深度缓冲问题--你从一个白色背景开始,用边框画东西,这样它就合成在白色上,然后用边框画东西后面的东西。边界与原始白色背景混合的区域将在深度缓冲区中存储一个与其平面深度相等的值,因此,当随后绘制后的对象时,其像素将被丢弃在该区域。

一般的规则是在不透明的物体之后画出透明的物体,通常是从后面到前面。如果你使用的是加性混合,那么在不透明的绘制之后禁用深度缓冲器并以任何顺序绘制它们通常是足够好的。

票数 2
EN
查看全部 4 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7732576

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档