我一直致力于在Three.js库之上运行的WebGL项目。我正在渲染几个半透明网格，我注意到根据您倾斜相机的角度，一个不同的对象在顶部。
为了说明问题，我使用三个半透明立方体进行了快速演示。当您将图像旋转过去垂直于屏幕时，最小立方体的后半部分会“跳跃”并且不再可见。但是，它不应该仍然可见吗？我尝试调整一些混合方程，但这似乎没有什么区别。
我想知道的是，这是否是WebGL / Three中的错误，或者我能解决的问题。任何见解都将非常感激：）
答案 0 :(得分：5)
嗯，这是他们发明所有这些硬件加速图形业务时无法解决的问题，听起来我们将不得不长期处理这个问题。
这里的问题是图形卡不对多边形进行排序，也不对对象进行排序。图形卡是“哑”，你告诉它绘制一个对象，它将绘制代表它的像素，并且在另一个不可见的“图像”中称为zbuffer（或depthbuffer），将绘制代表该对象的像素但不是颜色，它会为每个像素绘制到相机的距离。您之后绘制的任何其他对象，图形卡将检查每个像素到相机的距离是否更远，如果它更远，它将不会绘制它（除非您禁用检查，即）。
这可以加速很多事情，并为您提供固体物体之间的良好交叉点。但它在透明度方面表现不佳。假设您有2个透明对象，并且您希望A在B后面绘制。您需要告诉显卡先绘制A然后绘制B.只要它们不相交就可以正常工作。为了绘制相交的2个透明对象，图形必须对所有多边形进行排序，并且由于图形卡不这样做，所以你必须这样做。
这是您需要了解并特别针对您的案例进行调整的其中一项。
在three.js中，如果你设置material.transparent = true，我们将对该对象进行排序，以便在之前（之前）绘制前面的其他对象。但如果你想与它们相交，我们就无法真正帮助你。