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

謝 磊

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

0 引言

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

1 Web3D簡介

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

2 WebGL技術

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

3 WebGl可視化機制

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

4 系統實現步驟

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

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

圖1 WebGL程序的執行流程

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

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

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

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

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

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

圖2 三維地形可視化效果

5 結論

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

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

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

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

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

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

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