基于WebGL的動態地形實時繪制
2018-01-09 13:46:49鄭顧平白若林
軟件導刊 2017年12期
鄭顧平+白若林
摘要：在3D場景繪制中，需要安裝插件才能夠實現繪制效果，WebGL作為無須考慮插件的繪圖標準將3D場景帶入瀏覽器。針對動態地形繪制中由插件造成的實用性與靈活性問題，采用WebGL標準進行動態地形繪制。使用JavaScript文件格式實現幾何剪切圖算法的繪制過程，改進there.js庫中的固有類實現物體之間的碰撞檢測問題，再通過頂點著色器與片元著色器在GPU中完成地形繪制。實驗結果證明，在WebGL上能夠實現實時性與真實感并存的動態地形效果。
關鍵詞：WebGL；地形繪制；Geometry Climaps
DOIDOI：10.11907/rjdk.172506
中圖分類號：TP317.4
文獻標識碼：A 文章編號：1672-7800（2017）012-0202-03
Abstract：3D scene rendering need to install the plug-in to be able to achieve the rendering effect. WebGL is a drawing standard that does not have to worry about plug-in and brings 3D into the browser.WebGL standard is used to map the dynamic terrain aimed at the problem of practicability and flexibility in dynamic terrain rendering. Through the study of Geometry Clipmaps， it is implemented using JavaScript file format. Improved the existing class in there.js to achieve the collision detection between objects， and then through the vertex shader and chip shader to complete the terrain rendering. The experiments show WebGL is able to achieve dynamic terrain with real-time and realism coexist.
Key Words：WebGL；terrain rendering；Geometry Climaps
0 引言
地形環境下的動態地形繪制技術是3D場景建模中的一個重要分支，在軍事仿真、經濟、生活、娛樂等領域獲得了普遍應用，例如軍事中戰場環境的三維視景仿真、三維游戲、影視特效制作等[1]。對軍事戰場的視景仿真而言，物理模型與地形狀態有直接或間接的相互作用，例如車輛運行時在地面留下車轍印、炮彈彈坑等。現在使用較多的Web3D技術在使用時需要安裝插件，對3D體驗的實用性、靈活性造成了負面影響。WebGL技術作為一種3D繪圖標準，解除了插件帶來的困擾，將3D內容帶入瀏覽器，并通過JavaScript與電腦中的圖形硬件進行交流。本文針對在3D建模場景中，如何快速有效地使用WebGL標準實現動態地形的繪制展開研究。
1 相關技術
本文主要采用的編程技術是HTML，3D繪圖標準是WebGL，地形算法是幾何剪切圖法（Geometry Clipmaps），并通過JavaScript、CSS等技術來實現3D網頁界面的編寫。
WebGL是在OpenGL ES 2.0 基礎上發展而來的，是一個跨平臺、免費用于在Web瀏覽器創建三維圖形的API[2]。WebGL結合了JavaScript和HTML5，可以直接在HTML5的
由于WebGL是一種低等級的原生API，只有經驗豐富的3D程序員才可以完美駕馭WebGL，所以衍生出了一系列WebGL框架，應用最廣泛的是there.js[4]。在there.js中，通過設置場景、對象、著色器、攝像機進行圖形繪制。在圖形繪制過程中，用GLSL這一著色器語言完成著色器工作。WebGL支持的著色器只有頂點著色器與片元著色器。Three.js允許不定義著色器，而是采用默認方法渲染，但在需要時，又可以使用自定義著色器。在繪制大規模地形時，可以通過there.js的默認方法渲染，當地形發生變化時，再通過設置頂點著色器和片元著色器進行渲染。
2 基于WebGL的動態地形繪制設計
2.1 算法描述
Geometry Clipmap算法是由斯坦福大學的Losasso和微軟研究組的Hoppe首次引入的、基于GPU的地形算法[5]。Geometry Clipmap算法是基于網格的LOD技術，將高程圖過濾成共有L層的Clipmap金字塔，如圖1所示。選擇層次是依據視點距離，同一距離的地形緩存進同一層次當中，組成一組嵌套的規則網格，然后以視點為中心，隨視點移動而移動。在渲染過程中，隨著視點的移動，將更新的數據送入顯卡進行渲染。按照規則，層數L越小，系統渲染效率越高；相反，層數L越大，系統效率越低。通過GPU的頂點著色器對高度圖進行頂點紋理采樣，獲得高程數據后，使用GPU的光棧管道處理高程數據[6-7]。
Geometry Clipmap算法使用的數據結構存儲在頂點紋理中，在金字塔每層中有N*N個幾何數據采樣點，每個點包含3個數據（x，y，z），x、y為常量頂點數據，z為高程圖高度存儲值。
地形的初始繪制利用Three.js提供的THREE.PlaneBufferGeometry加以實現[8]。在WebGL標準中采用右手笛卡兒坐標系，所以三維地形的高程效果由THREE.PlaneBufferGeometry頂點數組vertices 中的y值決定，對應Geometry Clipmap算法中的z高程圖高度存儲值，實時檢測地形與其它模型發生的碰撞，根據其受力大小可推算出地形發生的形變大小，進而更新平面頂點數組vertices 中的y值大小，代碼如下：
為了在WebGL標準上實現Geometry Clipmap算法，創建Terrain函數，通過高程數據創建地圖大小、Clipmap層次與分片數繪制地形，其中高程數據從高度圖數據中進行采集。
2.2 碰撞檢測算法
碰撞檢測在游戲設計、3D電影特效制作、機器人等領域有著廣泛應用[9]。導彈在落到地面后才會生成彈坑現象，人在地面走過之后才會在經過處留下腳印，在實現動態地形繪制時，需要檢測物體與地面是否發生過碰撞。本文采用THREE.Raycaster類在WebGL中實現碰撞檢測。
THREE.Raycaster是there.js庫中用來實現對象拾取的類，通過Raycaster獲得鼠標事件發生位置的圖形對象。Raycaster從字面上即可理解其工作原理是：從某個方向發射一條射線，穿過鼠標所在的點，則這條射線經過的對象即是鼠標點擊的對象。在使用Raycaster檢測碰撞時，考慮方向不止一條。以需要進行碰撞檢測的物體A中心為起點，向各個頂點（vertices）發出射線，然后檢查射線是否與其它物體相交。若射線與其它物體相交，檢查最近的一個交點與射線起點間的距離，如果該距離比射線起點至物體頂點間的距離小，則說明發生了碰撞。如上文所述的碰撞檢測只適用于中心物體形狀為球形的狀況，因此在繪制車轍時選取車輛為中心物體，可避免出現車輛碰到墻面導致無法檢測的情況。如圖2所示，當d≤r時，物體與地面發生碰撞。為了解決物體與物體之間的碰撞，首先需要將車輛的本地坐標乘以變換矩陣，得到車輛在世界坐標系中的坐標值，然后使用THREE.Raycaster創建檢測射線，通過.intersectObject檢測光線是否與物體相交，若相交，返回交點處坐標。具體代碼如下：
3 動態地形實現
動態地形繪制流程如圖3所示。
通過上述內容，在計算機端完成了Web端動態地形的實現。硬件配置為：CPU Intel Core i5 450 2.4 GHz，GBRAM，ATI Mobility Radeon HD 5450顯卡，4G內存。軟件環境為：Windows 7，WebGL，Html5。
圖4為通過WebGL使用Geometry Clipmaps算法實現的地形繪制效果，本實驗使用一張1 024*1 024的dds格式高程圖。將L設為4，N設為255。為了更方便地實現動態地形繪制，圖5是在平面中實現的車轍效果。由于模型的數據量較大，載入模型的繪制幀頻率（如車轍繪制效果圖）平均在45PFS左右，靜態地形繪制時，幀頻率能夠保證在60PFS左右，都能成功地進行圖形繪制。
4 結語
本文實現了基于WebGL的動態地形渲染與繪制，通過Geometry Clipmaps算法在Web上完成了車轍地形繪制的效果。首先對Geometry Clipmaps算法及車輛與地形的碰撞檢測進行了研究，通過對THREE.Raycaster的改進，使其能夠完成物體之間的碰撞檢測并返回碰撞點坐標，進而通過“壓力沉陷”公式得到下陷深度，改進對應點的高程值，再通過頂點著色器與片元著色器完成地形繪制。由于there.js的開放性，整個繪制過程具有開放、免插件、跨平臺的優勢，為用戶帶來了全新的良好體驗。
參考文獻：
[1] 牛藝博.基于WebGL的地理信息三維可視化技術研究[D].蘭州：蘭州交通大學，2015.
[2] 劉愛華，韓勇，張小壘，等.基于WebGL技術的網絡三維可視化研究與實現[J].地理空間信息，2012，10（5）：79-81.
[3] 黃若思，李傳榮，馮磊，等.基于幾何的WebGL矢量數據三維渲染技術研究[J].遙感技術與應用，2014，29（3）：463-468.
[4] ALEXEY DEMIN，代沅興，李新，等.基于HTML5與WebGL的機器人3D環境下的運動學仿真[J].東北大學學報：自然科學版，2014，35（4）：564-568.
[5] LOSASSO F， HOPPE H. Geometry clipmaps： terrain rendering using nested regular grids [C].Proceedings of ACM Transactions on Graphics. New York： ACM Press， 2004：769-776.
[6] 蔡興泉，李鳳霞，李立杰，等.基于三角帶模板的車轍實時可視化方法[J].系統仿真學報，2006，18（10）：2843-2846，2851.
[7] 鄭顧平，邢玥，張榮華.一種基于GPU的彈坑實時繪制方法[J].圖學學報，2016，37（4）：451-456.
[8] 任宏康，祝若鑫，李風光，等.基于Three.js的真實三維地形可視化設計與實現[J].測繪與空間地理信息，2015，38（10）：51-54.
[9] 張榮華，鄭顧平.高逼真動態地形實時繪制中碰撞檢測的設計與實現[J].計算機應用，2006，26（11）：2773-2774，2777.
[10] BEKKER M G. Introduction to terrain-vehicle systems [M]. Michigan： The University of Michigan Press， 1969.
（責任編輯：黃 健）endprint
