謝 磊

（中國礦業(yè)大學(xué)〈北京〉地球科學(xué)與測繪工程學(xué)院，中國 北京100083）

0 引言

隨著計算機(jī)技術(shù)和網(wǎng)絡(luò)技術(shù)的快速發(fā)展，Web3D成了時下最熱門的研究方向之一。特別是當(dāng)互聯(lián)網(wǎng)進(jìn)入Web2.0時代后，Web應(yīng)用漸漸走進(jìn)人們的視線，并逐步占據(jù)主導(dǎo)地位。在GIS領(lǐng)域，三維GIS是目前GIS技術(shù)研究的主流方向之一，其中三維地形可視化[1]的研究是三維GIS研究的一個重要組成部分。對于GIS來說，地形、地貌是一個必不可少的重要組成部分，地形和人類活動息息相關(guān)，無論是在軍事上還是科學(xué)研究中都離不開對地形的研究。在互聯(lián)網(wǎng)時代，基于網(wǎng)絡(luò)的三維地形可視化也就成了時代的呼喚。

1 Web3D簡介

WEB3D是一種在虛擬現(xiàn)實(shí)技術(shù)的基礎(chǔ)上，利用3D互聯(lián)網(wǎng)平臺對現(xiàn)實(shí)世界中的有形物品進(jìn)行建模及三維立體展示并可實(shí)現(xiàn)互動瀏覽操作的一種虛擬現(xiàn)實(shí)技術(shù)[2]。目前國內(nèi)外Web3D主流技術(shù)有VRML、X3D、Java3D、Flash3D、O3D等。VRML適合幾何體的建模,但它幾乎不進(jìn)行任何的模型縮、不便于處理龐大紋理貼圖數(shù)據(jù)。隨后VRML組織制訂了新的三維繪圖標(biāo)準(zhǔn)——Extensible 3D(X3D)。但最終由于各瀏覽器對X3D支持不統(tǒng)一,且X3D的可編程體驗(yàn)較差,最終被Java3D與Flash3D取代。但Java3D與Flash3D均需在客戶端安裝特別的瀏覽器插件,JavaSD需要安裝Java虛擬機(jī)運(yùn)行環(huán)境,而Flash3D同樣需要安裝Actionscript虛擬機(jī)。強(qiáng)制用戶安裝插件的做法不太友好,且插件的更新以及安全問題,也一直是備受困擾的問題。雖然Java3D、FlashSD等基于CPU的建模語言已經(jīng)比較成熟,但隨著高端圖形卡的普及,程序員期望建模語言能夠充分利用客戶端的GPU資源,而節(jié)省客戶端CPU資源以進(jìn)行其它的計算,03D應(yīng)運(yùn)而生。03D是由Google公司發(fā)布的一個全新API,是一種基于網(wǎng)頁的可控3D標(biāo)準(zhǔn)。但是使用O3D依然需要安裝插件。如何構(gòu)建一種開放的、跨平臺的、免插件的Web3D技術(shù)一直未得到較好的解決，直到WebGL[3]的出現(xiàn)完美的解決了上述問題。

2 WebGL技術(shù)

2009年8月Khronos提出WebGL繪圖技術(shù)，它是一個跨平臺、免費(fèi)的、用于在Web瀏覽器創(chuàng)建三維圖形的API[4]。WebGL是基于OpenGLES2.0標(biāo)準(zhǔn)，并使用OpenGL著色語言GLSL，而且還提供了類似于標(biāo)準(zhǔn)的OpenGL的API[4]。WebGL可以直接在HTML5的Canvas元素中繪制三維動畫并提供硬件三維加速渲染，利用WebGL實(shí)現(xiàn)Web3D不需要安裝瀏覽器插件[5]，只需要編寫網(wǎng)頁代碼即可實(shí)現(xiàn)三維圖像的展示。相對其他Web3D的實(shí)現(xiàn)方式，WebGL的優(yōu)勢主要表現(xiàn)在：它完美地解決了現(xiàn)有Web交互式三維動畫對插件的依賴和不支持GPU加速兩個問題。

3 WebGl可視化機(jī)制

WebGL內(nèi)嵌于canvas標(biāo)簽內(nèi)。canvas是Html5中的新概念,它支持采用Javascript繪制2D圖形與通過WebGL繪制3D圖形。WebGL API是OpenGL ES2.0的一個子集,其著色器語言采用GLSL。WebGL的繪制管線與OpenGL的繪制管線相似,但在具體實(shí)施細(xì)節(jié)稍有不同。下圖是WebGL的繪制流程圖。

4 系統(tǒng)實(shí)現(xiàn)步驟

在進(jìn)行WebGL編程之前,首先需要開啟瀏覽器對WebGL的支持,本文以Chrome瀏覽器為例,右鍵點(diǎn)擊Chrome瀏覽器快捷方式,選擇“屬性”。在“目標(biāo)(T)”框內(nèi),雙引號的后邊,輸入以下內(nèi)容即可：

