CN110544290A - 数据渲染方法及装置 - Google Patents

Abstract

本发明提供一种数据渲染方法，该方法包括获取顶点坐标，将获取的顶点坐标组成二维数组，通过webgl将二维数组转换成平台字节顺序为三十二位的浮点数型数组传入顶点着色器；顶点着色器根据可编程渲染管线对顶点坐标进行图元装配生成图元，并将生成的图元传入片元着色器；片元着色器对图元进行光栅化处理后生成片元；对片元进行点与点的柔光混合处理，并将处理后的片元信息写入缓存区内，以根据片元信息进行可视化表达。该方法在利用Canvas绘制图片的基础上，采用webgl来渲染贴图点坐标，极大的提升了海量数据渲染时的系统性能，加载速度快，效果好，可以方便地绘制出多种类型的图形点，提高了图元装配过程的可控性，具有较优的可视化展示效果。

Description

数据渲染方法及装置

技术领域

本发明涉及数据可视化领域，具体涉及一种数据渲染方法及装置。

背景技术

城市规划数据种类繁多，而对于规划数据的分析需要依赖于图形，通过对规划数据的可视化从而使规划分析具有更高的价值，更有利于规划分析，为规划决策提供有效支持。

一般而言，规划数据通常是2D数据，目前较为主流的2D数据渲染技术通常是利用可缩放矢量图形或HTLM5的图形绘制元素等进行图片的绘制，并在客户端进行渲染操作。其中，可缩放矢量图形(Scalable Vector Graphics，SVG)是基于可扩展标记语言(Extensible Markup Language，XML)用于描述二维矢量图形的一种图形格式，由W3C制定，是一个具有DOM接口的开放标准， SVG图形是矢量的，通过XML文本生成，无需任何图像处理工具。 SVG独立于分辨率，支持事件处理器，主要适用于具有大渲染面积的应用复杂图像。Canvas是HTML5标准中的一个图形绘制元素，由javascript为其提供绘图API，能够与浏览器渲染引擎紧密结合、节约资源，简化了图形和网页中其他元素的交互过程，而且开发人员可以像操作普通HTML元素一样操作Canvas，将所有代码写在统一的文件里，维护和更新的难度较低，能够进行实时高容量数据表示。

然而，以上两项技术也具有较为明显的缺点。SVG不能动态修改动画内容，也无法与HTML内容相集成，当数据量增加时， SVG性能会变得很差；使用SVG绘制图像存在重画变慢的情况， DOM操作要比其他图像慢，如果图像中的节点多而复杂，就会更慢。Canvas依赖于分辨率并且不支持事件处理器；利用Canvas绘制的图形并非是可以直接操作的DOM对象，如果要对其进行类似 DOM的操作，就必须使用类库，比较麻烦；Canvas生成图像的原理是基于像素，图像放大之后会变得模糊；且Canvas只能绘制2D 图像，不支持3D图像；Canvas无法对已绘制的图像进行操作、修改。

目前使用的JavaScript语言一般只能承受三四百个左右的点数据量，绘制能力有限，因此，如果在客户端进行海量数据渲染操作，对浏览器会造成很大的压力，出现加载时长过长等问题，性能较低，影响数据呈现的效果，降低客户体验。

发明内容

为了克服现有技术的不足，本发明提供一种数据渲染方法及装置，以缩短海量数据渲染时的加载时长，降低浏览器数据加载压力，提高数据可视化效果和性能，提高客户体验。所述方法包括：

获取顶点坐标，将获取的顶点坐标组成二维数组，通过webgl 将所述二维数组转换成平台字节顺序为三十二位的浮点数型数组传入顶点着色器；

所述顶点着色器根据可编程渲染管线对所述顶点坐标进行图元装配生成图元，并将生成的图元传入片元着色器；

所述片元着色器对所述图元进行光栅化处理后生成片元；

对所述片元进行点与点的柔光混合处理，并将处理后的片元信息写入缓存区内，以根据所述片元信息进行可视化表达。

进一步地，所述顶点着色器根据可编程渲染管线对所述顶点坐标进行图元装配生成图元，包括：

所述顶点着色器根据可编程渲染管线中预设的顶点坐标装配次序，依次通过一个4×4的矩阵对所述顶点坐标进行坐标转换，输出坐标转换后的顶点坐标。

进一步地，所述片元着色器对所述图元进行光栅化处理后生成片元，包括：

所述片元着色器将所述图元转换为像素点，根据预设的顶点颜色信息，采用线性化计算方式计算出每一个像素点的颜色值并对所述像素点进行颜色赋值。

