Three.js BIM模型轻量化 FPS渲染速率优化多实例渲染[Instance]+顶点合并[Merge]

Webglzhang

于 2019-09-08 11:52:53 发布

阅读量5k

点赞数 2

分类专栏： WebGL Three.js 文章标签： BIM BIM模型轻量化

本文链接：https://blog.csdn.net/weixin_37683659/article/details/100622408

版权

当BIM模型未经处理直接加载到Three.js中，可能导致fps帧率下降，主要原因是模型数量过多及多材质导致的drawcall过载。通过理解GPU渲染流程，可以采取多实例渲染和顶点合并来优化。多实例渲染允许GPU复用顶点数据，而顶点合并则减少drawcall。在实际项目中，两者结合使用，按drawcall最少的顺序排列，能有效降低drawcall约70%，显著提升fps。Three.js官方示例提供了相关实现方法。对于模型数量足够大的情况，多实例渲染效果更优，但需权衡内存占用。BIM模型轻量化还有更多策略可供探索。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BIM模型不经过处理，直接加载到Three.js 创建的场景中，很大可能会很使fps帧率下降，原因在于模型的个数太多，有的模型是多材质的话还需要在Three.js中绘制两次，这样会导致drawcall过载，虽然在开启视椎体剪裁的情况下，Three.js中已经进行了模型剔除的处理，但仍然很难解决drawcall过载的问题，可以F12 打开devtool看下cpu使用率。

如何解决这种情况呢，可以先看一下gpu渲染的流程（涉及到硬件），参考这篇文章：

https://zhuanlan.zhihu.com/p/58694744

对整个gpu的结构有了之后，那可以明确要做的优化，每一次drawcall尽可能多的顶点数量，充分利用GPU的渲染计算能力。还有一点就是多实例渲染，简而言之，就是各种顶点数据在一次drawcall提交之后，可以在GPU进行复用进行渲染，uniform可以像attribute一样传递（这样说也不是很准确，准确地说是每个实例可以具有不用的uniform变量）。

这两种方式都具有很好渲染速率优化的作用，那具体怎么用，主要是结合项目的情况，一般是两者一起用，那是先应用多实例渲染还是先应用顶点合并呢，主要是也是看项目的实际情况，比如对内存的要求，如果没有要求，两者的使用顺序使drawcall最少的情况，就是最佳的使用顺序，我对整个项目做完优化过后，drawcall相比之前降低70%左右。