大規(guī)模電離層格網(wǎng)數(shù)據(jù)快速可視化渲染方法

馬寶田MA Bao-tian；薛勇XUE Yong；陳杰CHEN Jie；羅勝LUO Sheng

（①中國(guó)電波傳播研究所，青島 266108；②北京特種工程設(shè)計(jì)研究所，北京 100028；③瑞測(cè)（江蘇）空間信息技術(shù)有限公司，南通 226020）

0 引言

電離層作為地球空間環(huán)境的重要組成部分，監(jiān)測(cè)它的動(dòng)態(tài)變化是一項(xiàng)常規(guī)且重要的任務(wù)。利用全球衛(wèi)星導(dǎo)航系統(tǒng)（GNSS）觀測(cè)數(shù)據(jù)來(lái)建立電離層模型是一種行之有效的技術(shù)手段，由此而得到的電離層數(shù)據(jù)產(chǎn)品存在維度廣、數(shù)量大、構(gòu)造復(fù)雜的特點(diǎn)。要想更為清晰快速地認(rèn)識(shí)和理解電離層態(tài)勢(shì)，傳統(tǒng)的二維平面圖表已經(jīng)無(wú)法滿足需求，而3DGIS 技術(shù)作為當(dāng)前GIS 技術(shù)與WebGL 技術(shù)的有機(jī)融合，能夠結(jié)合地理信息技術(shù)、多媒體技術(shù)以及網(wǎng)絡(luò)技術(shù)實(shí)現(xiàn)數(shù)據(jù)態(tài)勢(shì)的可視化，進(jìn)而能夠?qū)﹄婋x層態(tài)勢(shì)進(jìn)行實(shí)時(shí)全面的監(jiān)測(cè)，讓電離層態(tài)勢(shì)呈現(xiàn)更為直觀和容易理解，目前已經(jīng)成為電離層數(shù)據(jù)管理的重要研究方向之一。

由于電離層數(shù)據(jù)采用網(wǎng)格化存儲(chǔ)，且數(shù)據(jù)量較大，常規(guī)方法將電離層數(shù)據(jù)傳到客戶端后，由客戶端進(jìn)行渲染處理會(huì)造成傳輸時(shí)間長(zhǎng)，渲染速度慢，人機(jī)交互效果差等問(wèn)題，不利于大規(guī)模電離層態(tài)勢(shì)的實(shí)時(shí)快速更新與效果呈現(xiàn)，所以如何對(duì)大規(guī)模電離層格網(wǎng)數(shù)據(jù)進(jìn)行快速可視化渲染是一個(gè)亟需解決的問(wèn)題。

本文基于3DGIS 技術(shù)對(duì)大規(guī)模電離層格網(wǎng)數(shù)據(jù)可視化進(jìn)行了研究，進(jìn)而能夠在瀏覽器上無(wú)插件實(shí)現(xiàn)大規(guī)模電離層態(tài)勢(shì)的交互與展示，為電離層態(tài)勢(shì)可視化系統(tǒng)設(shè)計(jì)提供一種新的方法。

1 系統(tǒng)設(shè)計(jì)

1.1 總體架構(gòu)設(shè)計(jì)

本文采用B/S（Browser/Server）架構(gòu)進(jìn)行電離層態(tài)勢(shì)可視化系統(tǒng)的架構(gòu)設(shè)計(jì)，系統(tǒng)數(shù)據(jù)預(yù)處理在服務(wù)器端完成，電離層數(shù)據(jù)以文件形式存儲(chǔ)在服務(wù)器端，用數(shù)據(jù)庫(kù)管理電離層文件編目。系統(tǒng)總體設(shè)計(jì)如圖1 所示。

圖1 系統(tǒng)總體設(shè)計(jì)圖

服務(wù)器端主要提供Web 服務(wù)、預(yù)處理組件和數(shù)據(jù)庫(kù)服務(wù)。其中，Web 服務(wù)主要響應(yīng)客戶端瀏覽器的請(qǐng)求；預(yù)處理組件主要提供電離層文件的解析和預(yù)處理服務(wù)，由于電離層格網(wǎng)數(shù)據(jù)量大，不適于直接發(fā)送到客戶端進(jìn)行渲染處理，為此考慮解析完成后對(duì)格網(wǎng)數(shù)據(jù)轉(zhuǎn)換為灰度圖像，灰度圖數(shù)據(jù)量極小，能極大提高系統(tǒng)響應(yīng)效率，為大數(shù)據(jù)量實(shí)時(shí)動(dòng)態(tài)變化監(jiān)測(cè)服務(wù)奠定基礎(chǔ)；數(shù)據(jù)庫(kù)服務(wù)主要對(duì)電離層文件進(jìn)行編目管理，包含文件屬性信息的管理，如文件存儲(chǔ)地址、日期、地點(diǎn)、經(jīng)緯度相關(guān)信息等。

