Intermediate Tutorial


Creating Annotated Points of Interest on a Terrain Model


1 hour

Posted on: October 11, 2018

Learn Sumerian
Creating Annotated Points of Interest on a Terrain Model

Tags

terrain models
materials
lighting
state machine

In this tutorial you will learn about:

Import a terrain model and set interactive points that display information.

In this tutorial, you’ll get a better understanding of how to create clickable points of interest on a terrain model in Amazon Sumerian. We’ll import a mountain terrain model, and add “point of interest” flags that when clicked show an infographic display.

You’ll learn about:

  • How to import a 3D model and set up its material
  • Some basics about environment, fog, and lighting
  • State Machine basics and behaviors
  • Material property settings

This is the scene we’ll build. For best results, be sure you are using the latest version of your browser.

Prerequisites

Before you begin, you should have completed the following tasks and tutorials:

Lastly, download the tutorial asset pack:

Step 1: Set Up the Scene

In this step we will start setting up our scene by adding some of the assets that you downloaded in the prerequisites.

  1. Create a new scene using the Default Lighting template, and then name it “Terrain”.
  2. Drag and drop Terrain.fbx onto the canvas.

    Now you can see the Terrain pack in the Assets panel.

  3. Expand the Terrain pack, and then drag the Terrain entity (hexagon icon) onto the canvas.

    Now you can see the Terrain entity in the Entities panel.

Step 2: Set Up Your Terrain Material

In this step, we will modify the Material of the terrain model.

  1. In the Assets panel, under Terrain, choose Top.

  2. Drag Terrain_DIFF.jpg that you downloaded onto the Color (Diffuse) drop input.
  3. Set Color to HEX value ffffff.
  4. Drag Terrain_NORM.jpg onto the Normal drop input.
  5. Drag Terrain_SPEC.jpg onto the Specular drop input.
  6. Adjust the Specular color to HEX value 777777. Then set the Shininess to 1.
  7. Turn off Emissive and Ambient properties by unselecting the checkbox.
  8. Under the Shading property, adjust Wrap factor to 0.55 and Wrap amount to 0.5.

    The Top material properties should be the following.

  9. In the Assets panel, for Terrain, choose Bottom.

  10. Set Color (Diffuse) to HEX value 213613.
  11. Adjust the Specular color to HEX value 999999.
  12. Turn off the Emissive and Ambient properties by unselecting the checkbox.

    The Bottom material properties should be the following.

Step 3: Set Up the Lighting

In this section, we will modify the lights that are nested under the Default Lights entity.

  1. In the Entities panel, expand the Default Lights entity and delete the Fill - Directional light entity by clicking the trash icon.

  2. Select the Key - Directional light. Under the Transform component, set the Rotation to (-36, 21, 2).
  3. Under the Light component, set Color to HEX value ffb66e.
  4. Set Intensity to 1.1 and leave Specular set to 1. This will act as our afternoon sunlight.
  5. Turn on Shadows, change Type to PCF, and then set Size to 9.

  6. Select the Rim - Directional light. Under the Transform component, set the Rotation to (-31, 150, 0).
  7. Under the Light component, set Color to HEX value 75a9ff.
  8. Set Intensity to 0.7 and Specular to 0.5. This will act as our ambient skylight.

Step 4: Set Environment Fog and Bloom Settings

In this step, we will adjust the global and Environment settings for our scene.

  1. In the Entities panel, choose Terrain, or the top level entity (i.e. whatever you named your scene).

  2. Under the Environment component, do the following:

    • Set Ambient color to black, or HEX value 000000.
    • Enable Fog.
    • Set the Fog Color to blue, or HEX value b4d9ff.
    • Set the Fog Far distance to 30.

  3. Expand the Post effects component.

  4. Choose Add Effects, and then choose Bloom.
  5. Adjust the Bloom settings to the following:
    • Opacity: 3
    • Size: 4.85
    • Gain: 42
    • Intensity: 1

Step 5: Create the Flag

In this step, we will add the flag entities that are placed throughout the terrain.

  1. Drag Flag.fbx that you downloaded onto the canvas.
  2. Drag the Flag entity (hexagon icon) into the Entities panel.
  3. Under the Transform component, set the Translation values to (-0.06, 3, 0) and the Scale to (8, 8, 8).

  4. In the Assets panel, choose the Flag material.

  5. Change Color (Diffuse) to HEX value ff0000.
  6. Turn off the Emissive and Ambient properties by unselecting the checkbox.
  7. Under Culling, uncheck Enabled.

    The Flag material properties should be the following.

