Skip to main content

Draping Imagery over 3D Tiles in CesiumJS 

Gabby Getz and Marco Hutter

With the release of CesiumJS 1.130, users can drape imagery layers on 3D Tiles, allowing developers more freedom to combine geospatial data from different sources. Reality meshes, CAD/BIM data, and point clouds can be uploaded to Cesium ion and converted into 3D Tiles for efficient streaming and visualization. Now, imagery data like Bing Maps imagery or OpenStreetMap imagery can be layered on top, creating more powerful 3D geospatial applications. This addition addresses a long-standing community request and supports a wide range of use cases.

An example of draping imagery on 3D Tiles: Google Photorealistic 3D Tiles with Google Roadmap Tile overlay.

An example of draping imagery on 3D Tiles: Google Photorealistic 3D Tiles with Google Roadmap tiles overlay providing street and label data.

Use case 1: Orthophotography over reality meshes 

Existing reality mesh datasets can be augmented with high-quality, curated orthophotography imagery data. In this example, Bing Maps Aerial imagery is added to a 3D Tiles point cloud dataset without color data.

Mt. St. Helens.

Use case 2: Sensor data layers over 3D Tiles 

The results of sensor coverage data, satellite imagery, or AI-based classification can be mapped on 3D Tiles to visualize the results of different analysis workflows. Here is an example where the user can select different imagery layers provided by NASA Earth Data, to overlay information like the biomass or population density over Photorealistic 3D Tiles.  

An example of draping imagery on 3D Tiles: Google Photorealistic 3D Tiles with information about the population density, provided by NASA Earth Data.

Use case 3: Adding contextual information over 3D Tiles 

Imagery can also be used as overlays to provide additional geospatial context about roads, buildings, or other points of interest. For example, imagery data that provides geospatial information can be draped over existing 3D Tiles datasets. 

An example of draping imagery on 3D Tiles: Bing Maps Labels draped over a tileset that was loaded from iTwin reality data.

Use  

This new feature is similar to the existing functionality of draping 3D Tiles on terrain data, so users can seamlessly leverage it with little effort. This simple example shows how to drape imagery data on 3D Tiles. The Cesium3DTileset class now offers a set of imagery layers, and these can be used exactly the same way as imagery layers for terrain in CesiumJS. This means adding the imagery to the to the tileset can be done with a single line of code: 

tileset.imageryLayers.addImageryProvider( 

  await Cesium.createWorldImageryAsync({ 

    style: Cesium.IonWorldImageryStyle.AERIAL, 

  }) 

);

The imagery layers that are added to a tileset are added as an ImageryLayer object. This object has several properties that affect the visual appearance of the imagery data as it is draped on the 3D Tiles data. Users can modify the alpha value (opacity), brightness, or saturation. This sandcastle showcases the ability to modify properties in real time. 

Next steps 

The first release of draping imagery over 3D Tiles that is part of CesiumJS 1.130 includes functionality that serves most use cases. There are several possible extensions or functionalities that can be added based on community input—for example, user controls to align existing imagery data with the 3D Tiles or to "upsample" the 3D Tiles geometry with imagery resolution that is higher than the geometry with large geographics extent. 

We welcome feedback about the draping functionality and thoughts about further use cases that should be supported via this community thread.