一种基于Web的风场三维动态可视化呈现方法

摘要

本发明公开了一种基于Web的风场三维动态可视化呈现方法，通过在目标范围随机播撒种子点，对每一种子点运用公式，迭代计算生成风场流线，结合Web Worker多线程技术，风场可视化，具体包括Alpha动态修改的颜色映射法和基于Cesium的风场渲染，本发明从风场数据应用出发，给出了风场数据从获取—处理—应用流程，利用HTML5中的Web Worker多线程技术来实现风场流线寻迹并行计算，减少了流线生成耗时，通过对流线颜色的Alpha通道进行动态修改来表征风场运动形态，基于Cesium可视化平台，实现风场的动态可视化。

说明书

技术领域

本发明涉及流场可视化研究技术领域，具体是一种基于Web的风场三维动态可视化呈现方法。

背景技术

我国一直是世界上受台风影响最严重的国家之一。近年来，沿海地区频频受到台风侵蚀，给国家和广大人民造成了严重的损失。为有效地防风减灾，大量学者开展了对台风的研究，其中对台风的流场可视化及相关技术研究是热点之一。流场可视化研究方面，文献《视点相关的多层次流场快速可视化方法》利用GPU强大的并行处理能力，优化了流线跟踪计算过程；文献《海洋风场动态可视化研究》结合几何着色器与osgEarth三维虚拟地球场景，提出一套海洋风场可视化的方法；文献《基于多频稀疏噪声的流场运动方向可视化算法》提出一种基于多频稀疏噪声纹理的改进线积分卷积算法，用来提高二维流场可视化后的信息表达效果。WebGL技术应用研究方面，文献《基于粒子系统的Web数字地球海洋矢量场数据动态可视化方法》基于粒子系统的海洋矢量场数据动态可视化方法，在Cesium平台上进行Web数字地球系统构建方法与实现；文献《基于WebGL的海洋三维可视化系统设计与实现》基于JavaScript设计并开发了全球海洋信息三维可视化系统；文献《基于WebGL的水利水电工程三维地理信息平台研究》针对水利水电工程三维地理信息平台停留在客户端模式问题，采用WebGL技术搭建水利水电工程三维地理信息平台；文献《鄱阳湖区域风场矢量的Web三维动态可视化》基于矢量场及WebGL技术，提出了风场矢量的Web三维动态可视化方法体系。然而，现有研究工作大多没有从应用层面给出风场数据的快速获取、转换、应用技术流程，同时，多数流场可视化技术研究基于PC端GPU强大功能，欠缺考虑Web环境下进行三维渲染的技术局限，虽有学者也基于Web进行了流场模拟可视化研究，但可视化效果较差。

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

发明内容

本发明的目的在于提供一种基于Web的风场三维动态可视化呈现方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：

一种基于Web的风场三维动态可视化呈现方法，包括以下步骤：

步骤1：风场数据处理，包括获取风场GRIB2数据并转换为JSON格式；

步骤2：风场流线并行生成：通过在目标范围随机播撒种子，对每一种子运用公式，迭代计算生成风场流线；

步骤3：风场可视化，具体包括以下流程：a、Alpha动态修改的颜色映射法；b、基于Cesium的风场渲染。

作为本发明进一步的方案：风场流线生成过程包括：a、风场流场生成初始化；b、风场流线并行生成；c、风场流线组装、提交渲染。

风场流线生成过程详细陈述如下：

a、风场流场生成初始化：首先，检测客户端机器硬件配置，计算出合理的Worker数量k，根据所播撒的种子总数n，计算每个Worker所分配到的种子数量m＝n/k，然后给出流线生成Javascript脚本路径，构建Worker线程，在Worker线程上调用postmessage方法向Worker线程传递风场数据、所处理的种子数量m。

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

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

作为本发明进一步的方案：步骤2中，迭代计算生成风场流线：风场流线是由一系列矢量点，根据先后产生关系连接形成，t时刻风场流线矢量点按公式(1)进行计算：

P(t)＝P(t-1)+V(t-1)*dt；

