基于WebGL的三維GIS空間算法的研究與實(shí)現(xiàn)

王星捷 衛(wèi)守林

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

0 引 言

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

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

針對上述的問題，本文重點(diǎn)研究和分析了二、三維空間數(shù)據(jù)同步算法，三維對象運(yùn)動(dòng)軌跡處理算法和三維漫游處理算法。

1 二、三維空間數(shù)據(jù)同步算法

二、三維空間數(shù)據(jù)同步是三維GIS空間分析的基本功能，基本原理是將二維空間數(shù)據(jù)與三維模型通過空間坐標(biāo)進(jìn)行同步的顯示。在小范圍的數(shù)據(jù)中，可以通過坐標(biāo)實(shí)現(xiàn)同步，而面對較大的三維模型和二維空間數(shù)據(jù)時(shí)，當(dāng)進(jìn)行三維操作時(shí)，二、三維出現(xiàn)明顯的坐標(biāo)偏差和錯(cuò)位，當(dāng)進(jìn)行漫游和旋轉(zhuǎn)時(shí)，情況會(huì)更為嚴(yán)重。

為了讓二維空間數(shù)據(jù)與三維模型數(shù)據(jù)的同步[8]顯示，在通過空間坐標(biāo)綁定的基礎(chǔ)上，結(jié)合在二維空間數(shù)據(jù)的map對象中的地圖范圍變化事件中綁定三維場景的相機(jī)同步控制函數(shù)。三維模型顯示二維數(shù)據(jù)需要對相機(jī)進(jìn)行控制，實(shí)現(xiàn)的過程比較復(fù)雜。本文對二維空間數(shù)據(jù)控制三維場景相機(jī)的位置進(jìn)行了算法計(jì)算。

在三維場景的使用的相機(jī)為透視投影相機(jī)[9]，因?yàn)橄鄼C(jī)視野中的物體尺寸會(huì)隨著與相機(jī)的距離變遠(yuǎn)而變小，更接近于人眼觀察的效果，所以選用透視投影相機(jī)會(huì)達(dá)到更加逼真的效果。透視相機(jī)原理如圖1所示。

圖1 透視相機(jī)的觀察事物的原理

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

圖2 根據(jù)地圖范圍確定相機(jī)位置

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

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

可以得到范圍中心點(diǎn)的坐標(biāo)為：

P點(diǎn)坐標(biāo)的計(jì)算公式如下：

(1)

(2)

H、W的計(jì)算公式如下：

(3)

W=Zmax-Zmin

(4)

最終計(jì)算得到相機(jī)位置為：

當(dāng)三維模型視圖與二維空間數(shù)據(jù)同步時(shí)，需要將場景中的相機(jī)移動(dòng)到P點(diǎn)位置并向朝向Y軸負(fù)方向。

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

2 三維對象運(yùn)動(dòng)軌跡處理算法

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

圖3 CatmullRom樣條函數(shù)與普通樣條函數(shù)對比

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

插值完成后得到路徑為一條平滑的曲線，這時(shí)只需在場景渲染時(shí)的每一幀讀取樣條函數(shù)上對應(yīng)的坐標(biāo)點(diǎn)坐標(biāo)，再將移動(dòng)的物體的坐標(biāo)設(shè)置為讀取到的坐標(biāo)，每一幀都執(zhí)行此操作，就可以實(shí)現(xiàn)物體在場景中按照插值軌跡的進(jìn)行平滑的移動(dòng)。

3 三維漫游處理算法

三維漫游無非是平移、縮放、旋轉(zhuǎn)等操作，而旋轉(zhuǎn)是實(shí)現(xiàn)三維運(yùn)動(dòng)處理的關(guān)鍵的部分。旋轉(zhuǎn)的過程是物體從初始狀態(tài)，經(jīng)歷旋轉(zhuǎn)，達(dá)到結(jié)束狀態(tài)。在三維空間中控制物體旋轉(zhuǎn)有三種方式：歐拉角[11]、旋轉(zhuǎn)矩陣和四元數(shù)[12]。

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

