Visualize Mesh Features and Metadata

Features and metadata are core concepts in 3D Tiles, providing a finer granularity of detail to enable rich informational experiences. In one example, a building can differentiate sub-building features in its 3D mesh—e.g., windows, walls, and roofs—and render them with photorealistic materials. The same building can also be part of a larger city block with per-building metadata, such as number of floors or date of construction. With Cesium for Unreal, this information can be queried at runtime and displayed or visualized in meaningful ways.

Features and metadata are specified by the EXT_mesh_features and EXT_structural_metadata glTF extensions, respectively. These extend a model’s geometry and texture information, storing supplemental data for efficient retrieval at runtime. Both extensions are supported in Cesium for Unreal v2.0+. For backward compatibility, legacy 3D Tiles with batch tables or batch table hierarchies will be converted to the new extensions as they load. Although EXT_mesh_features is often used in tandem with EXT_structural_metadata, these extensions can exist and be used independently of each other.

This tutorial outlines how to utilize mesh features and metadata in two ways:

1. Styling: modifying the tileset’s appearance based on its features and metadata values.
2. Picking: selecting a feature in the tileset and displaying its associated metadata.

The steps below will use the New York City 3D Buildings dataset, available to all Cesium ion users via the Asset Depot. Feel free to use your own 3D Tiles tileset if it contains features or metadata—just note that the available features and metadata properties will depend on the data.

You’ll learn how to:

• Use the CesiumFeaturesMetadata component to style a 3D Tileset.
• Access features and metadata in the tileset with Blueprints.
• Select features at runtime to view their associated metadata properties.

4Find New York City 3D Buildings in the asset list and select it. Click Add to Level.

With the component selected, the Details panel will display three buttons at the top. For now, focus on the first two buttons, Add Properties and Generate Material.

The glTF Features section lists any feature ID sets available through the EXT_mesh_features extensions in the tileset. Each feature ID set describes a defined set of features in the primitive’s mesh.

This will add it under the component’s Primitive Features dropdown in the Details panel.

Once registered, the add icon will change to a pencil, indicating that any changes made will overwrite the existing entry for the feature ID set. This allows modifications to the registered features and metadata without having to manually edit them in the Details panel. Likewise, the remove icon will remove the feature ID set from the component.

For this tutorial, let’s add the Height property to the material. Click on Height to expand the dropdown, then locate the three options to the right of the property entry.

This determines how the property is encoded, i.e., how its values are converted so they can be passed to the Unreal Engine material through texture parameters. The leftmost dropdown shows the method used to encode the property, which defaults to Coerce for numeric properties.

With Coerce, the property will attempt to cast its values to the GPU-compatible type specified by the two other dropdowns. In this case, the 64-bit floating precision values will be downcast to the closest 32-bit precision floats, since there is no universal support for double-precision textures.

These three fields are referred to as the Encoding Details of the property. The default configuration works best for this property, so leave it as-is. Click the add icon on the right to register it with the component. Once registered, it will appear under the Model Metadata dropdown under the component’s Details panel.

If desired, you can verify that the Property Details and Encoding Details of the Height property match those below.

5Now let’s register the Year property with the component. You may have noticed multiple entries with different types under the Year property:

When tiles across the tileset define the same property with different types, the window will show all discovered instances under the same property dropdown. This occurs most often for older 3D Tiles datasets, since tiles are upgraded on-the-fly and assigned best-fitting types for their given set of property values. In New York City 3D Buildings, some tiles do not contain construction year data, so their Year property will have been converted to a String type with null values.

This view allows you to make informed decisions about how the data is interpreted. Here, it makes the most sense to treat the property as an Int16 Scalar and coerce the values to Float. Register this instance of the property by clicking its add icon.

Back in the Details panel, click Generate Material to create a material layer containing the listed features and metadata properties. Then, double-click the Target Material Layer’s icon. This will open an editor window for the layer so you can begin to build it out.

You should see nodes in the material layer that will have been generated by the CesiumFeaturesMetadata component.

Starting from the leftmost nodes, this node graph can be interpreted as follows:

• This material layer uses an attribute feature ID set called _FEATURE_ID_0. 
• Feature IDs are retrieved from the aforementioned set via CesiumGetFeatureIdsFromAttribute.
• The resulting feature ID is passed into Get Property Values from default, a custom function that will sample the textures containing encoded metadata values. This corresponds to the property table named default on the CesiumFeaturesMetadata component.
• The metadata values associated with that feature ID will be output to the Height and Year pins. These are the properties that you kept under the property table on the component.
• Feature ID sets may have an optional “null feature ID” value, which indicates that some part of the model is not associated with a feature. The _FEATURE_ID_0_NULL_ID node was generated to anticipate this case.
• The If node allows you to implement fallback behavior whenever a null feature ID is encountered. The New York City 3D Buildings dataset does not have one, but in general, you can assign logic to the A==B node to anticipate this case, such as a default color.

In general, feature IDs are retrieved from the model before their corresponding metadata can be found. Any property table properties that you add to the CesiumFeaturesMetadata component will be made available as output pins on the auto-generated Get Property Values node.

6Now you can connect the property outputs to the material logic you want to apply. For example, if you’re using the New York City 3D Buildings dataset, you can color the buildings with respect to their Height in meters and their Year of construction. (Feel free to copy the nodes below and paste them into your material graph.)

9Go to your tileset’s Details panel. Under the Cesium > Rendering category, set the Material property to your own custom material.

