WebGL渲染透明对象。渲染顺序

Question

下面是我在trie.js- http://zheden.elitno.net/中的测试应用程序

有两个立方体-绿色是上面的一个。如果你取消勾选“魔方2”(黄色的内部魔方)，它就会变得不可见。当你旋转然后相机和旋转回来检查“魔方2"，它变成了外部。它并不是以所有的旋转角度进行复制。

添加"renderer.sortObjects = false“解决了这个问题。但是你能给我解释一下这种行为的原因吗？渲染器根据对象的位置对对象进行排序。为什么当某个对象是透明的时，渲染的顺序会改变？它的位置是不变的。

这与Transparent textures behaviour in WebGL有关吗？

谢谢，珍雅

Answer 1

你的演示中没有透明的对象，只有不透明的对象。您正在更改可见性。

WebGLRenderer根据对象与摄影机的距离对对象进行排序，并按排序的顺序渲染对象。它从前到后渲染不透明对象。

渲染顺序可能会因排序算法在两个对象到相机的距离相同时如何打破平局而发生变化。

但是，当您将可见性关闭然后再打开时，渲染顺序不一定会更改。可以改变的是，当您移动相机时，由于舍入，到深度缓冲区的最低有效数字的距离。因此，有时渲染第二个对象，有时不渲染。

在完全相同的位置有两个大小和方向完全相同的立方体。不要那样做。它可能会导致各种渲染问题--其中最常见的就是闪烁。

three.js r.58