高分辨率海洋標(biāo)量場大屏動態(tài)可視化方法研究

張廣宇，張小壘

(青島大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，青島 266071)

隨著海洋觀測技術(shù)的不斷發(fā)展，海洋數(shù)據(jù)可視化廣泛應(yīng)用于海洋漁業(yè)、交通、環(huán)境檢測等領(lǐng)域[1]。數(shù)據(jù)收集設(shè)備的改進(jìn)使海洋數(shù)據(jù)的分辨率越來越高[2]，能滿足大屏可視化需求[3-4]并提供精準(zhǔn)信息，但同時(shí)也增加了渲染數(shù)據(jù)量，增大了可視化難度。目前，金字塔模式[5]、LOD動態(tài)調(diào)度算法[6-8]需要提前準(zhǔn)備不同層級[9]下，不同數(shù)據(jù)源的圖層切片[10]，通過視野范圍、數(shù)據(jù)源發(fā)生變化時(shí)調(diào)用對應(yīng)的瓦片，實(shí)現(xiàn)動態(tài)可視化。雖能節(jié)省數(shù)據(jù)渲染的時(shí)間，但是降低了系統(tǒng)可視化的實(shí)時(shí)性，限制了屏幕大小，占用大量內(nèi)存。GPU渲染[11-13]的效率要高于傳統(tǒng)CPU渲染。分析讀取不同數(shù)據(jù)源的文件之后，使用WebGL調(diào)用GPU渲染，可以提升數(shù)據(jù)渲染速率，實(shí)現(xiàn)動態(tài)可視化。為此，本文提出一種時(shí)變海洋數(shù)據(jù)預(yù)處理和組織替換的方法，利用GPU渲染，基于web端研究全球視角下高分辨率海洋標(biāo)量數(shù)據(jù)在不同時(shí)刻的實(shí)時(shí)渲染以及三維時(shí)變動態(tài)可視化，以期提升渲染效率，節(jié)省存儲空間。

1 平臺方案

1.1 分布式架構(gòu)

全球海洋標(biāo)量數(shù)據(jù)動態(tài)可視化系統(tǒng)可以對多種數(shù)據(jù)進(jìn)行動態(tài)時(shí)變可視化渲染[14]。系統(tǒng)渲染經(jīng)過預(yù)處理組織優(yōu)化的時(shí)變數(shù)據(jù)，展示動態(tài)可視化效果，向用戶提供交互服務(wù)。系統(tǒng)基于Cesium框架開發(fā)，使用分布式架構(gòu)并發(fā)組織優(yōu)化時(shí)變數(shù)據(jù)。系統(tǒng)包括1臺主服務(wù)器和4臺通訊服務(wù)器，如圖1(a)所示。主服務(wù)器負(fù)責(zé)時(shí)變數(shù)據(jù)預(yù)處理、接收響應(yīng)前端請求、提供接口；通訊服務(wù)器負(fù)責(zé)存儲時(shí)變數(shù)據(jù)文件、讀取發(fā)布數(shù)據(jù)。使用瀏覽器/服務(wù)器(B/S)架構(gòu)，瀏覽器利用JavaScript語言，使用GPU渲染時(shí)變數(shù)據(jù)；服務(wù)器使用Node.JS開發(fā)語言，利用WebSocket進(jìn)行前后端通訊[15-17]。系統(tǒng)框架包括數(shù)據(jù)層、服務(wù)層、邏輯控制層、可視化層、應(yīng)用層，如圖1(b)所示。

圖1 系統(tǒng)體系架構(gòu)(a)分布式結(jié)構(gòu)；(b)系統(tǒng)框架

1.2 系統(tǒng)組成

