3d-Tiles-Renderer: A 3D Tiles implementation for three.js from NASA JPL

It’s been around for a while now but I wanted to share the 3d-tiles-renderer project for three.js which was open sourced years ago from NASA JPL and has recently benefitted from Cesium’s grant call. For a couple of our Mars missions now we’ve been producing 3d tiles data sets that include data from our orbiters and rovers which are used in some tools for displaying contextual landscape and environment information for rover operations. The 3d tiles renderer here has specifically been used on the Perseverance and Curiosity rover missions over the last several years in addition to quite a few projects outside of JPL now, as well. There are a number of demos at the repo to check out include one that renders a Dingo Gap data set from Curiosity and another that shows support for Cesium Ions recent lunar tile set (trial Cesium Ion token required).

I massively appreciate Cesium’s support in continuing to build out the renderer and everything done for the community so I wanted to share here, too. You can check out this blog post which outlines the work that Cesium’s grant has enabled for the project including new tile metadata extensions, plugins, and improved support for visualizations for scientific and robotics operations:

Hopefully there are some people here who can get some use out of it!

6 Likes

In the latest release of the project we’ve added support for @react-three/fiber, a framework for declaratively writing three.js code using JSX. The addition brings the project to the r3f community of hundreds of thousands of users and allows for dropping 3d tiles into any react-three/fiber project and integrating with the ecosystem of drei, postprocessing, and more in just a few lines.

Check out the react components README for more details and demos -

react-three/fiber 3D Tiles


A 3d tiles scene with drei components and materials


A simplified look at the JSX used for a basic scene

react-three/fiber Google Photorealistic Tiles


Google Photorealistic Tiles in @react-three/fiber with an arrow pointing to NASA JPL


Simplified sample code for rendering a globe

3 Likes

It’s been a little while and a few releases since the last post but thanks to another Cesium Ecosystem Grant there are some big new features available with in three.js 3d-tiles-renderer. You can read through the full set of patch notes from the last releases here but here are some of the big new additions in the last few releases up to v0.4.13 including those supported by the grant.

Tiled Image Formats

With the recent plugin system it’s become easier to add new extended functionality such as loading other tiled data formats. Specifically support for Microsoft’s Deep Zoom Image format, the conventional XYZ map tiles format (used by OpenStreetMap, Google Maps, etc), and support for TMS tiles. More to come!

Displaying Deep Zoom Images. Demo here.
Displaying XYZ map tiles as a globe or plane. Demo.

Topographic Lines Demo

“Topographic Lines” or “Contour Lines” can help give a sense for the change in height of a surface, particularly when lighting is limited, without obscuring the underlying imagery too significantly. The topographic lines material added to the project supports level-of-detail scaling on zoom and works with Ellipsoid tile sets like Google Photorealistic Tiles.

Development screenshot showing the topographic lines on sample Mars data. Demo here (select "displayTopoLines")

Demonstration of topographic and cartographic lines working with Google Photorealistic Lines. Demo here (select "displayTopoLines")

Quantized Mesh Support

Quantized Mesh is precursor to 3d tiles by Cesium that stores altitude data in a quad-tree-like format designed for displaying cartographic data. The “QuantizedMeshPlugin” has been added to the 3d-tiles-renderer project to support loading and displaying quantized mesh data.

Demonstration of Swiss Terrain quantized mesh data set.

Texture Overlays

Another feature inspired by Cesium and other geospatial applications is the ability to overlay multiple tiled texture data sets on top of 3d tiles in a planar or cartographic projection.

Demonstration of TMS-tiled OpenStreetMap data overlaid on top of the Swiss Terrain data set.

Demonstration of TMS tiled data overlaid on top of the sample 3d tiles data set (excuse the lack of good demo data 😅).

Demonstration of two TMS data sets overlaid on top of quantized mesh terrain loaded from Cesium Ion showing layer-independent color and opacity adjustment. Demo here.

These bring quite a few new possibilities to geospatial rendering with the project and will be compatible as new tiled data formats become supported! Another big thanks to Cesium for supporting the project!

1 Like

Another release, another new set of data formats supported in the tiles renderer! The latest v0.4.17 release adds support for the WMTS tiled image format and WMS mapping service - both usable as overlays and image tiles. Development and features are still in-progress but a plugin has also been added for GeoJSON overlays. With the new release the project now supports eight tiled geometry and image data formats:

  • 3D Tiles
  • Quantized Mesh
  • TMS
  • WMTS
  • WMS
  • XYZ
  • DeepZoom
  • GeoJSON

See the release notes here!

WMTS-formatted data from the NASA GIBS catalogue rendered with 3DTilesRendererJS. Demo here.

WMS-formatted Hydrography data from the USGS National Map catalogue rendered with 3DTilesRendererJS. Demo here.

GeoJSON shape overlaid on Val Varenna, Italy using an in-progress GeoJSON overlay plugin. Demo here.

And a small milestone - the project usage has more than doubled since the beginning of the year and is now at well over 7,000 downloads per week! Thanks to everyone who have been using the library and sharing your work!


Installs from 3d-tiles-renderer on npm
1 Like

Thank you for your continued work on an implementation of 3D Tiles.

We may be interested in using 3D Tiles renderer outside of three.js with another engine, for tileset loading, traversing, caching, selection etc. but not rendering. We made initial progress with the loaders.gl loader and so have some experience in this regard. How would one approach this ? Is this forum an appropriate place for such questions ? Happy to follow up on github as well.

Thanks for any pointers or feedback.

@andreasplesch

Hello! Sorry for the delayed response - it seems I’m not getting email notifications. There has been some similar interest in using this as the base for other engines, as well, and it’s something I’m interested in pursuing and understanding more, but there are some hurdles to get through. Would you be able to make an issue at the repository to discuss it in more detail?

Just saw your response. Here is a github issue on using 3D Tiles Renderer outside of three.js for further discussion: