Intermediate Tutorial


Creating Anchored AR Content for the Web


20 minutes

Posted on: January 23, 2020

Learn Sumerian
Creating Anchored AR Content for the Web

Your progress

Tags

AR
augmented reality
web-based AR
8th wall
environment
anchor

In this tutorial you will learn about:

Use this quickstart scene to create a browser-based AR app in as little as 5 minutes.

Demo animation

In this article we provide an Amazon Sumerian Augmented Reality (AR) starter scene that you can use to create your own browser-based AR app in as little as 4 minutes. This exercise will use environment tracking, which tracks a fixed point in the physical world. This allows a user to choose an arbitrary point on a physical surface and pin the AR world origin, or individual AR entities to that location.

This starter scene leverages the AR JavaScript SDK from 8th Wall and provides a simple user flow to anchor the AR content on a physical surface when the scene first starts. To get started on your next amazing AR project, read on!

In this article you’ll learn about:

  • Integrating the 8th Wall AR SDK into a Sumerian project
  • Supporting a basic AR placement user flow
  • Useful implementation patterns that you can apply to any Sumerian project

Prerequisites

  • You will need a free 8th Wall developer account in order to use this starter scene.
  • You should be familiar with basic usage of the Sumerian Editor before starting this tutorial.

Step 1: Create a new project on 8thWall.com

To begin, you will need to create a new 8th Wall project using the 8th Wall dashboard.

  1. Log in to your 8th Wall account, and click Start a new project.
  2. Give the project a meaningful name, and click Create. We called ours “sumerian-ar-tutorial”.
  3. Authorize your test device (e.g. your phone) by clicking the Device Authorization button and following the instructions.

    Caution: If you use a QR reader to scan the mobile QR code, be sure to then launch that link in the native browser on your phone before authorizing. Otherwise, you may be authorizing the embedded browser of the QR reader app but not the main web browser on your phone.

  4. Copy and save your 8th Wall app key for use later in this tutorial. You can find your app key by clicking on the cog icon Cog on the left of the 8th Wall project dashboard.

Step 2: Create the Amazon Sumerian scene

  1. Log into Sumerian from the AWS console.
  2. From the Sumerian Dashboard, under Create scene from template, use the Empty template to create a new scene. Give your scene a meaningful name. (We called ours “AR Tutorial”.)

    Caution: Sumerian provides a template called the Augmented Reality Template, but do not use that template for this tutorial. That template is meant for use in native mobile applications and won’t be a good basis for our 8th Wall AR scene.

  3. Download the 8th_wall_rutherford_ar_starter_scene_bundle.zip and import it into your scene. To import you can click on the folder icon in the Asset panel or drag-drop the ZIP file from your desktop to the Sumerian Editor window.
  4. After the import completes, from the Entities panel delete the extra camera named DELETE ME.
  5. Select the entity named _Scene Scripts. It has a script attached to it named 8th Wall Init which exposes a property called App Key. Paste your 8th Wall app key mentioned above into that App Key field.
  6. Select the Default Camera entity and uncheck its Follow Editor Camera option.

    Follow Editor Camera Off

  7. Set the Default Camera Translation values to 0, 1.5, 0. The height of your camera determines the scale at which your AR content will be displayed in the real world. The higher you place the camera, the smaller your AR content will appear relative to the physical environment.

Your scene can now be published and viewed on your test device! Give it a try.

Tip: Use a URL shortener service like tinyurl.com or Bitly.com to create a URL that’s easier to type into your phone’s browser.

Known Issues and Workarounds

Attention iOS users! If you encounter an 8th Wall device authorization error when loading your published scene, follow these suggested steps.

  1. Close Safari.
  2. Turn off Intelligent Tracking Prevention at Settings>Safari>Prevent Cross-Site Tracking.
  3. Clear 8th Wall cookies at Settings>Safari>Advanced>Website Data>8thwall.com.
  4. Re-authorize your test device from 8th Wall console.
  5. Re-test your project.
  6. If not fixed, clear all cookies at Settings>Safari>Clear History and Website Data.
  7. Re-authorize your test device from 8th Wall console.

Step 3: Customizing the scene

You can now customize the scene by swapping in your own 3D model following these steps.

  1. Locate the AR Content entity in the Entities panel. Expand it to reveal the child entities it contains.
  2. Delete the rutherford-b-hayes-plaster-150k.obj entity and replace it with your own 3D model being sure to nest your 3D model under the AR Content entity.
  3. Set the Translation of your new model so that the bottom of the model appears to be sitting at the Y Translation value of 0, otherwise the AR illusion will not look right. Also make sure your model’s X and Z Translation values are such that the model is centered within the AR Content entity.

