Introducing deck.gl v7.0

Xiaoji Chen | 消极
Apr 26 · 5 min read

by Uber Visualization Frameworks Team

Since deck.gl’s debut as an open-source framework designed for geospatial analytics, we have continued to build boundary-pushing WebGL-powered applications at Uber, such as autonomy visualization, map editing, and machine learning. We have also seen a tremendous amount of enthusiasm from our open-source community, and learned about the unique use cases and challenges that each of our users face.

This week, we are excited to announce a new deck.gl milestone: v7.0. This is a major step forward for the framework, with more powerful visuals, a more extensible architecture, better support for industry standards, and an easier learning curve. The internal architecture has been substantially rewritten to support a multitude of new features planned for the months to come.

A Growing Layer Catalog

In this release, we have added 11 new layers to deck.gl’s official layer catalog to make common scenarios easier to implement.

TileLayer

deck.gl rendering OpenStreetMap raster tiles with the TileLayer

First introduced in deck.gl v6.3, the TileLayer has graduated from experimental status. This layer loads and renders data within the current viewport using the OSM tile indexing system. The data source, format and rendering can all be customized. It demonstrates how large datasets can be spatially-indexed and interactively loaded based on the camera. You can find examples that render raster map tiles and vector map tiles on the website.

BitmapLayer

deck.gl overlaying a custom image over San Francisco with the BitmapLayer

The BitmapLayer places a rectangular image in world space, with options for simple image filtering effects. It is especially useful when composing vector data with satellite imagery or raster scans of the environment. Check out the weather system example for how to use this layer.

ColumnLayer

deck.gl showing the distribution of bike racks in San Francisco with the ColumnLayer

The ColumnLayer is a generalized replacement of the HexagonCellLayer and GridCellLayer from deck.gl v6. It renders a cylinder at each given position with specified height and color, useful for constructing 3D bar-charts that visualize density.

TripsLayer

deck.gl visualizing a vehicle’s movement with the TripsLayer

The TripsLayer, as can be seen on the deck.gl home page, has also graduated from experimental status. Support for customizable line width, a much-requested feature, has been restored.

S2Layer and H3 Layers

deck.gl’s S2Layer, H3HexagonLayer and H3ClusterLayer

Popular spatial indexing systems such as S2 and H3 divide the surface of the earth into linearly indexed grid cells. Geospatial data can be efficiently aggregated, filtered and queried within these systems. The new S2Layer and H3 layers make it easy to visualize datasets that use the S2 or H3 indexes.

There are more! Check out our what’s new page for a full list.

Loaders.gl and Mesh Layers

In v7.0, we added a new category of layers: the mesh layers, which render an arbitrary 3D object at each given position with a specified size, orientation, and color.

To facilitate the loading of 3D models into these layers, we have released a new library — loaders.gl, a new companion to deck.gl. Loaders.gl is an open-source collection of framework-agnostic loaders for industry-standard 3D file formats such as OBJ, PLY and glTF. All loaders in this suite output to the same consistent, standardized format.

The SimpleMeshLayer is great for rendering simple 3D models in formats such as OBJ and PLY (example).

deck.gl rendering a fleet of Mini Coopers from OBJ with the SimpleMeshLayer

Most notably, we are adding initial integration with the popular glTF™ asset format. glTF is a royalty-free specification for the efficient transmission and loading of 3D assets, with a rich ecosystem of tools and extensions. All variants of glTF 2.0 are supported, including binary .glb files as well as JSON .gltf files with binary assets in base64 encoding or in separate files.

A full scene graph can be rendered with the ScenegraphLayer — a more advanced version of the SimpleMeshLayer — with experimental support for PBR (physically based rendering) materials, lights and animations.

deck.gl showing a horde of animated ducks from glTF with the SenegraphLayer

Lighting Effect

A new effects system has been rewritten from the ground up for v7.0. This will act as a foundation for many exciting visual effect features down the road. The first feature to take advantage of this new system is the LightingEffect — an easier, more comprehensive way to control the lighting for your layers.

deck.gl showing lower Manhattan with the GeoJsonLayer, LightEffect and experimental ShadowEffect (shadow effect is WIP and not released as part of 7.0)

Light sources are now specified at a global level. All 3D layers will share the same light sources. Each layer now supports a new prop `material`, which defines how it reacts to lighting. The following light sources are supported as of 7.0:

See our developer guide for usage examples.

Google Maps Integration

deck.gl has added experimental support for using Google Maps as the base map with the @deck.gl/google-maps module.

Using deck.gl over Google Maps

Why Upgrade?

In addition to the features highlighted above, we have also made dozens of incremental improvements to the existing API, including:

  • First-class binary data support
  • Support for switching between pixel sizes and meter sizes
  • Support for toggling billboard mode in IconLayer and TextLayer
  • Projection and interaction bug fixes of OrthographicView and OrbitView for info-vis use cases
  • Improved picking performance
  • Improved React performance and synchronization with the base map
  • Improved dependency management to reduced version conflicts and bundle size

Make sure to check out the upgrade guide page for deprecations and breaking changes.

vis.gl

Uber Visualization's open-source frameworks

Xiaoji Chen | 消极

Written by

Designer. Geek. Data queen. Beer lover.

vis.gl

vis.gl

Uber Visualization's open-source frameworks