基于WebGIS的大數(shù)據(jù)圖形渲染技術(shù)

摘"要：隨著大氣科學(xué)相關(guān)技術(shù)的高速發(fā)展，基于軟件圖形顯示功能的更高展示要求在氣象行業(yè)中被不斷提出。人們?cè)诔掷m(xù)追求更加逼真視覺上的渲染效果：一方面保證穩(wěn)定高效地渲染海量數(shù)據(jù)，另一方面，同時(shí)保證高質(zhì)量圖像文件的生成。為此，提出了一種針對(duì)海量氣象數(shù)據(jù)的快速顯示方案。通過有效壓縮傳輸數(shù)據(jù)，并利用GPU顯卡資源進(jìn)行數(shù)據(jù)的渲染和數(shù)據(jù)的時(shí)間插值，能夠有效提高數(shù)據(jù)顯示渲染和交互的效率。實(shí)踐應(yīng)用表明，該方案能夠較好地解決海量數(shù)據(jù)快速顯示的問題，在針對(duì)氣象大數(shù)據(jù)進(jìn)行實(shí)時(shí)渲染動(dòng)畫播放之時(shí)，其播放展示速度可以高達(dá)30幀+（每秒），能夠較好地滿足實(shí)際業(yè)務(wù)需求。

關(guān)鍵詞：數(shù)據(jù)顯示；WebGIS；分布式數(shù)據(jù)庫；MUSIC；圖形渲染

中圖分類號(hào)：TP399""""""文獻(xiàn)標(biāo)識(shí)碼：A

Big"Data"Graphics"Rendering"Technology"Based"on"WebGIS

LEI"Ming，JIANG"Hansheng，"LIANG"Jian"

（Tianjin"Meteorological"Information"Center，"Tianjin"300074，China）

Abstract：With"the"rapid"development"of"atmospheric"science"and"technology，"higher"display"requirements"based"on"software"graphic"display"function"are"constantly"proposed"in"the"meteorological"industry."People"continue"to"pursue"more"realistic"visual"rendering"effect："on"the"one"hand，"to"ensure"stable"and"efficient"rendering"of"massive"data，"on"the"other"hand，"to"ensure"the"generation"of"highquality"image"files."To"solve"this"problem，"a"fast"display"scheme"for"massive"meteorological"data"is"proposed."By"effectively"compressing"and"transmitting"data，"and"using"GPU"graphics"card"resources"for"data"rendering"and"data"time"interpolation，"the"efficiency"of"data"display，"rendering"and"interaction"can"be"effectively"improved."Practical"application"shows"that"the"scheme"can"better"solve"the"problem"of"rapid"display"of"massive"data."When"the"real-time"rendering"animation"for"meteorological"big"data"is"played，"the"display"speed"can"be"as"high"as"30"frames"+"（per"second），"which"can"better"meet"the"actual"business"need．

Key"words：data"display;"WebGIS；"distributed"database;"MUSIC;"graphics"rendering

隨著大氣科學(xué)相關(guān)技術(shù)的不斷飛速發(fā)展和突破，以及天氣預(yù)報(bào)服務(wù)業(yè)務(wù)創(chuàng)新改革的深入，對(duì)相關(guān)軟件圖形展示的功能也提出了更高的要求，即在高效穩(wěn)定地渲染海量數(shù)據(jù)的同時(shí)，又能生成高質(zhì)量的圖像文件，人們?cè)诓粩嘧非笠曈X上更加逼真的渲染效果[1-2]。同時(shí)，也在渲染展示功能上追求更加理想的技術(shù)方法[3-5]。

