CN113902832A - 一种洪水三维动态演进和渲染方法、装置及电子设备 - Google Patents

Abstract

本发明公开了一种洪水三维动态演进和渲染方法、装置及电子设备，本发的方法包括：获取若干个时间点受洪水影响的地理图像；根据各个时间点受洪水影响的地理图像，得到各个时间点的网格数据；根据所有时间点的网格数据，利用Cesium三维可视化工具生成随时间变化的动态化的网格图像；通过Canva绘图工具对所述网格图像中的像素逐个进行渲染，得到渲染后的图像。本发明通过利用Cesium三维可视化工具，结合HTML5新增的Canvas绘图技术，进行洪水演进的三维动态演进和渲染，可直观、立体、形象地表达洪水演进过程，能实现最大程度地优化展示效果。

Description

一种洪水三维动态演进和渲染方法、装置及电子设备

技术领域

本发明涉及洪水演进可视化技术领域，具体涉及一种洪水三维动态演进和渲染方法、装置及电子设备。

背景技术

对洪水演进进行数值模拟和可视化的研究可以形象、全面地了解洪水的发生发展过程和状态，以及淹没范围和受影响程度等，有效地为洪水灾害应急管理和灾害防治提供相关的决策依据。数值模拟成果的平面表达相比于立体的三维场景，无法像立体的三维场景更形象、直观地展示洪水演进情景。三维立体可视化的数值模拟难度在于对地形和影像的宏大数据量的处理，诸多研究只集中在小型场景模型的构建上，且可扩展性差，在网络传输及内存消耗上仍存在较大的问题。我国的三维GIS系统，如GeoBeans平台，通过压缩地形、降低影像数据精度，虽然能够解决较大场景下数据的传输问题，但展示效果略为粗糙，只可作简单的模型展示，无法达到精细化的展示效果。

发明内容

鉴于以上技术问题，本发明的目的在于提供一种洪水三维动态演进和渲染方法、装置及电子设备，解决传统的三维立体可视化展示方法在展示洪水演进上展示效果粗糙的问题。

本发明采用以下技术方案：

一种洪水三维动态演进和渲染方法，包括以下步骤：

获取若干个时间点受洪水影响的地理图像，所述地理图像包含受洪水影响的地理范围大小信息以及与所述地理范围关联的地形信息；

根据各个时间点受洪水影响的地理图像，得到各个时间点的网格数据；所述网格数据包括以下信息：时间点信息、地形信息和纹理信息；

根据所有时间点的网格数据，利用Cesium三维可视化工具生成随时间变化的动态化的网格图像；

通过Canva绘图工具对所述网格图像中的像素逐个进行渲染，得到渲染后的图像。

可选的，所述通过Canva绘图工具对所述网格图像中的像素逐个进行渲染，得到渲染后的图像，包括：

将所述网格图像分割成若干个三角形图像；

通过Canva绘图工具对所述三角形图像的每条边进行着色，并对所述三角形图像中的像素逐个进行渲染，其中，每个三角形图像渲染的颜色为不同的颜色，渲染后所有三角形图像组合形成的图像为渐变色图像。

可选的，所述对所述三角形图像中的像素逐个进行渲染，包括：

获取所述三角形图像的各顶点数据，根据所述顶点数据，建立顶点数组；

调用Canva绘图工具的顶点着色器，通过顶点着色器将顶点数组中的每个顶点连接，生成若干个三角形图像；

调用Canva绘图工具的光栅器，通过光栅器对每个三角形图像的像素逐个进行渲染。

可选的，所述通过光栅器对每个三角形图像的像素逐个进行渲染包括：

利用光栅器，采用顶点插值模式对每个三角形图像的像素逐个进行渲染。

可选的，所述根据各个时间点受洪水影响的地理图像，得到各个时间点的网格数据，包括：

将所述若干个时间点受洪水影响的地理图像进行网格划分；获取每个网格的属性数据，所述属性数据包括时间点信息、地形信息和纹理信息；将每个时间点受洪水影响的地理图像包含的所有网格的属性数据作为每个时间点的网格数据。

可选的，所述将所述若干个时间点受洪水影响的地理图像进行网格划分，包括：

利用地形切片工具将各个时间点受洪水影响的地理图像进行切片。

一种洪水三维动态演进和渲染装置，包括：

