「2015 OpenVis会议系列之三」SVG, Canvas 和 WebGL 之比较

分享给朋友:

[zilla_alert]OpenVis 会议是美国数据可视化业内的年会之一。本系列文均为原创,转载请注明出处、网址与文章作者。更多本系列文章:

【2015 OpenVis会议系列之零】OpenVis是个什么会

【2015 OpenVis会议系列之一】数据科学家和他们的可视化工具

【2015 OpenVis会议系列之二】如何用可视化来讲故事

【2015 OpenVis会议系列之四】我们的地球美不美[/zilla_alert]

OpenVis 也有多个演讲提到浏览器可视化的新宠 WebGL。虽然 WebGL 在好多年前就被高尖端的可视化工程师们广泛使用,但 WebGL 进入新闻可视化事业却是2014-2015年的事。

自从 iOS 开始支持 WebGL,以及在三月份纽约时报做了轰动一时的3D经济收益率曲线,各家媒体现在都开始考虑如何使用 WebGL 来绘制高性能的3D图。而在之前,这样的3D动画效果都是通过动画视频实现的。

那么和如今时兴的两种浏览器绘图模式: SVG (代表:D3.js, Raphael.js) 和 Canvas (代表: Echarts, Google Charts, p5.js) 相比,WebGL 有什么区别呢?

Dominikus Baur 的讲座(讲座视频可在 YouTube上观看,时长40分钟)比较了这三者在实际写代码和浏览器性能上的差异。

友情提示:如果下图你看懂了,就可以跳到文章最后去亲自测试一下了。

Performance vs. Pain

Performance vs. Pain

Baur 认为,如果浏览器载入速度不在考虑范围之内,SVG 绘图是最优的模式

SVG 生成矢量图,并且和浏览器 DOM 的完全融合,这使它支持最灵活的交互效果和 CSS 样式。但是也正是因为每一个 SVG 元素都是一个 DOM 元素,绘制或移动一个 SVG 元素,浏览器都需要重新绘制、渲染页面,导致速度变慢,性能变差。要保证在浏览器绘制 SVG 过程中无时滞,一个页面静态 SVG 元素大约可以绘制一万个,动态的 SVG 元素,就最好不要超过一千个。

如果你需要一次绘制一千个以上的图形并让他们动起来,或者你需要你的图形做一些特殊的动画效果,这时候 Canvas 就有 SVG 所没有的优势了。

与 SVG 绘图不同的是,Canvas 内绘制的元素都是预先生成,预先定下元素特性,预先写好动画路径。使用 Canvas 绘图,你需要写下每一个元素的输出的轨迹。由于 Canvas内绘制的元素并不涉及 DOM 元素,和 SVG 绘制的元素相比,交互性差,但也正因如此,在元素自身的动画特效上不受 DOM 位置限制,能够绘制表现力更强的图形,同时 SVG 生成位图,在浏览器性能(载入速度)上比 SVG 更佳。

与 Canvas 和 SVG 不同的是,WebGL 通过 WebGL JS API 连接 Javascript 和 GPU 编译程序。GPU 绘图的渲染大部分在 GPU 上进行,对浏览器压力减小,性能几个量级地提高,使 WebGL 成为浏览器内的3D渲染、大数据可视化唯一的选择。

如果想使用 WebGL,Baur 还推荐了两个库 pixie.js (2D webGL renderer with canvas fallback), three.js (3D)。不使用库想用的 WebGL 画一个方块就要写200行代码,相比 canvas, SVG,效率极低,绝不建议实际项目中尝试。

为了更清楚地展示三者绘图上的差异,Dominikus Baur 建了一个测试器。你可以试着增加或减少星星,看在静态、动态和不同绘图模式下的浏览器绘图的快慢情况。在动态模式下,如果右上角显示能达到60fps,就是比较流畅的效果。友情提示:星星数量建议从1万左右开始,并在确认浏览器开启 webGL 下进行测试。

在实际新闻可视化运用中,因为数据点相对少、而D3占据大量市场份额,SVG 绘图是最常见的选择。基于 Canvas 的绘图,真正在新闻上的使用印象最深刻的一次是纽约时报在两年前的一次成功尝试,通过 Canvas 绘制1000多个点而不影响浏览器表现。

纽约时报Canvas绘图尝试

纽约时报Canvas绘图尝试

当然,画图的方式不止三种。

就在最近,纽约时报开始越来越多地尝试多种渲染混合的绘图方式。在提高性能的同时满足大数据量的内容需求。比如去年年底的汽车召回图,车轨由 SVG 渲染、车通过 Canvas 渲染;再举前文提到的3D经济收益率曲线一例,图表主体由 WebGL(three.js) 渲染,网格线和实际折线则由 Canvas 渲染完成。

Dominikus Baur 提到另一例今年五月将和大家见面的 Better Life Index,最早使用 Flash,13、14年用 SVG 绘图,下个月出的新版本就要全部使用 WebGL了,我们也拭目以待。

作者简介

周优游

数据新闻记者,交互设计开发,致力于讲当讲的故事,给更多人听。目前供职于美联社。