G 5.0:灵活易用的可视化渲染引擎来了

avatar
数据可视化 @蚂蚁集团

导读

G 作为 AntV 底层的可视化渲染引擎,先进、稳定且高可扩展性的渲染能力可以为上层产品提供更多想象空间。同时我们也一直期待着 AntV 现有不同的可视化方案能够在统一的画布中绘制完成,并进行自然的联动。为此我们在全新的 5.0 版本中带来了以下特性:

  • 适配多种渲染环境。支持 Web 端常见的渲染环境、运行时切换以及服务端渲染。
  • 易用的 API。全面拥抱 Web 生态,降低前端开发者的上手难度。
  • 高性能的渲染与计算。除了高性能渲染,我们还为可并行算法提供基于 WebGPU 的 GPGPU 支持。
  • 灵活的插件机制与丰富的生态。通过丰富的插件集与生态扩展渲染能力。

适配多种渲染环境

在 Web 端不同的渲染环境都有其适用的场景,以可视化领域为例,D3、Observable Plot 使用 SVG,而面向大数据集高性能的 deck.gl 则使用了 WebGL。我们希望尽可能向下适配所有渲染环境,同时向上对使用者屏蔽底层细节,让其更专注于抽象场景结构的创建。

为此我们提供了针对 Canvas2D / SVG / CanvasKit / WebGL / WebGPU 这些常见环境的渲染器,运行时在不同渲染器之间的切换能力也让使用者有更多灵活的选择。

最后,支持服务端渲染也拓展了更多使用场景,例如在一个服务端自动生成内容的邮件或报表系统中嵌入图表。不同于 AnyChart 或者 Highcharts 基于 PhantomJS 的方案,我们使用了可以在 Node.js 环境下运行的 node-canvas、JSDOM 和 headless-gl 为不同渲染器提供支持,能够让使用该渲染引擎的项目在集成测试中受益。

易用的 API

在之前的版本中,我们常常受困于晦涩的 API 带来的记忆学习成本。受 Sprite.js 的启发,在新版本中我们的图形、事件系统完全兼容 DOM Element & Event API,动画系统兼容 Web Animations API,这大大降低了渲染引擎的上手难度。

同时这也意味着我们可以以极低的成本接入 Web 端的已有生态,让它们像操作 DOM 元素一样操作 G 的图形,包括但不限于:

  • 使用 D3 的数据驱动能力操作 G 场景图中的元素。
  • 接管 Observable Plot 原本的 SVG 渲染层并加以增强。
  • 使用 Hammer.js 增加手势交互、interactjs 增加拖拽能力。
  • 实现基于 Web Components 的声明式 API 用法。

最后,DOM API 久经考验的良好设计也让我们的 API 在完备性和稳定性上受益。

高性能的渲染与计算

面对大规模图形的渲染场景,不同环境有各自的性能提升方案。在 Canvas 渲染器中,除了沿袭自 4.0 版本的脏矩形渲染,我们还引入了 R 树空间索引对包围盒相交检测进行加速。而 WebGL 渲染器则通过相机在画布级操作场景中有突出的性能表现。以包含大规模节点的图场景为例,20000 节点下画布旋转场景依然能稳定在 60 FPS。更多实现细节及评测结果详见性能提升方案

除了渲染,高性能计算也是我们一致关注的领域。伴随着 WebGPU 带来的原生 Compute Shader 支持,让 Web 端 GPU 通用计算甚至是移植已有 CUDA 算法成为了可能。而图分析领域更是有不少适合并行的算法例如 PageRank、SSSP 等。

为此我们以实验性质的插件形式提供了 GPGPU 能力,并基于此开发了 webgpu-graph:一个使用 GPU 加速的图分析算法库,在大规模节点/边场景下对比现有的 CPU 串行版本有非常明显的性能提升。

我们相信随着 WebGPU 的普及,基于 GPU 的高性能计算将有越来越多的应用场景。

灵活的插件机制

基于灵活的插件机制,我们可以结合已有的 Web 生态对渲染能力进行扩展。目前我们提供了丰富的插件集,让可视化场景开发过程中需要的各种额外功能变得开箱即用,包括但不限于:

  • 使用 Rough.js 实现的手绘风格渲染插件。觉得规整的图形样式有些枯燥?不妨换一种风格尝试一下。
  • 使用 Box2D、matter.js 的物理引擎插件。平平无奇的图形也有了贴近物质现实的生命力。
  • 使用 Yoga 的布局引擎插件。使用 CSS 中的 Flex 布局完成复杂 UI 组件的构建。
  • 基于 WAI ARIA 实现的无障碍插件。让画布中的内容可以被屏幕阅读器识别。
  • 参考 HTML Drag & Drop API 实现的拖放插件。
  • 参考 Fabric.js 实现的标注插件。让画布中的图形具备交互编辑能力。

除此之外,我们还尝试通过生态库覆盖更多使用场景,为上层应用提供开箱即用的便捷工具,例如:

  • 基于 PointerEvents 实现的手势库。丰富在移动端的交互可能性。
  • Lottie 动画播放器。增强动画表现力,为可视化叙事助力。
  • 画布内容导出器。提供多种图片格式的导出以及裁剪能力。

以上开箱即用的插件和生态,都可以被基于 G 开发的上层可视化产品共享。

最后,开发体验也是我们关注的一大问题。为此我们提供了一款 Chrome 浏览器插件,可以查看场景图结构、审查画布中的元素及其属性值,让黑盒一般的画布也拥有类似 HTML + CSS 的开发体验。

结语

基于统一的底层渲染引擎,未来 AntV 所有上层产品绘制在同一张画布上将成为可能,我们期待着它们之间更加自然的联动。同时我们也正在补充 3D 渲染能力,未来在 3D 图表、非结构化数据展示等新领域也将做出尝试,敬请期待。

附录

AntV 发布详情

  • 主文
  • 技术专文
  • 设计专文
  • 学海无涯