基于Web的风场三维动态可视化设计与仿真

田茂春，邹显勇，杨 跃，范光伟，赖 杭

(珠江水利科学研究院，广东 广州 510611)

0 引 言

中国一直是世界上受台风影响最严重的国家之一。近年来，沿海地区频频受到台风侵蚀，给国家和广大人民造成了严重的损失。为有效地防风减灾，大量学者开展了对台风的研究，其中对台风的流场可视化及相关技术研究是热点之一。

流场可视化研究方面，文献[1-2]分别提出了一种新的种子点替换策略；文献[3-4]各提出一种新型的流线替换算法，以实现流线的快速高质量绘制；文献[5-6]采用粒子系统的方法实现了三维风场可视化。鲁大营等[7]定义平流体作为流场的中介表示，准确地跟踪粒子路径。文献[8-9]利用GPU强大的并行处理能力，优化了流线跟踪计算过程。李尔园等[10]以World Wind三维平台为基础，设计、开发了栅格图面图元、矢量箭头和等值线生成算法，实现了三维地形与海面风场叠加可视化。文献[11]将向量场可视化结果实时地融合在具有地理位置信息的三维环境中。黄吴蒙等[12]设计了一种组织管理海面格网的方法，在此基础上提出了一种支持实时风场更新的海浪动态绘制方法；文献[13-14]基于OSGEarth开源平台对多种流场可视化方法集成。李春鑫等[15]提出一种三维流场可视化自适应方法，用于解决三维流场数据可视化容易出现的显示混乱问题。樊宇等[16]结合几何着色器与OSGEarth三维虚拟地球场景，提出一套海洋风场可视化的方法；文献[17]提出一种基于多频稀疏噪声纹理的改进线积分卷积算法，用来提高二维流场可视化后的信息表达效果。文献[18]提出一种基于着色模型实时构造的海洋流场动态流线可视化方法，实现了海洋流场流向、流速等特征信息的直观高效可视化表达。

Web三维技术应用研究方面，杜鹏[19]基于WebGL开发了气象三维信息系统，实现了免浏览器插件的B/S架构的可视化平台；刘恒星[20]基于粒子系统的海洋矢量场数据动态可视化方法，在Cesium平台上进行Web数字地球系统构建方法与实现；辛文鹏等[21]基于JavaScript设计并开发了全球海洋信息三维可视化系统；文献[22]将Web技术、BIM技术应用于大型水库工程建设期，用信息化手段全面掌握建设期信息，提高水库建设期管理水平；王星捷等[23]针对采用WebGL技术实现三维GIS中出现二、三维空间数据不同步、错位情况等问题，设计了相应算法进行处理；文献[24]基于网络图形库WebGL开源框架Three.js，搭建了用于地质研究及知识普及的虚拟仿真三维平台。2020年，袁武彬等[25]基于矢量场及WebGL技术，提出了风场矢量的Web三维动态可视化方法体系；文献[26-28]基于WebGL的开源平台Cesium完成了三维虚拟场景的搭建。

然而，上述研究工作大多没有从应用层面给出风场数据的快速获取、转换、应用流程，同时，多数流场可视化仿真技术研究基于PC端GPU强大功能，欠缺考虑Web环境下进行三维渲染的技术局限，虽有学者也基于Web进行了流场模拟可视化仿真研究，但可视化效果不甚理想。

综上分析，为实现Web环境下对风场进行三维动态可视化直观表达，本文的主要工作体现在以下几个方面：1)给出风场数据的获取—处理—应用流程，使风场数据得到快速应用；2)利用Web Worker多线程技术，设计风场流线寻迹并行计算方法，减少流线生成耗时，实现Web环境下快速生成风场流线；3)设计对流线颜色的Alpha通道进行动态修改的方法，直观表达风场流线流动形态；4)扩展WebGL可视化引擎Cesium，设计风场可视化绘制对象，实现直观的风场可视化仿真效果。

1 数据处理

为应用互联网提供的风场数据，需完成风场GRIB2数据获取、JSON格式转换等内容。

1.1 GRIB2数据

研究数据来源于美国国家气象局的全球预报系统(GFS)，该系统每天预测产生全球范围的气象数据4次，数据精度达到0.25°×0.25°，数据可在NOMADS(NOAA Operational Model Archive and Distribution System)网站进行下载，格式为GRIB2。GRIB2由WMO(世界气象组织)开发，是一种用于交换和存储规则分布数据的二进制编码文件格式，目前广泛应用于数值天气预报产品。NOMADS提供了GFS预测的多个维度的气象产品数据，根据风场可视化仿真研究需要，选取全球范围内(经度范围-180°～180°，纬度范围-90°～90°)的U、V方向风速数据进行研究。

1.2 数据处理框架

为完成风场数据格式转换及应用，处理流程如图1所示，主要步骤如下：

图1 风场数据处理框架

1)数据下载准备。NOMADS提供的GFS数据，每6 h产生一次，每天4次，在进行数据下载前，需根据当前系统时间与上一次数据下载时间进行对比，当时间间隔达到6 h，进行数据下载地址组装。根据研究所需数据，需将U、V方向参数、经纬度范围参数、时间参数一起组合为Http下载服务地址。

