Writing Cesium 3D Tiles with FME

Introduction

In this article, you will learn how to write Cesium 3D Tiles from GeoJSON and JPEG. Using GeoJSON of building boundaries from the City of Surrey in British Columbia, Canada, we will create a snowy 3D city in Cesium. This simple exercise will cover working with coordinate systems and applying a texture.
 
With many performance improvements to 3D tiling and texture handling in the Cesium 3D Tiles writer, we recommend using FME 2022.0 and newer for the best results.

Requirements

• FME 2022.0 or newer
• Cesium Ion account to view the output

Step-by-step Instructions

Download the source data from the Files section at the top right, or download the workspace template of the completed workspace. You can download the snow JPEG that we will use as the building texture from Pexels here or use your own texture.

1. Read in the GeoJSON and JPEG into FME Workbench
Drag and drop the Surrey_Buildings.json GeoJSON dataset into FME Workbench and press OK to add it to the canvas. Do the same with the pexels-karolina-grabowska-6610085.jpg JPEG image and run the workspace to inspect the source data that we will be working with:




When viewing the GeoJSON, we can see an attribute called BUILDING_HEIGHT which we will be using to extrude 3D buildings to a specified height.

The GeoJSON data also has a coordinate system set to LL84. Clicking the hyperlinked text will show that the units for that coordinate system are in degrees.

For the selected feature, the building height is actually 59.68 meters, which would cause problems when we try to extrude the footprints to the height attribute by 59.68 degrees rather than meters.

2. Connect a Reprojector to the GeoJSON Reader Feature Type
Add a Reprojector and connect it to the buildings reader feature type. Set the Destination Coordinate System to ‘UTM83-10’ and press OK. This will set our units to meters rather than degrees so we can extrude the polygon to the correct height.  

In FME 2022.1 and newer, if features going into the Cesium writer do not have a coordinate system set, the Cesium 3D Tiles writer will assign it to EPSG:4326.

In FME 2022.0 and older, features without a coordinate system will be set to EPSG:4978.

3. Add an Extruder to Create 3D Buildings
Connect an Extruder to the Reprojector Output port and set the Distance to the attribute ‘BUILDING_HIGHT’.



Run the workspace with Feature Caching enabled. Then view the Extruder output in the Visual Preview, you’ll see something like this when you run the workspace so far:



4. Add an AppearanceSetter
Next, add an AppearanceSetter and connect the Extruder Extruded output port to the Geometry input port. Connect the JPEG reader feature type to the Appearance input port of the AppearanceSetter. Right-click on the Appearance input port and select Move Down to uncross the connection lines.



Run the workspace up to this point and in Visual Preview, zoom in to see the snow-packed buildings:



5. Turn Off Feature Caching
At this point, turn off Feature Caching from ‘Run’ in the toolbar. Ensure that ‘Enable Feature Caching’ is unchecked from the dropdown menu.

Disabling it will ensure that we are maximizing our performance speed for a quicker runtime.



6. Add a Cesium 3D Tiles Writer
Add a writer by typing Cesium on the canvas, and select the Cesium 3D Tiles writer. Set the destination location for the output folder.

In the Parameters, we will use the default configuration for this scenario. If we did not have a texture, we might want to use a larger number of triangle faces per tile.

The Texture Formats is set to ‘WebP Only’ which will output a smaller dataset since it is more efficient than JPEG. For working with older target versions of Cesium, this can be changed to the JPEG/PNG Only option.

By default, we are opting to Create Atlas Textures. This means that FME will output one WebP image rather than one for each tile. Press OK to finish adding the writer. In the Select Feature Type dialog, select buildings [Surrey_Buildings.json] as the reader to copy from.  Connect the writer feature type to the Output port of the AppearanceSetter.

Our writer parameters will look something like this:

In FME 2022.0 and newer, the cesium_priority attribute has been removed as it is no longer necessary. The writer will automatically distribute features among tiles, where larger values are given a higher priority.

7. Set the Geometry on the Writer Feature Type
Double-click the writer feature type to open the parameters and set the Geometry to ‘cesium_3d_object’.



8. Run the Workspace
With feature caching disabled, run the workspace. It will take about 5 minutes, depending on your computer’s processing speeds. Your completed workspace should look something like this:



9. View the output in Cesium Ion
If you haven’t already, you will need to create a free account with Cesium Ion. Follow the article, Uploading Assets to Cesium Ion for more detailed step-by-step instructions.

You will want to zip up your entire output folder to upload to Cesium. In Cesium Ion, My Assets > Add Data, select your zipped Cesium folder. Give your asset a name, define the dataset as 3D Tiles, ensure the path looks correct to the JSON file and hit Upload.



To view the uploaded data, select ‘Open complete code example’. Note that it may take a few moments for the background map and model to load depending on your computer’s technical specifications.

If it the model doesn’t display immediately, it may help to expand it:



Select a building to view its attributes:



It will take a bit of zooming in to see our snow texture, but you get the idea!



Replace it with another texture if you’d like, or if you want to get more technical, follow the steps in the article, Adding Different Texture to a 3D City Model, to get a bit snazzier with your model by separating roofs and walls to have different textures.

Well done on writing out to Cesium 3D Tiles using FME!

 

Troubleshooting

If you should run into any problems, here are some possible cases and solutions below:
 

Additional Resources

• Article: Adding Different Texture to a 3D City Model
• Article: Uploading Assets to Cesium Ion
• Webinar: 5 Ways to Improve Your LiDAR Workflows - See the example from 4. Visualize solutions by using LiDAR for 3D City Modeling
• Webinar: Visualizing Data in a Web Browser with Cesium ion and FME

Data Attribution

This article uses GeoJSON data of buildings from the City of Surrey’s Open Data Site provided under their Open Government License. The JPEG snow texture comes from Pexels, which allows free use of some of their images including this ‘texture of snow’ image.