另一方面，本发明还提供一种数据渲染装置，所述数据渲染装置包括坐标获取模块、顶点着色器、片元着色器及可视化模块；

所述坐标获取模块用于获取顶点坐标，将获取的顶点坐标组成二维数组，通过webgl将所述二维数组转换成平台字节顺序为三十二位的浮点数型数组传入顶点着色器；

所述顶点着色器用于根据可编程渲染管线对所述顶点坐标进行图元装配生成图元，并将生成的图元传入所述片元着色器；

所述片元着色器用于对所述图元进行光栅化处理后生成片元；

所述可视化模块用于对所述片元进行点与点的柔光混合处理，并将处理后的片元信息写入缓存区内，以根据所述片元信息进行可视化表达。

进一步地，所述顶点着色器具体用于：

所述顶点着色器根据可编程渲染管线中预设的顶点坐标装配次序，依次通过一个4×4的矩阵对所述顶点坐标进行坐标转换，输出坐标转换后的顶点坐标。

进一步地，所述片元着色器具体用于：

所述片元着色器将所述图元转换为像素点，根据预设的顶点颜色信息，采用线性化计算方式计算出每一个像素点的颜色值并对所述像素点进行颜色赋值。

本发明的有益效果为：

(1)本发明提供一种数据渲染方法，针对现有技术中利用 SVG或Canvas进行图片渲染时存在的问题，本发明在利用Canvas 绘制图片的基础上，采用webgl来渲染贴图点坐标，极大的提升了海量数据渲染时的系统性能，加载速度快，效果好，可以方便地绘制出多种类型的图形点；图元装配时根据可编程渲染管线进行装配，提高了图元装配过程的可控性。

(2)本发明在数据获取的准备阶段获取顶点坐标时，采用二维数组的形式，将二维数组转成float32array传入顶点着色器，利用批量处理思想对顶点数据进行归类，极大加快了渲染加载的速度，使系统在面对千万级的数据量时也具有极为可观的渲染速度。

(3)本发明对生成的片元采用点与点的柔光混合处理，提升了海量数据渲染时的可视化展示效果。

附图说明

图1是本发明实施例提供的数据渲染方法的流程示意图；

图2是本发明实施例提供的顶点着色器图元装配过程示意图；

图3是本发明实施例提供的片元点着色器生成片元信息过程示意图；

图4是本发明实施例提供的数据渲染装置功能模块示意图；

图5是本发明实施例提供的数据渲染设备的结构框图。

图标：100-数据渲染装置；10-坐标获取模块；20-顶点着色器； 30-片元着色器；40-可视化模块；200-数据渲染设备；210-存储器； 220-处理器；230-显示器。

具体实施方式

以下结合实施方式并配合附图进行详细说明。

如图1所示，本发明提供一种数据渲染方法，包括步骤S1～S4，具体如下。

S1，获取顶点坐标，将获取的顶点坐标组成二维数组，通过 webgl将所述二维数组转换成平台字节顺序为三十二位的浮点数型数组传入顶点着色器。

在本实施例中，通过定义几何体或三维软件导出数据获取顶点坐标，并将获取的顶点坐标组成二维数组，通过webgl将所述二维数组转换成平台字节顺序为三十二位的浮点数型数组传入顶点着色器。

本发明首先获取顶点坐标，通过查看webgl绘图的应用程序编程接口(Application Programming Interface，API)，可以发现webgl 只能绘制点、线和三角形，但是，任意一个不管多么复杂的图形，都可以通过很多个小三角形组合而成，而线和三角形都是通过顶点来绘制的。顶点是二维或三维空间中的一个点，比如二维或三维图形的端点或交点，主要是通过顶点坐标来确认顶点位置。在本发明实施例中，所获取的顶点坐标(例如顶点坐标V1 (0.5,1.0,0.5))可以通过定义几何体(例如定义几何体new Box (1,1,1))获得，或者直接由三维软件中导出顶点数据。由于生成的顶点数据的数据量级通常很大，因此，本发明实施例在获取到顶点坐标数据后，将获得的顶点坐标存入显示存储区域，即缓存区内，以便于图形处理器(Graphics Processing Unit，GPU)能够快速读取。

在本实施例中，为便于快速处理数据，与传统json不同的是，本发明将顶点坐标组成一个二维数组，通过webgl可以直接将该二维数组转换成float32array，即平台字节顺序为三十二位的浮点数型数组，并将转换后的数组传入预定义的顶点着色器，从而极大的提高了渲染加载的速度。

