数据展示方法及装置
技术领域
本发明涉及数据可视化领域,具体涉及一种数据展示方法及装置。
背景技术
目前,在前端绘图情景下,由于HTML语言(超文本标记语言)的功能十分有限,无法达到人们的预期设计需求,无法实现动态的、与用户友好交互的展示效果。鉴于此情况,一些绘图技术应运而生,例如Java Applet(Java语言编写的小应用程序)、 Flash、VML(矢量标记语言)、SVG(可缩放矢量图形)和Canvas (HTML 5图形绘制元素)等。然而,这些绘图技术各自都存在一些缺陷,其中,Flash在前端绘图时需要安装插件来使Flash中的元素与网页中其他元素进行交互,这一过程要消耗大量时间和资源,而且在编程实现上也较为复杂;VML规格被W3C(万维网联盟)所拒绝,对浏览器的兼容性差,目前所有浏览器中,仅有IE 浏览器可以支持VML规格,使其具有较高的局限性;Canvas是基于像素来生成图形,如果把图像放大就会使图形变得模糊,其内的图像“对象”也无法像DOM(处理可扩展标志语言的标准编程接口,又称文档对象模型)中的元素一样来添加事件,也无法对已绘制的图像进行操作、修改;SVG则不能动态地修改动画内容,也不能与HTML内容进行集成,并且SVG图不支持硬件加速。
传统的前端绘制2D点数据都是通过Canvas或者SVG进行绘制,但是当面对大量的2D数据时,这两种方法的可视化效率都十分低下,程序运行缓慢,使得数据展示过程具有较为明显的卡顿现象,极为影响用户感受。
发明内容
为了克服现有技术的不足,本发明提供一种数据展示方法及装置,以提高数据可视化效果,提高系统性能,减轻卡顿现象。
所述方法包括:
获取顶点数据,基于WebGL协议定义顶点着色器,通过统一声明的变量将获取的顶点数据传递至所述顶点着色器;
采用所述顶点着色器根据顶点数据中的顶点索引依次将所述顶点数据装配为图元,并保持各个顶点坐标的z轴不变;
生成片元着色器,采用所述片元着色器对所述图元进行渲染并光栅化生成片元信息;
将生成的片元信息存储到显存区内,以对所述片元信息进行可视化表达。
进一步地,采用所述顶点着色器根据顶点数据中的顶点索引依次将所述顶点数据装配为图元,并保持各个顶点坐标的z轴不变,包括:
将所述顶点数据合并为一个数组,所述顶点着色器根据该数组中的顶点索引,采用坐标转换公式依次对每一个顶点坐标进行坐标转换,并保持各个顶点坐标的z轴不变,将所述顶点数据装配为图元。
进一步地,生成片元着色器,包括:
采用HTML5的Canvas元素生成片元着色器,预定义可视化模型的颜色、质地、光照效果及阴影。
进一步地,采用所述片元着色器对所述图元进行渲染并光栅化生成片元信息,包括:
所述片元着色器根据深度判断所述图元是否被遮挡,若所述图元被遮挡,则不作处理;
若所述图元未被遮挡,则所述片元着色器根据预定义的可视化模型的颜色、质地、光照效果及阴影对所述图元进行渲染并光栅化生成片元信息。
本发明实施例还提供一种数据展示装置,所述数据展示装置包括数据获取模块、图元处理模块、片元处理模块及可视化模块;
所述数据获取模块用于获取顶点数据,基于WebGL协议定义顶点着色器,通过统一声明的变量将获取的顶点数据传递至所述顶点着色器;
所述图元处理模块用于采用所述顶点着色器根据顶点数据中的顶点索引依次将所述顶点数据装配为图元,并保持各个顶点坐标的z轴不变;
所述片元处理模块用于生成片元着色器,采用所述片元着色器对所述图元进行渲染并光栅化生成片元信息;
所述可视化模块用于将生成的片元信息存储到显存区内,以对所述片元信息进行可视化表达。
进一步地,所述图元处理模块具体用于:
将所述顶点数据合并为一个数组,所述顶点着色器根据该数组中的顶点索引,采用坐标转换公式依次对每一个顶点坐标进行坐标转换,并保持各个顶点坐标的z轴不变,将所述顶点数据装配为图元。
进一步地,当生成片元着色器时,所述片元处理模块用于:
采用HTML5的Canvas元素生成片元着色器,预定义可视化模型的颜色、质地、光照效果及阴影。
进一步地,当采用所述片元着色器对所述图元进行渲染并光栅化生成片元信息时,所述片元处理模块用于:
所述片元着色器根据深度判断所述图元是否被遮挡,若所述图元被遮挡,则不作处理;
若所述图元未被遮挡,则所述片元着色器根据预定义的可视化模型的颜色、质地、光照效果及阴影对所述图元进行渲染并光栅化生成片元信息。
本发明的有益效果为:
(1)本发明提供一种能够提升可视化效果的高性能数据展示算法,采用基于WebGL协议的图元着色器对点数进行图元装配,并采用基于Canvas的片元着色器来绘制点数据的图片,然后将该图片作为材质贴到点数据上,WebGL3D绘图协议允许把JavaScript 和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个 JavaScript绑定,WebGL可以为HTML5中的Canvas提供硬件3D 加速渲染,能够更加流畅地展示场景和模型,还能创建复杂的导航和数据视觉化,相对于传统的前端绘制2D点数据直接通过 Canvas或svg进行绘制的方式,本发明提供的基于WebGL协议的顶点着色器具有更加快速高效的装配性能,使数据展示加载更加流畅。
(2)本发明在通过坐标变换矩阵来计算图元的视图位置点的时候,保持点数据的z轴坐标不变,使所有顶点的z轴的朝向固定,即通常来说是朝向上方,从而使图元装配效果更好,效率更快。
附图说明
图1是本发明实施例提供的数据展示方法的流程示意图;
图2是图1中步骤S2的子步骤流程示意图;
图3是图1中步骤S3的子步骤流程示意图;
图4是本发明实施例提供的数据展示装置的功能模块示意图;
图5是本发明实施例提供的数据展示设备的结构框图。
图标:100-数据展示装置;10-数据获取模块;20-图元处理模块;30-片元处理模块;40-可视化模块;200-数据展示设备;210- 存储器;220-处理器;230-显示器。
具体实施方式
以下结合实施方式并配合附图进行详细说明。
如图1所示,本发明提供的数据展示方法,包括步骤S1~S4,具体如下。
S1,获取顶点数据,基于WebGL协议定义顶点着色器,通过统一声明的变量将获取的顶点数据传递至所述顶点着色器。
在本实施例中,所述步骤S1属于数据准备阶段,在该阶段中,获取的顶点数据通常来自三维软件导出或者定义几何体框架生成,所述顶点数据包括顶点坐标、顶点索引、uv向量,法线以及各种矩阵(如投影矩阵等)。获取的顶点数据存储在缓存区内,以便于图形处理器(Graphics Processing Unit,GPU)能够快速读取,从而提高在大数据量处理过程中的效率。其中,对于顶点坐标、顶点索引、uv向量,法线等顶点数据,采用attribute变量的形式传递给顶点着色器,矩阵则以uniform变量的形式传递给顶点着色器。
本发明实施例预先定义顶点着色器,该顶点着色器由 OpenGLes编写,基于WebGL(Web Graphics Library)3D绘图协议,由Javascript以字符串的形式定义并传递给GPU生成。WebGL 3D绘图协议允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGLES 2.0的一个JavaScript绑定,WebGL可以为 HTML5中的Canvas提供硬件3D加速渲染,能够更加流畅地展示场景和模型,相对于传统的前端绘制2D点数据通常直接通过 Canvas或svg进行绘制的方式,本发明提供的基于WebGL协议的顶点着色器具有更加快速高效的装配性能。
本发明提供基于WebGL 3D绘图协议定义的顶点着色器的一种具体实施方式,可以由以下程序段来实现:
attribute vec4 position;
attribute float a_sprite_idx;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;,
uniform float scale;
[0:northwest's x,1:width,2:height,3:size,4:offset x,5: offset y]
uniform float uSprite[length];
varying vec3 v_texCoord;
void main(){
intidx=int(a_sprite_idx)*6;
float size=uSprite[idx+3];
vec2textOffset=vec2(u_sprite[idx+4],u_sprite[idx+5]);
vec4pos=vec4(position.x+textOffset.x*scale,position.y+ textOffset.y*scale,position.z,position.w);
gl_Position=projectionMatrix*modelViewMatrix*pos;
gl_PointSize=size;
v_texCoord=vec3(u_sprite[idx],u_sprite[idx+1], u_sprite[idx+2]);
}
S2,采用所述顶点着色器根据顶点数据中的顶点索引依次将所述顶点数据装配为图元,并保持各个顶点坐标的z轴不变。
请参照图2,在本实施例中,所述步骤S2包括以下子步骤:
S21,将所述顶点数据合并为一个数组,通过统一声明的变量将该数组传递至所述顶点着色器;
S22,所述顶点着色器根据该数组中的顶点索引,采用坐标转换公式依次对每一个顶点坐标进行坐标转换,并保持各个顶点坐标的z轴不变,将所述顶点数据装配为图元。
图元装配即由顶点坐标生成一个个图元的过程,GPU根据数组中顶点的次序,依次执行顶点着色器程序段,生成最终的图元坐标,完成坐标转换。传统的2D Canvas或svg方式绘制千万量级的数据几乎是不可能完成的,本发明采用基于WebGL协议的顶点着色器对顶点数据进行图元装配,当需要处理的数据量达到千万级时,处理起来同样具有一定难度,因此,本发明在所述子步骤 S21中,首先将顶点数据合并为一个数组,可选地,包括左上角坐标、宽度、高度、大小、offsetx、offsety这六个参数,然后通过统一声明的变量来将顶点数据传递给所述顶点着色器,从而最大可能的提高处理效率和性能。然后再根据该数组中的顶点索引,即顶点坐标次序,依次将所有顶点数据装配为图元,装配过程中保持顶点数据的z轴坐标不变,使顶点的z轴的朝向固定,即通常来说是朝向上方,从而使图元装配效果更好,效率更快。
顶点数据装配过程中在计算模型视图位置点的时候,本发明提供坐标转换公式如下:
mvPosition=modelViewMatrix*vec4(0.0,0.0,0.0,1.0);
mvPosition.xy+=rotatedPosition;
S3,生成片元着色器,采用所述片元着色器对所述图元进行渲染并光栅化生成片元信息。
本发明预先定义片元着色器,包括:采用HTML5的Canvas 元素生成片元着色器,预定义可视化模型的颜色、质地、光照效果及阴影。
该片元着色器采用具有硬件加速渲染特性的Canvas来绘制顶点数据的片元,预先定义好可视化模型的颜色、质地、光照效果、阴影等多个参数。
请参照图3,在本实施例中,所述步骤S3中采用所述片元着色器对所述图元进行渲染并光栅化生成片元信息的步骤由以下子步骤实现:
S31,所述片元着色器根据深度判断所述图元是否被遮挡,若所述图元被遮挡,则不作处理;
S32,若所述图元未被遮挡,则所述片元着色器根据预定义的可视化模型的颜色、质地、光照效果及阴影对所述图元进行渲染并光栅化生成片元信息。
片元着色器对传入的图元进行“上色”渲染之前,首先根据该图元所处的深度缓存区判断该图元是否被遮挡,若被遮挡,即可视化时不会显示,则对该图元不做处理,若未被遮挡,则所述片元着色器调整所述图元的颜色、质感、光照效果及阴影,对所述图元进行光栅化生成片元信息,完成对可视化模型的渲染和上色。
S4,将生成的片元信息存储到显存区内,以对所述片元信息进行可视化表达。
在本实施例中,图元渲染后生成的片元信息存储到显存区域,即缓存区内,以便于GPU能够更加快速地读取片元信息,根据所述片元信息对可视化模型进行可视化表达。
本发明实施例还提供一种数据展示装置100,可以理解的是,该数据展示装置100各个功能模块的具体功能在上述方法实施例中已进行阐述,下面对该数据展示装置100的功能模块做简要描述。
数据获取模块10,用于获取顶点数据,基于WebGL协议定义顶点着色器,通过统一声明的变量将获取的顶点数据传递至所述顶点着色器。
图元处理模块20,用于采用所述顶点着色器根据顶点数据中的顶点索引依次将所述顶点数据装配为图元,并保持各个顶点坐标的z轴不变。
进一步地,所述图元处理模块20具体用于:
将所述顶点数据合并为一个数组,所述顶点着色器根据该数组中的顶点索引,采用坐标转换公式依次对每一个顶点坐标进行坐标转换,并保持各个顶点坐标的z轴不变,将所述顶点数据装配为图元。
片元处理模块30,用于生成片元着色器,采用所述片元着色器对所述图元进行渲染并光栅化生成片元信息。
进一步地,当生成片元着色器时,所述片元处理模块30用于:
采用HTML5的Canvas元素生成片元着色器,预定义可视化模型的颜色、质地、光照效果及阴影。
进一步地,当采用所述片元着色器对所述图元进行渲染并光栅化生成片元信息时,所述片元处理模块30用于:
所述片元着色器根据深度判断所述图元是否被遮挡,若所述图元被遮挡,则不作处理;
若所述图元未被遮挡,则所述片元着色器根据预定义的可视化模型的颜色、质地、光照效果及阴影对所述图元进行渲染并光栅化生成片元信息。
可视化模块40,将生成的片元信息存储到显存区内,以对所述片元信息进行可视化表达。
本发明实施例还提供一种数据展示设备200,该数据展示设备 200包括存储器210、处理器220及显示器230。所述存储器210、处理器220及显示器230各元件相互之间直接或间接地电性连接,以实现数据的传输或交互。所述数据展示装置100包括至少一个可以软件或固件的形式存储于所述存储器210中的软件功能模块,所述处理器220用于执行所述存储器210中存储的可执行模块,例如所述数据展示装置100所包括的软件功能模块或程序等。
其中,所述存储器210可以是,但不限于,随机存取存储器,只读存储器,可编程只读存储器等,用于存储程序或数据。所述处理器220可以是通用处理器,包括微处理器或任何常规处理器等,用于实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。所述显示器230可以是显像管显示器或液晶显示器,用于展示或显示以上实施例中可视化表达的所述片元信息。
本发明的有益效果为:
(1)本发明提供一种能够提升可视化效果的高性能数据展示算法,采用基于WebGL协议的图元着色器对点数进行图元装配,并采用基于Canvas的片元着色器来绘制点数据的图片,然后将该图片作为材质贴到点数据上,WebGL3D绘图协议允许把JavaScript 和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个 JavaScript绑定,WebGL可以为HTML5中的Canvas提供硬件3D 加速渲染,能够更加流畅地展示场景和模型,还能创建复杂的导航和数据视觉化,相对于传统的前端绘制2D点数据直接通过 Canvas或svg进行绘制的方式,本发明提供的基于WebGL协议的顶点着色器具有更加快速高效的装配性能,使数据展示加载更加流畅。
(2)本发明在通过坐标变换矩阵来计算图元的视图位置点的时候,保持点数据的z轴坐标不变,使所有顶点的z轴的朝向固定,即通常来说是朝向上方,从而使图元装配效果更好,效率更快。
说明书中未阐述的部分均为现有技术或公知常识。本实施例仅用于说明该发明,而不用于限制本发明的范围,任何本领域的技术人员能思之的变化都应落入本申请的保护范围内。