Skip to main content

WebODM

WebODM is an open source tool for generating maps, point clouds, terrain and 3D models from aerial images. This tutorial will walk you through how to tile your generated 3D data into 3D Tiles directly from WebODM using Cesium ion, and how to visualize it on a 3D globe in its real world location.

Prerequisites

  • Set up WebODM.
  • You need a Cesium ion account to take this tutorial.

1Connect your Cesium ion account

The first step is to create a Cesium ion access token. This token will allow WebODM to upload data to your ion account where it can be tiled and hosted.

Login or create an account on Cesium ion, then click on Access Tokens in the top navbar.

Click the Create Token button to create a new token.

Integrating with WebODM Create Token

Give your new token read, write and list permissions as shown below.

Integrating with WebODM Cesium Token

Click Create and then copy your newly created token from the panel on the right.

Integrating with WebODM Copy Token

Then go into your WebODM dashboard and navigate to the Cesium ion tab.

Integrating with WebODM CesiumTab
Information

If you don’t see the Cesium ion tab, make sure you’re running the latest version of WebODM.

Paste your token in the input field and click on Set Token.

Integrating with WebODM Set Token

You are now ready to start tiling your WebODM assets in the cloud with Cesium ion.

2Tiling your first asset

For this tutorial, we’ll be using a pre-processed point cloud dataset of an area in Tacloban City, Philippines captured by the American Red Cross, but you can follow along with any dataset in your WebODM dashboard that has already been processed into 3D data.

In your WebODM dashboard, click Add Project to create a new project. You can type in a name like “Cesium Tutorial” and click Create Project.

Integrating with WebODM New Project

To import this pre-processed dataset, click on the Import button in the top right, then click on Import From Url and paste the link below:

https://s3.amazonaws.com/cesiumjs/downloads/WebODM-Processed-Tacloban-City.zip
Information

This dataset is modified from the American Red Cross CC BY 4.0.

Integrating with WebODM Import Asset

Once the newly created task is finished importing, click on it to expand it and then click on the Tile in Cesium ion button.

Integrating with WebODM Tile Texture Model

Select Texture Model. Here you can provide a name and a description that will be displayed in your Cesium ion dashboard. Click Submit when you’re done.

You can monitor the job’s progress by clicking on the View ion Tasks button.

Once the uploading and tiling on Cesium ion is complete, you’ll see a View in ion button. Click on that button to see a preview of your tiled data in your Cesium ion dashboard.

Integrating with WebODM Asset Preview

Your 3D textured model is now tiled and hosted on Cesium ion, and ready to stream into clients like CesiumJS.

3Geolocating your data

For datasets that embed geographic metadata, like point clouds, Cesium ion will automatically place them in their real world locations on the globe. Since this photogrammetry mesh doesn’t embed such metadata, we can position it using the tileset editor tool.

In your Cesium ion dashboard, click on the Adjust Tileset Location button in the top right of the asset preview window.

Integrating with WebODM Adjust Tileset

We’re going to skip entering an address because we’re going to provide the exact longitude and latitude on the next step, but this can be a useful way to geolocate when the exact coordinates are not available to you.

Select Cesium World Terrain from the terrain options. This will use ion’s globally curated 3D terrain as a base layer.

Finally, hit Next.

Integrating with WebODM Location Editor 1

The source data for this drone capture includes the following coordinates which you can type in under the Position panel:

  • Longitude: 124.99195
  • Latitude: 11.191799
  • Height: 76

Click the Zoom to Tileset button at the top to fly to the tileset’s new location.

Integrating with WebODM Location Editor 2

You can make any further tweaks to the position and orientation here either by using the input fields on the left, or dragging the axes in the viewer. Once you’re done, click the Save button at the bottom of the left panel.

You can now see your photogrammetry mesh in its real world location, with the surrounding 3D landscape for context.

Next steps

Now that you’ve created a 3D Tileset of your data, you can build on this code example to fuse it with other datasets or share it on the web. The getting started guide is a good next step for learning how to embed your data on a web page with CesiumJS.

Content and code examples at cesium.com/learn are available under the Apache 2.0 license. You can use the code examples in your commercial or non-commercial applications.