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開發交流羣交流哈。
