三 JS 导入模型尺寸和性能

Question

我希望在我的应用程序中同时显示多达 3,000 个相同模型的实例 - 但这确实降低了我的计算机速度。实在是太多了。

我知道InstancedMesh 是这样的方式，所以我一直在关注 THREE.js 的示例：https://threejs.org/docs/#api/en/objects/InstancedMesh

这些示例很棒，但它们似乎使用了非常小的模型，这使得很难很好地了解模型大小限制应该是什么。

例如：
-使用的球体here不是导入的自定义3D模型，它们只是IcosahedronGeometry的实例
-this example 中使用的 Flower.glb 模型很小：它只有 218 个顶点。
- 而“飞猴”here 来自 ".json" 文件，所以我不知道该模型有多少个顶点。

相比之下，我的模型有 4,832 个顶点 - 顺便说一下，它被列在我发现它的“低多边形”类别中，所以它并不是特别大。
就文件大小而言，它正好是222kb.
我尝试在 Blender 中缩小它并重新导出它 - 仍然出现在 222kb.

显然我可以采取一些“严厉措施”，例如：
- 尝试重新设计我的 3D 模型并使其更小 - 但这会大大降低它的美感和项目的整体美感
-我可以重新设想或重新设计项目以同时显示 1,000 个模型而不是 3,000 个

等等

但由于我是 THREE.js 和一般 3D 建模的新手，所以我只想先询问社区是否有任何建议或技巧可以在进行如此彻底的更改之前先尝试。

-我正在导入的模型采用 .glTF 格式 - 这是最好的格式还是我应该尝试其他格式？
- 其中的所有网格都作为BufferGeometry 的实例进入浏览器，我认为就内存需求而言这是最轻的——对吗？

为了优化性能，我还需要注意哪些其他事项？
Blender 或其他可以减小模型尺寸的 3D 建模软件中的某些设置？
开始这样的事情时要遵循一些一般的经验法则？

非常感谢任何和所有的帮助。
谢谢！

Answer 1

GLTF 可以很好地传输几何和材料——我现在可以说是标准。如果只有几何图形，我会看到 OBJ 或 PLY 格式。

模型大小是阻塞的，但如果我们在其几何和材料上使用instancing，则仅适用于初始负载。这样我们就可以简单地重复使用已经生成的几何体及其材质。

在 GPU 级别，实例化意味着使用单个材质着色器多次绘制单个网格。您可以为每个实例覆盖材质的某些输入，但它必须是单个材质。

——Don McCurdy

我们最大的担心是渲染的三角形或面。数量越少，性能越好，因此一次模型越少。为此，您可以使用一定程度的LOD 来逐步增加和减少模型的细节，直到您停止在远处渲染它们。

一些示例/资源可帮助您入门：

• LOD
• Instancing Models
• Modifying Instances