You’re done! You can now republish your finished scene and test it on your device.

Exploring the scene’s construction

At this point your AR application is finished. Congratulations! But if you’d like to understand more about how the scene is constructed, that is what we will explore in this section.

Entity icon Entity: Surface Plane

This invisible plane represents the real-world surface onto which your AR content will be placed. It was created using a quad entity (one of Sumerian’s built-in entity types) and then changing that entity’s Material > Culling property to FrontAndBack which prevents either side of the quad from being rendered. This entity, along with its Collider component, is an important element of the tap-to-place functionality of the scene.

Entity icon Entity: AR Content

This parent entity contains all of your AR content including meshes and lights. This entity’s position will be updated automatically to match where the user has indicated they want the AR content to be placed. You can modify the contents of this entity in any way you wish.

Caution: When you add your own 3D model to the scene, make sure the bottom of the model appears to be sitting at the Y Translation value of 0, otherwise the AR illusion will not look right.

Script icon Script: 8th Wall Init

This script handles loading and initializing the 8th Wall JavaScript SDK. See the script’s comments for more details about its implementation.

You’ll find this script attached to the empty entity named _Scene Scripts - AR.

Script icon Script: AR Placement Sequence

This script orchestrates the user flow for initial placement of the AR content. It does this by emitting useful events that other scripts in the scene can respond to including:

  • arPlacementStart
  • arPlacementComplete

See the script’s comments for additional details. You’ll find this script attached to the empty entity named _Scene Scripts - AR.

Script icon Script: AR Placement Controller

During initial placement of the AR content, this script determines the 3D position at which the AR content should be placed. It uses a physics raycast to accomplish this. A raycast is an imaginary line that starts at the Sumerian camera’s current position and is projected straight out of that virtual camera and into your scene until it “hits” a physics collider. In our case, we have a collider on the Surface Plane entity. So when the ray hits the Surface Plane the 3D coordinate at which they intersect is stored in a world-level value called arPlacementPoint which other entities in the scene can reference.

See the script’s comments for additional details. You’ll find this script attached to the empty entity named _Scene Scripts - AR.

Script icon Script: Follow AR Placement

Whenever the AR Placement Controller script updates the arPlacementPoint value, this script responds by updating the position of the entity to which it is attached to match that new position. It also handles rotating the entity so that it faces the camera. You’ll find this script attached to the AR Content entity. See the script’s comments for additional details.

HTML entity icon Entity: _2D UI > Placement Prompt HTML

This is a regular HTML entity which displays instructions to the user. It shows itself when it detects the arPlacementStart event and hides itself when it detects the arPlacementComplete event.

HTML entity icon Entity: _2D UI > _Global CSS

This is a regular HTML entity with no actual HTML code. Instead, this element is used as a place to define global CSS styles that can be shared by other HTML entities in the scene. This pattern of isolating shared CSS definitions in a single HTML entity is a useful one to use in your projects.

The CSS in this entity is worth examining. The techniques it demonstrates may be useful in other projects where you want to create 2D UI on top of your Amazon Sumerian scenes.

Script icon Script: Hide On Event

This is a general purpose script that listens for a user-defined Sumerian event and hides the entity to which it is attached whenever that event occurs. We’re using this script on the Placement Prompt HTML entity mentioned above.

Script icon Script: Show On Event

This is a general purpose script that listens for a user-defined Sumerian event and reveals the entity to which it is attached whenever that event occurs. We’re using this script on the AR Content entity mentioned above.

A note on shadows

There is no built-in capability in Sumerian to have your virtual content cast shadows on the real-world. But without shadows AR content can look a little odd - as if it were floating and not quite rooted to the surface on which it is positioned. To improve the realism, we’ve added a simple “blob” shadow below the model in our scene. A blob shadow is just a radial gradient image with transparency that is applied to a quad entity to simulate the look of a shadow.

Final Thoughts

With the information provided in this article you now have a quick and easy solution to jump-start any browser-based AR project. So experiment, explore, and let us know what amazing AR ideas you’re bringing to life by sharing your work and questions in our Sumerian Slack Community.

You should now have a much better understanding of how to create an AR application using AWS Amplify and 8th Wall. To learn more, check out the following tutorials:

Credits

Thank you to the generous creators who made the model used in this project available through a Creative Commons license.

Rutherford B. Hayes model by Smithsonian (CC0)

Back to Tutorials

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