javascript - 透明度跳脸？

Question

我一直在开发一个运行在 Three.js 库之上的 WebGL 项目。我正在渲染几个半透明的网格，我注意到根据您倾斜相机的角度，顶部会出现不同的对象。

为了说明这个问题，我使用三个半透明立方体做了一个快速演示。当您将图像垂直于屏幕旋转过去时，最小立方体的后半部分“跳跃”并且不再可见。但是，它不应该仍然可见吗？我尝试调整一些混合方程，但这似乎没有什么不同。

我想知道这是否是 WebGL/Three 中的错误，或者我可以修复的问题。任何见解将不胜感激:)

Answer 1

嗯，这是他们在发明所有这些硬件加速图形业务时无法解决的问题，听起来我们将不得不处理很长一段时间。

这里的问题是图形卡不会对多边形或对象进行排序。显卡是“哑”的，你告诉它绘制一个对象，它会绘制代表它的像素，并且在另一个称为 zbuffer（或 depthbuffer）的不可见“图像”中，将绘制代表对象的像素但它会为每个像素绘制到相机的距离而不是颜色。之后绘制的任何其他对象，图形卡将检查每个像素到相机的距离，如果距离较远，则不会绘制它（除非您禁用检查）。

这大大加快了速度，并为您提供了实体对象之间的良好交集。但它在透明度方面表现不佳。假设您有 2 个透明对象，并且您希望将 A 绘制在 B 后面。您需要告诉显卡先绘制 A，然后绘制 B。只要它们不相交，就可以正常工作。为了绘制 2 个相交的透明对象，图形必须对所有多边形进行排序，并且由于图形卡不这样做，所以你必须这样做。

这是您需要了解并专门针对您的案例进行调整的其中之一。

在three.js 中，如果您设置material.transparent = true我们将对该对象进行排序，以便将其绘制在（较早）前面的其他对象之前。但是，如果您想与它们相交，我们无法真正帮助您。