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%左右。
那如何进行开发呢，这肯定是大家最关心的，Three.js 的官方案例做了很好的演示，链接：
https://threejs.org/examples/?q=instance#webgl_interactive_instances_gpu 那我们来看一下模型单个渲染，合并渲染，多实例渲染的情况：
单个渲染模型10000个，drawcall 10000，fps 4;
顶点合并渲染，drawcall 1, fps 40 ，可以看出帧率相比单个模型绘制有了明显的提高，但在做了顶点数据复用的BIM轻量化中，应用顶点合并需要认真考虑，可能会导致内存增加。
多实例渲染，drawcall 1,fps 56,帧率提高的更加明显。
看了对比以后，多实例渲染和顶点合并渲染可以明显降低drawcall，并且增加渲染fps，而且在模型数量足够多的情况下，多实例渲染的效果是优于顶点合并的效果的，但是具体使用组合方式需要根据实际情况确定。当然多实例渲染和顶点合并渲染只是BIM模型轻量化中的最实用的一部分。哈哈哈哈，就到这里了，有兴趣的同志加我的3D开发交流群交流哈。