目前，在大氣科學(xué)當(dāng)中，有不少功能較為強(qiáng)大的顯示軟件以及數(shù)據(jù)分析系統(tǒng)。如：我國氣象行業(yè)作圖常用的GrADS[6]；國家氣候中心開發(fā)的CIPAS系統(tǒng)[7]；國內(nèi)氣象臺(tái)站業(yè)務(wù)里較多使用的MICAPS[8-9]；國家局鄭永光等研發(fā)的客觀分析診斷圖形系統(tǒng)[10]。國際上比較常用的氣象業(yè)務(wù)軟件有：歐洲中期天氣預(yù)報(bào)中心的MetView、德國的Ninjo和美國NOAA的AWIPS等[11-13]，以及著眼科研的諸多軟件，如：IDV、NCL、Vis5D等[14-16]。

但是這些軟件過于龐大，不適合特定業(yè)務(wù)對(duì)象的展示需求，不能方便地基于B/S架構(gòu)，在IE瀏覽器中進(jìn)行瀏覽與查看。一般而言，國外的軟件功能強(qiáng)大，但對(duì)國內(nèi)數(shù)據(jù)的支持不好，而且不能在國內(nèi)部署；國產(chǎn)軟件功能設(shè)計(jì)好，但均不支持矢量圖形的輸出[17]。

為了進(jìn)一步加速海量數(shù)據(jù)的快速處理和存儲(chǔ)動(dòng)態(tài)擴(kuò)展的需求，同時(shí)，考慮到新建數(shù)據(jù)系統(tǒng)需要與原有省級(jí)全國綜合氣象信息共享平臺(tái)（CIMISS）進(jìn)行無縫對(duì)接。在充分參考相關(guān)行業(yè)在解決海量數(shù)據(jù)查詢的成功方案基礎(chǔ)上[18-20]，利用分布式技術(shù)[21-22]，構(gòu)建滿足省級(jí)特色需求的數(shù)據(jù)服務(wù)中心。同時(shí)，利用CIMISS的氣象數(shù)據(jù)統(tǒng)一服務(wù)MUSIC接口（Meteorological"Unified"Service"Interface"Community）[23]，打通多系統(tǒng)之間的壁壘，屏蔽異構(gòu)環(huán)境，提供統(tǒng)一的對(duì)外數(shù)據(jù)服務(wù)功能。

同時(shí)，為了解決海量數(shù)據(jù)和渲染效果之間的沖突以及矢量圖形的輸出問題，設(shè)計(jì)了基于大數(shù)據(jù)的圖形渲染方案，為海量數(shù)據(jù)的顯示提供了一種解決方法。

1"分布式存儲(chǔ)技術(shù)

為了進(jìn)一步增進(jìn)整體數(shù)據(jù)響應(yīng)性能，利用分布式技術(shù)將氣象數(shù)據(jù)存儲(chǔ)在GBase8a分布式數(shù)據(jù)庫中，提供高速的數(shù)據(jù)服務(wù)功能。

當(dāng)通信系統(tǒng)（MDOS）產(chǎn)生報(bào)文后，透過利用GBase8t良好的事務(wù)性數(shù)據(jù)操作功能，進(jìn)行氣象數(shù)據(jù)的入庫操作。同時(shí)，充分利用GBase8t與GBase8a之間高速數(shù)據(jù)同步性能，利用RTSync進(jìn)行同步，進(jìn)而有效實(shí)現(xiàn)安全性更高的數(shù)據(jù)庫讀寫分離，最終透過全國氣象通用MUSIC接口，基于存儲(chǔ)在分布式GBase8a數(shù)據(jù)庫中的相關(guān)氣象資料，向外提供統(tǒng)一的數(shù)據(jù)服務(wù)功能。

基于MUSIC服務(wù)接口，將全部數(shù)據(jù)庫打通，形成一個(gè)邏輯上統(tǒng)一的數(shù)據(jù)服務(wù)中心，對(duì)外透過API接口提供服務(wù)。系統(tǒng)存儲(chǔ)設(shè)計(jì)架構(gòu)如圖1所示。

2"系統(tǒng)數(shù)據(jù)處理

