如今,无论你从事什么工作,数据都驱动着决策。在优步,我们希望看到这些数据的移动,以便真正理解它。现在,任何拥有大数据集的人都可以在Web上做同样的事情。
今天,我们开放源代码deck.gl这是一个基于webgl的框架,专门为大规模探索和可视化数据集而设计。deck.gllets us visualize it without compromises.
数据,快速可视化
在甲板上。gl的架构适合抽象和科学的可视化需求,地图相关的数据是我们在Uber最大的资产。我们拉伸并测试了甲板。Gl在许多不同的映射环境之前的第一个版本。
在优步,我们每天处理的许多GPS点满足了整个公司的需求。如果我们的平台有问题,我们可以通过探索历史地理位置数据来诊断。如果路上发生了事故,我们可以探索给定行程的GPS轨迹,以获得完整的背景信息。如果在某个城市的接车地点附近有问题,我们可以通过可视化的方式将计划传达给城市当局。我们需要这些基于网络的、实时的、可共享的数据,以便Uber的其他团队可以使用。为了满足所有这些需求,我们开发了deck.gl.
deck.glfocuses on the following针对用户的关键方面:
- 性能:基于最新的WebGL技术,获得大型数据集(数百万个点或顶点)的高性能渲染,包括动态聚合和可视化探索等功能。
- 准确性:借助于我们自定义的fp64数学库,在GPU上实现高精度数值计算。据我们所知,目前还没有基于webgl的库提供这种功能,而这种功能对于地理数据集的全面交互性至关重要。
- 可扩展性:采用最新的编码标准,包括ES2016以及丰富的库和设置生态系统,可以轻松调试和分析WebGL应用程序
甲板。gl提供映射用例
deck.gl的功能集适应广泛的用例,包括映射。举个例子,deck。gl可以与MapboxGL的摄像系统一起使用,因此数据可以选择性地显示在Mapbox地图的顶部,并以透视模式进行可视化。您还可以使用deck启动任何数据可视化项目。Gl的一组核心层,包括散点图、直线、弧线、choroppleth和网格层,或者您可以选择连接到其他第三方库,比如我们流行的开源框架react-map-gl这是一个围绕MapboxGL JavaScript API的瘦React包装器。
为了演示,我们开发了一套简单的例子它专注于映射用例。看看这个演示看甲板的性能。gl的大数据集:2M点和纽约市的36K次出租车旅行,使用实时GPU插值。
我们还开发了可视化3D建筑结构、街道片段、点云数据等层,我们将在未来的版本中开放这些层。让我们更深入地研究deck.gl背后的一些设计和架构决策!
实例化+分层
通过结合实例和层,deck。Gl使复杂的可视化成为可能,而不会使计算机崩溃。如果你和D3可视化在过去,那么你们已经熟悉的概念实例化.实例化是在呈现单个对象的多个副本时,在副本之间稍加调整。你最终得到的是看起来不同的对象,但所有这些都显示得很便宜,因为如何WebGL API的工作.例如,要创建散点图,需要有圆元素,并根据数据中每一行的值对这些圆的半径、位置和颜色应用修饰符。
要使用此实例化特性,请使用deck。Gl有一个分层系统来覆盖不同的数据集混合模式,裁剪等)。您可以在一个大图中以清晰的语义分离推理不同类型的数据,根据需要添加和删除层。例如,一个常见的Uber deck。gl应用程序可能包括拾取、丢弃、请求、海拔、3D建筑和点云数据的层,所有这些都以高性能呈现,因为几何原语都只是副本。
层还可以创建分组和聚合等计算。这对于创建动态的人口密度热图、中间eta等非常有用。这个例子显示网格中的动态聚合。计算是实时执行的,因此粒度随着缩放级别的变化而变化。
高精度GPU计算
一个甲板上。我们真正引以为傲的是它在GPU上处理高精度变换和其他数值计算的能力。WebGL和许多其他图形库,如苹果的Metal只支持32位单精度浮点数。在许多支持平台上,WebGL对数值精度的要求特别宽松。
在甲板上。gl旨在为高动态范围(HDR)、科学级数据提供准确性和性能,我们实现了一个强大的扩展,在所有支持WebGL 1.0的平台上模拟64位双精度浮点数。尾数中的有效数字(46位)是尾数的两倍,模拟的高精度数据类型允许渲染GPU永远无法处理的原语,使用固有的单精度浮点数。这对于以厘米级的纬度/长度对指定的地理元素的渲染,或者对于从城市级到地图的交集级的交互式数据密集可视化渲染非常有用。
大多数其他处理高缩放级别的库要么使用不同的坐标系统(比如UTM),以动态范围交换精度,或执行基于cpu的计算,以与整体映射对齐,以性能交换精度。通过在这种高精度类型的浮点数中进行所有的数学运算,我们能够将所有的计算转移到GPU上,同时获得准确性、性能和交互性。这例子高精度GPU浮点运算。
采用最新编码标准构建
我们做了甲板。Gl要尽可能与像我们这样的其他用户相关。deck.gltherefore uses the latest JavaScript coding standards, with classes and other concepts from ES6 (ES2015) and ES7 (ES2016), supported via Babel transpilation. Naturally, it comes packaged as annpm模块,并与标准的JavaScript绑定器兼容,如Browserify和webpack。
制作甲板为了便于使用,我们创建了一个名为luma.gl,它使用与deck.gl相同的编码和设计约定。luma.glcomes with the following:
- 最新的JavaScript编码标准,包括ES2016
- 即将到来的WebGL 2.0标准支持良好的特性,例如WebGL1应用程序中的实例数组
- 公开WebGL 2.0特性(如转换反馈)的类,使您能够从今天开始试验支持浏览器*
- 高级调试、跟踪、错误检查,以及用于检查缓冲区和内存的工具,以简化臭名昭著的困难的WebGL应用程序调试过程
- Shader库带有一个64位浮点模拟包的GPU,测试并使其跨大多数行业的GPU驱动程序工作(fp64库在deck中大量使用。Gl用于创建高精度图层)
*它将很快允许使用WebGL来运行通用计算的计算着色器。
与React和Mapbox的互操作性
我们做了甲板。gl的反应式编程模型原理(由React推广),并致力于与Mapbox的相机系统的完全互操作性。因此,透视图模式和对齐方式可以为映射应用程序开箱即用。这个例子展示了Mapbox中的透视模式和核心电层在deck.gl。它展示了美国县与县之间的迁移。使用Shift +拖动改变地图的视角。
我们有与Mapbox其他方面集成的未来计划,但我们也保持了库的解耦,以便它可以与您选择的其他包一起使用。
更多内容
这是甲板的第一次公告。gl我们也在制定一个雄心勃勃的路线图,加强与Mapbox的互操作性,但也在推动另一个方向:制作deck。Gl是抽象数据可视化或其他类型的科学可视化的构建块。请随时联系我们的团队data-viz@uber.com如果你有任何意见。期待看到您用这个构建的东西!
Nicolas Garcia Belmonte是Uber工程公司数据可视化团队的负责人。






