鄭顧平+白若林

摘要：在3D場(chǎng)景繪制中，需要安裝插件才能夠?qū)崿F(xiàn)繪制效果，WebGL作為無(wú)須考慮插件的繪圖標(biāo)準(zhǔn)將3D場(chǎng)景帶入瀏覽器。針對(duì)動(dòng)態(tài)地形繪制中由插件造成的實(shí)用性與靈活性問(wèn)題，采用WebGL標(biāo)準(zhǔn)進(jìn)行動(dòng)態(tài)地形繪制。使用JavaScript文件格式實(shí)現(xiàn)幾何剪切圖算法的繪制過(guò)程，改進(jìn)there.js庫(kù)中的固有類實(shí)現(xiàn)物體之間的碰撞檢測(cè)問(wèn)題，再通過(guò)頂點(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

中圖分類號(hào)：TP317.4

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

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

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

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

由于WebGL是一種低等級(jí)的原生API，只有經(jīng)驗(yàn)豐富的3D程序員才可以完美駕馭WebGL，所以衍生出了一系列WebGL框架，應(yīng)用最廣泛的是there.js[4]。在there.js中，通過(guò)設(shè)置場(chǎng)景、對(duì)象、著色器、攝像機(jī)進(jìn)行圖形繪制。在圖形繪制過(guò)程中，用GLSL這一著色器語(yǔ)言完成著色器工作。WebGL支持的著色器只有頂點(diǎn)著色器與片元著色器。Three.js允許不定義著色器，而是采用默認(rèn)方法渲染，但在需要時(shí)，又可以使用自定義著色器。在繪制大規(guī)模地形時(shí)，可以通過(guò)there.js的默認(rèn)方法渲染，當(dāng)?shù)匦伟l(fā)生變化時(shí)，再通過(guò)設(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ù)，將高程圖過(guò)濾成共有L層的Clipmap金字塔，如圖1所示。選擇層次是依據(jù)視點(diǎn)距離，同一距離的地形緩存進(jìn)同一層次當(dāng)中，組成一組嵌套的規(guī)則網(wǎng)格，然后以視點(diǎn)為中心，隨視點(diǎn)移動(dòng)而移動(dòng)。在渲染過(guò)程中，隨著視點(diǎn)的移動(dòng)，將更新的數(shù)據(jù)送入顯卡進(jìn)行渲染。按照規(guī)則，層數(shù)L越小，系統(tǒng)渲染效率越高；相反，層數(shù)L越大，系統(tǒng)效率越低。通過(guò)GPU的頂點(diǎn)著色器對(duì)高度圖進(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值決定，對(duì)應(yīng)Geometry Clipmap算法中的z高程圖高度存儲(chǔ)值，實(shí)時(shí)檢測(cè)地形與其它模型發(fā)生的碰撞，根據(jù)其受力大小可推算出地形發(fā)生的形變大小，進(jìn)而更新平面頂點(diǎn)數(shù)組vertices 中的y值大小，代碼如下：

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

2.2 碰撞檢測(cè)算法

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

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

3 動(dòng)態(tài)地形實(shí)現(xiàn)

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

通過(guò)上述內(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為通過(guò)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é)語(yǔ)

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

參考文獻(xiàn)：

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

[2] 劉愛(ài)華，韓勇，張小壘，等.基于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].測(cè)繪與空間地理信息，2015，38（10）：51-54.

[9] 張榮華，鄭顧平.高逼真動(dòng)態(tài)地形實(shí)時(shí)繪制中碰撞檢測(cè)的設(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é)任編輯：黃 ?。〆ndprint