在數(shù)據(jù)準(zhǔn)備和數(shù)據(jù)傳輸上，地理數(shù)據(jù)的準(zhǔn)備采用GIS軟件或者編程實(shí)現(xiàn)進(jìn)行數(shù)據(jù)格式的轉(zhuǎn)換，得到JSON或自定義二進(jìn)制（AWX）格式的地理數(shù)據(jù)，其中點(diǎn)數(shù)據(jù)（文字標(biāo)注，大多是關(guān)于興趣點(diǎn)和地名等方面的標(biāo)注；圖形標(biāo)注，大多是在文字標(biāo)注的基礎(chǔ)上進(jìn)行地點(diǎn)標(biāo)示）格式主要包括的信息：經(jīng)緯度，名稱等；線數(shù)據(jù)（道路、河流、軌跡、境界等）主要包括的信息：經(jīng)緯度，名稱，長度等；面數(shù)據(jù)（區(qū)塊、行政區(qū)域、湖泊等）主要包括的信息：經(jīng)緯度，名稱，面積，長度等。其他的地理數(shù)據(jù)還包括三維模型，大多用在場(chǎng)景中加載地形、植被、公共設(shè)施、建筑等；影像切片，大多用于基本地表的繪制。氣象要素主要包括：風(fēng)速、溫度、濕度、氣壓、風(fēng)向和雨量等。同樣需要將這些要素?cái)?shù)據(jù)以JSON或者AWX格式傳輸至Web服務(wù)器，為了進(jìn)一步提升系統(tǒng)數(shù)據(jù)傳輸?shù)男?，這里利用AJAX方式進(jìn)行氣象數(shù)據(jù)的傳輸。圖2展示了基于AJAX模式，服務(wù)器從客戶端接受請(qǐng)求數(shù)據(jù)的過程。當(dāng)用戶在瀏覽器中觸發(fā)請(qǐng)求事件的操作時(shí)，JavaScript則開始調(diào)用XHR向服務(wù)器發(fā)送該請(qǐng)求；服務(wù)器針對(duì)數(shù)據(jù)庫的訪問，恰是根據(jù)該請(qǐng)求，并最終以AWX或者JSON的格式將結(jié)果回傳XHR對(duì)象。而XHR一旦接收數(shù)據(jù)，則馬上執(zhí)行回調(diào)函數(shù)，針對(duì)頁面進(jìn)行更改。在XHR發(fā)出請(qǐng)求到執(zhí)行回調(diào)函數(shù)這段時(shí)間，當(dāng)前頁面可以正常執(zhí)行其他操作，因此可以避免數(shù)據(jù)量過大造成頁面卡頓的現(xiàn)象。

3"WebGL圖像渲染

系統(tǒng)基于WebGL的圖形繪制流程如圖3所示。

最開始，需要得到WebGL的上下文環(huán)境，并創(chuàng)建著色器（需要基于著色器代碼片段進(jìn)行），這通常包括：片元著色器（Fragment"Shader）、頂點(diǎn)著色器（Vertex"Shader）。然后，將其綁定給前面所獲取的WebGL上下文，并生成WebGL程序。隨后基于所要繪制的圖形對(duì)象，來生成相應(yīng)的顏色數(shù)組和頂點(diǎn)數(shù)組，若是使用貼圖，則還需要?jiǎng)?chuàng)建頂點(diǎn)紋理坐標(biāo)數(shù)組和紋理對(duì)象等，若是利用索引方式創(chuàng)建面，則還需要使用頂點(diǎn)索引數(shù)組。隨后還要將這些著色器需要的紋理對(duì)象和數(shù)組與WebGL上下文進(jìn)行綁定。同時(shí)，需要針對(duì)WebGL上下文設(shè)置著色器所需要的變量，包括：模型視圖矩陣和投影矩陣等。最終，通過利用WebGL的基本圖元繪制方法即可完成圖形對(duì)象的繪制。

