0、引言
受制于Web3D技術的瓶頸,傳統的用以實現三維WebGIS場景的Web3D技術,包括Flash\\(Flex\\)、Java3D、X3D等技術,都需要加載組件或者預先安裝客戶端 \\(或插件\\),而且具有顯示效果不佳、兼容性差等缺陷。
WebGL作為新一代Web3D圖形標準,具有不需要組件加載、渲染效果好、兼容性好等優點并且取得了眾多瀏覽器生產廠商的支持,具有以往技術無法比擬的優勢。本文在前人所做的眾多探索的基礎上,采用WebGL作為圖形引擎來展開無組件三維WebGIS場景系統的實現,比較了各種技術之間的優缺點,實驗驗證了WebGL是一種非常有效的實現三維WebGIS場景渲染的技術手段。
HTML5標準發布以來,已經有不少學者開展了基于此標準的GIS應用研究,但是多是以canvas的2D環境為圖形基礎,無法滿足三維WebGIS的應用要求,作為canvas的3D環境,WebGL具有能夠直接調用硬件圖形引擎,兼容性好等多種優點。
展開這一研究有著較大的現實意義和長遠的工程學意義。首先進行這項研究具有短期的現實意義,如果能夠找到一種不需要預先安裝客戶端或者加載組件的方法,可以避免大組件的安裝,用戶不再需要等待較長時間,大大提高了用戶體驗。其次進行這項研究有深遠的工程意義。人們一直以來都在進行三維WebGIS解決方案的研究和探索。
目前WebGL已經展現出了強大的生命力,國內外包括谷歌、諾基亞在內的多家企業都已經展開了基于WebGL的GIS展示端研究工作,有些公司甚至已經推出了相關GIS案例展示。如果本研究能夠證實WebGL是一個有效的實現Web3D場景構建的方式,將給WebGIS這一領域找到一種新的實現瀏覽器端三維場景構建的途徑,而且摒棄傳統技術的弊端,具有較高的商業和工程意義。
1、需求定義
本文以三維WebGIS的展示功能作為主要的功能性需求,所設計的三維WebGIS場景展示系統應具有如下功能:
\\(1\\)展示一個Web端的三維GIS基本場景,所有的GIS圖層元素將加載在基本場景上。
\\(2\\)場景能夠進行360°的全方位展示和移動,視角能夠進行放大和縮小。
\\(3\\)系統應該能夠實現所有基本的GIS圖層元素的生成、加載、卸載,按照一般GIS系統的要求,所能加載的GIS元素包括如下幾種:中英文文字標注,主要用于地名、興趣點等的標注;圖形標注,主要用于與文字標注相結合進行地點標示;矢量線,主要用于道路、河流、軌跡、境界等的標示;矢量面,主要用于區塊、行政區域、湖泊等的標示;三維模型,主要用于在場景中加載建筑、植被、公共設施、地形等;影像切片,主要用于基本地表的繪制。
本文的出發點是為了解決現有的三維WebGIS場景都需要加載或者預先安裝組件來實現的問題,以提高用戶體驗和交互性,因此系統應該具有如下的非功能性需求:
\\(1\\)不能加載任何組件或者插件;\\(2\\)具有較好的用戶體驗。
2、系統設計
目前業界已經有幾個較為成熟的基于WebGL的Java-Script三維圖形框架,較為流行的有Three.js、Oak3D等。為更加適用于WebGIS開發需求和減小腳本體積,本人決定拋棄這些龐大的框架,按照面向對象設計的理 論,以JavaScript為編程語言,建立一套應用與網頁的三維圖形庫。
2.1渲染流程
WebGL編程通過調用內嵌于瀏覽器中的WebGL上下文環境中的圖形接口進行圖形繪制,因此不再需要任何組件的加載。瀏覽器直接通過GPU進行硬件圖形加速。使用WebGL進行圖形繪制的流程如圖1所 示。首先,獲取WebGL上下文環境,根據著色器代碼片段創建著色器,一般包括頂點著色器 \\(VertexShader\\)和片元著色器 \\(Frag-mentShader\\),將著色器綁定給WebGL上下文,聯接之后生成WebGL program。接著為需要繪制的圖形對象創建頂點數組與顏色數組,如果使用索引方式構建面的話還要使用頂點索引數組,如果使用貼圖的話還要生成紋理對象以及頂點紋理坐標數組等。然后為WebGL上下文綁定著色器需要的這些數組以及紋理對象,同時要為WebGL上下文設置著色器需要的變量,包括投影矩陣、模型視圖矩陣等。最后調用WebGL的基本圖元繪制方法進行圖形對象的繪制。
2.2模塊劃分
為使圖1中的繪制流程適用于WebGIS場景的繪制,系統需要設計相應的頂點著色器以及片元著色器,以及用于數學向量矩陣運算的函數庫,和能夠進行各種GIS場景元素創建和繪制的GIS圖層元素類庫。因此系統將包括數學運算模塊、著色器、圖層元素模塊等3個主要部分。
3、詳細設計
3.1數學運算模塊
圖2是提供了基本圖形計算功能的數學運算模塊的類圖。該模塊包括經緯度坐標類Point2D和三維空間坐標類Point3D,它們提供了經緯度坐標以及三維空間坐標的相互轉換。也包括四維向量類Vector4f,提供向量乘法和加法運算。四階矩陣類Matrix44f,提控了四階矩陣的乘法運算以及逆運算。同時該模塊包含了透視投影矩陣類ProjPer-spective和正投影矩陣ProjOrtho,用以滿足系統對三維空間投影的需求。
3.2圖層元素模塊
根據圖1中WebGL的渲染流程,我為所有的場景元素設計了一個統一的創建和繪制流程,如圖3所示。首先根據圖層元素的需要進行對象初始化,例如獲取標注類型的文字標注信息、圖標路徑,矢量類型的頂點數據等。接著根據獲取到的數據進行各種buffer的創建,例如頂點數組、面的頂點索引數組、貼圖的紋理坐標數組、顏色數組等。
接著根據需要設置元素對象的透視投影矩陣和模型視圖矩陣。通常以場景的基本透視矩陣為元素的投影矩陣,場景的模型試圖矩乘以元素對象的模型變換矩陣作為元素對象最終的模型試圖矩陣。繪制的時候給著色器設置相關變量后,依次綁定前步生成的各種buffer以及投影矩陣和模型變換矩陣。最后調用WebGL的基本圖元繪制方法進行圖層元素的繪制。
統一的創建和繪制流程有利于進行場景元素對象的創建和統一繪制調用,同時有利于系統的擴展,因為圖層元素不能僅僅局限于上述的幾種。為使所有的場景元素能夠實現統一的創建和繪制流程,系統通過JavaScript原型繼承方法實現了圖層元素的面向對象設計。首先設計了一個BaseClass類作為所有類的基類,它提供了一個extend方法來實現JavaScript的原型繼承,該方法在執行的時候會將沒有經過重聲名的父類函數成員繼承給子類,同時為子類的原型添加新的函數成員。接著設計了一個所有場景元素類的基類RenderableObject,這個類相當于一個抽象類,包含了獲取program、buffer創建、設置矩陣和Draw方法等。這些方法都將在繼承了RenderableObject類的場景元素類中實現。
Draw方法包含了綁定buffer、綁定矩陣、設置貼圖、調用圖元繪制等子流程。這些類之間的關系如圖4所示,其中RenderableObjectList是為具有多個子對象的場景對象設計的場景元素類,通常用來表示整個圖層或者一組元素。
3.3場景渲染入口
系統設計了一個名為World的場景類,這個類中包含了一個WorldObjectList屬性,它是一個Renderable-ObjectList對象,場景的所有圖層元素對象都將加入到WorldObjectList中。另外World類實現了初始化WebGL上下文、初始化著色器、初始化世界矩陣、繪制場景等方法。繪制的時候將疊代的調用WorldObjectList中所有成員的Draw方法進行圖層元素繪制。由于上節所述的繼承關系的存在,各元素將自動調用自身所重寫的方法或者調用其父類中實現的方法。
4、系統實現
4.1系統界面
系統使用HTML5canvas作為渲染容器,由于無法同時獲取canvas得二維繪圖環境和WebGL三維繪圖環境,因此系統使用2個疊加的canvas標簽元素。其中canvas一個負責獲取WebGL的上下文環境進行基本場景、大氣、天空、經緯線、指南針、矢量線、矢量面以及模型元素的繪制。由于WebGL沒有提供文字的渲染接口,因此我們使用另外一個canvas獲取二維繪圖環境,用以進行比例尺、文字標注、圖形標注、圖文標注的繪制。
4.2著色器
著色器是用來替代固定渲染管線的可編輯圖像渲染程序,由WebGL基于OpenGLES2.0,著色器是系統必不可少的一部分。系統設計實現了簡單的頂點著色器和片元著色器,頂點著色器主要負責根據場景元素對象的頂點數組buffer以及模型視圖矩陣和投影矩陣生成頂點位置,并將獲取到的紋理坐標和頂點顏色傳遞給片元著色器,片元著色器根據這些信息生成各片元的顏色。
4.3其它關鍵技術實現
4.3.1多邊形的三角切分
在進行矢量面圖層元素VectorSurface的頂點buffer創建的時候,需要根據矢量面所提供的順序頂點序列將矢量面進行三角拆分。由于本文采用拆分算法的是環形追蹤算法,使用它進行三角拆分的運算時間復雜度比較高,在瀏覽器端使用JavaScript執行的時候所需要的時間更多,眾所周知JavaScript腳本的執行是單線程的,如果長時間的執行一個方法,將阻塞UI線程的執行,造成用戶界面卡死的現象,這會大大降低用戶體驗。
為了解決這一問題,系統采用了HTML5的新特性之一WebWorker來進行多線程的開啟。對多邊形的拆分運算將在開啟的新線程中執行,執行的結果即拆分好的三角形列表將作為對象返回到主線程中。這樣做的好處是大大提高了多邊形的拆分效率,減少了UI線程的等待時間,提高了用戶體驗。另外由于瀏覽器所能開啟的WebWorker的數量是有限的,即瀏覽器所能開啟的線程數量是有限的,一次開啟過多的線程會造成瀏覽器崩潰。因此系統設計了一個類似于線程池的WorkerPool類來進行WebWorker的管理。
4.3.2貼圖管理
圖形標注以及地表影像等需要使用到大量的紋理貼圖,這些貼圖經常出現大量重復的現象。為了優化影響切片加載,以及一般的圖片紋理的生成,系統作了一些優化,構建了一個ImageManager類來管理所有的圖片紋理,將所有已經加載的圖片和根據其生成的貼圖紋理保存在一個隊列中,當下次再重新使用到這個圖片的時候直接從隊列中取出相應的貼圖,系統將不再需要重新下載和重新生成紋理,一定程度上增加了渲染效率,提升了用戶體驗。
4.3.3大氣層模擬
一般來說大氣層的繪制需要使用霧化、離子系統等對圖形引擎性能要求較高的圖形技術。但是考慮到WebGL是運行在瀏覽器端,渲染性能有一定的限制,同時也為了降低瀏覽器的內存消耗,這里使用了一個小技巧,將一幅具有漸變顏色的圖片作為紋理貼在地球的邊緣外側,這樣視覺上將為地球添加了一個漂亮的大氣層。
5、實驗與分析
為充分驗證系統的有效性和可用性,本文共搜集整理出25組真實空間數據用于測試。測試數據按照用途可以分為基礎地理數據和油田地理數據2個類別,按照地理信息元素類型可以分為文本標注數據2組,圖文標注數據7組,矢量線數據9組,矢量面數據5組,模型數據1組,影像柵格數據1組。測試數據列表見表1。
經過測試,所有空間數據均能夠被系統創建并加載在三維場景當中。滿足了需求分析階段所提出的功能需求,表明WebGL能夠滿足三維地理信息系統所有元素類型的創建。圖5和圖6分別展示本位所構建的基本三維地球場景和加載了文本標注以及圖形標注的測試結果。圖6的場景中加載了國家首都、國家名稱、省市名稱、影像、大氣層等元素。
傳統的Web3D技術,Java3D技術需要用戶安裝Java運行環境,同時需要實時下載Applet小程序,Flash需要為瀏覽器安裝FlashPlayer插件,同時要加載swf文件。本系統所采用了WebGL技術,不再需要加載任何組件或者插件便能夠實現三維GIS場景在Web頁面上的展示,這是傳統Web3D技術無法比擬的優勢。
從性能方面來說,傳統的WebGIS顯示技術通常使用的是CPU來盡心圖形計算。一方面CPU相對于GPU的計算速度要低兩到三個數量級,因此傳統Web3D在性能上完全無法匹敵基于GPU計算的WebGL。另一方面,傳統技術無使用GPU這一極佳的運算器,WebGL則可以充分利用,將CPU從復雜費力的圖形運算中解放出來。經測試,本系統的動畫幀數能夠達到50幀以上,接近于最佳幀數60,而傳統的Flash技術幀數通常在30-40左右,一些基于網頁DOM元素的技術幀數甚至更低。
從兼容性方面來看,目前應用較廣的java和flash技術在瀏覽器端都具有較好的兼容性。但是,隨著移動互聯網技術的不斷發展和智能手機的不斷普及。移動Web領域已經不可避免的成為地理信息系統所要進軍的另一個領域。傳統技術在手機瀏覽器上的無法執行的,IOS甚至完全不支持Flash技術。
WebGL則不然,目前已經有多家手機和手機瀏覽器生產廠商宣布將對WebGL提供軟硬件方面的支持。這是未來WebGL的一個優勢。
6、結束語
三維WebGIS場景能夠提供相對于二維WebGIS更友好的用戶體驗和更加豐富有效的交互手段,在網頁上實現三維GIS,將能夠三維GIS帶入Web這一更加靈活、包容、豐富、用戶群更加龐大的領域。為地理信息系統產業的發展帶來強勁的推動作用。本文所設計的基于WebGL的三維場景系統在大量真實空間數據的測試中表現了良好的渲染效果。由此表明使用WebGL可以實現瀏覽器端三維場景的無組件繪制,WebGL作為一個新的WebGIS前端展示層的實現手段是完全可以勝任的。