Once you add the material to your tileset, click Refresh Tileset in the Details panel to make the tileset pick up changes from its CesiumFeaturesMetadata component. After the tileset reloads, you can observe how the material layer transforms your dataset!

Give your class a descriptive name. Then, select the folder in which you want to save your Blueprint and hit Save.

Once saved, a new window will open so you can edit the class.

If you want to use an existing Blueprint class, click the Class Settings button in the Blueprint editor, then find the Implemented Interfaces in the Details panel. From there, you can search and add Cesium3DTilesStylingProvider.

Once the class has been created, look to the left sidebar of the Blueprint editor. You should see a function named EvaluateStyle listed under Interfaces, which confirms that the class properly implements the interface.

2Click on EvaluateStyle to open the function graph. At first, there will only be two nodes representing when the function begins and ends.

EvaluateStyle is called for every single feature ID within a feature ID set. The Property Table parameter passes the property table that the feature ID set is associated with, if any. The feature ID itself can be accessed from the Feature Id parameter.

On the Return Node, the Return Value expects a Cesium3DTilesStyle structure, which will be explained in a bit. Click and drag from the Return Value pin to open the Blueprint search menu, then find and add Make Cesium 3DTiles Style.

This node shows the properties used to build the style. Show is a boolean toggle, indicating whether the feature should be visible at all. Color is an Unreal FColor (8-bit RGBA) that gets evaluated for the feature. These properties mirror the API used for Styling and Filtering 3D Tiles in CesiumJS.

Now you can add Blueprint logic to act on the properties within the Property Table. For this tutorial, the Blueprint will be set up to access the Majority_Ownership_Type property from New York City 3D Buildings.

First, drag the Return Node and Make Cesium 3DTiles Style nodes off to the right to make space for the Blueprint. Then, under the EvaluateStyle node, click and drag out from the Property Table pin. Search for the Find Property node and add it to the graph.

Put Majority_Ownership_Type as the Property Name. Then, from the node’s Return Value, find and add the Get String function shown below.

Finally, connect the Feature Id pin under EvaluateStyle to the Feature ID pin under Get String.

4Set the other string to Individual, then drag the boolean output into the Show pin of Make Cesium 3DTiles Style. Finally, drag from the Color pin and add a Make Color node, setting it to an opaque green.

This changes what mode you are using to style the features in the set. When set to Blueprint, the component will create an instance of its Blueprint Style Class, then run the EvaluateStyle function on the features of tiles as they load. In other words, this executes the Blueprint on the feature IDs in the tileset to evaluate how they should be shown and colored.

With Blueprint styling, there is no need to encode metadata properties for direct use in the material. You can clear the properties you previously added by clicking the minus icons to the right of their entries. Alternatively, look for the Property Tables list under the Details panel and click the trash icon to clear all items.

Then, click Generate Material. This causes the component to create a new material layer when you click Generate Material, rather than overwriting one that is already specified.

The new material layer will look familiar, but its middle nodes will be different:

Instead of a Get Property Values node, there is now a Get Blueprint Style node that retrieves the Show and Color properties for the feature. These outputs can be plugged directly into SetMaterialAttributes such that:

• Show is connected to Opacity Mask
• Color is connected to Base Color
• The fourth component of Color is connected to Opacity (requires the material instance to be Translucent to work)

Feel free to copy and paste the following nodes into your material graph:

Otherwise, you can manually add these attributes by selecting the SetMaterialAttributes node, then adding them under its Details. Then, connect the pins as shown.

If your dataset contains a null feature ID, you can incorporate fallback behavior for it using multiple If nodes, as shown:

Create a new material instance and add this material layer under the FeaturesMetadata label. For Blend Asset, select MLB_CesiumMultiplyBaseColorAlpha, which is set up to correctly handle the Opacity Mask and Opacity.

A copy of the material can be downloaded here for reference.

Then, assign this material instance to apply the style to the tileset. (If nothing happens, click Refresh Tileset to pick up the changes.)

With Blueprints, you can also modify variables or call functions on the style instance at runtime. For example, you can create a list of Majority_Ownership_Type values on the tileset and let the user toggle their visibility, either through keyboard input or a clickable user interface. In your Blueprint Style Class, you can add a set of strings called ShownValues and check whether the value is present:

Then in your Level Blueprint, you can get the style instance from the CesiumFeaturesMetadata component and update ShownValues at runtime. For example, you can use a key to toggle visibility of one of the ownership types in the dataset.

These capabilities allow you to implement flexible styling of your 3D data with plenty of room for user interactivity.

2Right-click in an empty space on the graph to bring up a Blueprint search menu. Type “Left Mouse Button” in the search bar, and click Left Mouse Button in the results to create a node for the corresponding input.

3Click and drag the DynamicPawn actor from the World Outliner to the Level Blueprint graph. This will create a reference to your DynamicPawn in the Level Blueprint.

Right-click the bottom-left pin of the Multiply node to convert it to a Float (double precision).

Then, set the B value on the Multiply node to 500,000. This will scale the RotationXVector such that the line trace is 500,000 units long.

Finally, create an Add operator node to add the result of the Multiply node to the original Location. The level Blueprint should now look like this:

You can view the final Level Blueprint in its entirety below.

6Be sure to compile and save your Blueprint. Then, play your level in the Editor and test it out! When you select a building with the mouse, you should see the metadata properties associated with that feature in the top left corner.