基于WebGL的三維地形可視化研究

謝 磊

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

0 引言

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

1 Web3D簡介

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

2 WebGL技術

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

3 WebGl可視化機制

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

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

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

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

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

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

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

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

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

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

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

圖2 三維地形可視化效果

5 結論

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

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

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

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

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

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

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