一種基于WebGL的矢量場軌跡繪制方法

黃俊勛 王伊 劉晉澤 柯水洲

摘? 要：風(fēng)場洋流數(shù)據(jù)具有數(shù)據(jù)量大、結(jié)構(gòu)復(fù)雜且隨時間變化等特點，可以使用粒子系統(tǒng)法，通過粒子的生成和粒子軌跡（矢量線）的繪制來模擬風(fēng)場的運動和變化。文章使用粒子系統(tǒng)法對風(fēng)場數(shù)據(jù)進(jìn)行了可視化。同時，針對WebGL中不同視野高度下粒子軌跡寬度不一致問題，提出了一種基于視高的粒子軌跡寬度自適應(yīng)計算方法。實驗結(jié)果表明，采用該文的粒子軌跡繪制優(yōu)化方法對矢量場數(shù)據(jù)進(jìn)行可視化時產(chǎn)生的粒子軌跡過渡平滑，軌跡線寬保持一致，極大地改善了可視化效果。

關(guān)鍵詞：矢量場；粒子系統(tǒng)法；可視化；WebGL

中圖分類號：TP391? ? 文獻(xiàn)標(biāo)識碼：A? 文章編號：2096-4706（2023）08-0092-04

Abstract： Wind ocean current data has the characteristics of large amount of data， complex structure， and changes over time. The particle system method can be used to simulate the movement and change of wind field through particle generation and particle trajectory （vector line） drawing. This paper uses particle system method to visualize wind field data. At the same time， aiming at the inconsistency of particle trajectory width under different visual field heights in WebGL， an adaptive particle trajectory width calculation method based on visual field height is proposed. Experimental results show that using the particle trajectory drawing optimization method presented in this paper to visualize vector field data produces a smooth transition of particle trajectories， maintaining consistent trajectory linewidth， and greatly improving the visualization effect.

Keywords： vector field; particle system method; visualization; WebGL

0? 引? 言

氣象海洋相關(guān)的環(huán)境數(shù)據(jù)，通常為專業(yè)機構(gòu)發(fā)布的高精度數(shù)值模擬數(shù)據(jù)，通過覆蓋全球的經(jīng)緯度網(wǎng)格分層組織，具有數(shù)據(jù)量巨大、數(shù)據(jù)結(jié)構(gòu)復(fù)雜以及隨時間變化等特點，難以直接從原始數(shù)據(jù)中觀察出其中的氣候規(guī)律和特點[1]。通過圖像對其進(jìn)行可視化可以幫助人們更好地判讀數(shù)據(jù)，對挖掘其中蘊含的專業(yè)知識具有重要意義[2]?；谟嬎銠C圖形學(xué)、人機交互技術(shù)、圖像處理技術(shù)等技術(shù)的發(fā)展，提出于20世紀(jì)80年代的“科學(xué)計算可視化”技術(shù)可以將復(fù)雜的數(shù)據(jù)轉(zhuǎn)換成比較直觀的圖像繪制到屏幕上，幫助科研人員更好地發(fā)現(xiàn)知識，因此被廣泛應(yīng)用于醫(yī)學(xué)、氣象、海洋等領(lǐng)域[3]。針對矢量場數(shù)據(jù)的可視化，常用的科學(xué)計算可視化方法有粒子法、紋理法、矢量線法、幾何圖標(biāo)法和特征法等，可根據(jù)具體應(yīng)用場景選取不同的方法。

粒子系統(tǒng)法是目前氣象海洋矢量場可視化中最常用的方法之一[4]，其原理為通過控制粒子的生成和移動來模擬不規(guī)則物體的變化，常用于模擬風(fēng)場洋流[5，6]等現(xiàn)象如圖1所示。在基于矢量線法進(jìn)行可視化時，影響矢量場數(shù)據(jù)可視化效果的因素有很多，一個是初始種子點的選取，這會影響矢量線的均勻分布程度和矢量線的長度，不利于矢量場特征的提??；另一個是種子點的數(shù)量，這會影響計算效率。目前對于矢量場數(shù)據(jù)可視化的研究，主要集中在矢量線種子點的放置方法和大規(guī)模矢量線的生成方法上[7]。傳統(tǒng)中粒子系統(tǒng)法多實現(xiàn)于CPU上，但是隨著計算機軟硬件技術(shù)的進(jìn)步，用戶對矢量場可視化效果和效率提出了更高的要求，通過結(jié)合WebGL可充分利用GPU性能提高三維可視化效果及效率[8-11]。但目前基于WebGL的粒子軌跡可視化效果還存在諸多問題，比如圖元不連續(xù)、過渡不平滑等。目前常見的粒子軌跡繪制是基于線圖元來實現(xiàn)的，該方法簡單直接，但是由于WebGL不支持設(shè)置線段寬度，基于線圖元進(jìn)行粒子軌跡的繪制會存在放大時線段不斷變寬的問題。為了在GPU中實現(xiàn)矢量線平滑過渡效果，本文提出了基于視高的軌跡寬度自適應(yīng)計算方法，以改進(jìn)不同視高下粒子軌跡繪制效果。并通過設(shè)計和實施實驗驗證了本文提出方法的有效性。

