3d-tiles-renderer

JavaScript renderer implementation for the 3D Tiles format with support for Three.js, Babylon.js and PlayCanvas. The renderer supports most of the 3D Tiles spec features with a few exceptions. For a list of available data sets and generation tools see the 3d Tiles resources list.

If a tileset or geometry does not load or render properly please make an issue! Example data is needed for adding and testing features. See the Feature Complete Milestone for information on which features are not yet implemented.

Getting Started

Installation

npm install 3d-tiles-renderer --save

API

Package	Reference
3d-tiles-renderer/core	API Reference
3d-tiles-renderer/three	Usage Guide · API Reference
3d-tiles-renderer/babylonjs	Usage Guide · API Reference
3d-tiles-renderer/playcanvas	Usage Guide
3d-tiles-renderer/r3f	Usage Guide · API Reference

Plugins

Package	Reference
3d-tiles-renderer/three/plugins	Plugin Guide · API Reference
3d-tiles-renderer/babylonjs/plugins	Plugin Guide
3d-tiles-renderer/core/plugins	API Reference

Examples

The following examples use Three.js. Babylon.js demos are also available for Mars and Google Photorealistic Tiles, and a PlayCanvas demo for Mars.

See the Three.js usage guide, Babylon.js usage guide or PlayCanvas usage guide for setup details with each engine.

Example	Description
Core
Dingo Gap Mars	Multiple tilesets
Kitchen Sink	All options and features
VR	Rendering in VR
External Tiles Providers ¹
Cesium Ion 3D Tiles	Standard Cesium Ion tileset
Cesium Ion Lunar	Lunar surface tiles
Cesium Ion Mars	Mars surface tiles
Google Photorealistic	Google Photorealistic Tiles
Google Globe	Google Globe Tiles
PLATEAU	PLATEAU city data over Cesium World Terrain
Customization
Custom Material	Using a custom material
Offscreen Shadows

¹ Requires a Google Tiles API Key or Cesium Ion API Key

Community Resources

Here is a reference to existing 3DTilesRendererJS integrations:

• three-geospatial: Clouds and atmosphere rendering via a three.js geospatial rendering modules, alongside 3DTilesRendererJS.
• 3D Tiles in MapLibre Guide: Official example showing how to render 3D tiles using a synced Three.js layer.
• Giro3D: Framework for visualizing and interacting with heterogenous geospatial data in the browser, 2D, 2.5D and 3D data.
• iTowns: Framework designed for the efficient visualization, navigation, and interaction with 2D and 3D geospatial data on the web.
• threepipe Plugin: Plugin for the threepipe rendering framework integrating 3DTilesRendererJS.
• 3DBAG Viewer: Web viewer for the 3DBAG dataset, a nationwide 3D model of all buildings in the Netherlands built with roofer.
• Babylon.js Guide: Official documentation on integrating 3DTilesRendererJS into your Babylon.js project.
• Community Plugins: Additional community-maintained threejs plugins for 3DTilesRendererJS.

Gotchas

Some behaviors to be aware of when configuring the renderer:

• Cache limits are hard caps. No new tiles load once the LRUCache reaches maxSize or maxBytesSize. If the tiles needed for the current view do not fit then coarser tiles are displayed and refinement stops. Monitor lruCache.cachedBytes and lruCache.isFull() and raise maxBytesSize or errorTarget when a view needs more detail than fits.

LICENSE

The software is available under the Apache V2.0 license.

Copyright © 2020 California Institute of Technology. ALL RIGHTS RESERVED. United States Government Sponsorship Acknowledged. Neither the name of Caltech nor its operating division, the Jet Propulsion Laboratory, nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.