地理图像获取模块，用于获取若干个时间点受洪水影响的地理图像，所述地理图像包含受洪水影响的地理范围大小信息以及与所述地理范围关联的地形信息；

网格数据生成模块，用于根据各个时间点受洪水影响的地理图像，得到各个时间点的网格数据；所述网格数据包括以下信息：时间点信息、地形信息和纹理信息；

动态图像生成模块，用于根据所有时间点的网格数据，利用 Cesium三维可视化工具生成随时间变化的动态化的网格图像；

渲染模块，用于通过Canva绘图工具对所述网格图像中的像素逐个进行渲染，得到渲染后的图像。

可选的，所述渲染模块包括：

分割模块，用于将所述网格图像分割成若干个三角形图像；

渐变图像形成模块，用于通过Canva绘图工具对所述三角形图像的每条边进行着色，并对所述三角形图像中的像素逐个进行渲染，其中，每个三角形图像渲染的颜色为不同的颜色，渲染后所有三角形图像组合形成的图像为渐变色图像。

一种电子设备，包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行所述的洪水三维动态演进和渲染方法。

一种计算机存储介质，其上存储有计算机程序，所述计算机程序在被处理器执行时，实现所述的洪水三维动态演进和渲染方法。

相比现有技术，本发明的有益效果在于：

本发明通过利用Cesium三维可视化工具的大场景三维动态渲染功能，及其优秀的矢量、图形数据的绘制能力，结合HTML5新增的 Canvas绘图技术，进行洪水演进的三维动态演进和渲染，可直观、立体、形象地、精细化的表达洪水演进过程，能实现最大程度地优化展示效果。

附图说明

图1为本发明一实施例提供的一种洪水三维动态演进和渲染方法的流程示意图；

图2为本发明具体实施例中划分的网格数据的示意图；

图3为本发明具体实施例中展示的洪水演进过程的效果示意图；

图4为本发明另一实施例提供的一种电子设备的结构示意图；

图5示出了本发明的一实施例采用Cesium动画实现语言(CZML) 创建数据驱动的时间动态场景的示意图。

具体实施方式

下面，结合附图以及具体实施方式，对本发明做进一步描述，需要说明的是，在不相冲突的前提下，以下描述的各实施例之间或各技术特征之间可以任意组合形成新的实施例：

实施例一：

请参照图1，示出了本发明实施例的一种洪水三维动态演进和渲染方法，包括以下步骤：

步骤S1:获取若干个时间点受洪水影响的地理图像，所述地理图像包含受洪水影响的地理范围大小信息以及与所述地理范围关联的地形信息；

其中，地理图像一般为矢量地图，各受洪水影响的地理图像可从水文气象站网站的产流区信息得到。在降雨过程中，流域上产生径流的区域称为产流区，其面积称产流面积；流域产流面积随降雨过程而变化，具体的，流域产流量能够通过所布设的水文气象站网定量观测。

可选的，所述地理图像还可包含流域产流量大小信息。

从所述地理图像中，可得到受洪水影响的地理范围大小，以及受洪水影响的地理范围上对应的地形信息。

步骤S2:根据各个时间点受洪水影响的地理图像，得到各个时间点的网格数据；所述网格数据包括以下信息：时间点信息、地形信息和纹理信息；

可选的，所述网格数据还可包括流域产流量大小信息。渲染步骤时，可根据流域产流量大小信息决定渲染的颜色。

在该步骤中，所述网格数据用于Cesium三维可视化工具的动画实现语言(CZML语言)创建数据驱动的时间动态场景。

在具体实施中，将网格数据的每个网格称为淹没网格，所述网格数据的数据结构可包括：每个淹没网格数据作为一个packet数据包，每个packet数据包有若干属性，包括id信息、名称信息、地理几何信息、纹理信息、时间点信息等。其中，多个淹没网格并列式存放。

其中，所述步骤S2具体可包括：

将所述若干个时间点受洪水影响的地理图像进行网格划分；获取每个网格的属性数据，所述属性数据包括时间点信息、地形信息和纹理信息；将每个时间点受洪水影响的地理图像包含的所有网格的属性数据作为每个时间点的网格数据。

其中，纹理信息又称为纹理坐标信息，在一个图形显示系统中往往存在多幅不同的纹理，它们的宽、高也不尽相同，纹理坐标信息表示纹理的数组中的二维下标，即在位图中的二维坐标。

