基于WebGL的三維GIS空間算法的研究與實現

王星捷 衛守林

1(核工業西南物理研究院 四川 成都 610041) 2(成都理工大學工程技術學院 四川 樂山 614007) 3(昆明理工大學信息工程與自動化學院 云南 昆明 650093)

0 引 言

當前多數的Web端的GIS平臺主要以二維的為主，許多成熟的三維GIS平臺，都已經開發成產品，不僅加載Web三維場景地圖大多需要下載額外的插件來實現，而且需要昂貴的平臺使用費用。WebGL技術[1]可以直接利用硬件來渲染三維場景，不用下載額外的插件。現在雖然有許多關于利用WebGL技術來渲染[2]三維GIS場景的研究論文，但實現效果不太理想，大多只提供場景模型加載功能，沒有具體的二維地圖矢量數據的支撐，不能進行空間分析。而且只能實現單一的三維場景[3]，不能實現與二維數據的聯動等多方面的空間功能。

目前瀏覽器對WebGL提供支持，在未來WebGL與地理信息服務技術相結合是發展的趨勢。本文基于Web Graphics Library(WebGL)結合Geographic Informatica Service(地理信息服務)對三維數字城市技術進行了深入研究，設計了一套基于WebGL開發三維GIS的技術[4]，充分利用了WebGL與ArcGIS Server的結合，方便地實現了三維編輯、三維查詢[5]和三維分析等功能。由于三維模型[6]和三維場景的復雜性[7]，在實現的過程中出現了一些問題：(1) 系統在平移和旋轉時，二維空間數據處理和三維模型的顯示發生了位移，沒有保持空間信息的同步；(2) 實現路徑分析數據三維體現時，軌跡顯示效果差；(3) 在實現二、三維視圖切換，鷹眼滑動，三維漫游以及三維場景旋轉時，發現旋轉控制效果不理想，出現了偏移，坐標發生錯位。

針對上述的問題，本文重點研究和分析了二、三維空間數據同步算法，三維對象運動軌跡處理算法和三維漫游處理算法。

1 二、三維空間數據同步算法

二、三維空間數據同步是三維GIS空間分析的基本功能，基本原理是將二維空間數據與三維模型通過空間坐標進行同步的顯示。在小范圍的數據中，可以通過坐標實現同步，而面對較大的三維模型和二維空間數據時，當進行三維操作時，二、三維出現明顯的坐標偏差和錯位，當進行漫游和旋轉時，情況會更為嚴重。

為了讓二維空間數據與三維模型數據的同步[8]顯示，在通過空間坐標綁定的基礎上，結合在二維空間數據的map對象中的地圖范圍變化事件中綁定三維場景的相機同步控制函數。三維模型顯示二維數據需要對相機進行控制，實現的過程比較復雜。本文對二維空間數據控制三維場景相機的位置進行了算法計算。

在三維場景的使用的相機為透視投影相機[9]，因為相機視野中的物體尺寸會隨著與相機的距離變遠而變小，更接近于人眼觀察的效果，所以選用透視投影相機會達到更加逼真的效果。透視相機原理如圖1所示。

圖1 透視相機的觀察事物的原理

二維空間數據中的展示的地圖相當于三維場景的地面，為了保證相機俯視時看到的效果能與二維地圖顯示范圍一致，必須保證網頁中放置map對象的控件元素和Three.js的三維場景scene控件容器元素的長寬比例w/h保持一致。當二維地圖顯示范圍與scene控件顯示的地圖范圍一致時，假設相機的位置為P，相機的視角為θ，此時地面范圍的寬度W與相機高度H的關系如圖2所示。

圖2 根據地圖范圍確定相機位置

WebGL場景使用的是右手坐標系，Y軸向上。為了方便計算，將WebGL場景中的XZ坐標作為的經緯度坐標的映射。m(Xm，0，Zm)點為地圖范圍的中心點，同時也是相機位置P點在地面上的投影點。通過二維地圖map控件可以獲取到當前顯示的二維地圖的地理坐標范圍，再經過坐標轉換得到場景坐標的范圍為：

((Xmin,Zmin),(Xmax,Zmax))

可以得到范圍中心點的坐標為：

P點坐標的計算公式如下：

(1)

(2)

H、W的計算公式如下：

(3)

W=Zmax-Zmin

(4)

最終計算得到相機位置為：

當三維模型視圖與二維空間數據同步時，需要將場景中的相機移動到P點位置并向朝向Y軸負方向。

二、三維空間數據的同步，可以方便將ArcGIS Server服務中的二維地圖查詢、緩沖查詢、編輯、鄰近設施分析等功能移植到三維視圖，是實現三維數字城市基本功能的基本。

2 三維對象運動軌跡處理算法