1? WebGL粒子軌跡繪制方法原理

粒子系統(tǒng)法中，粒子從“出生”到“消亡”的整個生命周期最關(guān)鍵的是計算粒子運動的位置和繪制粒子的軌跡。本節(jié)給出了其上述兩類方法的原理和選型過程。

1.1? 粒子位置計算方法

粒子可以看成沿著速度方向移動的圖元，其軌跡代表粒子移動的距離，這樣就可以表示為dx=vdt。但由于粒子可能會相互覆蓋，因此可以將其擴(kuò)展為：對于每個粒子，設(shè)置一定的生命周期，包括“出生”“運動”和“消亡”三個階段，然后計算粒子在運動階段若干時間點的位置，繪制這些位置所形成的軌跡便得到了矢量場數(shù)據(jù)可視化結(jié)果，如圖2所示。

粒子運動方程滿足：

x（t+?t）=x（t）+∫v（x）dt? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）

上面公式中，?t的大小非常重要，如果?t的值太小，則粒子數(shù)很多時這是一個很大的計算性能開銷；如果?t的值太大，則粒子每一步移動的距離過長，如果在?t這個時間段內(nèi)，速度變化很大，就會造成粒子的位置與真實的位置之間存在較大偏差。目前常用的方法是可變時間段，根據(jù)矢量場變化的快慢來設(shè)置?t的值，比如根據(jù)瀏覽器的刷新頻率設(shè)置重繪時間。

另外，對于式（1）通常是使用離散值來近似求值的，而數(shù)值精度和?t相關(guān)。有多種數(shù)值積分方法可以進(jìn)行近似計算：歐拉法和龍格-庫塔法。前者的誤差稍微高一些，為o（?t2），表達(dá)式為：x（t+?t）=x（t）+v?t；后者的誤差比較低，為o（?t3），表達(dá)式為：x（t+?t）=x（t）+[v（t）+v（t+?t）?t/2，當(dāng)然，這也意味著較大的開銷。

粒子之間是離散的，通?？梢詫⑸芷趦?nèi)各個時間點的粒子連接起來，以此表示粒子軌跡。用矢量線來表示矢量場數(shù)據(jù)一般有三種可視化方法：流線、跡線和脈線。流線是指定常矢量場中，粒子隨時間運動形成的軌跡；跡線是指時變矢量場中粒子隨時間運動形成的軌跡；脈線則是針對矢量場中的某個點，通過該點的粒子形成的軌跡。在本文采取的定常矢量場方法中，這三者沒有區(qū)別。

1.2? 粒子軌跡繪制方法

1.2.1? 基于點圖元的粒子軌跡繪制方法

在基于粒子系統(tǒng)實現(xiàn)矢量場數(shù)據(jù)可視化過程中，可以使用點圖元來繪制粒子軌跡，對1像素的粒子而言用點來實現(xiàn)是非常合適的?；驹頌椋菏紫仍陧旤c著色器中創(chuàng)建一系列正方形，各正方形有相似的寬高，大小1像素；其次在片元著色器中只需要丟棄一些不需要的像素，比如越界的粒子或生命周期結(jié)束的粒子等，其基本原理如圖3所示。尤其是對于分辨率要求不高的情況，選擇點圖元來繪制是一個不錯的選擇。

但是，使用點圖元來繪制粒子軌跡，優(yōu)點是簡單直接。但該方法存在一些問題。首先，粒子軌跡是一條曲線，曲線通常細(xì)而長，但在三維場景中，我們需要視口縮放功能去觀察不同高度下的可視化情況，隨著視口分辨率增加，同一粒子軌跡占用的像素數(shù)也會不斷增加，粒子軌跡就會出現(xiàn)不連續(xù)的情況。這是因為頂點著色器中生成了固定數(shù)量的像素點，而設(shè)置的圖元為點圖元，粒子點之間是離散的，分辨率增加但像素點不會增大，大小永遠(yuǎn)為1像素，所以像素點之間會出現(xiàn)空隙，如圖4所示。因此，當(dāng)粒子很多時，當(dāng)前屏幕全是點，粒子運動軌跡會顯得特別混亂，并且這不利于從可視化中發(fā)現(xiàn)其中數(shù)據(jù)的特征點和規(guī)律。其次，如果考慮地形因素，比如某一海拔下，地形對風(fēng)場的影響，如果使用點圖元來繪制粒子軌跡，那么地形對風(fēng)場的影響則無法較好的可視化出來。