可选的，所述将所述若干个时间点受洪水影响的地理图像进行网格划分，包括：

利用地形切片工具将各个时间点受洪水影响的地理图像进行切片。

需要说明的是，切片是指将每个级别的矢量地图切成很小的栅格地图，然后以静态方式通过web显示出来。通过地形切片工具将地理图像进行切片，可以预先将地理图像渲染生成为图片，这样在用户访问的时候，可以直接调用这些结果图片。

具体的，通过Cesium地形切片工具(CesiumLab)将高精度地形数据制作成局部精细地形切片。

步骤S3:根据所有时间点的网格数据，利用Cesium三维可视化工具生成随时间变化的动态化的网格图像；

需要说明的是，Cesium是面向三维地球的世界级JavaScript开源产品。通过提供功能丰富的JS API，帮助用户快速搭建一个零插件的虚拟地球Web应用，可以显示海量三维模型数据、全球地形高程和影像数据、矢量数据等，在性能、精度、跨平台等方面表现优越。

步骤S4:通过Canva绘图工具对所述网格图像中的像素逐个进行渲染，得到渲染后的图像。

其中，所述步骤S4具体包括：

步骤S41：将所述网格图像分割成若干个三角形图像；

步骤S42：通过Canva绘图工具对所述三角形图像的每条边进行着色，并对所述三角形图像中的像素逐个进行渲染，其中，每个三角形图像渲染的颜色为不同的颜色，渲染后所有三角形图像组合形成的图像为渐变色图像。

其中，每个三角形图像渲染的颜色可根据其对应的产流量大小信息决定渲染的颜色，产流量越大，渲染颜色越深。

其中，所述对所述三角形图像中的像素逐个进行渲染，具体包括：

获取所述三角形图像的各顶点数据，根据所述顶点数据，建立顶点数组；

其中，每个顶点数组包括三个顶点数据，所述三个顶点组成三角形。

调用Canva绘图工具的顶点着色器，通过顶点着色器将顶点数组中的每个顶点连接，生成若干个三角形图像；

具体的，可直接将顶点数组的三个顶点数据传入顶点着色器，利用顶点着色器将顶点数组按照顶点索引数组中的顺序连接成三角形；采用顶点着色器对顶点数组表示的三角形进行着色。

调用Canva绘图工具的光栅器，通过光栅器对每个三角形图像的像素逐个进行渲染。

在上述过程中，通过光栅器，在三角形表面对顶点属性中的纹理数据做顶点插值计算，使屏幕中每个像素都生成一个渐变色，可达到消除淹没网格颗粒感比较大的效果。

需要说明的是，HTML5是构建Web内容的一种语言描述方式，可实现构建以及呈现互联网内容的一种语言方式。HTML5中的Canvas 绘图工具能够精确定位到页面中每个像素，为数据的可视化提供了极为便捷的方法。

Canvas绘图工具是通过JavaScript进行2D图形的绘制，而 Canvas绘图工具标签本身是没有任何绘制能力的，它仅仅是一个容器，在绘制时，Canvas绘图工具是逐像素进行渲染的。

可选的，所述通过光栅器对每个三角形图像的像素逐个进行渲染包括：

利用光栅器，采用顶点插值模式对每个三角形图像的像素逐个进行渲染。

需要说明的是，光栅器会实现三种渲染模式，分别是贴图模式、顶点插值和线框模式。

其中，顶点插值模式的渲染方式是将三角形切成若干条平行于x 轴的直线，一般把这些直线叫做扫描线，划分好扫描线后，就可以根据扫描线左侧的起始点和右侧的终止点进行插值，计算出扫描线上每个像素点的xy坐标，uv坐标和深度值等信息。

本发明通过利用Cesium三维可视化工具的大场景三维动态渲染功能，及其优秀的矢量、图形数据的绘制能力，结合HTML5新增的 Canvas绘图技术，进行洪水演进的三维动态演进和渲染，可直观、立体、形象地表达洪水演进过程，能实现最大程度地优化展示效果。

本发明的具体应用实施例如下：

1)确定洪水影响范围，对其进行淹没网格划分，如图2所示，选择对应的水文模型进行产流计算；

2)利用Cesium地形切片工具(CesiumLab)将高精度地形数据制作成局部精细地形切片；

