No code

Mesh generation with the Mapbox Maps SDK for Unity, Part 2: add 3D buildings to a scene

Familiarity with Unity.

Note: This tutorial applies to versions 1.3.0 or earlier of the Mapbox SDK for Unity. To get started with version 1.4.0 or later, please visit this new tutorial.

This is the second in a series of tutorials that will walk you through how to create a visualization of 3D buildings on top of a 3D terrain map for use in a Unity application. In Part 2, you'll add 3D buildings to a scene and visualize it.

Getting started

Before getting started, you’ll need to:

  1. Install the Mapbox Maps SDK for Unity. For full installation instructions, visit https://www.mapbox.com/unity-sdk.
  2. Start a Mapbox project in Unity. See Part 1 for step-by-step instructions on how to set up a new Unity project.

Create a vector tile factory

In Part 1 of this tutorial series, you created a 3D scene of San Francisco, but it could use a few more features to explore. In this guide, you’ll add extruded buildings from Mapbox vector tile data.

The first thing you’ll need is a VectorTileFactory. A VectorTileFactory uses the Vector Tile API to visualize vector data. It fetches the vector data for given tile and passes layer data to layer visualizers. To create and configure your VectorTileFactory:

  1. From the Project tab in the Unity Editor, create a folder inside your CityMap folder and name it CityMesh.
  2. Right-click on your CityMesh folder, navigate to the Mapbox context menu.
  3. Select Factories.
  4. Click on Vector Tile Factory and rename your new script to CityVTFactory.

menu options for creating a Vector Tile Factory in the Unity UI

A Vector Tile Factory can be configured to visualize data from any Mapbox tileset. By default, each new Vector Tile Factory you create will be configured to request tiles from the mapbox.mapbox-streets-v7 tileset. Click R or pastemapbox.mapbox-streets-v7 into the Map Id field if blank.

Update the MapVisualizer

  1. Select your CityMap MapVisualizer.
  2. Click Add New Empty.
  3. Click the search icon.
  4. Navigate and select CityVTFactory.

window to select a module in Unity

Create a building layer visualizer

Next, you'll create a VectorLayerVisualizer for buildings. A Vector Layer Visualizer extracts features from a tileset (you can specify a source layer and a filter) and connects them to the appropriate stack to be rendered.

To create a Vector Layer Visualizer:

  1. Create another folder inside of your CityMesh directory called BuildingLayer.
  2. Right-click on your new BuildingLayer folder.
  3. Navigate to the Mapbox context menu.
  4. Select Layer Visualizer and click on Vector Layer Visualizer to create a new script.
  5. Rename your script CityBuildingLayerVisualizer.

menu options for creating a Vector Layer Visualizer in the Unity UI

Configure CityBuildingLayerVisualizer

To configure your new VectorLayerVisualizer:

  1. Open the Inspector window for CityBuildingLayerVisualizer.
  2. Set the Key parameter to building.

inspector window for configuring the `CityBuildingLayerVisualizer`

  1. Open your CityVTFactory Inspector menu.
  2. Click the Find Asset button.
  3. Add your CityBuildingLayerVisualizer script.

Select the `CityBuildingLayerVisualizer` from the top

Create a “stack” for your building layers

This “stack” will be the core of your building creation logic and will determine how your buildings will be rendered.

Create a default stack:

  1. Right-click on your BuildingLayer folder and create a folder inside named CityDefaultBuildingStack.
  2. Right-click on the CityDefaultBuildingStack.
  3. Navigate to the Mapbox context menu.
  4. Select Modifiers context menu, create a Merged Modifier Stack called CityMergedBuildingsStack.

menu options for creating a Merged Modifier Stack in the Unity UI

  1. Following the same process you used in the previous step, to create a series of additional modifiers inside the CityDefaultBuildingStack directory:

    • A Snap Terrain Modifier called CityBuildingSnapTerrainModifier.
    • A Polygon Mesh Modifier called CityBuildingPolygonModifier.
    • A UV Modifier called CityBuildingUVModifier.
    • A HeightModifier called CityBuildingHeightModifier.
  2. Add each of the modifiers to your CityMergedBuildingsStack in the order that you created above.

Make sure to assign the modifiers to your MergedModifierStack in this order

  1. Now, in the CityDefaultBuildingStack folder create a Material Modifier.
  2. Select Modifiers context menu, create a Material Modifier called CityBuildingMaterialModifier.
  3. Right-click in the CityDefaultBuildingStack folder and create a Material named CityBuildingMaterial
  4. In the CityBuildingMaterialModifier click Add New Empty.
  5. Click Submesh 0 Material
  6. Change the Size to 1.
  7. Add your CityBuildingMaterial.
  8. Click Add New Empty to add Submesh 1 Material

Your settings for the CityBuildingTextureModifier should look like this

  1. Select your CityMergedBuildingsStack.
  2. Under Game Object Modifiers select Add New Empty.
  3. Find and select your CityBuildingMaterialModifier.

inspector window for the CityBuildingTextureModifier

Create a “stack” for your building layers

To make sure the modifiers are applied to the features you’ve extracted from the vector tiles you added with your mesh factory, you’ll need to add the whole merged modifier stack to the layer visualizer you created earlier.

Assign your merged modifier to your layer visualizer:

  1. Open the inspector window for CityBuildingLayerVisualizer.
  2. Add CityMergedBuildingsStack as the Default Stack.

Check settings in the Map Editor

Click Mapbox > Map Editor from the Unity Editor at the top to show then the configurations that you have made. Make sure yours match the screenshot.

Map Editor

Finished product

Click the play button to run your scene. You should get a nice city view!

screenshot showing a view of 3D buildings

Next steps

Continue to Part 3 of this tutorial series to see ways to selectively edit the buildings you created here.