圖形渲染的接口與數(shù)據(jù)結(jié)構(gòu)，是通過高性能的圖形渲染引擎進(jìn)行定義的，圖形渲染引擎則是基于WebGL實(shí)現(xiàn)的。而WebGL是一組繪圖命令的"API"集合。二維與三維的幾何物體描述可以很好地通過所給出的API進(jìn)行實(shí)現(xiàn)。同時(shí)，這些API還能夠控制這些物體遵照某一種方式繪制至顯示緩沖區(qū)內(nèi)。值得一提的是，WebGL的API集功能豐富，幾乎包含了各個(gè)方面的功能，諸如：紋理、位圖、像素、旋轉(zhuǎn)……等等，基本上二三維圖形軟件開發(fā)所需要的各方面功能都囊括其中。

4"系統(tǒng)數(shù)據(jù)可視化技術(shù)

在對(duì)WebGL的封裝的基礎(chǔ)上對(duì)氣象圖形的繪制進(jìn)行封裝，使用點(diǎn)圖形組成氣象中的格點(diǎn)和散點(diǎn)圖。使用多邊形圖形與線構(gòu)成氣象等值線圖。使用面圖形組成氣象中的色斑圖圖形。圖形引擎內(nèi)部提供一組相對(duì)穩(wěn)定的接口對(duì)外部調(diào)用者進(jìn)行調(diào)用支持，當(dāng)系統(tǒng)需要繪制氣象圖形時(shí)，圖形引擎的調(diào)用一般都是基于其編程接口進(jìn)行的。主要技術(shù)路線包括如下幾個(gè)方面：風(fēng)矢量場(chǎng)實(shí)時(shí)動(dòng)畫播放、雷達(dá)衛(wèi)星數(shù)據(jù)的實(shí)時(shí)動(dòng)畫播放等。

4.1"風(fēng)矢量場(chǎng)實(shí)時(shí)動(dòng)畫播放

如圖4所示，風(fēng)矢量顯示所需數(shù)據(jù)主要包括：UV分量數(shù)據(jù)、顯示樣式（箭頭、風(fēng)桿等）以及掩膜邊界。UV分量數(shù)據(jù)通過數(shù)據(jù)轉(zhuǎn)換壓縮生成紋理對(duì)象，數(shù)據(jù)壓縮之后可以減少網(wǎng)絡(luò)傳輸?shù)臅r(shí)間，同時(shí)可以將紋理對(duì)象由CPU傳輸?shù)紾PU，到達(dá)頂點(diǎn)著色器對(duì)象；掩膜邊界與顯示樣式也均是紋理對(duì)象，通過WebGL"API傳輸?shù)狡鲗?duì)象中；圖元裝配將頂點(diǎn)著色器傳輸至片元著色器，而片元信息存儲(chǔ)至顏色緩沖區(qū)則是利用光柵化完成，并最終將其顯示至前臺(tái)頁面中。時(shí)間信息（開始時(shí)間至結(jié)束時(shí)間間的任意時(shí)段）傳輸?shù)狡鲗?duì)象，是利用操作動(dòng)畫播放控件進(jìn)行實(shí)現(xiàn)的。而片元著色器對(duì)象則利用當(dāng)前時(shí)間，針對(duì)數(shù)據(jù)展開插值獲得當(dāng)前時(shí)間的數(shù)據(jù)狀態(tài)，并將其光柵化到顏色緩沖區(qū)，最終在前臺(tái)界面中進(jìn)行顯示。

在進(jìn)行數(shù)據(jù)渲染和數(shù)據(jù)時(shí)間插值時(shí)，WebGL基于GPU顯卡資源實(shí)現(xiàn)，能夠極大提高數(shù)據(jù)顯示渲染與交互效率，較好地滿足實(shí)際業(yè)務(wù)的需求。

4.2"雷達(dá)衛(wèi)星數(shù)據(jù)的實(shí)時(shí)動(dòng)畫播放

