three.js - Threejs 中细节级别 (LOD) 网格的 3D 渲染性能/管道

Question

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

我有许多高度详细的 3D 模型(每个模型有 300 万多个面)，这些模型是根据现实世界的地形扫描生成的，需要在浏览器中渲染。它们是“不规则的”，无法从网格/DEM 或任何东西渲染。

我已将模型划分为较小的对象，并为每个对象生成 LOD(3 个级别)，这会生成一组公共(public)顶点和三个索引缓冲区，这些索引缓冲区引用我逐步流式传输到 JS 客户端的部分或全部顶点。

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

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

我尝试过一种简单的方法，当数据发送到 GPU 时，它会自然地在帧速率中产生颠簸和故障。但我一直在寻找一种方法将所有数据(顶点和三个索引缓冲区)发送到 GPU 内存，然后告诉它使用特定索引缓冲区(例如低分辨率缓冲区)进行渲染，然后切换到中或高当相机靠近时，res 缓冲区。

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

希望得到一些指导，无论多么笼统。干杯!

Answer 1

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

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

然后，设置 BufferGeometry 的 drawRange 属性以渲染所需 LOD 的面。

geometry.setDrawRange( startIndex, count );

几何图形将被推送到 GPU 一次，更改 LOD 只需更改 drawRange 即可，这是一个统一的，应该是丝般光滑的。

三.js r.75