WebGL z-buffer工件？

Question

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

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

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

Answer 1

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

见：

• http://www.opengl.org/wiki/Transparency_Sorting
• http://www.opengl.org/archives/resources/faq/technical/transparency.htm（15.050）

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

编辑：只是总结下面的讨论。可以实现这种双面透明网格的正确渲染。要执行此操作，您需要创建6个版本的网格，对应于多维数据集的6个边。每个版本都需要根据“立方体的一面”（前，后，左，右，顶部，底部）按照从前到后的顺序进行排序。 渲染时选择正确的网格（基于相机查看方向）并渲染该单个网格。

Answer 2

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