和風(fēng)矢量數(shù)據(jù)實(shí)時(shí)動(dòng)畫播放技術(shù)原理相似，雷達(dá)衛(wèi)星數(shù)據(jù)的定時(shí)動(dòng)畫播放同樣需要將數(shù)據(jù)、圖的樣式及掩膜邊界通過紋理傳入到頂點(diǎn)著色器和片元著色器，并利用光柵化處理，最終顯示至前臺(tái)頁面上；動(dòng)畫播放同樣采用在GPU中對(duì)數(shù)據(jù)進(jìn)行時(shí)間插值的技術(shù)方法對(duì)數(shù)據(jù)進(jìn)行實(shí)時(shí)渲染達(dá)到動(dòng)畫播放的效果，并可達(dá)到每秒30幀+的效果。

雷達(dá)及衛(wèi)星數(shù)據(jù)圖形顯示與動(dòng)畫播放主要截圖如圖7、圖8所示。

4.3"基于WebGL的系統(tǒng)優(yōu)越性

（1）WebGL能夠非常方便地利用HTML5的Canvas元素直接繪制三維動(dòng)畫，并可以實(shí)現(xiàn)硬件三維加速渲染。

（2）基于WebGL，Web3D的實(shí)現(xiàn)，只需要編寫代碼即可，并不需要安裝瀏覽器插件。

（3）WebGL不僅支持三維圖形的顯示，也支持二維圖形的顯示。因此，可以達(dá)到二三維圖形集于一體的顯示效果。

（4）基于WebGL的編程，并不需要任何組件的加載，而是可以非常方便地通過調(diào)用內(nèi)嵌于頁面中的WebGL上下文環(huán)境內(nèi)的圖形接口進(jìn)行圖形繪制。

（5）前臺(tái)頁面的顯示可以非常方便地利用GPU來進(jìn)行硬件的圖形加速渲染。

5"結(jié)"論

在不改變現(xiàn)有業(yè)務(wù)系統(tǒng)和系統(tǒng)架構(gòu)的基礎(chǔ)上，基于MUSIC接口，利用數(shù)據(jù)分塊壓縮技術(shù)和數(shù)據(jù)可視化技術(shù)，針對(duì)海量數(shù)據(jù)的快速顯示，提供了一種圖形渲染方案。在實(shí)際進(jìn)行動(dòng)畫播放的時(shí)候，可以達(dá)到每秒30幀+的效果，較好地解決了海量數(shù)據(jù)顯示與渲染之間沖突的問題，為氣象數(shù)據(jù)的快速顯示提供了一種較好的解決方法。而該方案，也能夠有效應(yīng)用到其他行業(yè)中，為海量數(shù)據(jù)和圖形渲染間的沖突給出一個(gè)可行的技術(shù)方向。

參考文獻(xiàn)

［１］"焦繼業(yè)，李濤，杜慧敏，等.移動(dòng)圖形處理器的現(xiàn)狀、技術(shù)及其發(fā)展[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2015（6）：1005-1016.

[2]"韓俊剛，劉有耀，張曉.圖形處理器的歷史現(xiàn)狀和發(fā)展趨勢(shì)［J］.西安郵電學(xué)院學(xué)報(bào)，2011，16（3）：61-64.

[3]"韓李靖，王林飛，閆浩飛.基于Oracle數(shù)據(jù)庫的航磁異常自動(dòng)渲染技術(shù)[J].物探與化探，2020，44（1）：171-176.

[4]"高洪皓，繆淮扣，劉浩宇，等.基于概率模型檢驗(yàn)的云渲染任務(wù)調(diào)度定量驗(yàn)證[J].軟件學(xué)報(bào)，2020，31（6）：1839-1859.

[5]"邵威，劉暢，賈金原.基于光照貼圖的Web3D全局光照協(xié)作式云渲染系統(tǒng)[J].系統(tǒng)仿真學(xué)報(bào)，2020，32（4）：649-659.

[6]"DOTY"B，KINTER"J."Geophysical"data"analysis"and"visualization"using"GrADS[M]//"Visualization"Techniques"in"Space"and"Atmospheric"Sciences.NASA：Washington"D"C，199：209-219.