Step 6: Creating the Trigger Box

In this step, we will create a clickable, invisible object that will be clickable to users. This will initiate the State Machine behaviors that are created below.

  1. Create a Box entity.

  2. Set its Translation to (0, 3.4, 0).

  3. Rename the Box to “Trigger Box”. This will act as an invisible object that turns on an infographic.

  4. Under the Geometry component, expand Shadows, and then uncheck Cast shadows and Receive shadows.

Step 7: Creating a State Machine Behavior for the Trigger Box

  1. With Trigger Box selected, add a State Machine component.

  2. Add a new behavior by clicking the + button and name it “Click”. Then choose the edit button (pencil icon) to open the State Machine editor.

  3. Select State 1 and add a Tween Material Opacity action.

  4. Set Opacity to 0 and Time to 1.

  5. Add two more states.

  6. Choose State 2, and then add a Click/Tap on entity action.

  7. Choose State 3, and then add an Emit Message action.

  8. Type “summit” in the Message channel box.

  9. Add another Transition on the next frame action.

  10. Add transitions between the three states (by clicking and dragging from the transition label) to look like the following.

Step 8: Create the Infographic

In this step, we will create the infographic annotation cards that contain the information about our terrain model.

  1. Click Create Entity and select a Quad entity.

  2. Rename it to “Graphic”.

  3. Change the Translation to (0, 5.5, 0).

  4. Change the Scale to (3.2, 3.2, 3.2).

  5. Open the Material component, and then drag Graphic_DIFF.jpg to the Color (Diffuse) property drop input.

  6. Set Color (Diffuse) to HEX value ffffff.

  7. Set Ambient to HEX value 888888.

  8. Under Culling, uncheck Enabled.

  9. Under the Geometry component, expand Shadows. Uncheck Cast shadows and Receive shadows.

Step 9: Creating an Infographic Behavior using the State Machine

In this step we will create the behavior that makes the infographics appear upon clicking a flag.

  1. With Graphic selected, add a State Machine component.

  2. Add a new behavior and name it “Turn on/off”.

  3. Choose the edit button (pencil icon) to open the State Machine editor, and then add three more states.

  4. Choose State 1, and then add a Hide action and a Transition action. This hides the infographic by default.

  5. Choose State 2, and then add a Listen action. Type “summit” in the Message channel box.

  6. Choose State 3, and then add a Show action and a Transition action. This makes the infographic show once the Trigger box is clicked.

  7. Choose State 4, and then add a Click/Tap on entity action. This hides the infographic when the user clicks it.

  8. Add transitions between the three states, to look like the following.

Step 10: Make the Infographic Camera Facing

In this step, will make the infographics follow the camera, so that they are always visible to the user.

  1. Choose the Graphic entity again, and then add a new State Machine behavior by clicking the + button. Name it “Camera Facing”. This will make our infographic always face the camera.

  2. Choose the edit button (pencil icon) to open the State Machine editor.

  3. With State 1 selected, add the Face Current Camera action.

Step 11: Make the Flag Camera Facing

In this step, will make the flags follow the camera, so that they are always visible to the user.

  1. Choose the Flag entity and add a State Machine component.

  2. Add a behavior and name it “Camera Facing”.

  3. Edit Camera Facing, and then add the Face Current Camera action to State 1.

Note: At the time of publishing this tutorial, there is a known issue where the Face Current Camera action can sometimes cause a texture to be inverted. If you are experiencing this with either the Infographic or Flag, you can fix the inversion by making the Transform Scale values negative. See example below:

Step 12: Test the scene

Press play. Move your camera around the scene and click the Flag to display the infographic. Click the infographic to make it disappear.

Now publish and share your scene!

You should now have a much better understanding of how to create interactive points of interest on a terrain model. Within this scene, try the following tasks:

  • Repeat some of the steps to create additional points of interest.
  • Create your own infographic display.

To learn more, check out the following tutorials:

Back to Tutorials

© 2019 Amazon Web Services, Inc or its affiliates. All rights reserved.