S2，所述顶点着色器根据可编程渲染管线对所述顶点坐标进行图元装配生成图元，并将生成的图元传入片元着色器。

该步骤S2具体包括以下内容：所述顶点着色器根据可编程渲染管线中预设的顶点坐标装配次序，依次通过一个4×4的矩阵对所述顶点坐标进行坐标转换，输出坐标转换后的顶点坐标。

本发明实施例利用批量处理的思想，将同一类型的顶点数据传入顶点着色器中，可以根据传入的顶点数组中的顶点坐标快速地进行图元装配，生成一个个的图元，有效的提升了图元装配的效率。传统的图元装配过程通常是根据传入顶点着色器的顶点坐标顺序依次进行坐标转换，但本发明为了自由控制顶点转换位置，采用可编程渲染管线，根据该可编程渲染管线中预先设置的顶点坐标装配次序进行图元装配，使图元装配过程具备了更高的可控性。

本发明采用的顶点着色器是基于canvas，由opengl es编写，并由javascript以字符串的形式定义并传递给GPU生成，该顶点着色器代码实现示例如下：

本发明实施例采用的顶点着色器采用一个position作为输入数据，通过一个4×4的矩阵对传入的顶点坐标进行坐标转换，然后输出转换后的坐标位置，根据传入的顶点坐标的数量，每具有一个顶点坐标，该顶点着色器程序就执行一次，直到对传入的所有顶点坐标都完成坐标转换，生成了一个个的图元，即三角形图形。顶点着色器的图元装配过程可以参照图2。

S3，所述片元着色器对所述图元进行光栅化处理后生成片元。

在本实施例中，该步骤S3具体包括以下内容：所述片元着色器将所述图元转换为像素点，根据预设的顶点颜色信息，采用线性化计算方式计算出每一个像素点的颜色值并对所述像素点进行颜色赋值。

本发明实施例由顶点着色器决定了图元的大小和位置等属性，即绘制出图形，再由片元着色器决定绘制图形的填充属性，即颜色、漫反射贴图、光效等。本发明实施例采用的片元着色器程序也由opengl es编写，该片元着色器代码实现实例如下：

在本实施例中，该片元着色器将图元拆解为一个一个的像素点，然后预设的顶点颜色信息，采用线性化的计算方式，计算出每一个像素点的线性化颜色值，从而对像素点进行颜色赋值，即将图元转换为一个个片元。在本发明实施例中，顶点着色器的执行次数是由传入的顶点坐标个数决定的，而片元着色器执行的次数则是由需要生成的片元，即像素的数量决定的。

S4，对所述片元进行点与点的柔光混合处理，并将处理后的片元信息写入缓存区内，以根据所述片元信息进行可视化表达。

本发明实施例在对像素点进行颜色赋值后，还采用点与点的柔光混合处理方式，从而使片元信息的可视化效果更好。处理后的片元信息写入缓存区后，将片元着色器中的颜色值设置到显存区域中的颜色缓冲区，在客户端浏览器中进行顶点数据的可视化表达。片元点着色器生成片元信息的过程可以参照图3。

请参照图4，本发明实施例还提供一种数据渲染装置100，可以理解的是，该数据渲染装置100各个功能模块的具体功能在上述方法实施例中已进行阐述，下面对该数据渲染装置100的功能模块做简要描述。

坐标获取模块10，用于获取顶点坐标，将获取的顶点坐标传入所述顶点着色器。

进一步地，所述坐标获取模块10具体用于：

通过定义几何体或三维软件导出数据获取顶点坐标；

将获取的顶点坐标组成二维数组，通过webgl将所述二维数组转换成平台字节顺序为三十二位的浮点数型数组传入顶点着色器。

顶点着色器20，用于根据可编程渲染管线对所述顶点坐标进行图元装配生成图元，并将生成的图元传入所述片元着色器。

进一步地，所述顶点着色器20具体用于：

所述顶点着色器根据可编程渲染管线中预设的顶点坐标装配次序，依次通过一个4×4的矩阵对所述顶点坐标进行坐标转换，输出坐标转换后的顶点坐标。

片元着色器30，用于对所述图元进行光栅化处理后生成片元。

进一步地，所述片元着色器30具体用于：

所述片元着色器将所述图元转换为像素点，根据预设的顶点颜色信息，采用线性化计算方式计算出每一个像素点的颜色值并对所述像素点进行颜色赋值。

可视化模块40，用于对所述片元进行点与点的柔光混合处理，并将处理后的片元信息写入缓存区内，以根据所述片元信息进行可视化表达。