[7]"吳煥萍，張永強(qiáng)，孫家民，等.氣候信息交互顯示與分析平臺(tái)（CICAS）設(shè)計(jì)與實(shí)現(xiàn)[J].應(yīng)用氣象學(xué)報(bào)，2013，24（5）：631-640.

[8]"李月安，曹莉，高嵩，等.MICAPS預(yù)報(bào)業(yè)務(wù)平臺(tái)現(xiàn)狀與發(fā)展[J].氣象，2010，36（7）：50-55.

[9]"于連慶，胡爭(zhēng)光.MICAPS中天氣圖交互制作子系統(tǒng)[J].應(yīng)用氣象學(xué)報(bào)，2011，22（3）：375-384.

[10]鄭永光，王洪慶，陶祖鈺，等."Windows下二維氣象繪圖軟件：客觀分析診斷圖形系統(tǒng)[J].氣象，2002，28（3）：42-45.

[11]DAABECK"J.Overview"of"meteorologicai"workstation"development"in"Europe[C]"http://Proceedings"of"21st"International"Conference"on"Interactive"Information"Processing"Systems（IIPS）"for"Meteorology，"Oceanography，and"Hydrology，2005.

[12]JOE"P，KOPPERT"H-J，"HEICENREDER"D，"et"al."Severe"weather"forecasting"tools"in"NinJo"workstation[C]"http://Proceedings"of"World"Weather"Research"Program"Symposium"on"Nowcasting"and"very"short"range"forecasting，"5-9"September"2005，Toulouse，F(xiàn)rance."Geneva："World"Meteorological"Organization，2005.

[13]GRICFICH"F.A"WIPS-II"into"the"future[C]//Proceedings"of"27th"IIPS"for"Meteorology，Oceanography，and"Hydrology，2011.

[14]MURRAY"D，McWHIRTER"J，HO"Y.Thc"IDV"at"5：New"features"and"future"plans[C]"http://Proceedings"of"25th"Conference"on"International"Interactive"Information"and"Processing"Systems（IIPS）"for"Meteorology，"Oceanography，and"Hydrology，2009.

[15]HIBBARD"W"L，PAUL"B"E，SANTEK"D"A，ct"al."Interactive"visualization"of"earth"and"space"science"computations[J].Computer，1994，27（7）：65-72.

[16]NCAR."CISL’s"NCAR"command"language（NCL）"[EB/OL].[2019-06-22].http：//www.ncl.ucar.edu.

[17]于連慶.面向氣象數(shù)據(jù)可視化的多功能繪圖引擎研究與實(shí)現(xiàn)[J].海洋氣象學(xué)報(bào)，2019，39（3）：114-123.

[18]楊東日，陳躍，劉姝祎."面向健康大數(shù)據(jù)快速讀寫的存儲(chǔ)系統(tǒng)設(shè)計(jì)[J]."計(jì)算機(jī)工程與設(shè)計(jì)，"2018，39（10）：3063-3067.

[19]趙康，楊余旺."基于Hadoop的物聯(lián)云監(jiān)控系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]."計(jì)算機(jī)與數(shù)字工程，"2019，47（7）：1738-1742.

[20]李佳，徐勝超."基于云計(jì)算的智能電網(wǎng)大數(shù)據(jù)處理平臺(tái)[J]."計(jì)算機(jī)工程與設(shè)計(jì)，"2018，39（10）：3073-3079.

[21]李波，杜景林，李正方.基于SOA的氣象數(shù)據(jù)共享平臺(tái)研究[J].電子設(shè)計(jì)工程，"2019，"27（4）："25-29.

[22]吳燕波，薛琴，向大為，等.云平臺(tái)下的NoSQL分布式大數(shù)據(jù)存儲(chǔ)技術(shù)與應(yīng)用[J]."現(xiàn)代電子技術(shù)，"2016，"39（9）："44-47+52.

[23]曾行吉，李濤，詹利群，等.基于MUSIC的特色數(shù)據(jù)與產(chǎn)品回寫CIMISS方法研究[J]."氣象研究與應(yīng)用，"2018，"39（1）："111-114.