Query Amazon DynamoDB Directly from Amazon Sumerian Using Custom Attributes

By William Cannady | Posted May 23, 2019


Applications generally require access to external data that lives in different locations. When creating an AR/VR application with Amazon Sumerian, there might be times when you need access to external data sources to help with your Sumerian scene.

In this article, we walk through building an Amazon Sumerian scene that can query an Amazon DynamoDB database table to pull additional information that’s useful in the scene. Using external data sources enables you to create scenes in Sumerian that focus on design, while keeping dependent data in its native repository and format.

In this exercise, we create a scene with four primitive shapes. Each shape object, when clicked or tapped, will reference an item in DynamoDB that displays fictional data about each shape on an HTML entity.

This is the scene we will create. Click or tap on each shape to query metadata from DynamoDB. For best results, use the latest version of your web browser.

You’ll learn about:

  • Using Custom Attributes on Sumerian entities
  • Querying a DynamoDB database within Sumerian
  • Using returned values to populate HTML information within Sumerian

Prerequisites

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

Step 1: Create the Supporting AWS Architecture

First, we have to create an AWS CloudFormation stack so that Sumerian can communicate with other AWS services. In this step, you will create a CloudFormation stack from a template, which also includes a pre-made DynamoDB table. This stack includes:

  • Amazon Cognito: Allows authentication to access the AWS SDK within Sumerian.
  • IAM (roles): Used by Amazon Cognito to set the least-privileged level of authorization required between AWS services.
  • Amazon DynamoDB: A noSQL database that contains additional information about the Sumerian entities to query.
  • AWS Lambda: In this case, used by AWS CloudFormation to run code that automatically populates values in the DynamoDB table.

Use the provided CloudFormation template to automate the deployment and configuration of these services. For more details on this process, see the AWS Setup tutorial as a reference.

  1. Create and launch the AWS CloudFormation stack, created specifically for this exercise.

  2. Select the checkbox to acknowledge IAM resources will be created, and then choose Create.

  3. Wait until the script status says CREATE_COMPLETE. Refresh the page to update the current status of the script. It can take up to three minutes to complete.

  4. Expand Outputs, and then copy the value for CognitoIdentityPoolID. You’ll use this later inside your Sumerian scene.

    Copy Cognito Value.

  5. Open the DynamoDB console from the AWS Management Console and choose Tables. Choose SumerianAttributeTable, and then select the Items tab. Verify entries and attributes are displayed. You’ll pull these values into Sumerian.

Step 2: Create an HTML Entity to Display Data

When DynamoDB is queried, it will return information we want to display inside Sumerian. In this step, we create a 2D HTML entity with specific HTML IDs that direct where to display the returned information inside the element.

  1. Navigate to Sumerian from the AWS Management Console and create a new scene.

  2. With the top-level entity selected, expand the AWS Configuration component, and then paste the CognitoIdentityPoolID value from the CloudFormation template into the Cognito Identity Pool ID box.

  3. Create an HTML entity and expand the HTML component. Deselect Move with Transform. This locks the entity to the upper-left corner by default.

  4. Select the HTML component. Choose Open in Editor, and then paste in the following code.

    <style>
    	.my-paragraph {
    		background: #fefefe;
    		font-size: 30px;
    		padding: 10px;
    		border-radius: 3px;
    		margin: 0;
    		font-family: sans-serif;
    		font-weight: bold;
    	}
    </style>
    
    <h1 class="my-paragraph">
    	ObjectID: <span id="oidReturn"></span></p>
    	Shape:  <span id="shapeReturn"></span></p>
    	Contents:  <span id="contReturn" ></span></p>
    	Country of Origin:  <span id="cooReturn" ></span></p>
    	</h1>
    
  5. Choose Save.