1.2.2? 基于線圖元的粒子軌跡繪制方法

在基于粒子系統(tǒng)實現(xiàn)矢量場數(shù)據(jù)的可視化過程中，可以使用線圖元來繪制粒子軌跡，Windows系統(tǒng)底層的渲染接口是由Direct3D和OpenGL提供的[12]，這導(dǎo)致了無論設(shè)置線寬為多少，最終繪制出來的都只有一個像素。在WebGL中情況稍微復(fù)雜一些，不過其基本繪制原理很簡單，和點圖元類似，但相比于基于點圖元的粒子軌跡繪制，線圖元的繪制則沒有粒子軌跡不連續(xù)的問題，粒子軌跡如圖5所示。

雖然基于線圖元繪制粒子軌跡解決了軌跡不連續(xù)的問題，但WebGL中關(guān)于線段寬度的設(shè)置受平臺、驅(qū)動程序影響較大。首先，線圖元有GL.LINES、GL.LINE_STRIP和GL.LINE_LOOP三種，不同的驅(qū)動在渲染效果上略有不同，其中瀏覽器能繪制的最大線段寬度取決于驅(qū)動。例如，運行ANGLE驅(qū)動的用戶最大能設(shè)置1像素線寬，而Yosemite最大能設(shè)置10像素線寬；其次，如果跨設(shè)備或跨瀏覽器，也可能不會獲得一致的渲染效果，比如Chrome瀏覽器在2017年1月聲明僅支持最大最小線寬1像素。因此，線圖元的繪制受平臺和驅(qū)動設(shè)備影響，無法自定義線段寬度。這些問題會導(dǎo)致部分場的連續(xù)性特性丟失，影響可視化效果。

1.2.3? 基于三角形圖元的粒子軌跡繪制方法

在WebGL中，幾乎所有的內(nèi)容都是通過三角形來繪制的，因此，在基于粒子系統(tǒng)實現(xiàn)矢量場數(shù)據(jù)可視化過程中，可以使用三角形圖元來繪制粒子軌跡。核心思想是通過將兩個三角形拼接成一個矩形，然后每個點與下一個點之間通過繪制一個矩形連接起來?；驹頌椋菏紫龋嬎惝?dāng)前點到下一個點之間的向量；其次，根據(jù)當(dāng)前向量計算其法向量，作為偏移方向；隨后，設(shè)置一定的線寬，乘以法向量，計算往兩側(cè)偏移之后的位置；最后，按照索引關(guān)系，將偏移后的位置連接成一個個三角形，形成矩形。其基本原理如圖6所示。

由于基于線圖元進(jìn)行粒子軌跡繪制會出現(xiàn)比如軌跡不連續(xù)、線寬不能設(shè)置以及過渡不平滑等問題，本文選擇基于三角形圖元進(jìn)行軌跡繪制。在WebGL中沒有類似Canvas或SVG等可以對相鄰線段交匯處做優(yōu)化處理的line Join屬性，因此可通過繪制梯形來解決繪制矩形過程中出現(xiàn)的凹槽問題，通過偏移方向的計算、偏移的距離處理線段的斜接問題。

但是，由于采用三角形圖元繪制粒子軌跡，粒子軌跡的寬度被設(shè)為某一地理寬度，而固定的地理寬度在不同的視野高下代表不同像素數(shù)。隨著視野高度的減少、分辨率的增加，粒子軌跡寬度會逐漸增大。這種不同分辨率下線寬的不一致情況會嚴(yán)重影響矢量場數(shù)據(jù)的可視化效果。

2? 基于視高的粒子軌跡寬度自適應(yīng)繪制方法

對于粒子軌跡，理想的可視化效果是，不同分辨率下軌跡寬度在可視化效果上保持一致。要實現(xiàn)此效果，其核心思想是：在任意視野高度下，線段寬度占用的像素數(shù)是固定的。要實現(xiàn)不同視高下線段寬度占用固定的像素數(shù)，需要動態(tài)調(diào)整每一個像素代表的地理寬度。其原理如圖7所示。

不同高度下每個像素代表的地理寬度為pixelSize，具體計算過程為：

其中，height為相機距離地面的高度，height0為相機距離地面的初始高度，width0為初始高度時對應(yīng)的視野寬度，screenWidth為當(dāng)前屏幕的分辨率寬度。

offset為偏移距離，傳入到GPU中的offset為指定的像素數(shù)，最終的偏移量是線段的地理寬度，因為要和gl_position相加，而gl_position為地理坐標(biāo)。因此最終的偏移距離為：

3? 實驗結(jié)果及分析

