Files
-
- 2 MB
- Download
Introduction
In this article, you will learn how to write Cesium 3D Tiles from GeoJSON and JPEG. Using a GeoJSON file of building boundaries from the City of Surrey and a snow texture JPEG, 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.
The completed workspace and source data can be downloaded from the Files section.
Step-by-Step Instructions
1. Read in the GeoJSON and JPEG into FME Workbench
Create a New workspace in FME Workbench. Click on the Reader button in the Toolbar and set the following in the Add Reader dialog:
- Format: GeoJSON
- Dataset: /surrey_buildings.json
Click OK to add it to the canvas. Repeat the process, adding the snow texture JPEG image.
- Format: JPEG
- Dataset: /snow_texture.jpg
Run the workspace to inspect the source data that we will be working with. Click the green cached data button to view data in Data Preview.
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 has a coordinate system set to LL84, which can be found in the Record Information window under the Geometry section. Clicking the hyperlinked text will show that the units for that coordinate system are in degrees:
Building height is measured in meters, which will cause problems when we try to extrude the footprints to the height attribute by degrees rather than meters. We will reproject the data to change the units.
2. Reproject Buildings to UTM83-10
Add a Reprojector transformer and connect it to the GeoJSON reader feature type, buildings. Open the parameters to set the coordinate system:
- Destination Coordinate System: UTM83-10
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
Add an Extruder to the workspace and connect the Reprojector Reprojected output port to the Extruder Input port. Open the parameters and set the following:
-
Distance: BUILDING_HEIGHT
- Use the drop-down to select the attribute value
Run the workspace with Feature Caching enabled. Then view the Extruder output in the Visual Preview (click the green Inspect Cached Data button next to the Extruder Extruded port), you’ll see something like this when you run the workspace:
4. Add an AppearanceSetter
Add an AppearanceSetter and connect the Extruder Extruded output port to the AppearanceSetting 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 Data Caching
At this point, turn off Data Caching in the toolbar.
For FME 2025.1 and older, data caching is set in the Run menu in the Toolbar. Deselect Enable Data Caching from the drop-down menu.
Disabling Data Caching will ensure that we are maximizing our performance speed for a quicker runtime.
6. Add a Cesium 3D Tiles Writer
Click the Writer button in the Toolbar to add a writer with the following parameters:
- Format: Bentley Cesium 3D Tiles
- Dataset: /output
We will leave the default configuration in the Parameters window 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. By default, we are opting to Create Atlas Texture, which means that FME will output one WebP image rather than one for each tile.
Click OK to finish adding the writer.
In the Select Feature Type dialog, in the Parameters tab, set the file name then click OK:
- Cesium 3D Tileset Name: building
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, building, to open the parameters. Click the User Attributes to set the geometry type:
-
Attribute Definition: Manual
- We change the Attribute Definition from Automatic to Manual so we can edit the geometry type
- Geometry: cesium_3d_object
For FME 2025.0 and older, geometry is set in the Parameters tab, under the General section.
As of FME 2025.1, the Geometry parameter in Reader and Writer feature types is now configured within the Spatial or Geometry Definition Table under the User Attributes tab. For more information, including details about the change, please see Introducing Spatial and Geometry Definition Tables.
8. Run the Workspace
With feature caching disabled, run the workspace. This 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 instructions.
Compress/zip your entire output folder to upload to Cesium.
In Cesium Ion, under the My Assets tab, click the Add Data button and select the zipped Cesium Output folder from your files.
Set the following parameters and click Upload:
- Asset name: building
- What kind of data is this? 3D Tiles
To view the uploaded data, click the Open complete code example button in the Information tab:
Select a building to view its attributes:
Zoom in so you can see the snow texture:
If you want to get more technical, follow the steps in the article, Adding Different Texture to a 3D City Model, where you will learn how to set different textures for roofs and walls.
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.