客戶端瀏覽器主要通過(guò)請(qǐng)求地址的方式獲取服務(wù)器發(fā)送來(lái)的預(yù)處理過(guò)的電離層圖像數(shù)據(jù)，根據(jù)圖像灰度信息采用OpenGL 著色語(yǔ)言 （OpenGL Shading Language，GLSL）計(jì)算每個(gè)網(wǎng)格的顏色紋理，并將計(jì)算后的紋理在3DGIS 引擎上進(jìn)行繪制，以此完成電離層格網(wǎng)數(shù)據(jù)的可視化展示。GLSL 是一種用于OpenGL 的高級(jí)過(guò)程著色語(yǔ)言，它采用類似C 語(yǔ)言的詞法和語(yǔ)法結(jié)構(gòu)，數(shù)據(jù)類型豐富，大量?jī)?nèi)置的函數(shù)組提供了實(shí)現(xiàn)著色算法所需要的許多功能，能夠在OpenGL 的渲染管線中對(duì)頂點(diǎn)和片元進(jìn)行自定義處理以達(dá)到滿意的效果，并且處理速度極快。

1.2 電離層格網(wǎng)數(shù)據(jù)轉(zhuǎn)換

電離層格網(wǎng)數(shù)據(jù)文件一般采用文本文件格式存儲(chǔ)。一般會(huì)描述該電離層數(shù)據(jù)記錄的時(shí)間、范圍（起止經(jīng)緯度和分辨率）和電離層數(shù)值等信息，部分仿真數(shù)據(jù)如圖2 所示。

圖2 部分仿真電離層格網(wǎng)數(shù)據(jù)示例圖

由于電離層數(shù)據(jù)文件記錄時(shí)間延長(zhǎng)，范圍大，一份電離層格網(wǎng)數(shù)據(jù)通常比較大，從幾十MB 至幾百M(fèi)B 不等，把這樣的數(shù)據(jù)通過(guò)網(wǎng)絡(luò)傳輸?shù)娇蛻舳耍浞€(wěn)定性和時(shí)效性都沒(méi)有保障，需要將格網(wǎng)數(shù)據(jù)進(jìn)行壓縮。壓縮格網(wǎng)數(shù)據(jù)最好的方法就是將格網(wǎng)數(shù)據(jù)轉(zhuǎn)為灰度圖，即矢量數(shù)據(jù)轉(zhuǎn)為柵格圖像，通過(guò)轉(zhuǎn)換壓縮為灰度圖，在不損失精度的情況下，數(shù)據(jù)量可以減少到KB 級(jí)，而且圖像數(shù)據(jù)也非常有利于網(wǎng)絡(luò)傳輸，具體轉(zhuǎn)換壓縮流程如圖3 所示。

圖3 電離層格網(wǎng)數(shù)據(jù)轉(zhuǎn)換為灰度圖流程圖

一般已知格網(wǎng)起始經(jīng)緯度Start[2]，終止經(jīng)緯度End[2]，格網(wǎng)分辨率R，那么可以通過(guò)以下公式計(jì)算出格網(wǎng)的寬高，也即圖像的寬高（w，h）：

對(duì)于電離層數(shù)值，通過(guò)如下公式計(jì)算格網(wǎng)數(shù)據(jù)所一一對(duì)應(yīng)轉(zhuǎn)換后的灰度圖像像素值：

其中g(shù)rid（i，j）為格網(wǎng)數(shù)據(jù)，max（grid）為格網(wǎng)數(shù)據(jù)的最大值，min（grid）為格網(wǎng)數(shù)據(jù)的最小值；pixel（i，j）為格網(wǎng)數(shù)據(jù)轉(zhuǎn)換后的灰度圖像像素值，灰度區(qū)間[0，255]。

灰度圖像的長(zhǎng)寬與格網(wǎng)數(shù)據(jù)尺度保持一致，格網(wǎng)的每個(gè)格點(diǎn)一一對(duì)應(yīng)映射到圖像的像素點(diǎn)上。通過(guò)以上步驟完成格網(wǎng)平面到灰度圖像的轉(zhuǎn)換，圖像壓縮大小不超過(guò)200KB，仿真數(shù)據(jù)轉(zhuǎn)換后如圖4 所示。

