3D gltf模型渲染优化(threejs)

时间:2019-02-08 08:03:09

标签: three.js 3d 3d-modelling 3d-model 3d-rendering

我在iPad上使用threejs加载某些3d gltf模型时遇到问题。加载实际上可以正常工作,可以在台式机和android平板电脑上很好地加载,但是在我的特定情况下,它需要在iPad平板电脑上运行,并且页面不断崩溃,因为它耗尽了试图渲染模型的所有内存(我想Android为浏览器提供了更多的可用内存)。

我的问题是如何优化模型以使其能够在iPad上运行?我的第一个想法是顶点/索引等的数量会影响渲染,但是事实证明,具有更多顶点和索引的模型能够加载,而“优化”模型无法加载。我们将模型放入巴比伦在线预览器中以查看其信息,而我注意到的是,比起不起作用的新模型,具有更多顶点和索引的旧模型具有更少的网格和更少的绘制调用。那是我们应该专注于优化的事情,而不是顶点和索引的数目吗?

问题是我们需要优化模型以在iPad上渲染,但是我无法弄清楚模型的哪一部分需要优化,因此任何帮助将不胜感激!

P.S。我尝试实现DRACO压缩和DRACOLoader,但它无济于事,因为它只是压缩文件,并且一旦需要在屏幕上呈现,压缩就根本没有关系,因为它基本上仍然是需要呈现的3d文件。我可以根据需要共享代码,但是我认为这并不重要,因为加载没有问题,只是模型未优化。

1 个答案:

答案 0 :(得分:0)

过大的纹理是问题所在。我们的纹理是2048x2048px,但里面只有一种颜色。所以我将所有纹理缩小到1x1px,效果很好。