Amazon Sumerian is based on WebGL 2. With Sumerian you can design scenes directly from your browser using the Amazon Sumerian console.

When you publish your Sumerian scene you can allow either public or private access for only authenticated users.

In this tutorial, we’ll be learning how to create & add an Amazon Sumerian VR private scene for authenticated users into an AWS Amplify React web application. Overall, this is meant to be a comprehensive introduction to building VR applications with Amazon Sumerian.

Amazon Sumerian lets you create and run virtual reality (VR), augmented reality (AR), and 3D applications quickly and easily without requiring any specialized programming or 3D graphics expertise. With Sumerian, you can build highly immersive and interactive scenes that run on popular hardware such as Oculus Go, Oculus Rift, HTC Vive, HTC Vive Pro, Google Daydream, and Lenovo Mirage as well as Android and iOS mobile devices.

Because Amazon Sumerian is an environment that uses a web user interface to create & update scenes, the second part of this tutorial will be a video tutorial showing how to create a scene, while the first part will be showing how to create an AWS Amplify project with authentication.

Getting Started

The first thing we need to do is create a React application & add an Amplify project to it.

To create the React application, we’ll use Create React App:

npx create-react-app sumerian-amplify-app # or create-react-app sumerian-amplify-app

Next, we’ll change into the React project & install the AWS Amplify & AWS Amplify React libraries.

cd sumerian-amplify-app npm install aws-amplify aws-amplify-react

Now that the React project has been created, we’ll initialize a new AWS Amplify project.

If you have not yet installed & configured the AWS Amplify CLI, check out the video walkthrough here.

amplify init

amplify init will prompt you with a few questions. Choose your text editor of choice & the defaults for all of the other choices.

Once the AWS Amplify project has been initialized, we’ll add authentication to the project:

amplify add auth

Do you want to use the default authentication and security configuration? Yes

Next, we’ll run the push command to create the resource in our account:

amplify push

Now that an authentication service has been created in your account, we can add authentication to our project using Amplify by updating index.js & App.js.

First we’ll update index.js to configure the AWS Amplify project:

// add the following below the last export in index.js

import Amplify from 'aws-amplify'

import config from './aws-exports'

Amplify.configure(config)

Next, we’ll update App.js to use the withAuthenticator HOC from aws-amplify-react by replacing the default export:

import { withAuthenticator } from 'aws-amplify-react'; class App extends React.Component {

// default class definition

} export default withAuthenticator(App, { includeGreetings: true });

Creating an Amazon Sumerian Scene

In this section, we’ll learn how to create a new Amazon Sumerian scene. Because Sumerian is a web interface, I think the best way to introduce it is via a video.

In this video, we’ll walk through how to create our first scene, a room with materials, light & interactions. Once we’re done creating the room, we’ll move on to the next step of publishing the scene in our React application.