3)采用Cesium动画实现语言(CZML)创建数据驱动的时间动态场景，其数据结构如图5所示，图5示出了本发明的一实施例采用 Cesium动画实现语言(CZML)创建数据驱动的时间动态场景的示意图；每个淹没网格作为一个packet，每个packet有若干属性，包括 id信息、名称信息、地理几何信息、纹理信息、时间点信息等，多个淹没网格并列式存放；

4)利用HTML5提供的Canvas技术，把洪水影响范围作为整体进行渲染，渲染结果如图3所示。渲染过程分为以下几步：

1.利用淹没网格中的各顶点数据建立顶点数组(Vertex Array)，传入顶点着色器(Vertex Shader)；

2.利用顶点着色器将顶点数组按照顶点索引数组中的顺序连接成三角形；

3.通过光栅器(Rasterizer)，在三角形表面对顶点属性中的纹理数据做线性插值计算，屏幕中每个像素都生成一个渐变色，以消除颗粒感很大的淹没网格效果。

本发明通过对洪水影响范围划分淹没网格并进行产计算；利用 Cesium三维可视化工具制作成局部精细地形切片作为背景底图；采用Cesium三维可视化工具动画实现语言(CZML)创建以单个格网为 packet数据包的数据驱动的时间动态场景；最后通过建立顶点数组，用光栅器做顶点插值计算，为屏幕中每个像素生成一个渐变色，达到颜色过度自然的淹没网格效果。相比与传统的洪水淹没水深图，使用 Canvas技术预先做缓存处理，将离散的网格数据重新渲染，线型插值网格内部的纹理过渡，能够最大程度地优化展示效果。本发明利用 Cesium高效的大场景三维动态渲染功能，创建数据驱动的时间动态场景结合Canvas技术，可实现洪水演进的三维可视化模拟。利用 Cesium三维可视化工具制作局部精细地形切片，创建数据驱动的时间动态场景，结合HTML5提供的Canvas绘图工具，可渲染洪水淹没范围，能最大程度地优化展示效果。

实施例二：

本发明的一种洪水三维动态演进和渲染装置，包括：

地理图像获取模块，用于获取若干个时间点受洪水影响的地理图像，所述地理图像包含受洪水影响的地理范围大小信息以及与所述地理范围关联的地形信息；

网格数据生成模块，用于根据各个时间点受洪水影响的地理图像，得到各个时间点的网格数据；所述网格数据包括以下信息：时间点信息、地形信息和纹理信息；

动态图像生成模块，用于根据所有时间点的网格数据，利用 Cesium三维可视化工具生成随时间变化的动态化的网格图像；

渲染模块，用于通过Canva绘图工具对所述网格图像中的像素逐个进行渲染，得到渲染后的图像。

可选的，所述渲染模块包括：

分割模块，用于将所述网格图像分割成若干个三角形图像；

渐变图像形成模块，用于通过Canva绘图工具对所述三角形图像的每条边进行着色，并对所述三角形图像中的像素逐个进行渲染，其中，每个三角形图像渲染的颜色为不同的颜色，渲染后所有三角形图像组合形成的图像为渐变色图像。

实施例三：

图4为本申请实施例提供的一种电子设备的结构示意图，在本申请中可以通过图4所示的示意图来描述用于实现本申请实施例的本发明一种洪水三维动态演进和渲染方法的电子设备100。

如图4所示的一种电子设备的结构示意图，电子设备100包括一个或多个处理器102、一个或多个存储装置104，这些组件通过总线系统和/或其它形式的连接机构(未示出)互连。应当注意，图4所示的电子设备100的组件和结构只是示例性的，而非限制性的，根据需要，所述电子设备可以具有图4示出的部分组件，也可以具有图3未示出的其他组件和结构。

所述处理器102可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其它形式的处理单元，并且可以控制所述电子设备100中的其它组件以执行期望的功能。

所述存储装置104可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器102可以运行所述程序指令，以实现下文所述的本申请实施例中(由处理器实现)的功能以及/或者其它期望的功能。在所述计算机可读存储介质中还可以存储各种应用程序和各种数据，例如所述应用程序使用和/ 或产生的各种数据等。

本发明还提供一种计算机存储介质，其上存储有计算机程序，本发明的方法如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在该计算机存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机存储介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机存储介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机存储介质不包括电载波信号和电信信号。

