P4: Portable Parallel Processing Pipelines for Interactive Information Visualization

作者:Jianping Kelvin Li and Kwan-Liu Ma

发表:TVCG 2018 Sep. 19

简介

本文介绍了一个基于 GPU 加速的信息可视化框架:P4 (Portable Parallel Processing Pipelines)。它利用 GPU 辅助进行信息可视化过程中的数据计算与图形渲染,能够对大规模数据进行可视化。

该框架实现了四个可视化开发中的目标:

  1. Performance: 运用 GPU 处理数据和渲染视图
  2. Productivity: 声明式语法
  3. Programmability: 运行时处理用户定义逻辑
  4. Portability: 基于浏览器平台(WebGL)

相关工作

图形与可视化技术

1. 声明式可视化语法

常见的可视化框架采用声明式的语法定义可视化编码与交互,能够很直观地呈现可视化效果,提升开发人员的效率。常见的可视化框架,如 D3、Protovis 可以声明式定义可视化属性,Vega、Vega Lite 等框架可声明式定义可视化交互。

2. GPU 技术

目前 GPU 主要应用于两个方面:图形绘制和通用计算。

在图形绘制方面,有基于渲染管线的绘制框架:OpenGL、WebGL,以及不同平台下的渲染框架,如 Metal、DirectX 等等。在通用计算(GPGPU)方面,一些框架可以利用 GPU 计算浮点数的高效性以及并行上的优势完成高速计算,如 OpenCL,CUDA 等。

高性能可视化技术

1. 大规模数据处理

对于大规模数据可以采取减小实际处理的数据量的方式进行优化,如对数据进行 filtering、sampling,做 data cubes 等。除此之外,也可以运用分布式的技术来处理,这种方法常见于企业级的可视化工具种,如 Spotfire、Tableau 等。

2. 实时交互性增强

为了提升用户交互的实时性,额可以采用多线程并行处理的技术,分管不同的工作,保证系统不会阻塞。同时也可以使用增量可视化的形式,逐步呈现可视化结果。

系统结构

如图所示,整个系统包含四个部分:

  • 程序接口部分:图中左上角。接受用户的输入,支持 JavaScript 调用或者 JSON 格式的设定,同时接收用户传入的结构化数据;
  • 核心处理部分:图中右上角。处理用户输入或设定的数据处理逻辑与可视化编码,调用相应的函数或调用 GPU 程序生成模块生成 Shader 程序;
  • GPU 程序模块:根据用户定义的逻辑,在运行时控制生成对应的 shader 程序;
  • GPU 计算部分:调用 WebGL 相应 API 完成数据和程序到 GPU 的传入,控制 GPU 进行计算于渲染。

编程接口

P4 的编程接口遵循 InfoVis Reference Model:

大致有五部分组成:

  1. 原始数据:设定数据的来源以及数据的格式
  2. 数据变换:通过原始数据得到可视化图表需要的目标数据,支持 Derive,Match,Aggregate 三种操作
  3. 可视化映射:设定对应的可视化编码以及编码的属性可视呈现数据
  4. 视图变换:对视图整体属性进行设定
  5. 用户交互:设定用户交互事件以及响应行为

控制流

P4 整体是一个流水线机制,在每一步中,上一步的输出作为下一步的输入,在整个过程中不存储中间计算结果,因此,如果想在单一路径的流水线中加入新的分支,需要支持一定的手动控制操作。

目前 P4 支持三种手动控制操作:

  1. Register:保存计算中间状态
  2. Resume:恢复保存的状态
  3. Export:将计算完成的结果导出为 JSON 或 JavaScript Object

视觉设计优化

当可视化大规模数据时,会有大量的点分布重叠,因此需要采取一定的方式呈现重叠的程度。本文采取了根据重叠度不同设定不同透明度的方式进行优化,公式如下:

其中:

  • $\alpha_{min}$: 设定的最小透明度,默认为 0.1
  • $\rho_{max}$: 视图中最大的重叠元素个数
  • $\rho$: 当前位置的重叠元素个数

运用上述优化后的效果如下图中间视图所示(左侧为 WebGL 默认颜色混合函数,右侧为聚合后使用不同颜色编码后结果):

并行体系

P4 首先设计了 4 中可并行的 GPU 加速元操作:fetch,filter,map,reduce

数据转换操作可以由上述的四种操作组合而得到:

同样,可视化与交互也可由并行元操作进行实现:

性能评估

本文就 P4 的几方面功能分别展开了评估:

1. 数据处理

本文对比了 D3、Lodash 以及 Vega 三个 JavaScript 框架,就其在对数据进行 filter、derive 以及获取整体数据特征方面的效率进行比较。从图中可以看出,在大多数情况下,尤其是当数据量逐步增大时,P4 有更好的表现,这得益于 P4 利用了 GPU 对其进行加速。

2. 可移植性

本文针对 P4 在不同显卡下进行了数据处理的性能评测。从上图中可以看出,当所使用的显卡性能越高时,处理数据所用的时间越少。

3. 可视化表现

本文将 P4 与其它三个可视化框架(D3、Vega、Stardust)进行对比,从对比结果中我们可以发现:

  1. 当数据到达一定规模时,其它三个框架由于浏览器或自身的限制没有办法正常绘制,而 P4 对于大规模数据仍能够正常绘制;
  2. P4 的初始化时间要大于 D3、Stardust 框架,因为 P4 需要进行编译 shader、传输数据等初始化操作;
  3. P4 的可视化时间在这四个框架中表现最好,这得益于 GPU 的高速绘制功能。

讨论分析

  1. 该框架仍有需要优化与拓展的地方。目前,P4 基于 WebGL1.0 实现,后续考虑迁移到 WebGL 2.0 上。另外,目前 P4 支持的可视化效果比较有限,后续考虑以插件的形式添加更多的功能;
  2. 该框架存在着一定的不足需要进行改进,最大的不足在于其对数据的操作对 GPU 的内存消耗较大,一些操作可能受限于 GPU 显存容量而无法进行;
  3. 未来考虑添加更多的 GPU 操作,比如添加 scan 元操作已进行平行排序数据,同时,在可视化方面,也考虑添加支持设定极坐标的位置。

总结

  1. 该框架将主流可视化框架的表现力和 GPU 计算与渲染的高性能相结合,融合了两者的优势;
  2. 该框架核心功能运用 WebGL 绘制,而标记组件等非核心不见采用不同技术实现,降低了开发难度;
  3. 该系统架构采用 Bottom-up 的形式组装功能,以数据元操作为基础,逐步组装得到更高级的功能。


Questions & Discussion: ✉️ zhaoxiaodong@zju.edu.cn