圖4 仿真格網(wǎng)數(shù)據(jù)轉(zhuǎn)為灰度圖像

1.3 漸變紋理計(jì)算

客戶端瀏覽器請(qǐng)求到灰度圖像后，利用瀏覽器WebGL 的線性插值方法，通過(guò)GLSL 著色器語(yǔ)言給灰度圖像創(chuàng)建顏色漸變色紋理，最終完成可視化渲染，具體過(guò)程如圖5 所示。

圖5 GLSL 著色器創(chuàng)建顏色漸變色紋理流程圖

灰度圖是離散的，可視化效果較差，通過(guò)GLSL 進(jìn)行線性插值平滑，利用GPU 高性能計(jì)算可以快速獲得灰度平滑紋理，偽代碼如表1 所示，插值效果如圖6 所示。

圖6 GLSL 著色器插值平滑灰度紋理圖

表1 使用GLSL 線性插值平滑灰度圖

采用GLSL 創(chuàng)建顏色漸變紋理是使用canvas 的createLinearGradient 和addColorStop 兩個(gè)API 函數(shù)實(shí)現(xiàn)的。canvas 是HTML5 中使用JavaScript 在網(wǎng)頁(yè)中圖像繪制的元素標(biāo)記。canvas 元素本身是沒(méi)有繪圖能力的，所有的繪制工作必須在JavaScript 內(nèi)部完成。

createLinearGradient 方法需要指定Stop 和顏色值，其中Stop 范圍在[0，1]之間，而灰度圖圖像傳到WebGL 里的顏色在[0，1]之間，因此兩個(gè)之間存在明確的轉(zhuǎn)換關(guān)系，即255×stop=grey，通過(guò)設(shè)置stop 的漸變顏色再傳到WebGL 著色器里，就能控制灰度像素值的顯示邏輯，偽代碼如表2 所示。

表2 canvas 創(chuàng)建漸變紋理

GLSL 著色器里將灰度紋理和漸變紋理是結(jié)合使用的，偽代碼如表3 所示。

表3 在GLSL 著色器里使用灰度紋理和顏色紋理

直接輸出漸變顏色，得到等值面邊界的模糊可視化效果，根據(jù)起止經(jīng)緯度再疊加地圖信息，結(jié)果如圖7 所示。

圖7 GLSL 著色器融合灰度紋理和顏色紋理圖

2 應(yīng)用實(shí)驗(yàn)

基于前述分析，為進(jìn)一步對(duì)電離層進(jìn)行展示和應(yīng)用分析，本文采用WebGL 的前端開(kāi)源Cesium 框架構(gòu)建了全球電離層可視化系統(tǒng)，將前端計(jì)算得到的可視化效果圖像根據(jù)經(jīng)緯度位置疊加到三維地球上，生成的場(chǎng)景如圖8 所示。

圖8 Cesium 框架疊加全球電離層顏色紋理可視化效果

系統(tǒng)驗(yàn)證了大規(guī)模電離層格網(wǎng)數(shù)據(jù)快速可視化渲染方法的可行性，通過(guò)GLSL 語(yǔ)言發(fā)揮了GPU 高性能計(jì)算的特性，實(shí)現(xiàn)了大規(guī)模電離層態(tài)勢(shì)實(shí)時(shí)更新，提高了系統(tǒng)的穩(wěn)定性和性能，對(duì)構(gòu)建大數(shù)據(jù)環(huán)境下實(shí)時(shí)電離層態(tài)勢(shì)展示和分析具有重要支撐意義。

3 結(jié)束語(yǔ)

本文介紹了一種基于B/S 架構(gòu)的電離層格網(wǎng)數(shù)據(jù)可視化系統(tǒng)設(shè)計(jì)方法，研究了基于WebGL 技術(shù)快速高效創(chuàng)建大規(guī)模格網(wǎng)數(shù)據(jù)可視化的解決方案，為格網(wǎng)數(shù)據(jù)的網(wǎng)絡(luò)可視化提供了借鑒。隨著互聯(lián)網(wǎng)3DGIS 應(yīng)用的發(fā)展，對(duì)于海量數(shù)據(jù)的可視化處理和分析值得進(jìn)一步深入探索研究。