(x,y,z,order)

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

旋轉(zhuǎn)矩陣：其實(shí)無論經(jīng)歷怎樣的旋轉(zhuǎn)物體都可以通過繞一個(gè)特定的旋轉(zhuǎn)軸按一定方向旋轉(zhuǎn)一定角度來達(dá)到結(jié)束狀態(tài)。也就是繞一個(gè)向量旋轉(zhuǎn)一個(gè)角度，但是旋轉(zhuǎn)矩陣中變化參數(shù)比較多，對于計(jì)算和控制狀態(tài)并不是那么容易。

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

使用四元數(shù)法控制物體旋轉(zhuǎn)時(shí)物體只需進(jìn)行一次旋轉(zhuǎn)，所有的旋轉(zhuǎn)是繞著一條直線旋轉(zhuǎn)一定角度。只要指定好這條直線，再指定一個(gè)角度即可控制物體的旋轉(zhuǎn)。一個(gè)四元數(shù)需要的參數(shù)有三個(gè)直線表達(dá)式和旋轉(zhuǎn)的角度值，共含四個(gè)參數(shù)。四元數(shù)旋轉(zhuǎn)坐標(biāo)表示如下：

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

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

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

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

(kz×sin(a/2))k

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

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

圖4 測試對象x,y,z軸的旋轉(zhuǎn)狀態(tài)

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

表1 四元數(shù)表達(dá)式各參數(shù)的在旋轉(zhuǎn)中的數(shù)值

續(xù)表1

表2 歐拉角表達(dá)式各參數(shù)的在旋轉(zhuǎn)中的數(shù)值

續(xù)表2

從表1、表2中的數(shù)據(jù)可以看出，從初始到結(jié)束狀態(tài)四元數(shù)表達(dá)式和歐拉角表達(dá)式各個(gè)參數(shù)值的變化情況，四元數(shù)表達(dá)式參數(shù)中只有一個(gè)角度angle在呈線性變化，而歐拉角的三個(gè)參數(shù)都在同時(shí)進(jìn)行變化，但是變化規(guī)律并不統(tǒng)一。將表1、表2中的數(shù)據(jù)繪制成數(shù)值變化圖，如圖5所示。

從圖5中很直觀分析出，四元數(shù)可以通過對角度參數(shù)進(jìn)行簡單的線性插值就可以實(shí)現(xiàn)旋轉(zhuǎn)控制，而使用歐拉角表達(dá)式來控制物體旋轉(zhuǎn)狀態(tài)卻不能用簡單的線性差值來實(shí)現(xiàn)，如果要使用歐拉角來控制旋轉(zhuǎn)，那么就要分別求出每一個(gè)xyz每次旋轉(zhuǎn)角度的變化規(guī)律，顯然復(fù)雜程度比四元數(shù)高出了很多。

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

與歐拉角相比四元數(shù)描述旋轉(zhuǎn)的優(yōu)勢如下：插值結(jié)果為線性軌跡，沒有萬向節(jié)鎖，具有唯一表達(dá)式。而歐拉角旋轉(zhuǎn)順序不同會(huì)有多種不同的表達(dá)式。

選用四元數(shù)法來控制物體的旋轉(zhuǎn)，只需要對物體的旋轉(zhuǎn)狀態(tài)和最終旋轉(zhuǎn)狀態(tài)的四元數(shù)表達(dá)式進(jìn)行線性插值，場景在渲染每一幀時(shí)為物體應(yīng)用每一個(gè)插值點(diǎn)的四元數(shù)變換，就能保證物體旋轉(zhuǎn)的平滑過渡。

4 實(shí)驗(yàn)與分析

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

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

圖6 二、三維空間數(shù)據(jù)同步效果

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

(a) 普通樣條插值處理

(b) CatmullRom樣條插值處理圖7 三維對象運(yùn)動(dòng)軌跡處理效果

5 結(jié) 語

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