基于WebGL的動態(tài)地形實時繪制

鄭顧平+白若林

摘要：在3D場景繪制中，需要安裝插件才能夠?qū)崿F(xiàn)繪制效果，WebGL作為無須考慮插件的繪圖標(biāo)準(zhǔn)將3D場景帶入瀏覽器。針對動態(tài)地形繪制中由插件造成的實用性與靈活性問題，采用WebGL標(biāo)準(zhǔn)進行動態(tài)地形繪制。使用JavaScript文件格式實現(xiàn)幾何剪切圖算法的繪制過程，改進there.js庫中的固有類實現(xiàn)物體之間的碰撞檢測問題，再通過頂點著色器與片元著色器在GPU中完成地形繪制。實驗結(jié)果證明，在WebGL上能夠?qū)崿F(xiàn)實時性與真實感并存的動態(tài)地形效果。

關(guān)鍵詞：WebGL；地形繪制；Geometry Climaps

DOIDOI：10.11907/rjdk.172506

中圖分類號：TP317.4

文獻標(biāo)識碼：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 引言

地形環(huán)境下的動態(tài)地形繪制技術(shù)是3D場景建模中的一個重要分支，在軍事仿真、經(jīng)濟、生活、娛樂等領(lǐng)域獲得了普遍應(yīng)用，例如軍事中戰(zhàn)場環(huán)境的三維視景仿真、三維游戲、影視特效制作等[1]。對軍事戰(zhàn)場的視景仿真而言，物理模型與地形狀態(tài)有直接或間接的相互作用，例如車輛運行時在地面留下車轍印、炮彈彈坑等?，F(xiàn)在使用較多的Web3D技術(shù)在使用時需要安裝插件，對3D體驗的實用性、靈活性造成了負面影響。WebGL技術(shù)作為一種3D繪圖標(biāo)準(zhǔn)，解除了插件帶來的困擾，將3D內(nèi)容帶入瀏覽器，并通過JavaScript與電腦中的圖形硬件進行交流。本文針對在3D建模場景中，如何快速有效地使用WebGL標(biāo)準(zhǔn)實現(xiàn)動態(tài)地形的繪制展開研究。

1 相關(guān)技術(shù)

本文主要采用的編程技術(shù)是HTML，3D繪圖標(biāo)準(zhǔn)是WebGL，地形算法是幾何剪切圖法（Geometry Clipmaps），并通過JavaScript、CSS等技術(shù)來實現(xiàn)3D網(wǎng)頁界面的編寫。

WebGL是在OpenGL ES 2.0 基礎(chǔ)上發(fā)展而來的，是一個跨平臺、免費用于在Web瀏覽器創(chuàng)建三維圖形的API[2]。WebGL結(jié)合了JavaScript和HTML5，可以直接在HTML5的元素上繪制三維圖形，不需要任何瀏覽器插件，只需要JavaScript編寫網(wǎng)頁代碼即可完成3D圖像的顯示[3]。目前，WebGL標(biāo)準(zhǔn)已植入眾多瀏覽器中，Google Chrome、FireFox、Opera、Internet Explorer 11等瀏覽器已經(jīng)可以支持在無插件條件下，利用底層圖形硬件加速功能實現(xiàn)二維和三維圖形渲染。WebGL需要特定組件才能構(gòu)造3D場景，這些組件包括、對象、光照、相機。在圖形繪制過程中，是承載WebGL渲染的容器，可以通過文檔對象模型進行訪問。

由于WebGL是一種低等級的原生API，只有經(jīng)驗豐富的3D程序員才可以完美駕馭WebGL，所以衍生出了一系列WebGL框架，應(yīng)用最廣泛的是there.js[4]。在there.js中，通過設(shè)置場景、對象、著色器、攝像機進行圖形繪制。在圖形繪制過程中，用GLSL這一著色器語言完成著色器工作。WebGL支持的著色器只有頂點著色器與片元著色器。Three.js允許不定義著色器，而是采用默認方法渲染，但在需要時，又可以使用自定義著色器。在繪制大規(guī)模地形時，可以通過there.js的默認方法渲染，當(dāng)?shù)匦伟l(fā)生變化時，再通過設(shè)置頂點著色器和片元著色器進行渲染。