基于WebGL進(jìn)行粒子軌跡繪制會出現(xiàn)各種各樣的問題，比如軌跡不連續(xù)、線寬不能設(shè)置以及過渡不平滑等，為了解決這些問題，本章提出了基于WebGL的粒子軌跡繪制優(yōu)化方法，該優(yōu)化方法包含兩部分：一部分是粒子軌跡平滑過渡的處理，另一部分是不同視野高度下，保持粒子軌跡的像素寬度不變。本文對傳統(tǒng)的粒子軌跡繪制方法與本文提出的方法進(jìn)行實驗對比，實驗數(shù)據(jù)以全球風(fēng)場數(shù)據(jù)為例，數(shù)據(jù)經(jīng)度為0.5°，數(shù)據(jù)來源為GFS。實驗環(huán)境如表1所示。

為了驗證WebGL環(huán)境下，本章提出的基于視高的粒子軌跡寬度自適應(yīng)計算方法對粒子軌跡的優(yōu)化效果，本章針對粒子軌跡寬度，分別設(shè)計了不同視野高度下固定地理寬度和固定像素寬度的對比實驗。其中本實驗中，當(dāng)前視口設(shè)置的最大粒子數(shù)為4 096，視野高度范圍分別選取了：26 224 km、50 km，固定的地理寬度選取線寬為15 km，固定的像素寬度選取線寬為4像素，其不同高度下粒子軌跡的可視化效果分別如圖8（a）和圖8（b）所示。

從以上實驗結(jié)果可以觀察到，在針對固定地理寬度的粒子軌跡繪制實驗中，從圖8（a）中可以發(fā)現(xiàn)，隨著視野高度的不斷增加，粒子軌跡寬度越來越大。然而，在針對固定像素寬度的粒子軌跡繪制實驗中，從圖8（b）中可以發(fā)現(xiàn)，隨著視野高度的不斷增加，粒子軌跡寬度保持不變。這使得任何高度下，粒子軌跡寬度的視覺效果保持一致。

4? 結(jié)? 論

本文針對矢量場數(shù)據(jù)可視化過程中，單條矢量線的繪制進(jìn)行了優(yōu)化，優(yōu)化效果以可視化效果為目標(biāo)，提出了基于視高的粒子軌跡寬度自適應(yīng)計算方法。實驗結(jié)果表明，采用本文的粒子軌跡繪制優(yōu)化方法對矢量場數(shù)據(jù)進(jìn)行可視化，通過設(shè)置軌跡固定像素寬度，達(dá)到了不同視高下粒子軌跡視覺寬度一致的效果，極大地改善了可視化效果。

參考文獻(xiàn)：

[1] 張俊達(dá).海洋環(huán)境數(shù)據(jù)場三維可視化技術(shù)研究 [D].長沙：國防科學(xué)技術(shù)大學(xué)，2013.

[2] 李昭.虛擬海洋環(huán)境時空數(shù)據(jù)建模與可視化服務(wù)研究 [D].杭州：浙江大學(xué)，2010.

[3] 陳樓衡.海洋標(biāo)量與矢量數(shù)據(jù)場的可視化技術(shù)研究 [D].杭州：浙江工業(yè)大學(xué)，2018.

[4] 李朱臻.矢量場可視化概述與展望 [J].信息技術(shù)與信息化，2015（2）：143-144.

[5] 李思昆，蔡勛，王文珂，等.大規(guī)模流場科學(xué)計算可視化 [M].北京：國防工業(yè)出版社，2013.

[6] 廖忠云，季民.海洋風(fēng)場三維可視化方法研究 [J].海洋信息，2016（2）：1-5.

[7] LUGT H J，GOLLUB J P. Vortex Flow in Nature and Technology [J].American Journal of Physics，1985，53（4）：381-381.

[8] 劉恒星.基于粒子系統(tǒng)的Web數(shù)字地球海洋矢量場數(shù)據(jù)動態(tài)可視化方法 [D].北京：中國科學(xué)院大學(xué)，2017.

[9] 辛文鵬，方京，夏偉.基于WebGL的海洋三維可視化系統(tǒng)設(shè)計與實現(xiàn) [J].海洋信息，2018，33（3）：44-48.

[10] WANG S Z，LI W W. Capturing the dance of the earth：Polar Globe：Real-time scientific visualization of vector field data to support climate science [J].Computers Environment and Urban Systems，2019，77：1-12.

[11] 曹柱.基于GPU的海洋水體環(huán)境多維可視化技術(shù)研究 [D].青島：中國海洋大學(xué)，2015.

[12] 李海杰.基于OpenGL的矢量場可視化方法研究與應(yīng)用 [D].沈陽：東北大學(xué)，2013.

作者簡介：黃俊勛（1991—），男，漢族，湖南長沙人，研究實習(xí)員，碩士，研究方向：職業(yè)教育。