式中P(t)为某时刻t风场流线点坐标，P(t-1)为其前一个时刻的风场流线点坐标，V(t-1)为t-1时刻的风场速度矢量，dt为计算时间步长。

作为本发明进一步的方案：步骤3中，Alpha动态修改的颜色映射法：颜色映射法是可视化中应用最广泛的算法，算法的核心是将数据属性与颜色建立映射关系，用相应的颜色渲染数据，在风场可视化中，流线的方向可由风场速度方向决定，但采用颜色映射法对流线可视化时，由于流线被赋予了均匀的颜色，无法体现流线的方向，采取为流线中各顶点的颜色Alpha通道赋予不同值来表征流线流动的方法，对流线P中每一顶点Pi，其每时刻t的Alpha值按公式(2)进行计算赋值；

A(P

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

作为本发明进一步的方案：步骤3中，基于Cesium的风场渲染包括以下步骤：

S1、绘制数据组装：由于采用了Worker线程进行流线的多线程并行生成，首先，在绘制对象update函数中进行判断流线是否已生成，如未生成，不进行绘制准备，否则，将流线数据按照绘制数据形式进行组装。生成顶点对象将流线顶点数据、风速数据以Float32形式进行转换存储，将流线的顶点索引数据以无符号整型形式进行转换存储。

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

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

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

与现有技术相比，本发明的有益效果是：本发明从风场数据应用出发，给出了风场数据从获取—处理—应用流程，利用HTML5中的Web Worker多线程技术来实现风场流线寻迹并行计算，减少了流线生成耗时，通过对流线颜色的Alpha通道进行动态修改来表征风场运动形态，基于Cesium可视化平台，实现风场的动态可视化。

附图说明

图1为本发明中风场数据处理框架结构示意图。

图2为本发明中矢量点的方向示意图。

图3为本发明中风场流线并行生成过程的示意图。

图4为本发明中风速颜色映射表的结构示意图。

图5为本发明中风场绘制对象处理流程的结构示意图。

图6为风场数据应用案例示意图。

图7为本发明中worker数量与流线生成耗时关系的示意图。

图8为本发明中沙德尔台风20日18时的可视化效果图。

图9为本发明中沙德尔台风23日18时的可视化效果图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例中，一种基于Web的风场三维动态可视化呈现方法，包括以下步骤：

步骤1：风场数据处理；

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

JSON是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据，简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成，并能有效地提升网络传输效率。

为完成风场数据格式转换及应用，实现技术流程如图1所示，包括：a、数据下载准备；b、数据下载及转换；c、数据应用。

a、数据下载准备：

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

b、数据下载及转换：

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

c、数据应用：

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

步骤2：风场流线并行生成：通过在目标范围随机播撒种子，对每一种子运用公式，迭代计算生成风场流线；

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

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

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

P(t)＝P(t-1)+V(t-1)*dt；

式中P(t)为某时刻t风场流线点坐标，P(t-1)为其前一个时刻的风场流线点坐标，V(t-1)为t-1时刻的风场速度矢量，dt为计算时间步长。

风场流线生成过程包括(生成过程如图3所示)：a、风场流场生成初始化；b、风场流线并行生成；c、风场流线组装、提交渲染。

a、风场流场生成初始化：首先，检测客户端机器硬件配置，计算出合理的Worker数量k，根据所播撒的种子总数n，计算每个Worker所分配到的种子数量m＝n/k，然后给出流线生成Javascript脚本路径，构建Worker线程，在Worker线程上调用postmessage方法向Worker线程传递风场数据、所处理的种子数量m。

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

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

步骤3：风场可视化，具体包括以下流程：

a、Alpha动态修改的颜色映射法：颜色映射法是可视化中应用最广泛的算法，算法的核心是将数据属性与颜色建立映射关系，用相应的颜色渲染数据。在风场可视化中，用如图4所示的颜色映射方法来映射风速大小，黑色代表风速慢，白色代表风速快，流线生成过程中，流线的方向可由风场速度方向决定，但采用颜色映射法对流线可视化时，由于流线被赋予了均匀的颜色，无法体现流线的方向；采取为流线中各顶点的颜色Alpha通道赋予不同值来表征流线流动的方法；对流线P中每一顶点Pi，其每时刻t的Alpha值按公式(2)进行计算赋值；

A(P

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

b、基于Cesium的风场渲染：

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

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

S1：绘制数据组装：由于采用了Worker线程进行流线的多线程并行生成，首先，在绘制对象update函数中进行判断流线是否已生成，如未生成，不进行绘制准备，否则，将流线数据按照绘制数据形式进行组装。生成顶点对象将流线顶点数据、风速数据以Float32形式进行转换存储，将流线的顶点索引数据以无符号整型形式进行转换存储。

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

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

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

本发明基于Web的风场三维动态可视化方法的结果分析：

在Windows平台上实现了本发明的基于Web的风场三维动态可视化方法，计算机设备配置为i7-9570H 6核处理器，内存为32G，显卡为NVIDIA QUADRO T2000。验证流程包括：a、风场数据应用；b、Web Worker数量与流线生成性能分析；c、风场可视化。

a、风场数据应用：

实现风场数据从获取—处理—应用流程，其中风场的获取、处理过程用Java编程语言实现。服务端定时地从NOMAS网站进行风场数据下载、转换、存储。客户端发出风场数据请求后，将从服务器端下载风场数据—JSON文件，然后进行解析应用。图6为2020年10月22日18时的风场数据应用案例，通过案例应用表明，基于Web的风场三维动态可视化方法中的风场数据处理流程能实时地获取、处理风场数据，所处理的风场数据能方便快捷地进行集成，为快速实现风场数据应用提供数据支撑。

b、Web Worker数量与流线生成性能分析：

为验证利用Web Worker进行流线并行生成方法的有效性，采用流线粒子数分别为3万、5万、8万、10万、15万，Worker数量均采用1、2、4、6、10各进行100次流线生成，平均耗时对比关系如图7所示，由图可知：利用Worker并行生成流线能显著减少生成耗时，且随着流线粒子数量递增，提高速率明显增加；随着Worker数量增加，流线生成耗时呈现先递减、后递增的趋势，这主要是因为主线程与Worker之间拷贝风场数据的时间随着Worker数量增加而递增，同时表明不能通过无休止增加Worker数量来达到大幅减少流线生成时间的目的，Worker的数量需要根据生成的流线粒子数量以及机器配置进行适应性调整；

c、风场可视化：

以2020年17号台风沙德尔为例，对风场三维可视化渲染效果进行验证。2020年10月20日18时沙德尔台风在菲律宾东南部，风速较小，涡旋不太明显，如图8，至2020年10月23日18时，沙德尔台风逐渐靠近海南岛，风速明显增强，形成了很明显的涡旋，如图9。此外，通过图8、图9中流线的运动，可直观地表达沙德尔台风随时间的风场动态趋势变化。

本发明的工作原理是：本发明提供了风场数据从获取—处理—应用流程，实现了风场数据获取并处理的后台模块，实时将风场数据进行下载转换为JSON文件以供Web调用，应用表明，整个流程处理的数据能够得到快速集成应用，解决了风场数据不易获取并应用的问题；通过引入Web Worker多线程技术来进行流线的并行生成，对多粒子数量、多Worker数量的流线生成耗时进行对比分析，表明Web Worker能显著提高流线的生成效率，解决了在Web中流线寻迹计算时间难以保证的难点；设计了对流线的Alpha通道进行修改的公式，通过Alpha的动态变化反映了风场的动态流动，编写嵌入到GPU端执行的风场可视化着色器代码，通过对Cesium中的绘制对象Primitive进行适应性修改实现了表达直观的风场三维动态可视化效果，同时避免了传统Web三维应用需安装浏览器插件的弊端。结果表明，基于Web的风场三维动态可视化方法能快速应用风场数据、高效生成风场流线、直观表达风场动态趋势，为在Web端进行风场可视化提供了参考方法，同时，可为相关部门在防风减灾决策中提供支撑。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。