THREE JS导入模型尺寸及性能



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

我知道InstancedMesh是这样做的,所以我一直在这里遵循THREE.js的例子:https://threejs.org/docs/#api/en/objects/InstancedMesh

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

例如:
-这里使用的球体不是导入的自定义3D模型,它们只是二十面几何体的实例
-在这个例子中使用的Flower.glb模型很小:它只有218个顶点。
这里的"飞猴"来自".json">所以我不知道模型有多少顶点

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

显然,我可以采取一些"激烈的措施",比如:
-尝试重新设计我的3D模型,使其更小-但这会大大降低它的美感和项目的整体美学
-我可以重新想象或重新构建项目,同时展示1000个模型,而不是3000个

等。

但是由于我对THREE.js和3D建模都是新手,我只是想先问一下社区,在做出如此彻底的改变之前,是否有任何建议或技巧可以先尝试一下。

-模型我导入是在.glTF格式-是最好的格式使用或我应该尝试其他东西?
-所有的网格进入浏览器作为BufferGeometry的实例,我认为是最轻的内存需求-这是正确的吗?

为了优化性能,我还需要注意其他的事情吗?
Blender或其他3D建模软件中的某些设置可以减小模型尺寸?
当着手做这样的事情时,有什么一般的经验法则可以遵循吗?

非常感谢大家的帮助。

GLTF可以很好地传输几何形状和材料-我可能会说现在的标准。如果只有几何,我会看到OBJ或PLY格式。

模型大小阻塞,但只有在初始加载时,如果我们对其几何形状和材料进行实例化。这样我们就可以简单地重复使用已经生成的几何体和它的材质。

在GPU层面,实例化意味着使用单个材质着色器多次绘制单个网格。你可以为每个实例覆盖某些材料的输入,但它必须是一个单一的材料。

- Don McCurdy

我们最担心的是渲染的三角形或面。这样做的次数越少,性能就越好,因此,每次使用的模型就越少。为此,您可以使用一定程度的LOD来逐步增加和减少模型的细节,直到您在一定距离内停止渲染它们。

一些例子/资源让你开始:

  • LOD
  • <
  • 实例化模型/gh><
  • 修改实例/gh>

相关内容

  • 没有找到相关文章

最新更新