请参照图5，本发明实施例还提供一种数据渲染设备，该数据渲染设备包括存储器210、处理器220及显示器230。所述存储器 210、处理器220及显示器230各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。所述数据渲染设备包括至少一个以软件或固件的形式存储于所述存储器210中的软件功能模块，所述处理器220用于执行所述存储器210中存储的可执行模块，例如所述数据渲染设备所包括的软件功能模块或程序等。

其中，所述存储器210可以是，但不限于，随机存取存储器，只读存储器，可编程只读存储器等，用于存储程序或数据。所述处理器220可以是通用处理器，包括微处理器或任何常规处理器等，用于实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。所述显示器230可以是显像管显示器或液晶显示器，用于展示或显示以上实施例中可视化表达的所述片元信息。

本发明的有益效果为：

(4)本发明提供一种数据渲染方法，针对现有技术中利用 SVG或Canvas进行图片渲染时存在的问题，本发明在利用Canvas 绘制图片的基础上，采用webgl来渲染贴图点坐标，极大的提升了海量数据渲染时的系统性能，加载速度快，效果好，可以方便地绘制出多种类型的图形点；图元装配时根据可编程渲染管线进行装配，提高了图元装配过程的可控性。

(5)本发明在数据获取的准备阶段获取顶点坐标时，采用二维数组的形式，将二维数组转成float32array传入顶点着色器，利用批量处理思想对顶点数据进行归类，极大加快了渲染加载的速度，使系统在面对千万级的数据量时也具有极为可观的渲染速度。

(6)本发明对生成的片元采用点与点的柔光混合处理，提升了海量数据渲染时的可视化展示效果。

说明书中未阐述的部分均为现有技术或公知常识。本实施例仅用于说明该发明，而不用于限制本发明的范围，任何本领域的技术人员能思之的变化都应落入本申请的保护范围内。

Claims (6)

1.一种数据渲染方法，其特征在于，所述方法包括：

获取顶点坐标，将获取的顶点坐标组成二维数组，通过webgl将所述二维数组转换成平台字节顺序为三十二位的浮点数型数组传入顶点着色器；

所述顶点着色器根据可编程渲染管线对所述顶点坐标进行图元装配生成图元，并将生成的图元传入片元着色器；

所述片元着色器对所述图元进行光栅化处理后生成片元；

对所述片元进行点与点的柔光混合处理，并将处理后的片元信息写入缓存区内，以根据所述片元信息进行可视化表达。

2.如权利要求1所述的数据渲染方法，其特征在于，所述顶点着色器根据可编程渲染管线对所述顶点坐标进行图元装配生成图元，包括：

所述顶点着色器根据可编程渲染管线中预设的顶点坐标装配次序，依次通过一个4×4的矩阵对所述顶点坐标进行坐标转换，输出坐标转换后的顶点坐标。

3.如权利要求1所述的数据渲染方法，其特征在于，所述片元着色器对所述图元进行光栅化处理后生成片元，包括：

所述片元着色器将所述图元转换为像素点，根据预设的顶点颜色信息，采用线性化计算方式计算出每一个像素点的颜色值并对所述像素点进行颜色赋值。

4.一种数据渲染装置，其特征在于，所述数据渲染装置包括坐标获取模块、顶点着色器、片元着色器及可视化模块；

所述坐标获取模块用于获取顶点坐标，将获取的顶点坐标组成二维数组，通过webgl将所述二维数组转换成平台字节顺序为三十二位的浮点数型数组传入顶点着色器；

所述顶点着色器用于根据可编程渲染管线对所述顶点坐标进行图元装配生成图元，并将生成的图元传入所述片元着色器；

所述片元着色器用于对所述图元进行光栅化处理后生成片元；

所述可视化模块用于对所述片元进行点与点的柔光混合处理，并将处理后的片元信息写入缓存区内，以根据所述片元信息进行可视化表达。

5.如权利要求4所述的数据渲染装置，其特征在于，所述顶点着色器具体用于：

所述顶点着色器根据可编程渲染管线中预设的顶点坐标装配次序，依次通过一个4×4的矩阵对所述顶点坐标进行坐标转换，输出坐标转换后的顶点坐标。

6.如权利要求4所述的数据渲染装置，其特征在于，所述片元着色器具体用于：

所述片元着色器将所述图元转换为像素点，根据预设的顶点颜色信息，采用线性化计算方式计算出每一个像素点的颜色值并对所述像素点进行颜色赋值。