基于WebGL的海島環(huán)境場(chǎng)三維可視化

楊晨曦 王平 溫玉波馬華棟

(1.國家海洋局南海信息中心 廣州 510000;2.自然資源部海洋環(huán)境探測(cè)技術(shù)與應(yīng)用重點(diǎn)實(shí)驗(yàn)室 廣州 510000)

1 研究背景

海島數(shù)據(jù)三維可視化是指利用相關(guān)虛擬現(xiàn)實(shí)、3S(GPS、RS、GIS)和WebGIS等地理信息技術(shù)以及OpenGL和WebGL等計(jì)算機(jī)圖形技術(shù),對(duì)海島數(shù)據(jù)進(jìn)行三維展示,主要應(yīng)用于海島周邊風(fēng)場(chǎng)、流場(chǎng)、浪場(chǎng)和溫度場(chǎng)等環(huán)境場(chǎng)的三維實(shí)時(shí)動(dòng)態(tài)可視化。

目前國內(nèi)外對(duì)海洋環(huán)境場(chǎng)三維可視化平臺(tái)的研究主要分為2 個(gè)類型:①基于單機(jī)或C/S架構(gòu)的三維可視化平臺(tái)(如EV-Globe、OSG 和Google Ocean),其存在環(huán)境部署復(fù)雜、更新維護(hù)較難且定制平臺(tái)開發(fā)周期較長等弊端;②基于B/S架構(gòu)的三維可視化平臺(tái)(如Super Map、Three.js和Cesium),其避免單機(jī)或C/S架構(gòu)存在的問題,但存在渲染速度慢、人-機(jī)交互不流暢和可視化效果較差等弊端。

海洋環(huán)境場(chǎng)的可視化方法主要包括對(duì)標(biāo)量場(chǎng)和矢量場(chǎng)的可視化,由于矢量場(chǎng)能較好地展示環(huán)境場(chǎng)的變化情況,矢量場(chǎng)可視化方法逐漸成為熱門研究方向。矢量場(chǎng)可視化方法主要包括3 個(gè)類型。①基于幾何形狀的可視化方法,如點(diǎn)圖標(biāo)法[1]、矢量線和矢量面法[2-3]以及粒子流法[4-5]。李志煒等[6]構(gòu)建海洋時(shí)空過程對(duì)象并進(jìn)行紋理填充,以點(diǎn)、線、面、體的形式實(shí)現(xiàn)對(duì)海洋環(huán)境場(chǎng)的矢量化表達(dá);樊宇等[7]基于OSG 三維可視化平臺(tái),利用點(diǎn)圖標(biāo)映射法實(shí)現(xiàn)海洋風(fēng)場(chǎng)的動(dòng)態(tài)可視化;廖明[8]基于矢量場(chǎng)和WebGL 技術(shù)構(gòu)建多尺度動(dòng)態(tài)風(fēng)矢量場(chǎng),并以粒子流的方式實(shí)現(xiàn)鄱陽湖風(fēng)場(chǎng)的三維動(dòng)態(tài)可視化。點(diǎn)圖標(biāo)法以及矢量線和矢量面法等方法在表達(dá)環(huán)境場(chǎng)時(shí)欠缺連續(xù)性和特征性,粒子流法在表達(dá)大范圍和高精度環(huán)境場(chǎng)時(shí)存在計(jì)算量大和渲染速度慢等問題。②基于紋理的可視化方法,如點(diǎn)噪聲法[9]、線積分卷積法(LIC)[10]和基于圖像的流場(chǎng)可視化[11]。其中,LIC 的應(yīng)用最為廣泛,并衍生Fast LIC[12]、Volume LIC[13]、UFLIC[14]和OLIC[15]等眾多優(yōu)化算法。馬穎異等[16]基于LIC 和OLIC 算法,同時(shí)引入人類視覺感知理論,對(duì)模擬旋風(fēng)數(shù)據(jù)進(jìn)行可視化。該方法存在計(jì)算量巨大和計(jì)算效率較低等問題,難以滿足實(shí)時(shí)渲染的需求。③基于特征的可視化方法,即主要基于矢量場(chǎng)中的現(xiàn)象和變化等有意義的特征形狀進(jìn)行可視化。沈恩亞等[17]提出交互式模糊特征提取算法,實(shí)現(xiàn)對(duì)流程特征的三維可視化。該方法過于依賴環(huán)境場(chǎng)特征信息,在環(huán)境場(chǎng)特征信息不明顯時(shí),可視化效果較差。標(biāo)量場(chǎng)可視化方法主要包括顏色映射法、等值線法、等值面法和體繪制法:徐勝華等[18]構(gòu)建點(diǎn)和面的三維動(dòng)態(tài)模型,實(shí)現(xiàn)海洋環(huán)境標(biāo)量場(chǎng)的三維可視化;董文等[19]采用體繪制法構(gòu)建變高長方體模型,并采用等值線和顏色映射等方法,實(shí)現(xiàn)海洋環(huán)境標(biāo)量場(chǎng)的三維可視化。

