intermediate
No code
Mesh generation with the Mapbox Maps SDK for Unity, Part 3: style buildings
Prerequisite
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 third 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 3, you’ll select and style specific building types using your CityMergedBuildingStack from Part 2 of this series.

To do this, you’ll place several additional stacks under the CityBuildingLayerVisualizer to define how your subset of buildings should appear in the scene.

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. For step-by-step instructions on how to set up a new Unity project, see Part 1 .
  3. Add 3D buildings to your project. For step-by-step instructions, see Part 2

Building specific styles.

In part 2 of this series, you added some 3D buildings to your scene, but they all look the same. What if you wanted to add some emphasis to a particular type of building? In this guide, you’ll create additional stacks to define how all of the schools in your scene should look.

Create a stack for the buildings you want to emphasize

To get started, open the Unity project you created in part 2 of this tutorial series. Create an additional folder in your BuildingLayer directory and call it CityBlueBuildingStack.

add a new directory to house additional modifier stacks

  1. Right-click on the CityBlueBuildingStack.
  2. Navigate to the Mapbox context menu.
  3. Select Modifiers context menu, create a Merged Modifier Stack called CityBlueBuildingStack.

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

Next, using the steps above create the following modifiers:

  1. A SnapTerrainModifier called CityBlueBuildingSnapTerrainModifier.
  2. A PolygonMeshModifier called CityBlueBuildingPolygonModifier.
  3. A UVModifier called CityBlueBuildingUVModifier.
  4. A HeightModifier called CityBlueBuildingHeightModifier.
  5. Add each of the modifiers to your CityBlueBuildingStack in the order that you created above.

CityBlueBuildingStack with modifiers added in the above order

If you’ve completed part 2 of this series, the above should look familiar. You’re creating a second MergedModifierStack that mimics all of the characteristics of the one you created in the last tutorial. In a future step, you’ll add the MergedModifierStack you just created to your layer visualizer in order to apply a distinct style to the schools in your scene.

Style your buildings

Now that you’ve created a MergedModifierStack for your buildings, you’ll need to apply some styles to visually differentiate the schools from all of the other buildings in the scene.

In the CityBlueBuildingStack folder, create a Material Modifier and rename it CityBlueBuildingMaterialModifier.

Create a new custom material so you can distinguish the buildings in this stack:

  1. Right-click on your CityBlueBuildingStack folder and create a new material called CityBlueBuildingMaterial.
  2. From the topmost color picker in the CityBlueBuildingMaterial inspector window, choose a shade of blue for your material.
  3. In the CityBuildingMaterialModifier click Add New Empty.
  4. Click Submesh 0 Material
  5. Change the Size to 1.
  6. Add your CityBlueBuildingMaterial.
  7. Click Add New Empty to add Submesh 1 Material

city blue building texture modifier with custom materials applied

Finally, add your new texture modifier to your merged modifier stack:

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

CityBlueBuildingStack final configuration

Add your merged modifier stack to your layer visualizer

At this point, your buildings are almost ready to visualize! In order to apply the blue color you created above to the schools in your scene, add the CityBlueMergedBuildingStack to your CityBuildingLayerVisualizer:

  1. In the CityBuildingLayerVisualizer inspector window, select Add New Empty under Stacks.
  2. Enter school in the empty field.
  3. Assign CityBlueBuildingStack to the Stack field.

city building layer visualizer with additional stack added

Click play to see all the schools in your scene displayed as blue buildings.

final unity scene with uniquely styled school buildings

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

Next steps

Congratulations! You just built a scene that visualizes map tiles draped over a 3D elevation model, then you added 3D buildings and created a special style for all of the schools in your scene. Nice work! On your own, try:

  • Using some different materials for the top and side of your buildings.

unity building with unique top and side materials

  • Using a HeightFilter to filter all of the buildings below a given height.

unity scene with filtered buildings

Want to keep working? Check out the Mapbox Maps SDK for Unity documentation to keep building.