2

我们正在开发一个基于 Three.js 的 WebGL 项目，并且无法理解 WebGL 中如何处理透明度。该图像显示了一个使用 alpha = 0.7 绘制的双面曲面，它在其右侧表现正确。然而，靠近中间的地方出现了奇怪的伪影，而左侧的透明度似乎根本不起作用。

http://emilaxelsson.se/sandbox/vis1/alpha.png

这个问题也可以在这里看到： http ://emilaxelsson.se/sandbox/vis1/ 有没有人见过类似的东西？可能是什么原因？

4

2 回答 2

1

您的问题是透明对象需要按从后到前的顺序进行排序和渲染（如果您尝试将网格的不透明度从 0.7（透明）更改为 1.0（不透明），您可以看到 z-buffer工作得很好）。

看：

在您的情况下，解决起来可能不那么简单，因为我假设您只有一个网格。

编辑：只是总结下面的讨论。这样的双面透明网格可以实现正确的渲染。为此，您需要创建 6 个版本的网格，对应于立方体的 6 个边。每个版本都需要根据“立方体的侧面”（前、后、左、右、上、下）按从后到前的顺序排序。渲染时选择正确的网格（基于相机的观察方向）并渲染该单个网格。

于 2012-05-26T14:33:10.543 回答
0

对于您的案例（基于您附加的图片），无需进行昂贵的排序和多个网格的简单解决方案是禁用深度测试并启用面部剔除。如果您在网格前面没有任何不透明对象，则会产生可接受的结果。

于 2014-02-07T19:37:01.990 回答