Skip to main content

FME

This tutorial walks you through seamlessly integrating imagery, point cloud, or 3D building FME workflows with Cesium ion. We’ll look at how to convert source data into ion assets optimized for streaming in a CesiumJS based visualization, which can be extended using the extensive CesiumJS API.

Prerequisites

Information

This tutorial assumes a basic understanding of FME Desktop. For tutorials on creating FME data pipelines and workflows for specific data types, see Additional Resources.

1Add source data

We’ll process a folder of CityGML files and send the contents to Cesium ion for tiling. Download and unzip Reichstag.zip, which contains a building model and textures.

Launch FME Workbench and create a new blank workspace. To begin our pipeline we add a reader: click Readers > Add Reader…

Integrating with FME addReader

For Format, select CityGML.

To select the input dataset, click the caret (down triangle) next to the Dataset field and choose Select Multiple Folders/Files…

Click Add Folders… and select the folder containing the .gml files. Here it’s Berlin_GML. Since we’re reading only one type of file, select all items where File/Filter is not *.gml and click Remove.

Integrating with FME selectFiles

Click OK. Under Workflow Options select Single Merged Feature Type, and click OK to add the reader to the Workspace.

Integrating with FME CityGMLReader

2Prepare data for processing

First, we’ll need to combine the features from all the CityGML files into one stream as we want to create one asset. Add a transformer by typing “Aggregator” and selecting Aggregator. Connect the output of the reader to the Aggregator.

Integrating with FME aggregator

We’ll need to grab the directory path of the input files in order to specify the files to upload. Add a FilenamePartExtractor transformer to the workspace. Click the parameters icon (gear), and next to Source Filename, click the caret (down triangle). Choose User Parameter… > SourceDataset_CITYGML.

Integrating with FME filenamePartExtractor

Click OK and connect the output of the Aggregator transformer to the FilenamePartExtractor.

Integrating with FME prepareWorkflow

3Add a CesiumIonConnector

Install the CesiumIonConnector transformer package from the FME Hub by clicking on the canvas and typing “CesiumIonConnector”. Alternatively, in the menu, click Transformers > Add Transformer…

Integrating with FME addTransformer

Select the CesiumIonConnector transformer to add it to the canvas. Connect the FilenamePartsExtractor to it.

Integrating with FME connectCesiumIon

4Authenticate

We’ll need to authenticate our Cesium ion account to allow FME to upload assets on our behalf. Click the parameters icon (gear) and click the dropdown arrow next to the Cesium ion Account field. Select Select Cesium ion Account > Add Web Connection…

Integrating with FME addCesiumIonAccount

In the dialogue window, click Authenticate…

Integrating with FME connectCesiumIonAccount

This will open a new window with Cesium ion. Log in with your ion account credentials, then click Sign in.

Integrating with FME authenticateCesiumIonAccount

When prompted for permission on the next screen, click Allow.

Add a source folder

The transformer takes a Source Folder as input and uploads it to Cesium ion to create a new asset. Click the caret (down triangle), and choose Attribute Value…. In the dialogue window, select the _dirpath attribute.

Information

CityGML is just one possible source data format. The selected source folder can be any one of the following:

  • GeoTIFF files
  • One CityGML file and a textures subdirectory
  • LAS files
  • OBJ files

See Uploading Data to ion for a list of accepted data formats.

Asset options

To distinguish our asset in ion, we’ll give it a relevant name. For Asset Name, again click the caret (gear) and choose Attribute Value…. This time, select the _dirname attribute. Optionally specify an Asset Description for the new ion asset. Click OK.

Integrating with FME cesiumIonConnectorOptions

5Handling output

After the pipeline creates a new asset in ion, it should display a link to view it. We’ll write the URL in the console window using a Logger transformer.

Click on the canvas, type “logger”, and select the Logger transformer. Connect the output of the CesiumIonConnector.

Integrating with FME loggerTransformer

Click the parameters icon (the gear) and then click Log Message. Print the value of the asset URL by expanding FME Feature Attributes, then dragging _cesiumion_url to the text field.

Integrating with FME logUrl

Click OK to confirm.

Finally, click the Run Translation button (right triangle) and confirm the input dataset by clicking Run. Congratulations! You have a brand new ion asset. Upon completion, click the link logged to the console window, or navigate to https://cesium.com/ion/, to see the newly created asset visualized.

Integrating with FME assetInIon

In the asset information, click Open complete code example in Sandcastle, and a new window will open. There, we have a functioning code example that can be used in any CesiumJS app. See the section on loading your new assets into CesiumJS in the Getting Started tutorial to see how to customize this example.

Information

Logging is the most basic example. There are many more possibilities with the result of this transformation. See the CesiumIonConnector docs for a description of all the output attributes.

6Extending a visualization

The basic CesiumJS snippet provided in ion is a great starting point. Create additional functionality with the CesiumJS API to style an asset, fuse it with other data, and make it interactive. CesiumJS is a powerful library, so browse through the Sandcastle examples to see the many features available and experiment with live coding examples.

Additional resources

This guide covers only the basics of integrating Cesium and FME. Explore more to create robust data workflows and visualize raster data, point clouds, and 3D buildings.

Cesium

FME