一种基于格网数据的图像渲染方法、系统、设备及介质与流程

1.本发明涉及网格数据处理领域，具体而言，涉及一种基于格网数据的图像渲染方法、系统、设备及介质。


背景技术：

2.点数据是典型的多维数据集，一般由物理量(比如风、温、湿、压、电子密度
……
)，时间(起报时间、预报时间)，高度，平面地理范围(经纬度范围)这四个维度进行描述，这四个维度能唯一决定一个格网平面。一般在webgis可视化应用领域，典型应用场景有以下两种：一是根据格点生成等值面并展示；二是根据连续时刻的时间变化，对连续时刻的等值面进行动画播放。
3.为解决上述格点可视化的两种主要业务场景，目前主流做法有以下几种：1)栅格图像等值面可视化；2)矢量等值面可视化；3)矢量切片等值面可视化。上述主流方案从可视化效果和性能上仍有不足，存在操作复杂的问题。目前核心要解决的是格点如何生成矢量等值面，以及如何实现大量数据从后端传到前端不卡顿的问题。


技术实现要素：

4.本发明的目的之一在于提供一种基于格网数据的图像渲染方法，其能够实现格点生成矢量等值面，以及解决大量数据从后端传到前端卡顿的问题。
5.本发明的目的之一在于提供一种webgl着色器渲染系统，其能够实现格点生成矢量等值面，以及解决大量数据从后端传到前端卡顿的问题。
6.本发明的目的之一在于提供一种电子设备，其能够实现格点生成矢量等值面，以及解决大量数据从后端传到前端卡顿的问题。
7.本发明的目的之一在于提供一种计算机可读存储介质，其能够实现格点生成矢量等值面，以及解决大量数据从后端传到前端卡顿的问题。
8.本发明的实施例是这样实现的：
9.第一方面：本技术实施例提供一种基于格网数据的图像渲染方法，其包括：
10.s1：采集大量格网数据并进行预处理；
11.s2：利用预处理后的各上述格网数据分别计算灰度值并生成灰度图；
12.s3：将上述灰度图由等值面算法生成等值面图；
13.s4：渲染并可视化输出上述等值面图。
14.在本发明的一些实施例中，上述步骤s2具体包括如下步骤：利用如下计算公式计算各上述格网数据的像素点灰度值p(i,j)：p(i,j)＝255*(g(i,j)-min)/(max-min)，其中g(i,j)为上述格网数据，max为上述格网数据的最大值，min为上述格网数据的最小值；根据所有上述格网数据的上述灰度值p(i,j)生成上述灰度图(0，255)。
15.在本发明的一些实施例中，上述步骤s3还包括如下步骤：通过步骤s3生成上述灰度图后，采用离散点插值算法处理上述灰度图；基于处理后的上述灰度图绘制和裁剪上述
等值面；根据上述等值面生成矢量数据以绘制上述等值面图。
16.在本发明的一些实施例中，上述步骤s3具体包括如下步骤：计算上述灰度图的纹理特征；基于上述纹理特征创建颜色渐变纹理；上述颜色渐变纹理利用纹理贴图生成上述等值面图。
17.在本发明的一些实施例中，上述步骤s3具体采用glsl着色器算法进行逻辑编辑。
18.在本发明的一些实施例中，上述步骤s4中采用webgl渲染并可视化输出上述等值面图。
19.在本发明的一些实施例中，上述一种基于格网数据的图像渲染方法还包括如下步骤s5：上述格网数据包括多个地区的地理坐标和气象信息；采集多组图像渲染数据，每组图像渲染数据包括上述格网数据、上述灰度图和上述等值面图；多组上述图像渲染数据通过机器学习训练得到点数据渲染教学模型，通过上述点数据渲染教学模型输出待检测数据的上述等值面图。
20.第二方面：本技术实施例提供一种webgl着色器渲染系统，其包括：格网数据采集模块：用于采集大量格网数据，并预处理各上述格网数据；
21.灰度图生成模块：用于利用预处理后的各上述格网数据分别计算灰度值并生成灰度图；
22.等值面图处理模块：用于将上述灰度图由等值面算法生成等值面图；
23.可视化渲染模块：用于渲染并可视化输出上述等值面图；
24.模型渲染模块：上述格网数据包括多个地区的地理坐标和气象信息；采集多组图像渲染数据，每组图像渲染数据包括上述格网数据、上述灰度图和上述等值面图；多组上述图像渲染数据通过机器学习训练得到点数据渲染教学模型，通过上述点数据渲染教学模型输出待检测数据的上述等值面图。
25.第三方面：本技术实施例提供一种电子设备，其包括：
26.存储器，用于存储一个或多个程序；
27.处理器；
28.当上述一个或多个程序被上述处理器执行时，实现如第一方面中任一项上述的方法。
29.第四方面：本技术实施例提供一种计算机可读存储介质，其上存储有计算机程序，上述计算机程序被处理器执行时实现如第一方面中任一项上述的方法。
30.相对于现有技术，本发明的实施例至少具有如下优点或有益效果：
31.第一方面：本技术实施例提供一种基于格网数据的图像渲染方法，其包括：s1：采集大量格网数据并进行预处理；s2：利用预处理后的各上述格网数据分别计算灰度值并生成灰度图；s3：将上述灰度图由等值面算法生成等值面图；s4：渲染并可视化输出上述等值面图。
32.第二方面：本技术实施例提供一种webgl着色器渲染系统，其包括：格网数据采集模块：用于采集大量格网数据，并预处理各上述格网数据；灰度图生成模块：用于利用预处理后的各上述格网数据分别计算灰度值并生成灰度图；等值面图处理模块：用于将上述灰度图由等值面算法生成等值面图；可视化渲染模块：用于渲染并可视化输出上述等值面图；模型渲染模块：上述格网数据包括多个地区的地理坐标和气象信息；采集多组图像渲染数
据，每组图像渲染数据包括上述格网数据、上述灰度图和上述等值面图；多组上述图像渲染数据通过机器学习训练得到点数据渲染教学模型，通过上述点数据渲染教学模型输出待检测数据的上述等值面图。其中格网数据采集的多个地区的地理坐标和气象信息可以通过热力图采集，渲染输出的等值面图如图5所示。
33.第三方面：本技术实施例提供一种电子设备，其包括：存储器，用于存储一个或多个程序；处理器；当上述一个或多个程序被上述处理器执行时，实现如第一方面中任一项上述的方法。
34.第四方面：本技术实施例提供一种计算机可读存储介质，其上存储有计算机程序，上述计算机程序被处理器执行时实现如第一方面中任一项上述的方法。
35.本技术实施例通过采集大量格网数据进行预处理，从而统一对所有格网数据的灰度值进行计算，提高了格网数据处理的效率和准确性；通过各格网数据计算出的灰度值生成灰度图，便于利用灰度图呈现可视化效果，提高操作便捷性；通过等值面算法将灰度图生成等值面图，从而实现格点生成矢量等值面，进一步提高可视化效果和操作便捷度；通过渲染并可视化输出等值面图，便于将大量格网数据从后端传到前端进行查看，提高可视化处理效率。本技术与现有技术相比，其能够实现将格点生成矢量等值面，并提高格网数据的处理效率，从而解决了大量数据从后端传到前端卡顿的问题。
附图说明
36.为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
37.图1为本发明实施例1基于格网数据的图像渲染方法的流程示意图；
38.图2为本发明实施例1基于格网数据的图像渲染方法的原理示意图；
39.图3为本发明实施例1灰度图的示意图；
40.图4为本发明实施例1渲染输出的示意图；
41.图5为本发明实施例2webgl着色器渲染系统的原理示意图；
42.图6为本发明实施例3电子设备的原理图。
具体实施方式
43.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本技术实施例的组件可以以各种不同的配置来布置和设计。
44.因此，以下对在附图中提供的本技术的实施例的详细描述并非旨在限制要求保护的本技术的范围，而是仅仅表示本技术的选定实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
45.在本技术的描述中，还需要说明的是，除非另有明确的规定和限定，术语“设置”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本技术中的具体含义。
46.下面结合附图，对本技术的一些实施方式作详细说明。在不冲突的情况下，下述的各个实施例及实施例中的各个特征可以相互组合。
47.实施例1
48.请参阅图1～图3，图1～图3所示为本技术实施例提供的基于格网数据的图像渲染方法的流程示意图。基于格网数据的图像渲染方法，其包括：s1：采集大量格网数据并进行预处理；s2：利用预处理后的各上述格网数据分别计算灰度值并生成灰度图；s3：将上述灰度图由等值面算法生成等值面图；s4：渲染并可视化输出上述等值面图。
49.采集的大量格网数据为格点数据，可以通过数据包发送到服务器进行处理，服务器将接收到的数据包发送至内网进行拼包和协议解析的预处理。并且可以利用预处理筛选出不完整的格网数据，从而便于统一格式进行下一步处理。将预处理后的格网数据采用同样的方式计算得到灰度值，其中灰度值采用灰度图(0，255)表示。计算方式可以通过函数设定，便于将预处理后的格网数据进行归一化处理得到灰度值。详细的，利用大量格网数据计算的灰度值生成灰度图，从而利用格网化呈现数据。
50.由于格点数据通常很大，几十m到几百m不等，把这样的数据传输到前端是很难的。而如果以灰度图方式传输，只需要200k左右。矢量转栅格灰度图传输，在网络传输上有非常大的优势。因此能够实现数据小网络传输压力小，并且便于服务器前端进行纹理渲染。
51.等值面是指空间中的一个曲面，在该曲面上函数f(x,y,z)的值等于某一给定值ft，即等值面是由所有点s＝{(x,y,z)：f(x,y,z)＝ft}组成的一个曲面。常见的等值面算法包括cuberille方法、marching cubes(mc)方法和marching tetrahedra(mt)方法。其中，以cuberille等值面方法为例，主要分为两个步骤(1)确定边界单元：对于由灰度值组成的网格化灰度图中的规则网格数据，每个网格单元看成是正六面体单元，整个三维数据由这种正六面体组成的，这种组成三维图象的基本正六面体单元称为体元。对于给定的阈值ft，遍历体数据中的各个单元，将组成体元8个顶点上的值与ft进行比较，找出顶点值跨越ft的所有体元，即体元中有的顶点值大于阈值，有的顶点值小于阈值，因此体元内包含等值面片，这就是边界单元。(2)绘制各边界单元的6个多边形面，即将等值面看成是由各单元的六个外表面拼合而成。每个单元均为一正六面体，包括6个多边形面。对组成所有边界体元的多边形面进行绘制，即可产生最终的图象结果。在绘制多边形过程中应采用合适的光照模型和消隐技术。从而网格化灰度图由等值面算法生成等值面图后，对等值面图进行渲染并输出。可选的，选择任意一种图像渲染方法和可视化处理方法输出等值面图。可选的，根据目标图像的内容将待渲染的等值面图网格数据进行排序、分类后显示。比如目标图像为地理图像时，利用各个地理图像的地理坐标以及天气变化情况对网格数据进行分类，从而进行渲染后可视化输出最终图像。
52.在本发明的一些实施例中，上述步骤s2具体包括如下步骤：利用如下计算公式计算各上述格网数据的像素点灰度值p(i,j)：p(i,j)＝255*(g(i,j)-min)/(max-min)，其中g(i,j)为上述格网数据，max为上述格网数据的最大值，min为上述格网数据的最小值；根据
所有上述格网数据的上述灰度值p(i,j)生成上述灰度图(0，255)。
53.详细的，格网数据的灰度值计算方法通过当前格网数据与最小值的差异值占整体格网数据的最大差异值的比例得到，从而统一灰度值计算标准，提高图像处理效率。
54.如下为实现灰度值计算的代码：
[0055][0056]
在本发明的一些实施例中，上述步骤s3还包括如下步骤：通过步骤s3生成上述灰度图后，采用离散点插值算法处理上述灰度图；基于处理后的上述灰度图绘制和裁剪上述等值面；根据上述等值面生成矢量数据以绘制上述等值面图。
[0057]
离散点插值的算法非常多，最经典的如克里金插值，它是最合理的区域地理空间离散点插值算法。这里以距离倒数加权平方插值算法示例，就是根据所求点坐标与指定的区域范围内离散点的距离作为权重影响数值来计算，离采样点越远的点受采样点的影响越小。可以自行设定远到一定程度的权重影响数值递减为0。根据地理特征的分形特性，通常2次方到3次方的效果比较接近真实地理特征。利用插值算法还原灰度图后，编辑等值面以进行绘制和裁剪，并根据等值面生成矢量数据以生成等值面图，从而提高等值面图的可视化效果。其中绘制和裁剪的等值面可以为多个，矢量数据可以表示为颜色色值或者图像向量值。
[0058]
在本发明的一些实施例中，上述步骤s3具体包括如下步骤：计算上述灰度图的纹理特征；基于上述纹理特征创建颜色渐变纹理；上述颜色渐变纹理利用纹理贴图生成上述等值面图。
[0059]
详细的，计算灰度图的纹理特征的值并创建颜色渐变纹理图像，从而颜色渐变纹理图像利用纹理图像生成等值面图。其中纹理特征主要通过熵值、能量、对比度和均匀度表
示，通过现有公式计算得到在此不做详细描述。利用纹理特征实现图片分类从而创建颜色渐变纹理图像，不同渐变色块图利用纹理贴图生成等值面图，实现网格数据的可视化。可选的，基于上一步骤中离散点插值算法处理后上述灰度图进行纹理计算并着色处理实现贴图绘制。
[0060]
如下为前端webgl灰度图纹理计算的代码：
[0061][0062]
在本发明的一些实施例中，上述步骤s3具体采用glsl着色器算法进行逻辑编辑。
[0063]
采用glsl着色器算编辑离散点插值算法的参数进行灰度图处理，并且编辑纹理贴图的参数进行着色。通过glsl着色器的可编程性进行插值着色，便于在输出渲染图后进行编辑。
[0064]
其中，glsl也就是opengl shading language，也称作glslang，是一个以c语言为基础的高阶著色语言。当格网数据的网点数据包括热力图中多个地区的地理坐标和各个地区的气象热力数据时，具体算法过程的代码如下：
[0065]
[0066]
[0067]
[0068]
[0069]
[0070]
[0071]
[0072]
[0073][0074]
在本发明的一些实施例中，上述步骤s4中采用webgl渲染并可视化输出上述等值面图。
[0075]
详细的，webgl(web graphics library)是一种3d绘图协议，便于前端采用webgl进行图像纹理渲染和可视化输出。
[0076]
在本发明的一些实施例中，上述一种基于格网数据的图像渲染方法还包括如下步骤s5：上述格网数据包括多个地区的地理坐标和气象信息；采集多组图像渲染数据，每组图像渲染数据包括上述格网数据、上述灰度图和上述等值面图；多组上述图像渲染数据通过机器学习训练得到点数据渲染教学模型，通过上述点数据渲染教学模型输出待检测数据的上述等值面图。
[0077]
格网数据包括多个地区的地理坐标和气象信息，采集多组格网数据、灰度图和输出的等值面图进行机器学习得到点数据渲染教学模型，从而利用输入待检测数据的格网数据、灰度图输出对应目标图像的等值面图，提高了图像还原性和渲染效果。
[0078]
实施例2
[0079]
请参阅图5，图5所示为本技术实施例提供的基于格网数据的图像渲染系统的原理示意图。webgl着色器渲染系统，其包括：格网数据采集模块：用于采集大量格网数据，并预
处理各上述格网数据；灰度图生成模块：用于利用预处理后的各上述格网数据分别计算灰度值并生成灰度图；等值面图处理模块：用于将上述灰度图由等值面算法生成等值面图；可视化渲染模块：用于渲染并可视化输出上述等值面图；模型渲染模块：上述格网数据包括多个地区的地理坐标和气象信息；采集多组图像渲染数据，每组图像渲染数据包括上述格网数据、上述灰度图和上述等值面图；多组上述图像渲染数据通过机器学习训练得到点数据渲染教学模型，通过上述点数据渲染教学模型输出待检测数据的上述等值面图。
[0080]
本技术实施例与实施例1的原理相同，在此不做重复描述。可以理解，图5所示的结构仅为示意，webgl着色器渲染系统还可包括比图5中所示更多或者更少的组件，或者具有与图5所示不同的配置。图5中所示的各组件可以采用硬件、软件或其组合实现。
[0081]
实施例3
[0082]
请参阅图6，图6为本技术实施例提供的电子设备的一种示意性结构框图。电子设备包括存储器101、处理器102和通信接口103，该存储器101、处理器102和通信接口103相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。存储器101可用于存储软件程序及模块，如本技术实施例2所提供的webgl着色器渲染系统对应的程序指令/模块，处理器102通过执行存储在存储器101内的软件程序及模块，从而执行各种功能应用以及数据处理。该通信接口103可用于与其他节点设备进行信令或数据的通信。
[0083]
其中，存储器101可以是但不限于，随机存取存储器(random access memory，ram)，只读存储器(read only memory，rom)，可编程只读存储器(programmable read-only memory，prom)，可擦除只读存储器(erasable programmable read-only memory，eprom)，电可擦除只读存储器(electric erasable programmable read-only memory，eeprom)等。
[0084]
处理器102可以是一种集成电路芯片，具有信号处理能力。该处理器102可以是通用处理器，包括中央处理器(central processing unit，cpu)、网络处理器(network processor，np)等；还可以是数字信号处理器(digital signal processing，dsp)、专用集成电路(application specific integrated circuit，asic)、现场可编程门阵列(field－programmable gate array，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
[0085]
在本技术所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本技术的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
[0086]
另外，在本技术各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
[0087]
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
[0088]
综上所述，本技术实施例提供的一种基于格网数据的图像渲染方法、系统、设备及介质：
[0089]
本技术实施例通过采集大量格网数据进行预处理，从而统一对所有格网数据的灰度值进行计算，提高了格网数据处理的效率和准确性；通过各格网数据计算出的灰度值生成灰度图，便于利用灰度图呈现可视化效果，提高操作便捷性；通过等值面算法将灰度图生成等值面图，从而实现格点生成矢量等值面，进一步提高可视化效果和操作便捷度；通过渲染并可视化输出等值面图，便于将大量格网数据从后端传到前端进行查看，提高可视化处理效率。本技术与现有技术相比，其能够实现将格点生成矢量等值面，并提高格网数据的处理效率，从而解决了大量数据从后端传到前端卡顿的问题。
[0090]
以上所述仅为本技术的优选实施例而已，并不用于限制本技术，对于本领域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。
[0091]
对于本领域技术人员而言，显然本技术不限于上述示范性实施例的细节，而且在不背离本技术的精神或基本特征的情况下，能够以其它的具体形式实现本技术。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本技术的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本技术内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。