-enable-webgl-ignore-gpu-blacklist-allow-file-access-from-files

圖1 WebGL程序的執(zhí)行流程

首先在繪制之前需要獲取WebGL的繪制環(huán)境(繪制上下文)?？赏ㄟ^調(diào)用canvas元素的getContext(“webgl”)方法獲得WebGL的繪制環(huán)境。具體代碼如下：

獲得WebGL上下文之后,開始準(zhǔn)備數(shù)據(jù),用戶可以自己編寫數(shù)據(jù),但最終數(shù)據(jù)要存儲在WebGL識別的顯存區(qū)(Buffer),本系統(tǒng)原型中需要頂點(diǎn)數(shù)組與頂點(diǎn)索引數(shù)組。下面是WebGL創(chuàng)建數(shù)據(jù)緩沖區(qū)的示例：

bindBuffer()的第一個參數(shù)用于指定存儲區(qū)類型。頂點(diǎn)數(shù)據(jù)：ARRAY_BUFFER;索引數(shù)據(jù)：ELEMENT_ARRAY_BUFFER.

bufferData()將js中的數(shù)據(jù)“拷貝”到WebGL緩沖中,在數(shù)據(jù)格式轉(zhuǎn)換時可以采用強(qiáng)制轉(zhuǎn)換。

WebGL繪圖的難點(diǎn)是著色器的配置,WebGL中有兩種著色器：頂點(diǎn)著色器、片段著色器：頂點(diǎn)著色器用于處理頂點(diǎn)的位置;片段著色器用于處理頂點(diǎn)的顏色。著色器用WebGL函數(shù)createShader()創(chuàng)建。該函數(shù)接收一個參數(shù),用于指定要創(chuàng)建的著色器的類型。

著色器編寫完成后,最后進(jìn)行圖元繪制,即將片元送入喊緩沖區(qū)Frame Buffer,Frame Buffer不像其它緩沖區(qū)那樣真實(shí)存在,它只是一個邏輯概念,幀緩沖區(qū)的有關(guān)操作,包括設(shè)置清除色、設(shè)置WebGL深度檢測等繪制狀態(tài)及繪制環(huán)境。WebGL繪制函數(shù)為drawArrays(mode,first,count)或drawElements(mode,count,type,offset)。繪制完成后的效果圖如下。

圖2 三維地形可視化效果

5 結(jié)論

由于WebGL是一個開放式的標(biāo)準(zhǔn)，它的出現(xiàn)推動了無插件網(wǎng)絡(luò)三維發(fā)展的熱潮，基于WebGL技術(shù)開發(fā)的高性能網(wǎng)絡(luò)交互式三維系統(tǒng)為網(wǎng)絡(luò)三維用戶提供了更便捷的實(shí)現(xiàn)方案。由此，WebGL開啟了免插件網(wǎng)絡(luò)三維的新格局。大量帶有Web交互式的網(wǎng)絡(luò)三維會相繼推出無插件版本，而對于沒有管理員權(quán)限安裝插件或使用設(shè)備沒有對應(yīng)插件的用戶來說，WebGL是完美的解決方案。對于Web開發(fā)人員來說，WebGL的提出意味著頁面內(nèi)容開發(fā)成本的進(jìn)一步降低，開發(fā)人員可以很容易地做到同一段代碼在跨平臺體驗(yàn)上的一致性。大量的基于WebGL的庫的出現(xiàn)，也會把在桌面應(yīng)用中的開發(fā)經(jīng)驗(yàn)很好地遷移到Web應(yīng)用的開發(fā)中去。最重要的是，由于Web交互式三維動畫成了頁面的一部分，而不是作為單獨(dú)的一個插件而存在，它與頁面上其他內(nèi)容的交互性就會更強(qiáng)。

本文通過WebGL技術(shù)實(shí)現(xiàn)網(wǎng)絡(luò)三維地形可視化，展現(xiàn)了WebGL技術(shù)與平臺無關(guān)，簡便高效，具有良好的Web交互性，是一種實(shí)現(xiàn)Web3D可視化良好的技術(shù)手段。相信WebGL技術(shù)必將在3D可視化領(lǐng)域得到廣泛應(yīng)用，為3D實(shí)現(xiàn)帶來更多便利和驚喜。

［1］蔡曉春,胡桂蘭.基于Web的DEM地形環(huán)境可視化開發(fā)[J].空間電子技術(shù),2004(2).

［2］韓義.Web3D及Web三維可視化新發(fā)展：以WebGL和O3D為例[J].科技廣場,2010(5).

［3］劉愛華,韓勇,張小壘,等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實(shí)現(xiàn)[J].地理空間信息,2012(5).

［4］Khronos Group.http：//www.khronos.org/webcl/[OL].

［5］張玲.基于WebGL技術(shù)和Oak3D引擎的交互式三維地球模型研究[J].軟件導(dǎo)刊,2014(2)：153-155.