three.js高性能渲染室外場景

大家好，本文在相關文章的基礎上，使用three.js渲染了高性能的室外場景，在移動端也有較好的性能，并給出了代碼，分析了關鍵點，感謝大家~

關鍵詞：three.js、Web3D、WebGL、室外場景、Instanced Draw、大場景、LOD、Frustum Cull、優化、開源

代碼：Github

相關文章：
three.js實現數字孿生3D倉庫一期（開源）
three.js使用Instanced Draw+Frustum Cull+LOD來渲染大場景（開源）
基于three.js的Instanced Draw+LOD+Frustum Cull的改進實現

我正在承接Web3D數字孿生項目，具體介紹可看承接各種Web3D業務

加QQ群交流：106047770

亮點

本文的亮點是基于Instanced Draw+LOD+Frustum Cull優化，能夠高性能地渲染樹、草等室外物體；并且實現了基本的地形

本文代碼能在PC端、移動端流程運行

height map

基于height map實現地形，能根據x、z坐標從height map中插值，獲得y坐標（地形高度）

color map

預讀取color map，作為頂點顏色，代替多層紋理（為了性能考慮），可用來實現 道路 等效果

基礎紋理

為了性能考慮，只加入一張紋理，以repeat的方式鋪在地形上，使其與頂點顏色疊加

光照

地形使用MeshPhongMaterial材質，Phong光照

加入第三人稱人物

加入第三人稱人物，實現方式詳見實現人物

相機與地形 碰撞檢測

相機移動時，不應該插入到地形中

最開始我是根據height map更新相機的y坐標，具體參考地形碰撞

這樣做的問題是如果地形過高，可能導致相機拉得太高了；而且會有相機抖動的問題

所以，我改為加入地形Collider（立方體），讓相機與Collider進行碰撞處理，具體詳見three.js實現相機碰撞，相機不穿墻壁、物體

本文只加入了一個Collider，并以綠色的立方體來顯示（實際上應該不可見）

人物與地形 碰撞檢測

跟相機一樣，人物也與地形Collider進行碰撞檢測

加入樹

基于Instanced Draw+LOD+Frustum Cull來加入樹

加入草

草直接使用billboard+Instanced Draw+Frustum Cull來渲染

人物與樹 碰撞檢測

使用八叉樹保存樹，使人物與八叉樹進行碰撞檢測

改進方向

下面是對地形的改進方向：

• 超大地形
  目前地形只有一塊，如果是開放世界的話，應該是多塊地形；
  應該用四叉樹作為加速結構來實現Frustum Cull；
  應該實現LOD（不同lod的三角面數不同，material也不同，如近的lod應該使用多層紋理+color map，遠的lod只使用color map）
  參考：
  Tutorial 18: Large Terrain Rendering

• 多層紋理

• 加入normal map，顯示細節

• 加入水

地形的系列教程如下：

DirectX 11 Terrain Tutorials
DirectX 11 Terrain Tutorials - Series 2

參考資料

Use Tri-Planar Texture Mapping for Better Terrain

多層紋理（Multilayered Terrain）