对本领域的技术人员来说，可根据以上描述的技术方案以及构思，做出其它各种相应的改变以及形变，而所有的这些改变以及形变都应该属于本发明权利要求的保护范围之内。

Claims (10)

1.一种洪水三维动态演进和渲染方法，其特征在于，包括以下步骤：

获取若干个时间点受洪水影响的地理图像，所述地理图像包含受洪水影响的地理范围大小信息以及与所述地理范围关联的地形信息；

根据各个时间点受洪水影响的地理图像，得到各个时间点的网格数据；所述网格数据包括以下信息：时间点信息、地形信息和纹理信息；

根据所有时间点的网格数据，利用Cesium三维可视化工具生成随时间变化的动态化的网格图像；

通过Canva绘图工具对所述网格图像中的像素逐个进行渲染，得到渲染后的图像。

2.根据权利要求1所述的洪水三维动态演进和渲染方法，其特征在于，所述通过Canva绘图工具对所述网格图像中的像素逐个进行渲染，得到渲染后的图像，包括：

将所述网格图像分割成若干个三角形图像；

通过Canva绘图工具对所述三角形图像的每条边进行着色，并对所述三角形图像中的像素逐个进行渲染，其中，每个三角形图像渲染的颜色为不同的颜色，渲染后所有三角形图像组合形成的图像为渐变色图像。

3.根据权利要求2所述的洪水三维动态演进和渲染方法，其特征在于，所述对所述三角形图像中的像素逐个进行渲染，包括：

获取所述三角形图像的各顶点数据，根据所述顶点数据，建立顶点数组；

调用Canva绘图工具的顶点着色器，通过顶点着色器将顶点数组中的每个顶点连接，生成若干个三角形图像；

调用Canva绘图工具的光栅器，通过光栅器对每个三角形图像的像素逐个进行渲染。

4.根据权利要求3所述的洪水三维动态演进和渲染方法，其特征在于，所述通过光栅器对每个三角形图像的像素逐个进行渲染，包括：

利用光栅器，采用顶点插值模式对每个三角形图像的像素逐个进行渲染。

5.根据权利要求1所述的洪水三维动态演进和渲染方法，其特征在于，所述根据各个时间点受洪水影响的地理图像，得到各个时间点的网格数据，包括：

将所述若干个时间点受洪水影响的地理图像进行网格划分；获取每个网格的属性数据，所述属性数据包括时间点信息、地形信息和纹理信息；将每个时间点受洪水影响的地理图像包含的所有网格的属性数据作为每个时间点的网格数据。

6.根据权利要求5所述的洪水三维动态演进和渲染方法，其特征在于，所述将所述若干个时间点受洪水影响的地理图像进行网格划分，包括：

利用地形切片工具将各个时间点受洪水影响的地理图像进行切片。

7.一种洪水三维动态演进和渲染装置，其特征在于，包括：

地理图像获取模块，用于获取若干个时间点受洪水影响的地理图像，所述地理图像包含受洪水影响的地理范围大小信息以及与所述地理范围关联的地形信息；

网格数据生成模块，用于根据各个时间点受洪水影响的地理图像，得到各个时间点的网格数据；所述网格数据包括以下信息：时间点信息、地形信息和纹理信息；

动态图像生成模块，用于根据所有时间点的网格数据，利用Cesium三维可视化工具生成随时间变化的动态化的网格图像；

渲染模块，用于通过Canva绘图工具对所述网格图像中的像素逐个进行渲染，得到渲染后的图像。

8.根据权利要求7所述的洪水三维动态演进和渲染装置，其特征在于，所述渲染模块包括：

分割模块，用于将所述网格图像分割成若干个三角形图像；

渐变图像形成模块，用于通过Canva绘图工具对所述三角形图像的每条边进行着色，并对所述三角形图像中的像素逐个进行渲染，其中，每个三角形图像渲染的颜色为不同的颜色，渲染后所有三角形图像组合形成的图像为渐变色图像。

9.一种电子设备，其特征在于，包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1至6中任一项所述的洪水三维动态演进和渲染方法。

10.一种计算机存储介质，其上存储有计算机程序，其特征在于，所述计算机程序在被处理器执行时，实现如权利要求1至6中任一项所述的洪水三维动态演进和渲染方法。

Images