Introducing deck.gl v7.0
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
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
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
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
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
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).
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.
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.
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:
- AmbientLight
- PointLight
- DirectionalLight
- CameraLight — a variation of the PointLight, always positioned at the camera.
- SunLight — a variation of the DirectionalLight, automatically set based on a UTC time and the current viewport.
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.
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.
