WebGL 渲染透明对象。渲染顺序
Posted
技术标签:
【中文标题】WebGL 渲染透明对象。渲染顺序【英文标题】:WebGL rendering transparent objects. Render order 【发布时间】:2013-07-05 15:03:14 【问题描述】:这是我在three.js中的测试应用程序-http://zheden.elitno.net/
有 2 个立方体 - 绿色是上面的那个。如果您取消选中“Cube 2”(黄色内部立方体),它将变得不可见。当您旋转相机并旋转后检查“Cube 2”时,它变成了外部。它不是在所有旋转角度下都可以复制的。
添加“renderer.sortObjects = false”解决了这个问题。但是你能解释一下这种行为的原因吗?渲染器根据对象的位置对对象进行排序。当某些对象是透明的时,为什么会更改渲染顺序?它的位置没有改变。
这和Transparent textures behaviour in WebGL有关吗?
谢谢, 振亚
【问题讨论】:
您的演示中没有透明对象,只有不透明对象。您在完全相同的位置有两个大小和方向完全相同的立方体。这绝不是一个好主意。你想达到什么目的?另请参阅:***.com/questions/15994944/… 我希望在场景中显示对象的顺序相同,即使其中一些变得不可见,然后又变得可见。在您提供的链接中,您写道“WegGLRenderer 根据对象的位置对对象进行排序,并按排序顺序呈现对象”。但是为什么当我改变对象的可见性时渲染顺序会改变?它的位置还是一样的。 【参考方案1】:您的演示中没有透明对象,只有不透明对象。您正在更改可见性。
WebGLRenderer
根据对象与相机的距离对对象进行排序,并按排序顺序渲染对象。它从前到后渲染不透明的对象。
当两个对象与相机的距离相同时,由于排序算法如何打破关系,渲染顺序可能会发生变化。
但是,当您关闭然后再次打开可见性时,渲染顺序不一定会改变。移动相机时由于四舍五入,可以改变的是与最低有效数字深度缓冲区的距离。因此,有时第二个对象会渲染,有时则不会。
您在完全相同的位置有两个大小和方向完全相同的立方体。不要那样做。它可能会给您带来各种渲染问题——其中最常见的就是闪烁。
three.js r.58
【讨论】:
以上是关于WebGL 渲染透明对象。渲染顺序的主要内容,如果未能解决你的问题,请参考以下文章
WebGL入门(四十一)-使用帧缓冲区对象(FBO)实现将渲染结果作为纹理绘制到另一个物体上