2 基于WebGL的動態(tài)地形繪制設(shè)計

2.1 算法描述

Geometry Clipmap算法是由斯坦福大學(xué)的Losasso和微軟研究組的Hoppe首次引入的、基于GPU的地形算法[5]。Geometry Clipmap算法是基于網(wǎng)格的LOD技術(shù)，將高程圖過濾成共有L層的Clipmap金字塔，如圖1所示。選擇層次是依據(jù)視點距離，同一距離的地形緩存進同一層次當(dāng)中，組成一組嵌套的規(guī)則網(wǎng)格，然后以視點為中心，隨視點移動而移動。在渲染過程中，隨著視點的移動，將更新的數(shù)據(jù)送入顯卡進行渲染。按照規(guī)則，層數(shù)L越小，系統(tǒng)渲染效率越高；相反，層數(shù)L越大，系統(tǒng)效率越低。通過GPU的頂點著色器對高度圖進行頂點紋理采樣，獲得高程數(shù)據(jù)后，使用GPU的光棧管道處理高程數(shù)據(jù)[6-7]。

Geometry Clipmap算法使用的數(shù)據(jù)結(jié)構(gòu)存儲在頂點紋理中，在金字塔每層中有N*N個幾何數(shù)據(jù)采樣點，每個點包含3個數(shù)據(jù)（x，y，z），x、y為常量頂點數(shù)據(jù)，z為高程圖高度存儲值。

地形的初始繪制利用Three.js提供的THREE.PlaneBufferGeometry加以實現(xiàn)[8]。在WebGL標(biāo)準(zhǔn)中采用右手笛卡兒坐標(biāo)系，所以三維地形的高程效果由THREE.PlaneBufferGeometry頂點數(shù)組vertices 中的y值決定，對應(yīng)Geometry Clipmap算法中的z高程圖高度存儲值，實時檢測地形與其它模型發(fā)生的碰撞，根據(jù)其受力大小可推算出地形發(fā)生的形變大小，進而更新平面頂點數(shù)組vertices 中的y值大小，代碼如下：

為了在WebGL標(biāo)準(zhǔn)上實現(xiàn)Geometry Clipmap算法，創(chuàng)建Terrain函數(shù)，通過高程數(shù)據(jù)創(chuàng)建地圖大小、Clipmap層次與分片數(shù)繪制地形，其中高程數(shù)據(jù)從高度圖數(shù)據(jù)中進行采集。

2.2 碰撞檢測算法

碰撞檢測在游戲設(shè)計、3D電影特效制作、機器人等領(lǐng)域有著廣泛應(yīng)用[9]。導(dǎo)彈在落到地面后才會生成彈坑現(xiàn)象，人在地面走過之后才會在經(jīng)過處留下腳印，在實現(xiàn)動態(tài)地形繪制時，需要檢測物體與地面是否發(fā)生過碰撞。本文采用THREE.Raycaster類在WebGL中實現(xiàn)碰撞檢測。

THREE.Raycaster是there.js庫中用來實現(xiàn)對象拾取的類，通過Raycaster獲得鼠標(biāo)事件發(fā)生位置的圖形對象。Raycaster從字面上即可理解其工作原理是：從某個方向發(fā)射一條射線，穿過鼠標(biāo)所在的點，則這條射線經(jīng)過的對象即是鼠標(biāo)點擊的對象。在使用Raycaster檢測碰撞時，考慮方向不止一條。以需要進行碰撞檢測的物體A中心為起點，向各個頂點（vertices）發(fā)出射線，然后檢查射線是否與其它物體相交。若射線與其它物體相交，檢查最近的一個交點與射線起點間的距離，如果該距離比射線起點至物體頂點間的距離小，則說明發(fā)生了碰撞。如上文所述的碰撞檢測只適用于中心物體形狀為球形的狀況，因此在繪制車轍時選取車輛為中心物體，可避免出現(xiàn)車輛碰到墻面導(dǎo)致無法檢測的情況。如圖2所示，當(dāng)d≤r時，物體與地面發(fā)生碰撞。為了解決物體與物體之間的碰撞，首先需要將車輛的本地坐標(biāo)乘以變換矩陣，得到車輛在世界坐標(biāo)系中的坐標(biāo)值，然后使用THREE.Raycaster創(chuàng)建檢測射線，通過.intersectObject檢測光線是否與物體相交，若相交，返回交點處坐標(biāo)。具體代碼如下：