2)数据下载及转换。风场数据下载模块根据组装后的Http下载服务地址，构建Http请求，向NOMADS请求数据下载。收到请求响应后，获取数据输入流，将其以流数据方式写入服务器端。然后，GRIB2JSON转换模块利用开源工具GRIB2JSON完成GRIB2数据文件到JSON文件的转换。

3)数据应用。用户发送即时的风场数据请求，请求处理模块根据请求的时间，提取日期、时间，进行最相邻时间数据文件匹配，然后从服务器读取风场JSON数据返回给用户。

2 流线并行生成方法

2.1 Web Worker

传统的浏览器为了接口一致性，以单线程方式来执行页面解析和渲染，随着Web技术不断发展，越来越多的任务被设计在浏览器客户端执行。任务逻辑的复杂性、计算密集性的增加使得单线程方式已经不适应当前Web页面的解析渲染，Web Worker技术应运而生。Web Worker是在W3C制定的HTML5标准中提出，旨在为JavaScript提供多线程的运行环境。在JavaScript主线程中，通过构造Worker类，开辟一个子线程来执行加载到Worker中的JavaScript脚本。主线程与子线程之间通过PostMessage、OnMessage进行交互，如此，将众多与DOM页面无关的任务放置在Worker中执行，减轻了JavaScript主线程负担，减少了Web页面响应时间。采用多Worker并行计算方式来执行流线生成、流线几何体组装等计算密集性任务。

2.2 流线原理

流线是由一系列矢量点根据先后产生关系连接产生的，每个矢量点的方向与通过该点的流线切线方向一致，如图2所示。

图2 流线示意图

图2中黑点的箭头表示流线中该点矢量的方向和大小，任一流线可以用公式(1)表示。

pt=pt-1+vt-1dt

(1)

式中pt为流线上某时刻t的一点坐标，它可由其前一个时刻坐标pt-1和其速度矢量vt-1与时间步长dt计算得到。

2.3 流线生成过程

风场流线是由若干流线组成，通过在目标范围随机播撒种子点，对每一种子点运用公式(1)计算该种子点迭代产生流线，结合Web Worker多线程技术，设计风场流线生成过程如图3所示。

图3 风场流线并行生成过程

1)流场生成初始化。检测客户端机器硬件配置，计算合理的Worker数量k，根据所播撒的粒子总数n，计算每个Worker所分配的生成流线数量m=n/k。然后给出流线生成JavaScript脚本路径，构建Worker线程，在Worker线程上调用PostMessage方法向Worker线程传递风场数据以及所需处理的流线数量m。

2)流线并行生成。Worker线程中，通过OnMessage接收到数据后，在目标地理坐标范围内播撒数量为m的种子，赋予每个种子迭代的生命周期a。迭代每个种子，根据公式(1)和风场数据，计算流线所经过的点坐标，在迭代步数到a或者流线所经的点风速为0时，迭代终止，流线计算完毕。将Worker所生成的流线进行点索引、点位置合并，通过PostMessage将数据发送回主线程。

3)风场可视化渲染。在主线程中获取到各Worker所发送的流线数据后，提交给流线绘制对象进行可视化渲染。

3 风场可视化渲染

3.1 Alpha动态修改的颜色映射法

颜色映射法是可视化中应用最广泛的算法，算法的核心是将数据属性与颜色建立映射关系，用相应的颜色渲染数据。在风场可视化仿真中，用如图4所示的颜色映射方法来映射风速大小，黑色代表风速慢，白色代表风速快。

图4 风速颜色映射表

流线生成过程中，流线的方向可由风场速度方向决定，但采用颜色映射法对流线可视化时，由于流线被赋予了均匀的颜色，无法体现流线的方向。采取为流线中各顶点的颜色Alpha通道赋予不同值来表征流线流动的方法。对流线P中每一顶点pi，其每时刻t的Alpha值按公式(2)进行计算赋值。

A(pi,t)=(R(0,1)+i·s)r-t·f

(2)

式中，R为流线P生成的0～1内的随机值，变量i表示流线中第i个顶点的序号，s表示Alpha变化递增步长，r为Alpha变化的速率，f为渲染帧速调节系数。

3.2 基于Cesium的风场可视化渲染

Cesium是一款基于WebGL的主要用来渲染三维地球的开源JavaScript产品，能够进行地理空间数据的三维可视化，方便用户快速搭建一款零插件的虚拟地球Web应用。

为使三维应用快速开发，Cesium对WebGL进行了封装，提供方便快捷的API接口，使开发人员在不接触到WebGL底层API情况下就可进行三维对象的渲染。对于风场可视化渲染，由于涉及的数据量较大，用Cesium已有方法进行渲染绘制难以保证效率，此外，流线数据结构并不适合用Cesium已有的API进行渲染。通过研究，对Cesium提供的封装WebGL底层API函数的Primitive绘制对象进行扩展，改造为WindPrimitive风场可视化绘制对象。在WindPrimitive对象中，设计并实现了Update函数完成风场可视化绘制准备工作，Cesium渲染框架每帧循环调用Update函数，处理流程如图5所示。

