简述一种提升可视化效果的高性能2D数据展示算法

陈海洋

摘 要 针对前端通过Canvas或svg绘制2D点线数据效率低下的问题，本文设计一种基于WebGL的高性能2D数据展示算法，采用WebGL对点数据进行渲染，在计算模型视图位置点时，使点的Z轴永远朝上，节省了程序的运算时间，提高可视化效率。

关键词 WebGL;可视化;算法

Abstract Aiming at the low efficiency of 2D point and line data drawn by canvas or SVG， this paper designs a high-performance 2D data display algorithm based on webgl， which uses webgl to render point data. When calculating the position point of model view， the Z axis of point is always upward， which saves the operation time of program and improves the visualization efficiency.

Keyword WebGL; Visualization; Algorithm

引言

面对海量数据时，仅仅通过单纯的文本数据表达方式和分析手段来快速高效地处理和使用数据已是非常困难的事，因此需要新的技术来解决这一问题[1]。数据可视化技术通过计算机绘图的方式，提供多种图形方法来直观地把晦涩难懂的传统数据形象生動地表达出来，大大加强了人们对于数据的理解交互力度[2]。

在可视化绘图情景下，前端的一些绘图技术包括Flash、VML、SVG和Canvas等，这些绘图技术都存在各自缺陷。Flash在前端绘图需要安装插件，使Flash中的元素与网页中其他元素进行交互是要消耗大量时间和资源。VML规格被W3C所拒绝，目前仅有IE浏览器可以支持使用。Canvas把图像放大图形会变模糊，也无法对已绘制的图像进行操作、修改。SVG则不能动态的修改动画内容，也不能与HTML内容集成。

1数据展示算法

1.1 算法思想

本文设计了一种基于WebGL的提升可视化效果的高性能2D数据展示算法，采用WebGL对点数据进行渲染，使用Canvas来绘制点数据的图片，然后将该图片作为材质贴到点上。其中当点数据渲染时，在计算模型视图位置点（通过坐标变换矩阵来计算）的时候，保持点Z轴不变，使得点Z轴会永远朝上，这样就节省了程序的运算时间，提高可视化效率。且本算法是通过在GPU上渲染的，比传统的svg、canvas、flash渲染方法要快得多。

1.2 算法流程

本算法的技术流程如下图1所示，主要包括以下步骤：

（1）数据准备。在数据准备阶段，主要包括获取顶点数据坐标、确定坐标变换矩阵等。顶点坐标一般来自三维软件导出，或者框架生成。由于顶点数据往往成千上万，在获取到顶点坐标后，通常会将它存储在显存，即缓存区内，方便GPU更快读取。

（2）定义顶点着色器。在定义顶点着色器阶段，根据开发需要，由opengl es编写，Javascript以字符串的形式定义并传递给GPU生成。一段顶点着色器程序的作用是根据在数据准备阶段确定的坐标变换矩阵来完成坐标变化。因此将渲染算法的顶点着色器进行如下改进：

（3）保持z轴不变。在点数据渲染上我们在计算模型视图位置点的时候，其计算公式如下。并且我们渲染时保存点的z轴不变，这样点的z轴会永远朝上，这样渲染效果最好。

（4）图元装配。定义完顶点着色器之后，且计算模型视图点时保持z轴不变则进行图元装配生成图元。在图元装配阶段，图元装配就是由顶点生成一个个图元的过程。GPU根据顶点数量，挨个执行顶点着色器程序，生成顶点最终的坐标，完成坐标转换。

（5）生成片元着色器。在生成片元着色器阶段，由Canvas来绘制点数据的片元（图片）。模型是什么颜色，看起来是什么质地，光照效果，阴影等等都在这个阶段处理。

（6）片元光栅化。片元着色器对传入顶点信息的图元进行光栅化后生成片元，即是片元光栅化阶段，由运行在GPU中的片元着色器完成模型的“上色”工作。通过片元着色器确定好了每个片元的颜色，并根据深度缓存区判断哪些片元被挡住了而不需要渲染。最终将片元信息存储到颜色缓存区，完成整个模型的渲染。

（7）写入缓存区及可视化表达输入。在最后的写入缓存区阶段，将渲染好的点数据信息存储到显存，即缓存区内，方便GPU更快读取，然后再在前端可视化表达输出。

1.3 算法应用

通过上述算法，可以得到如下图2所示的可视化图：

参考文献

[1] 陈建军，于志强，朱昀.数据可视化技术及其应用[J].红外与激光工程，2001（5）：339-342.

[2] 王子毅，张春海.基于ECharts的数据可视化分析组件设计实现[J].微型机与应用，2016，35（14）：46-48，51.