系統(tǒng)設(shè)計(jì)了數(shù)據(jù)預(yù)處理、時(shí)變可視化渲染以及交互三大模塊以適應(yīng)數(shù)據(jù)自身特性和系統(tǒng)應(yīng)滿足的可視化需求。數(shù)據(jù)預(yù)處理模塊需要完成時(shí)變數(shù)據(jù)的優(yōu)化組織和數(shù)據(jù)文件更新，實(shí)現(xiàn)全球范圍高分辨率海洋標(biāo)量數(shù)據(jù)的動態(tài)可視化，面臨的首要問題就是龐大的數(shù)據(jù)量。因此，時(shí)變數(shù)據(jù)需要通過預(yù)處理從而提高渲染效率。由于引入變化閾值會導(dǎo)致變化數(shù)據(jù)的篩選出現(xiàn)誤差，需要提前處理更新文件。時(shí)變可視化模塊是對時(shí)變數(shù)據(jù)的加載渲染及顯示，利用點(diǎn)對象的不同的顏色可視化表達(dá)信息要素值，每個(gè)渲染點(diǎn)組成全球范圍的整體可視化效果。交互模塊中，系統(tǒng)提供要素值信息查詢、自定義范圍劃定、可視化進(jìn)程控制、渲染幀請求方式改變等功能，附加要素信息顏色參考表，為用戶掌握數(shù)據(jù)變化規(guī)律，預(yù)測后期態(tài)勢提供更加精準(zhǔn)、直觀的信息參考，給予用戶良好的交互體驗(yàn)。

2 高分辨率時(shí)變數(shù)據(jù)可視化

海洋標(biāo)量場的可視化主要采用色差方式來表達(dá)標(biāo)量場中的數(shù)據(jù)分布，不同標(biāo)量值用不同顏色標(biāo)示，顏色相近的兩個(gè)網(wǎng)格表示其位置的標(biāo)量數(shù)據(jù)取值也是相近的。本文提出的面向高分辨率海洋標(biāo)量場數(shù)據(jù)的高效時(shí)變可視化方法是根據(jù)人眼色差識別度的研究結(jié)果，確定數(shù)據(jù)時(shí)變閾值。渲染流程如圖2所示，如果某個(gè)位置在兩個(gè)連續(xù)時(shí)間點(diǎn)的數(shù)據(jù)變化小于時(shí)變閾值，將不重新渲染該位置，這能減少時(shí)變渲染數(shù)據(jù)量。同時(shí)，精準(zhǔn)定位需要更新的渲染命令，按需更新，能夠提高可視化效率。

圖2 時(shí)變渲染流程

2.1 時(shí)變閾值確定

調(diào)研時(shí)隨機(jī)抽取30人，調(diào)研內(nèi)容包括設(shè)置多個(gè)差值作為候選閾值，要素值區(qū)間經(jīng)過細(xì)分使每種顏色再細(xì)分出三種深淺不一的顏色，每種顏色對應(yīng)的兩個(gè)要素值在不同差值時(shí)循環(huán)交替渲染，檢驗(yàn)參與人員是否可以觀察到顏色變化，變化是否明顯。利用CIEDE2000色差公式計(jì)算不同差值下的色差，結(jié)合調(diào)研結(jié)果，確定最終的變化閾值。

不同差值時(shí)觀察到顏色變化的人數(shù)和色差結(jié)果統(tǒng)計(jì)見表1。可以看出，人眼不易識別出藍(lán)色和紅色的變化，差值敏感度較小，差值大于0.3時(shí)可以觀察到顏色變化；紫色、棕色和黃色差值敏感度較大，差值大于0.1時(shí)觀察到顏色變化。CIEDE2000 色差公式取NBS色差單位[18]，可以更加客觀地反應(yīng)人眼對不同顏色色差的辨別能力，給出與目視評價(jià)更一致的結(jié)果[19]。NBS單位色差值不同范圍內(nèi)對應(yīng)的感覺色差程度見表2。結(jié)合調(diào)研結(jié)果和計(jì)算得到的色差值，為了覆蓋更多變化數(shù)據(jù)，選取0.1為變化閾值，即要素值差值大于等于0.1，則稱數(shù)據(jù)發(fā)生變化。

表1 觀察到顏色變化的人數(shù)以及色差計(jì)算統(tǒng)計(jì)(30人)

表2 NBS單位色差值范圍感覺色差程度

2.2 時(shí)變數(shù)據(jù)組織結(jié)構(gòu)

