一种基于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—），男，汉族，湖南长沙人，研究实习员，硕士，研究方向：职业教育。