近年來,隨著硬件設(shè)施和計(jì)算機(jī)圖形學(xué)的快速發(fā)展,B/S架構(gòu)下基于WebGL的可視化技術(shù)快速發(fā)展,基于WebGL對(duì)海洋環(huán)境場(chǎng)進(jìn)行三維可視化逐漸成為海洋數(shù)據(jù)可視化的研究熱點(diǎn)。本研究通過對(duì)海島環(huán)境場(chǎng)數(shù)據(jù)的處理分析,針對(duì)B/S架構(gòu)平臺(tái)存在的弊端,構(gòu)建顧及視角感知的多尺度變換模型和海島環(huán)境場(chǎng)可視化模型,同時(shí)利用GPU 快速計(jì)算和渲染技術(shù),實(shí)現(xiàn)B/S架構(gòu)下海島環(huán)境場(chǎng)的實(shí)時(shí)渲染展示。

2 海島環(huán)境場(chǎng)可視化模型

本研究針對(duì)海島環(huán)境場(chǎng)中的矢量場(chǎng)和標(biāo)量場(chǎng)提出高效的計(jì)算渲染模型。在矢量場(chǎng)表達(dá)中,構(gòu)建顧及視角感知的多尺度變換模型,并采用二階歐拉積分算法計(jì)算粒子運(yùn)動(dòng)對(duì)象,以粒子流的形式存儲(chǔ)矢量場(chǎng)的運(yùn)動(dòng)特征;在標(biāo)量場(chǎng)表達(dá)中,采用雙線性插值算法生成標(biāo)量場(chǎng)網(wǎng)格數(shù)據(jù);最終基于GPU 的三維渲染技術(shù),實(shí)現(xiàn)海島環(huán)境場(chǎng)的三維可視化(圖1)。

圖1 海島環(huán)境場(chǎng)三維可視化的流程

2.1 基于二階歐拉積分的粒子流算法

粒子追蹤屬于流體動(dòng)力學(xué)范疇,通過當(dāng)前粒子的位置和速度函數(shù),采用積分方法計(jì)算粒子軌跡,計(jì)算公式為:

式中:y(t+Δt)為粒子在t+Δt時(shí)刻的位置;v[p(t),t]為速度函數(shù)。

為使流線追蹤更加平滑,通過二階歐拉數(shù)值積分法對(duì)粒子進(jìn)行追蹤,從而得到粒子的運(yùn)動(dòng)模型,計(jì)算公式為:

在獲取粒子的運(yùn)動(dòng)模型后,須對(duì)粒子的生命周期進(jìn)行控制。本研究通過網(wǎng)格控制粒子的出生和消亡,在可視化時(shí)控制粒子的數(shù)量和密度(圖2)。

圖2 粒子運(yùn)動(dòng)控制的流程

2.2 基于線性插值的標(biāo)量場(chǎng)可視化算法

采用面繪制法對(duì)標(biāo)量場(chǎng)進(jìn)行可視化時(shí),因分辨率較低,會(huì)出現(xiàn)顆粒感和像素感。為解決該問題,使可視化效果更加平滑,本研究采用雙線性插值算法處理標(biāo)量場(chǎng)數(shù)據(jù),基本原理為根據(jù)當(dāng)前網(wǎng)格周圍的4 個(gè)值進(jìn)行插值分析,進(jìn)而得到當(dāng)前網(wǎng)格的值(圖3)。

圖3 雙線性插值

式中:f(N)函數(shù)為第N個(gè)網(wǎng)格點(diǎn)的值;x和y為當(dāng)前網(wǎng)格周圍網(wǎng)格的坐標(biāo)值。

基于以上模型進(jìn)行面繪制時(shí)須分級(jí)設(shè)色,在分級(jí)設(shè)色中為避免異常值導(dǎo)致分級(jí)不均勻,采用正態(tài)分布中距平均值3個(gè)標(biāo)準(zhǔn)差的值作為最大值和最小值參與分級(jí)計(jì)算,最終實(shí)現(xiàn)渲染顏色的平滑過渡。

2.3 顧及視角感知的多尺度變換模型

對(duì)于網(wǎng)頁端的渲染而言,屏幕空間是固定的,不會(huì)隨視角的改變而改變。然而視角的改變會(huì)改變地理空間,可視化的細(xì)節(jié)層次在不同地理空間下有所不同?；谠撛?本研究構(gòu)建顧及視角感知的多尺度變換模型,通過用戶視角的改變獲取當(dāng)前視角特征值,并基于視角特征值生成表達(dá)對(duì)象的細(xì)節(jié)層次。對(duì)于矢量場(chǎng)而言,粒子數(shù)量即細(xì)節(jié)層次。

當(dāng)視角足夠高或足夠低時(shí),人眼感知都將弱化。因此,本研究設(shè)定視角高度空間,當(dāng)超過視角高度空間時(shí),粒子數(shù)量將不再改變。基于以上樣本數(shù)據(jù),采用多項(xiàng)式擬合算法確定視角高度(h)與粒子數(shù)量(Particlesnums)之間的關(guān)系,計(jì)算公式為:

