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

黃俊勛 王伊 劉晉澤 柯水洲

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

關鍵詞：矢量場；粒子系統法；可視化；WebGL

中圖分類號：TP391? ? 文獻標識碼：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? 引? 言

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

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

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

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

1.1? 粒子位置計算方法

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

粒子運動方程滿足：

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

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

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

粒子之間是離散的，通常可以將生命周期內各個時間點的粒子連接起來，以此表示粒子軌跡。用矢量線來表示矢量場數據一般有三種可視化方法：流線、跡線和脈線。流線是指定常矢量場中，粒子隨時間運動形成的軌跡；跡線是指時變矢量場中粒子隨時間運動形成的軌跡；脈線則是針對矢量場中的某個點，通過該點的粒子形成的軌跡。在本文采取的定常矢量場方法中，這三者沒有區別。

1.2? 粒子軌跡繪制方法

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

在基于粒子系統實現矢量場數據可視化過程中，可以使用點圖元來繪制粒子軌跡，對1像素的粒子而言用點來實現是非常合適的。基本原理為：首先在頂點著色器中創建一系列正方形，各正方形有相似的寬高，大小1像素；其次在片元著色器中只需要丟棄一些不需要的像素，比如越界的粒子或生命周期結束的粒子等，其基本原理如圖3所示。尤其是對于分辨率要求不高的情況，選擇點圖元來繪制是一個不錯的選擇。

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

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

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

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

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

在WebGL中，幾乎所有的內容都是通過三角形來繪制的，因此，在基于粒子系統實現矢量場數據可視化過程中，可以使用三角形圖元來繪制粒子軌跡。核心思想是通過將兩個三角形拼接成一個矩形，然后每個點與下一個點之間通過繪制一個矩形連接起來。基本原理為：首先，計算當前點到下一個點之間的向量；其次，根據當前向量計算其法向量，作為偏移方向；隨后，設置一定的線寬，乘以法向量，計算往兩側偏移之后的位置；最后，按照索引關系，將偏移后的位置連接成一個個三角形，形成矩形。其基本原理如圖6所示。

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

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

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

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

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

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

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

3? 實驗結果及分析

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

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

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

4? 結? 論

本文針對矢量場數據可視化過程中，單條矢量線的繪制進行了優化，優化效果以可視化效果為目標，提出了基于視高的粒子軌跡寬度自適應計算方法。實驗結果表明，采用本文的粒子軌跡繪制優化方法對矢量場數據進行可視化，通過設置軌跡固定像素寬度，達到了不同視高下粒子軌跡視覺寬度一致的效果，極大地改善了可視化效果。

參考文獻：

[1] 張俊達.海洋環境數據場三維可視化技術研究 [D].長沙：國防科學技術大學，2013.

[2] 李昭.虛擬海洋環境時空數據建模與可視化服務研究 [D].杭州：浙江大學，2010.

[3] 陳樓衡.海洋標量與矢量數據場的可視化技術研究 [D].杭州：浙江工業大學，2018.

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

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

[6] 廖忠云，季民.海洋風場三維可視化方法研究 [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] 劉恒星.基于粒子系統的Web數字地球海洋矢量場數據動態可視化方法 [D].北京：中國科學院大學，2017.

[9] 辛文鵬，方京，夏偉.基于WebGL的海洋三維可視化系統設計與實現 [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的海洋水體環境多維可視化技術研究 [D].青島：中國海洋大學，2015.

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

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