在 Three.js 中加载大量对象的最快方法? [英] Fastest method to load a large number of objects in Three.js?

问题描述

我目前正在探索优化在 Three.js 中加载/生成大量对象所需时间的方法.这些对象的输入是构成 2D 足迹的各个顶点.

I'm currently exploring methods of optimising the time taken to load / generate a large number of objects in Three.js. The input for these objects are individual vertex points that make up a 2D footprint.

我使用的初始方法是从各个顶点创建 THREE.Shape 对象，然后使用 THREE.ExtrudeGeometry 将 2D 形状拉入 3D 对象.对所有对象执行此操作大约需要 3500 毫秒.

The initial method I used is to create THREE.Shape objects from the individual vertex points and then use THREE.ExtrudeGeometry to pull the 2D shape into a 3D object. Doing this for all objects takes around 3500ms.

我探索的第二种方法是使用 JSON 模型格式，然后在需要时导入该 JSON 文件，而不是在运行时生成对象.仅此 JSON 表示的导入和加载大约需要 3800 毫秒，这比在运行时生成对象还要长！

A second method I've explored is to pre-export the generated 3D objects (from the previous approach) into a JSON file using the JSON model format, then import that JSON file when needed instead of generating the objects at runtime. Just the import and loading of this JSON representation takes around 3800ms, which is longer than generating the objects at runtime!

我想知道在 Three.js 中加载/生成对象最快的方法是什么.我不知道如何加快 THREE.Shape 和挤压方法的速度，我不确定为什么 JSON 导入方法这么慢(我假设预先生成几何图形会节省很多时间).

I'd like to know what the fastest method is for loading / generating objects in Three.js. I'm at a loss at how to speed up the THREE.Shape and extrusion approach, and I'm not sure why the JSON import approach is so slow (I assumed pre-generating the geometries would save a lot of time).

还有其他方法可以加快速度吗?

Are there any other methods that might speed things up?

推荐答案

我对你的结果一点也不感到惊讶.我敢打赌，自定义几何图形也会占用更大的内存......

I'm not at all surprised by your results. I'd bet that you also get a much larger memory footprint with the custom geometry as well...

BufferedGeometry 肯定会加快加载自定义几何图形的速度.但我不确定你会比动态生成几何体更快.生成的好处是您可以为过程设置动画，以便用户看到场景在他们面前栩栩如生.您可以分解您的自定义几何体，并执行类似于我们在 Verold Studio 中加载多部分对象时所做的操作，以提供类似的效果，但您将对生成的场景进行更多控制.

BufferedGeometry would definitely speed up loading the custom geometry. But I'm not sure you'll get faster than generating the geometry on the fly. And the benefit of the generation is that you can animate the process, so that the user sees the scene come to life in front of them. You can break your custom geometry down and do something similar to what we do when we load multi-part objects in Verold Studio, to give a similar effect, but you'll have a lot more control with the generated scene.

我还建议您在基准测试中查看内存、CPU 和网络速度.针对您的特定配置进行优化可能会引导您走上一条为您带来出色性能的道路，但不会为您的用户带来好处.方法肯定存在权衡，您可以在服务器上进行更多的预计算以换取更多的网络流量等.确保您独立测量所有因素 - 而不仅仅是配置的速度.

I'd also suggest you look at memory, CPU, and network speed in your benchmarks. Optimizing for your specific configuration might lead you down a path that gets you great performance, but not for your users. There are definitely tradeoffs in approach, where you can do more pre-computation on the server in exchange for more network traffic, etc. Make sure you're measuring all the factors independently - not just the speed on your configuration.

这篇关于在 Three.js 中加载大量对象的最快方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！