物體的運動軌跡主要來自于路徑分析結果和二、三維空間數據同步時相機的運動軌跡。這些軌跡都是由分布不均的點集生成的折線，需要對軌跡線進行插值算法分析，使得到的軌跡變得平滑，使物體運動起來更加平緩。本文對運動軌跡進行插值時分別采用了樣條函數插值法和CatmullRom樣條函數插值法，對物體的運動軌跡進行插值和對比。CatmullRom樣條函數[10]與普通樣條函數的圖解如圖3所示。

圖3 CatmullRom樣條函數與普通樣條函數對比

可以看出一般的樣條函數生成的曲線只會接近控制點，不會穿過控制點，CatmullRom樣條函數會穿過每一個控制點，而三維路徑分析和漫游需要經過每一個道路線的拐點(控制點)，所以選用CatmullRom樣條函數來對物體的運動軌跡進行插值。

插值完成后得到路徑為一條平滑的曲線，這時只需在場景渲染時的每一幀讀取樣條函數上對應的坐標點坐標，再將移動的物體的坐標設置為讀取到的坐標，每一幀都執行此操作，就可以實現物體在場景中按照插值軌跡的進行平滑的移動。

3 三維漫游處理算法

三維漫游無非是平移、縮放、旋轉等操作，而旋轉是實現三維運動處理的關鍵的部分。旋轉的過程是物體從初始狀態，經歷旋轉，達到結束狀態。在三維空間中控制物體旋轉有三種方式：歐拉角[11]、旋轉矩陣和四元數[12]。

歐拉角：這是最直觀也最容易理解的旋轉表達方式，物體從初始狀態到結束狀態可以將物體分別繞x、y、z軸按順序旋轉不同的角度完成。一共用三個旋轉值和一個旋轉順序表示：

(x,y,z,order)

其中，x、y、z分別表示物體繞x、y、z軸旋轉的角度。order表示三次旋轉的順序。當用歐拉角控制[13]對象旋轉時其實需要將物體繞三個坐標軸的三次旋轉，并且如果旋轉的順序不同得到的結果也不相同，一個歐拉角的參數中包含繞三個坐標軸旋轉的角度和三次旋轉的順序四個參數。除了三次旋轉中兩次為零情況，直接進行線性插值無法得到線性旋轉軌跡，也就是說當相機按得到的旋轉軌跡旋轉時可能會出現抖動的現象，出現這種情況的原因被稱之為萬向節鎖。

旋轉矩陣：其實無論經歷怎樣的旋轉物體都可以通過繞一個特定的旋轉軸按一定方向旋轉一定角度來達到結束狀態。也就是繞一個向量旋轉一個角度，但是旋轉矩陣中變化參數比較多，對于計算和控制狀態并不是那么容易。

四元數：四元數描述旋轉的原理和旋轉矩陣類似[14]，區別就是四元數就引入了復數的思想，對復數進行了延伸，可以把它看成一個四維復數，同樣將一個旋轉軸和一個繞它變化的角度進行變形，使之成為一個四元數，一共有四個值。這樣可以遵循復數的運算，包括加減乘除以及積分等等。

使用四元數法控制物體旋轉時物體只需進行一次旋轉，所有的旋轉是繞著一條直線旋轉一定角度。只要指定好這條直線，再指定一個角度即可控制物體的旋轉。一個四元數需要的參數有三個直線表達式和旋轉的角度值，共含四個參數。四元數旋轉坐標表示如下：

{x:kx×sin(a/2),y:ky×sin(a/2),

z:kz×sin(a/2),w:cos(a/2)}

其中，a代表繞軸(kx,ky,kz)旋轉的角度)，轉換成復數形式為：

cos(a/2)+(kx×sin(a/2))i+(ky×sin(a/2))j+

(kz×sin(a/2))k

這里的i、j、k表示虛數單位，僅僅代表他們分別處于不同的維度，不代表具體值。這樣以來就可以實現對旋轉進行疊加、加速等效果的控制，計算起來比歐拉角(三次旋轉的合成)和旋轉矩陣(四元數變形的更多的變量的矩陣形式)更加簡單[15]。

通過上面的解釋，四元數的表達式可分解為kx、ky、kz、angle，設角度a為angle。而歐拉角的表達式無法分解，設它的表達式為(x,y,z,‘xyz’),‘xyz’只表示順序不表示數值，因為三個參數都是角度值，具有實際意義無法分解，那么參數有三個，設置讓三位場景中的物體繞指定向量勻速旋轉，旋轉過程如圖4所示。

圖4 測試對象x,y,z軸的旋轉狀態

以下四元數表達式各參數和歐拉角表達式各參數數據采集自該對象繞單位向量(0.826 803,0.447 628,0.340 626)勻速旋轉一周的不同時間點采集到的參數數值。如表1、表2所示。

