基于WebGL的動(dòng)態(tài)地形實(shí)時(shí)繪制
2018-01-09 13:46:49鄭顧平白若林
軟件導(dǎo)刊 2017年12期
鄭顧平+白若林
摘要：在3D場景繪制中，需要安裝插件才能夠?qū)崿F(xiàn)繪制效果，WebGL作為無須考慮插件的繪圖標(biāo)準(zhǔn)將3D場景帶入瀏覽器。針對動(dòng)態(tài)地形繪制中由插件造成的實(shí)用性與靈活性問題，采用WebGL標(biāo)準(zhǔn)進(jìn)行動(dòng)態(tài)地形繪制。使用JavaScript文件格式實(shí)現(xiàn)幾何剪切圖算法的繪制過程，改進(jìn)there.js庫中的固有類實(shí)現(xiàn)物體之間的碰撞檢測問題，再通過頂點(diǎn)著色器與片元著色器在GPU中完成地形繪制。實(shí)驗(yàn)結(jié)果證明，在WebGL上能夠?qū)崿F(xiàn)實(shí)時(shí)性與真實(shí)感并存的動(dòng)態(tài)地形效果。
關(guān)鍵詞：WebGL；地形繪制；Geometry Climaps
DOIDOI：10.11907/rjdk.172506
中圖分類號：TP317.4
文獻(xiàn)標(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)境下的動(dòng)態(tài)地形繪制技術(shù)是3D場景建模中的一個(gè)重要分支，在軍事仿真、經(jīng)濟(jì)、生活、娛樂等領(lǐng)域獲得了普遍應(yīng)用，例如軍事中戰(zhàn)場環(huán)境的三維視景仿真、三維游戲、影視特效制作等[1]。對軍事戰(zhàn)場的視景仿真而言，物理模型與地形狀態(tài)有直接或間接的相互作用，例如車輛運(yùn)行時(shí)在地面留下車轍印、炮彈彈坑等?，F(xiàn)在使用較多的Web3D技術(shù)在使用時(shí)需要安裝插件，對3D體驗(yàn)的實(shí)用性、靈活性造成了負(fù)面影響。WebGL技術(shù)作為一種3D繪圖標(biāo)準(zhǔn)，解除了插件帶來的困擾，將3D內(nèi)容帶入瀏覽器，并通過JavaScript與電腦中的圖形硬件進(jìn)行交流。本文針對在3D建模場景中，如何快速有效地使用WebGL標(biāo)準(zhǔn)實(shí)現(xiàn)動(dòng)態(tài)地形的繪制展開研究。
1 相關(guān)技術(shù)
本文主要采用的編程技術(shù)是HTML，3D繪圖標(biāo)準(zhǔn)是WebGL，地形算法是幾何剪切圖法（Geometry Clipmaps），并通過JavaScript、CSS等技術(shù)來實(shí)現(xiàn)3D網(wǎng)頁界面的編寫。
WebGL是在OpenGL ES 2.0 基礎(chǔ)上發(fā)展而來的，是一個(gè)跨平臺(tái)、免費(fèi)用于在Web瀏覽器創(chuàng)建三維圖形的API[2]。WebGL結(jié)合了JavaScript和HTML5，可以直接在HTML5的
由于WebGL是一種低等級的原生API，只有經(jīng)驗(yàn)豐富的3D程序員才可以完美駕馭WebGL，所以衍生出了一系列WebGL框架，應(yīng)用最廣泛的是there.js[4]。在there.js中，通過設(shè)置場景、對象、著色器、攝像機(jī)進(jìn)行圖形繪制。在圖形繪制過程中，用GLSL這一著色器語言完成著色器工作。WebGL支持的著色器只有頂點(diǎn)著色器與片元著色器。Three.js允許不定義著色器，而是采用默認(rèn)方法渲染，但在需要時(shí)，又可以使用自定義著色器。在繪制大規(guī)模地形時(shí)，可以通過there.js的默認(rèn)方法渲染，當(dāng)?shù)匦伟l(fā)生變化時(shí)，再通過設(shè)置頂點(diǎn)著色器和片元著色器進(jìn)行渲染。
2 基于WebGL的動(dòng)態(tài)地形繪制設(shè)計(jì)
2.1 算法描述
Geometry Clipmap算法是由斯坦福大學(xué)的Losasso和微軟研究組的Hoppe首次引入的、基于GPU的地形算法[5]。Geometry Clipmap算法是基于網(wǎng)格的LOD技術(shù)，將高程圖過濾成共有L層的Clipmap金字塔，如圖1所示。選擇層次是依據(jù)視點(diǎn)距離，同一距離的地形緩存進(jìn)同一層次當(dāng)中，組成一組嵌套的規(guī)則網(wǎng)格，然后以視點(diǎn)為中心，隨視點(diǎn)移動(dòng)而移動(dòng)。在渲染過程中，隨著視點(diǎn)的移動(dòng)，將更新的數(shù)據(jù)送入顯卡進(jìn)行渲染。按照規(guī)則，層數(shù)L越小，系統(tǒng)渲染效率越高；相反，層數(shù)L越大，系統(tǒng)效率越低。通過GPU的頂點(diǎn)著色器對高度圖進(jìn)行頂點(diǎn)紋理采樣，獲得高程數(shù)據(jù)后，使用GPU的光棧管道處理高程數(shù)據(jù)[6-7]。
Geometry Clipmap算法使用的數(shù)據(jù)結(jié)構(gòu)存儲(chǔ)在頂點(diǎn)紋理中，在金字塔每層中有N*N個(gè)幾何數(shù)據(jù)采樣點(diǎn)，每個(gè)點(diǎn)包含3個(gè)數(shù)據(jù)（x，y，z），x、y為常量頂點(diǎn)數(shù)據(jù)，z為高程圖高度存儲(chǔ)值。
地形的初始繪制利用Three.js提供的THREE.PlaneBufferGeometry加以實(shí)現(xiàn)[8]。在WebGL標(biāo)準(zhǔn)中采用右手笛卡兒坐標(biāo)系，所以三維地形的高程效果由THREE.PlaneBufferGeometry頂點(diǎn)數(shù)組vertices 中的y值決定，對應(yīng)Geometry Clipmap算法中的z高程圖高度存儲(chǔ)值，實(shí)時(shí)檢測地形與其它模型發(fā)生的碰撞，根據(jù)其受力大小可推算出地形發(fā)生的形變大小，進(jìn)而更新平面頂點(diǎn)數(shù)組vertices 中的y值大小，代碼如下：
為了在WebGL標(biāo)準(zhǔn)上實(shí)現(xiàn)Geometry Clipmap算法，創(chuàng)建Terrain函數(shù)，通過高程數(shù)據(jù)創(chuàng)建地圖大小、Clipmap層次與分片數(shù)繪制地形，其中高程數(shù)據(jù)從高度圖數(shù)據(jù)中進(jìn)行采集。
2.2 碰撞檢測算法
碰撞檢測在游戲設(shè)計(jì)、3D電影特效制作、機(jī)器人等領(lǐng)域有著廣泛應(yīng)用[9]。導(dǎo)彈在落到地面后才會(huì)生成彈坑現(xiàn)象，人在地面走過之后才會(huì)在經(jīng)過處留下腳印，在實(shí)現(xiàn)動(dòng)態(tài)地形繪制時(shí)，需要檢測物體與地面是否發(fā)生過碰撞。本文采用THREE.Raycaster類在WebGL中實(shí)現(xiàn)碰撞檢測。
THREE.Raycaster是there.js庫中用來實(shí)現(xiàn)對象拾取的類，通過Raycaster獲得鼠標(biāo)事件發(fā)生位置的圖形對象。Raycaster從字面上即可理解其工作原理是：從某個(gè)方向發(fā)射一條射線，穿過鼠標(biāo)所在的點(diǎn)，則這條射線經(jīng)過的對象即是鼠標(biāo)點(diǎn)擊的對象。在使用Raycaster檢測碰撞時(shí)，考慮方向不止一條。以需要進(jìn)行碰撞檢測的物體A中心為起點(diǎn)，向各個(gè)頂點(diǎn)（vertices）發(fā)出射線，然后檢查射線是否與其它物體相交。若射線與其它物體相交，檢查最近的一個(gè)交點(diǎn)與射線起點(diǎn)間的距離，如果該距離比射線起點(diǎn)至物體頂點(diǎn)間的距離小，則說明發(fā)生了碰撞。如上文所述的碰撞檢測只適用于中心物體形狀為球形的狀況，因此在繪制車轍時(shí)選取車輛為中心物體，可避免出現(xiàn)車輛碰到墻面導(dǎo)致無法檢測的情況。如圖2所示，當(dāng)d≤r時(shí)，物體與地面發(fā)生碰撞。為了解決物體與物體之間的碰撞，首先需要將車輛的本地坐標(biāo)乘以變換矩陣，得到車輛在世界坐標(biāo)系中的坐標(biāo)值，然后使用THREE.Raycaster創(chuàng)建檢測射線，通過.intersectObject檢測光線是否與物體相交，若相交，返回交點(diǎn)處坐標(biāo)。具體代碼如下：
3 動(dòng)態(tài)地形實(shí)現(xiàn)
動(dòng)態(tài)地形繪制流程如圖3所示。
通過上述內(nèi)容，在計(jì)算機(jī)端完成了Web端動(dòng)態(tài)地形的實(shí)現(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算法實(shí)現(xiàn)的地形繪制效果，本實(shí)驗(yàn)使用一張1 024*1 024的dds格式高程圖。將L設(shè)為4，N設(shè)為255。為了更方便地實(shí)現(xiàn)動(dòng)態(tài)地形繪制，圖5是在平面中實(shí)現(xiàn)的車轍效果。由于模型的數(shù)據(jù)量較大，載入模型的繪制幀頻率（如車轍繪制效果圖）平均在45PFS左右，靜態(tài)地形繪制時(shí)，幀頻率能夠保證在60PFS左右，都能成功地進(jìn)行圖形繪制。
4 結(jié)語
本文實(shí)現(xiàn)了基于WebGL的動(dòng)態(tài)地形渲染與繪制，通過Geometry Clipmaps算法在Web上完成了車轍地形繪制的效果。首先對Geometry Clipmaps算法及車輛與地形的碰撞檢測進(jìn)行了研究，通過對THREE.Raycaster的改進(jìn)，使其能夠完成物體之間的碰撞檢測并返回碰撞點(diǎn)坐標(biāo)，進(jìn)而通過“壓力沉陷”公式得到下陷深度，改進(jìn)對應(yīng)點(diǎn)的高程值，再通過頂點(diǎn)著色器與片元著色器完成地形繪制。由于there.js的開放性，整個(gè)繪制過程具有開放、免插件、跨平臺(tái)的優(yōu)勢，為用戶帶來了全新的良好體驗(yàn)。
參考文獻(xiàn)：
[1] 牛藝博.基于WebGL的地理信息三維可視化技術(shù)研究[D].蘭州：蘭州交通大學(xué)，2015.
[2] 劉愛華，韓勇，張小壘，等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實(shí)現(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的機(jī)器人3D環(huán)境下的運(yùn)動(dòng)學(xué)仿真[J].東北大學(xué)學(xué)報(bào)：自然科學(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] 蔡興泉，李鳳霞，李立杰，等.基于三角帶模板的車轍實(shí)時(shí)可視化方法[J].系統(tǒng)仿真學(xué)報(bào)，2006，18（10）：2843-2846，2851.
[7] 鄭顧平，邢玥，張榮華.一種基于GPU的彈坑實(shí)時(shí)繪制方法[J].圖學(xué)學(xué)報(bào)，2016，37（4）：451-456.
[8] 任宏康，祝若鑫，李風(fēng)光，等.基于Three.js的真實(shí)三維地形可視化設(shè)計(jì)與實(shí)現(xiàn)[J].測繪與空間地理信息，2015，38（10）：51-54.
[9] 張榮華，鄭顧平.高逼真動(dòng)態(tài)地形實(shí)時(shí)繪制中碰撞檢測的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(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
