3D渲染性能/管道的细节层次(LOD)网格在三个

时间:2016-04-14 03:55:27

标签: three.js level-of-detail

只是寻找一些一般的指导,自从我摆弄任何3D以来,已经很长一段时间了,如果你原谅那个可怕的双关语,那么风景已经发生了很大变化。

我有许多非常详细的3D模型(每个都是3M +面),这些模型是从需要在浏览器中渲染的真实地形扫描生成的。他们是不规则的'并且不能从网格/ DEM或任何东西渲染。

我已经将模型划分为更小的对象,并为每个对象生成LOD(3个级别),这会生成一组公共顶点和三个索引缓冲区,这些缓冲区引用我逐渐传输到JS客户端的一些或所有顶点。

我打算通过根据与相机的距离为每个对象指定LOD,在一帧之间渲染500k-1M多边形。

所以我的问题是,如何在这些级别之间有效切换?

我尝试过天真的方法,当数据发送到GPU时,自然会在帧速率上产生颠簸和毛刺。但我正在寻找一种方法将所有数据(顶点和三个索引缓冲区)发送到GPU内存,然后告诉它使用特定的索引缓冲区渲染,比如低分辨率缓冲区,然后切换到med或者高当相机靠近时,res缓冲区。

Three.LOD()解决方案似乎对我没有任何用处,因为它只会产生与我天真的解决方案相同的fps故障。

会感谢一些指导,无论多么一般。干杯!

1 个答案:

答案 0 :(得分:5)

您希望根据与相机的距离高效,平滑地改变对象的细节层次(LOD)。

根据您的用例,一种解决方案是为每个对象创建一个包含所有三个细节级别的BufferGeometry。换句话说,你会使用"索引"缓冲区几何体,指定共享顶点数组,并将三个索引数组连接成一个。

然后,设置drawRange的{​​{1}}属性,以渲染所需的LOD面。

BufferGeometry

几何体将被推到GPU一次,改变LOD只需要更换geometry.setDrawRange( startIndex, count ); ,一个均匀的,应该是丝般光滑的。

three.js r.75