图5 风场绘制对象处理流程

1)绘制数据组装。由于采用了Worker线程进行流线的多线程并行生成，在绘制对象Update函数中判断流线是否已生成，如未生成，不进行绘制准备，否则，将流线数据按照绘制数据形式进行组装。

2)纹理生成。查询用于风速映射表的图片数据是否已下载，如已下载，生成Cesium纹理对象，将图片数据写入，生成风速映射表纹理。

3)着色器加载。流线的动态可视化效果通过嵌入到显卡执行的着色器代码来实现，WebGL提供顶点着色器和片元着色器给用户实现个性化的渲染效果。在风场可视化渲染研究中，在顶点着色器中进行风场数据从WGS84坐标系转换为三维笛卡儿坐标系的工作，在片元着色器中，实现前述风速与颜色映射表的映射、Alpha动态修改等工作。

4)渲染命令提交。生成着色器中计算所需的一致性变量，如帧时间、Alpha动态改变速率等，并将其与已组装好的流线顶点对象、纹理对象、着色器加入到渲染命令，提交给Cesium命令列表进行渲染。

4 结果分析

在Windows平台上实现了基于Web的风场三维动态可视化设计与仿真，计算机设备配置为i7-9570H 6核处理器，内存为32 GB，显卡为NVIDIA QUADRO T2000。分别从风场数据的应用、Web Worker数量与流线生成性能分析、风场可视化渲染等方面对方法进行验证。

4.1 风场数据应用

实现风场数据的获取—处理—应用流程。服务端定时地从NOMADS网站进行风场数据下载、转换、存储。客户端发出风场数据请求，从服务器端下载风场数据——JSON文件，然后进行解析应用。图6为2020年10月22日18时的风场数据应用案例。

图6 风场数据应用案例

通过案例应用表明，客户端能实时地获取全球风场数据，获取的风场数据能实现全球任意经纬度坐标的风速查询与展示。给出的风场数据处理流程能实时地获取、处理风场数据，所处理的风场数据能方便快捷地进行集成，为快速实现风场数据应用提供数据支撑。

4.2 Web Worker数量与流线生成性能分析

为验证利用Web Worker进行流线并行生成方法的有效性，采用流线粒子数分别为3万、5万、8万、10万、15万，Worker数量均采用1、2、4、6、10各进行100次流线生成，平均耗时对比关系如图7所示。

图7 Worker数量与流线生成耗时关系

由图7可知：1)利用Worker并行生成流线能显著减少生成耗时，且随着流线粒子数量递增，提高速率效果明显更好；2)随着Worker数量增加，流线生成耗时呈现先递减、后递增的趋势，原因在于操作系统通过给每个线程分配CPU时间片来执行任务，而多线程机制以充分利用CPU时间片与IO间歇并行执行多任务实现性能提升，但由于各线程切换运行时会产生CPU任务上下文切换、IO的耗损，因此当CPU、IO满负荷运行后，随着更多线程增加带来的损耗反而使得性能下降，同样，随着Web Worker数量的增加，主线程与Worker之间拷贝风场数据的IO时间、CPU在Web Worker线程之间切换的上下文耗损均在递增，造成达到满负荷后性能下降，因此，Worker的数量需根据机器配置进行适应性调整来达到最佳性能，根据工程经验，一般取为CPU核数+1。

4.3 风场可视化渲染

以2020年第17号台风沙德尔为例，对风场三维可视化渲染效果进行验证，如图8所示。

2020年10月20日18时沙德尔台风在菲律宾东南部，风速较小，涡旋不太明显，至2020年10月23日18时，沙德尔台风逐渐靠近海南岛，风速明显增强，形成了很明显的涡旋。此外，通过图8(a)与图8(b)中流线的运动，可直观地表达沙德尔台风随时间的风场动态趋势变化。

(a) 2020年10月20日18时可视化效果

5 结束语

本文提供了风场数据的获取—处理—应用流程，实时将风场数据进行下载转换为JSON文件以供Web调用，应用表明，整个流程处理的数据能够得到快速集成应用，解决了风场数据不易获取并应用的问题；利用Web Worker多线程技术，设计了流线的并行生成方法，对多粒子数量、多Worker数量的流线生成耗时进行对比分析，表明Web Worker能显著提高流线的生成效率，解决了在Web中流线寻迹计算时间难以保证的难点；设计了对流线的Alpha通道进行修改的方法，通过Alpha的动态变化反映了风场的动态流动；设计实现了在GPU端执行的风场可视化渲染着色器代码，通过对Cesium引擎进行扩展，设计了风场可视化绘制对象WindPrimitive，实现了表达直观的风场三维动态可视化效果。结果表明，本文提出的基于Web的风场三维动态可视化设计与仿真方法，能快速应用风场数据，高效生成风场流线，直观表达风场动态趋势，为在Web端进行风场可视化仿真提供了参考方法，同时，可为相关部门在防风减灾决策中提供支撑。