視角高度與粒子數(shù)量的關(guān)系如表1 和圖4所示。

表1 視角高度與粒子數(shù)量的關(guān)系

圖4 視角高度與粒子數(shù)量的關(guān)系

2.4 基于GPU 的三維渲染技術(shù)

傳統(tǒng)的基于CPU 進(jìn)行環(huán)境場(chǎng)渲染的計(jì)算速度過慢。本研究基于GPU 技術(shù),實(shí)現(xiàn)對(duì)矢量場(chǎng)的快速計(jì)算和實(shí)時(shí)渲染;對(duì)于標(biāo)量場(chǎng)的渲染,主要利用著色器原理,實(shí)現(xiàn)瀏覽器端標(biāo)量場(chǎng)的大范圍、多時(shí)相和海量數(shù)據(jù)的實(shí)時(shí)高效動(dòng)態(tài)可視化(圖5)。

圖5 標(biāo)量場(chǎng)渲染的流程

對(duì)于矢量場(chǎng)而言,首先重新組織矢量場(chǎng)數(shù)據(jù),并利用紋理的RGBA 顏色通道存儲(chǔ)原始數(shù)據(jù)和粒子位置信息;然后利用GPU 并行計(jì)算,將粒子追蹤和粒子渲染的過程由CPU 轉(zhuǎn)到GPU 執(zhí)行,極大地提升數(shù)據(jù)計(jì)算速度(圖6)。

圖6 矢量場(chǎng)渲染的流程

3 方法應(yīng)用

應(yīng)用上述方法,以海島和全球海洋2種尺度為研究區(qū)域,基于Java Script、WebGL、Open GL ES和.Net等技術(shù)研發(fā)三維可視化系統(tǒng)平臺(tái)。海洋環(huán)境場(chǎng)數(shù)據(jù)來自歐洲中期天氣預(yù)報(bào)中心,底層三維平臺(tái)為Cesium。選取某時(shí)刻的海洋環(huán)境場(chǎng)數(shù)據(jù)并對(duì)數(shù)據(jù)加密處理,生成基本紋理圖。

采用矢量場(chǎng)可視化方法對(duì)海島環(huán)境場(chǎng)和全球海洋環(huán)境場(chǎng)進(jìn)行三維動(dòng)態(tài)可視化,在海島小范圍和全球海洋大范圍2種尺度下進(jìn)行縮放、旋轉(zhuǎn)和傾斜時(shí),粒子數(shù)量和表達(dá)層次有明顯差異。在大尺度下能明顯表現(xiàn)矢量場(chǎng)的具體特征,而在小尺度下則能表現(xiàn)更多的細(xì)節(jié)信息。

為驗(yàn)證方法的性能,分別驗(yàn)證基于CPU 和基于GPU 三維渲染2種模式的渲染效率。根據(jù)對(duì)比結(jié)果,GPU 三維渲染模式的幀率最高可達(dá)60 FPS,60萬粒子數(shù)以下的幀率最低也可達(dá)31 FPS,與CPU 模式相比性能提升1.6～5.0倍,基本滿足實(shí)時(shí)渲染的需求。

與采用傳統(tǒng)方式的標(biāo)量場(chǎng)可視化效果相比,基于本方法的標(biāo)量場(chǎng)可視化能很好地克服顆粒感和像素感的問題,能對(duì)標(biāo)量場(chǎng)進(jìn)行平滑展示,同時(shí)能很好地突出海洋環(huán)境場(chǎng)與陸地的邊界,也能明顯展示海洋現(xiàn)象。

4 結(jié)語

本研究以海島環(huán)境場(chǎng)為研究對(duì)象,從標(biāo)量場(chǎng)可視化、矢量場(chǎng)可視化、多尺度變換和GPU 快速渲染4個(gè)方面入手,提出B/S架構(gòu)下海島環(huán)境場(chǎng)三維可視化的新方法,并將其延伸至全球海洋環(huán)境場(chǎng)的三維可視化。與傳統(tǒng)方法相比,本方法在計(jì)算速度、渲染效率和渲染效果等方面均有較大提升,在高密度粒子下也能實(shí)時(shí)高效渲染海洋環(huán)境場(chǎng)信息,可為網(wǎng)頁端海島環(huán)境場(chǎng)的仿真和三維動(dòng)態(tài)可視化等研究領(lǐng)域提供新的思路,同時(shí)可為海洋災(zāi)害預(yù)警和航線規(guī)劃等業(yè)務(wù)提供科學(xué)依據(jù)。

本研究主要關(guān)注海島環(huán)境場(chǎng)的三維可視化并取得較好效果,后續(xù)將繼續(xù)研究海島地形、海底地形以及水上/水下一體化等的三維可視化,并通過與海洋環(huán)境場(chǎng)的結(jié)合,更加真實(shí)和直觀地展示海島和海洋信息,為開展相關(guān)業(yè)務(wù)提供數(shù)據(jù)支持。