表1 四元數表達式各參數的在旋轉中的數值

續表1

表2 歐拉角表達式各參數的在旋轉中的數值

續表2

從表1、表2中的數據可以看出，從初始到結束狀態四元數表達式和歐拉角表達式各個參數值的變化情況，四元數表達式參數中只有一個角度angle在呈線性變化，而歐拉角的三個參數都在同時進行變化，但是變化規律并不統一。將表1、表2中的數據繪制成數值變化圖，如圖5所示。

從圖5中很直觀分析出，四元數可以通過對角度參數進行簡單的線性插值就可以實現旋轉控制，而使用歐拉角表達式來控制物體旋轉狀態卻不能用簡單的線性差值來實現，如果要使用歐拉角來控制旋轉，那么就要分別求出每一個xyz每次旋轉角度的變化規律，顯然復雜程度比四元數高出了很多。

上述的數據只是簡單的繞一根軸勻速旋轉，是最簡單的旋轉過程，即使是最簡單的旋轉過程也很難使用歐拉角表達式通過特定的差值規則來控制旋轉，其實物體在實際情景下的旋轉過程是多方位的旋轉，在轉動過程中并不只是在繞某一個旋轉軸勻速旋轉，而是不斷在改變旋轉軸和速度。截取一個盡可能短的時間段，可以把這個時間段的旋轉近似看成不變的，可以使用四元數表達式和歐拉角來表達此時的旋轉，這個動作就可以看成旋轉軸在不斷旋轉，旋轉速度不斷變化的旋轉組合，同時把這些旋轉看成旋轉軸也在不停地旋轉。使用四元數表示旋轉，可以使用四元數特有的加減乘除運算法則來計算出每個時段旋轉的四元數最終表達，在三維場景中使用這個最終表達來設置物體在對應時段的旋轉狀態，就可以達到對物體旋轉的很好控制，可以對四元數運用一些現有的插值算法來控制物體平滑旋轉。而歐拉角并不能夠像四元數這樣找出規律并應用運算規則，旋轉中，歐拉角三個值都在不停變換，僅僅表示一個旋轉狀態，用來描述和控制物體旋轉過程很難找出其特定的規律。

與歐拉角相比四元數描述旋轉的優勢如下：插值結果為線性軌跡，沒有萬向節鎖，具有唯一表達式。而歐拉角旋轉順序不同會有多種不同的表達式。

選用四元數法來控制物體的旋轉，只需要對物體的旋轉狀態和最終旋轉狀態的四元數表達式進行線性插值，場景在渲染每一幀時為物體應用每一個插值點的四元數變換，就能保證物體旋轉的平滑過渡。

4 實驗與分析

本文測試的數據是一個某小城市的數據，范圍大小為10平方公里，模型數量超過5 000個，其中矢量面拉伸生成的模型1 421個，導入外部模型3 600多個，按平臺設計需要還包含每個建筑物的高程數據、模型參數(路徑、大小、旋轉)、道路寬度、建筑物名稱等必要屬性數據。

(1) 二、三維空間數據同步分析 利用二、三維空間數據同步算法計算出二維地圖當前顯示范圍的場景中相機對應的位置，同時利用三維對象運動控制算法對相機的運動過程進行插值計算。讓場景中的相機能夠動畫過渡到根據二維地圖顯示范圍計算出的相機位置。從而實現視圖同步。二、三維視圖同步效果如圖6所示。

圖6 二、三維空間數據同步效果

(2) 運動軌跡分析對比 用路徑分析生成的路線來測試運動軌跡，圖5中展示了采用普通樣條插值處理和CatmullRom樣條插值處理的不同效果。從圖7(a)中可以看出,普通樣條插值處理的效果，體現為折線，特別是在轉角處的處理比較粗糙，沒有完全經過控制點，只是接近。從圖7(b)中可以看出，CatmullRom樣條插值處理的效果較好，體現了平滑的路徑曲線，并且通過了每一個路徑坐標控制點。

(a) 普通樣條插值處理

(b) CatmullRom樣條插值處理圖7 三維對象運動軌跡處理效果

5 結 語

本文在基于WebGL的實現三維GIS技術基礎上，對二、三維空間數據同步算法、三維對象運動軌跡處理算法和三維漫游處理算法進行了分析和研究。 分析了二、三維視圖同步算法的原理，并設計了對應的模型和算法；分析和研究了軌跡處理的算法；詳細分析了三維漫游處理算法和實現過程。最終通過實驗分析和數據對比，證明了本文設計和研究算法的科學性，同時通過展示的效果，證明了本文研究的場景控制算法達到了預計的效果。本文研究的三維視圖算法具有實際應用和研究的價值，實現的技術為三維數字城市的開發提供了技術參考和理論依據。