3 動態(tài)地形實現(xiàn)

動態(tài)地形繪制流程如圖3所示。

通過上述內(nèi)容，在計算機端完成了Web端動態(tài)地形的實現(xiàn)。硬件配置為：CPU Intel Core i5 450 2.4 GHz，GBRAM，ATI Mobility Radeon HD 5450顯卡，4G內(nèi)存。軟件環(huán)境為：Windows 7，WebGL，Html5。

圖4為通過WebGL使用Geometry Clipmaps算法實現(xiàn)的地形繪制效果，本實驗使用一張1 024*1 024的dds格式高程圖。將L設(shè)為4，N設(shè)為255。為了更方便地實現(xiàn)動態(tài)地形繪制，圖5是在平面中實現(xiàn)的車轍效果。由于模型的數(shù)據(jù)量較大，載入模型的繪制幀頻率（如車轍繪制效果圖）平均在45PFS左右，靜態(tài)地形繪制時，幀頻率能夠保證在60PFS左右，都能成功地進行圖形繪制。

4 結(jié)語

本文實現(xiàn)了基于WebGL的動態(tài)地形渲染與繪制，通過Geometry Clipmaps算法在Web上完成了車轍地形繪制的效果。首先對Geometry Clipmaps算法及車輛與地形的碰撞檢測進行了研究，通過對THREE.Raycaster的改進，使其能夠完成物體之間的碰撞檢測并返回碰撞點坐標(biāo)，進而通過“壓力沉陷”公式得到下陷深度，改進對應(yīng)點的高程值，再通過頂點著色器與片元著色器完成地形繪制。由于there.js的開放性，整個繪制過程具有開放、免插件、跨平臺的優(yōu)勢，為用戶帶來了全新的良好體驗。

參考文獻：

[1] 牛藝博.基于WebGL的地理信息三維可視化技術(shù)研究[D].蘭州：蘭州交通大學(xué)，2015.

[2] 劉愛華，韓勇，張小壘，等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實現(xiàn)[J].地理空間信息，2012，10（5）：79-81.

[3] 黃若思，李傳榮，馮磊，等.基于幾何的WebGL矢量數(shù)據(jù)三維渲染技術(shù)研究[J].遙感技術(shù)與應(yīng)用，2014，29（3）：463-468.

[4] ALEXEY DEMIN，代沅興，李新，等.基于HTML5與WebGL的機器人3D環(huán)境下的運動學(xué)仿真[J].東北大學(xué)學(xué)報：自然科學(xué)版，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].系統(tǒng)仿真學(xué)報，2006，18（10）：2843-2846，2851.

[7] 鄭顧平，邢玥，張榮華.一種基于GPU的彈坑實時繪制方法[J].圖學(xué)學(xué)報，2016，37（4）：451-456.

[8] 任宏康，祝若鑫，李風(fēng)光，等.基于Three.js的真實三維地形可視化設(shè)計與實現(xiàn)[J].測繪與空間地理信息，2015，38（10）：51-54.

[9] 張榮華，鄭顧平.高逼真動態(tài)地形實時繪制中碰撞檢測的設(shè)計與實現(xiàn)[J].計算機應(yīng)用，2006，26（11）：2773-2774，2777.

[10] BEKKER M G. Introduction to terrain-vehicle systems [M]. Michigan： The University of Michigan Press， 1969.

（責(zé)任編輯：黃 健）endprint