WebGL渲染透明对象。渲染订单

时间:2013-07-08 10:05:47

标签: three.js rendering webgl depth-buffer

这是我的测试应用程序inthree.js- http://zheden.elitno.net/

有2个立方体 - 绿色是上面的立方体。如果取消选中“立方体2”(黄色内部立方体),它将变为不可见。然后旋转然后旋转相机并在旋转后检查“立方体2”,它变为外部。它不会以所有旋转角度再现。

添加“renderer.sortObjects = false”修复了问题。但是,请你解释一下这种行为的原因吗?渲染器根据对象的位置对对象进行排序。当某个对象透明时,为什么渲染顺序会发生变化?它的位置没有改变。

这与Transparent textures behaviour in WebGL相关吗?

谢谢, 振亚

1 个答案:

答案 0 :(得分:3)

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

WegGLRenderer根据对象与相机的距离对对象进行排序,并按排序顺序呈现对象。它从前到后呈现不透明的对象。

当两个物体与相机的距离相同时,渲染顺序会因分拣算法如何断开关系而改变。

但是,当您切换可见性然后再次打开时,渲染顺序不一定会发生变化。可以改变的是移动摄像机时由于舍入导致的最低有效位数到深度缓冲区的距离。因此,有时第二个对象呈现,有时则不呈现。

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

three.js r.58