系統(tǒng)實(shí)驗(yàn)數(shù)據(jù)的分辨率為0.05°×0.05°，數(shù)據(jù)劃分規(guī)則如圖3所示。單日海洋溫度數(shù)據(jù)一共被劃分成512個(gè)數(shù)據(jù)塊，每一個(gè)數(shù)據(jù)塊中包含225×225個(gè)數(shù)據(jù)，代表經(jīng)緯度范圍是11.25°×11.25°。循環(huán)遍歷相鄰兩天的數(shù)據(jù)，差值計(jì)算，引入變化閾值篩選變化數(shù)據(jù)。結(jié)合劃分規(guī)則，記錄下該數(shù)據(jù)的初次劃分序號i、數(shù)據(jù)塊號j、在數(shù)據(jù)塊中的序號k以及變化數(shù)據(jù)值value，其中k=225×m+n(m，n分別

圖3 數(shù)據(jù)劃分規(guī)則

圖4 時(shí)變數(shù)據(jù)結(jié)構(gòu)

代表變化數(shù)據(jù)在數(shù)據(jù)塊中的行下標(biāo)和列下標(biāo))，時(shí)變數(shù)據(jù)結(jié)構(gòu)如圖4所示。參照i值，將時(shí)變數(shù)據(jù)寫入對應(yīng)文件，預(yù)處理流程如圖5所示。對比相鄰兩天的數(shù)據(jù)文件，其中一份數(shù)據(jù)稱為待比較數(shù)據(jù)，另一份稱為比較數(shù)據(jù)。比較數(shù)據(jù)中大于變化閾值的數(shù)據(jù)作為變化數(shù)據(jù)會被記錄，待比較數(shù)據(jù)中相同位置的數(shù)據(jù)更新為變化數(shù)據(jù)，數(shù)據(jù)文件更新完成。更新后的數(shù)據(jù)參與下一輪比較，避免篩選誤差。

圖5 數(shù)據(jù)預(yù)處理

2.3 使用前端GPU時(shí)變渲染

使用4臺通訊服務(wù)器讀取、組織數(shù)據(jù)，整理成數(shù)據(jù)塊，轉(zhuǎn)換為JSON格式，利用WebSocket傳給主服務(wù)器。主服務(wù)器循環(huán)遍歷塊中數(shù)據(jù)，轉(zhuǎn)換數(shù)據(jù)類型，調(diào)用GPU進(jìn)行數(shù)據(jù)點(diǎn)渲染，并生成一條渲染命令。系統(tǒng)存儲渲染命令，記錄命令標(biāo)識，依次執(zhí)行渲染命令完成全球范圍海洋數(shù)據(jù)的初始渲染。系統(tǒng)通過更新初始渲染命令完成時(shí)變渲染。渲染命令不是按序存儲，根據(jù)時(shí)變數(shù)據(jù)結(jié)構(gòu)，通過i，j計(jì)算得到命令標(biāo)識，計(jì)算公式為i× 128 +j，可以準(zhǔn)確查找渲染命令。k值確定待更新的要素值在命令中的位置，轉(zhuǎn)換value值完成數(shù)據(jù)更新，生成一條新的渲染命令，更新渲染命令，完成時(shí)變渲染。由此，去除了經(jīng)緯度冗余數(shù)據(jù)，避免每次時(shí)變渲染由于渲染命令的無序性而對所有數(shù)據(jù)進(jìn)行更新，減少數(shù)據(jù)傳輸量和需要渲染的數(shù)據(jù)量，提高數(shù)據(jù)的傳輸速度和渲染速度。

3 實(shí)驗(yàn)結(jié)果

選取2018年全年(1個(gè)月為時(shí)間跨度)，數(shù)據(jù)分辨率0.05°×0.05°的海洋溫度數(shù)據(jù)進(jìn)行驗(yàn)證。系統(tǒng)采用分布式架構(gòu)，每一臺服務(wù)器硬件相同，操作系統(tǒng)為64位win10系統(tǒng)，處理器為Intel Core i5，內(nèi)存16 G，顯卡為NVIDIA GeForce GTX 1050 Ti，使用Google Chrome瀏覽器進(jìn)行可視化界面展示。

3.1 全球海洋標(biāo)量數(shù)據(jù)時(shí)變動態(tài)可視化

2018年不同時(shí)期全球海洋溫度可視化效果如圖6所示。每臺通訊服務(wù)器對應(yīng)主服務(wù)器的一個(gè)前端子進(jìn)程，實(shí)現(xiàn)數(shù)據(jù)的并發(fā)處理，結(jié)合GPU渲染，提高渲染速度。系統(tǒng)按照時(shí)間順序讀取預(yù)處理好的時(shí)變數(shù)據(jù)文件，組織渲染時(shí)變數(shù)據(jù)，展示動態(tài)可視化效果。由于不同日期的高分辨率數(shù)據(jù)一次性渲染，無論視角如何改變，都可以直觀地觀察到清晰、詳細(xì)的海洋溫度變化情況，為之后的工作提供指導(dǎo)。系統(tǒng)優(yōu)化了渲染幀的請求進(jìn)程，只有在移動鏡頭時(shí)才會請求渲染幀，從而避免移動卡頓。

圖6 時(shí)變海洋溫度可視化(a)2018年1月1日；(b)2018年3月1日；(c)2018年10月1日

3.2 海洋標(biāo)量場信息查詢與范圍劃定

海洋標(biāo)量信息查詢是該系統(tǒng)所提供的主要交互功能之一，用戶點(diǎn)擊鼠標(biāo)獲取對應(yīng)位置的數(shù)據(jù)信息。如圖7(a)所示，系統(tǒng)能獲取到該點(diǎn)經(jīng)緯度和對應(yīng)日期，通過判斷數(shù)據(jù)所處文件及其在文件中的位置，獲取對應(yīng)要素值，可在屏幕上同步顯示。該系統(tǒng)還可以實(shí)現(xiàn)自定義范圍劃定，如圖7(b)所示。用戶點(diǎn)擊鼠標(biāo)確定起始點(diǎn)，移動鼠標(biāo)劃定范圍；點(diǎn)擊鼠標(biāo)確定終點(diǎn)，照相機(jī)會自動定位到該范圍位置，從而查看自定義范圍數(shù)據(jù)變化全過程。用戶不需要使用滑輪調(diào)整照相機(jī)與三維模型的距離，便可以快速掌握特定范圍的數(shù)據(jù)變化信息。

圖7 系統(tǒng)交互功能(a) 海洋標(biāo)量數(shù)據(jù)查詢；(b)自定義范圍劃定

3.3 時(shí)變數(shù)據(jù)渲染速度對比

不同經(jīng)緯度范圍內(nèi)經(jīng)過優(yōu)化的海洋數(shù)據(jù)與未優(yōu)化的海洋數(shù)據(jù)時(shí)變渲染所需平均時(shí)間如圖8所示。對比發(fā)現(xiàn)，經(jīng)過優(yōu)化之后的時(shí)變數(shù)據(jù)渲染所需時(shí)間遠(yuǎn)小于未經(jīng)過優(yōu)化的時(shí)變數(shù)據(jù)，且在不同時(shí)間段內(nèi)渲染所需時(shí)間有著較為明顯的變化。引入變化閾值減少了大量非必需數(shù)據(jù)的渲染，提高了渲染效率。同時(shí)，系統(tǒng)的渲染命令并非是有序的。沒有經(jīng)過優(yōu)化的時(shí)變數(shù)據(jù)無法正確匹配渲染命令，不同日期的數(shù)據(jù)需要全部重新渲染，嚴(yán)重影響更新渲染效率。時(shí)變數(shù)據(jù)優(yōu)化之后，通過命令標(biāo)識準(zhǔn)確定位渲染命令和命令中待更新數(shù)據(jù)的位置，更新數(shù)據(jù)得到新的渲染命令，完成時(shí)變渲染。優(yōu)化方法在數(shù)據(jù)傳輸過程中去除經(jīng)緯度冗余數(shù)據(jù)，減少數(shù)據(jù)傳輸量，提高數(shù)據(jù)傳輸速度；更新渲染命令，加快數(shù)據(jù)渲染速度，提升時(shí)變更新效率，所需時(shí)間的快慢取決于變化數(shù)量。

圖8 不同范圍時(shí)變用時(shí)差異對比(a)緯度(-90°，0°)，全經(jīng)度時(shí)變渲染用時(shí)差異；(b)緯度(0°，90°)，全經(jīng)度時(shí)變渲染用時(shí)差異

4 結(jié)論

本研究實(shí)現(xiàn)了面向高分辨率大屏展示的海洋標(biāo)量場時(shí)變動態(tài)可視化方案，提出了基于時(shí)變閾值的高效時(shí)變可視化方法，以海洋溫度為實(shí)驗(yàn)數(shù)據(jù)驗(yàn)證方法可行性。該方法在不影響可視化效果的前提下，減少了渲染更新數(shù)據(jù)量，利用GPU渲染需要更新的渲染命令提高了渲染效率，實(shí)現(xiàn)了多種數(shù)據(jù)實(shí)時(shí)可視化渲染且節(jié)省了內(nèi)存空間，為大屏可視化提供了思路。由于本研究是在三維地球模型加載了實(shí)時(shí)渲染圖層，仍是基于二維的動態(tài)可視化,下一步研究通過提高渲染效率實(shí)現(xiàn)三維動態(tài)可視化。