Intermediate Tutorial


Creating Image Tracking AR Content for Android Apps


30 minutes

Posted on: November 12, 2018

Learn Sumerian
Creating Image Tracking AR Content for Android Apps

Tags

AR
augmented reality
ARSystem
ARAnchors
SumerianARCoreStarter

In this tutorial you will learn about:


In this tutorial, we create image recognition in an augmented reality (AR) experience on an Android device by using content you create using Amazon Sumerian. This exercise will show you how to use ARCore to identify 2D images in the real world. The location of these images can then be used as an ARAnchor to place entities in Sumerian in relation to real world items. As an example, though not part of this exercise, this capability would enable an application to identify a king of hearts (playing card) and then display a 3D model of a king standing on top of the card.

You’ll learn about:

  • Image recognition
  • ArSystem
  • ARAnchors
  • SumerianARCoreStarter sample Android app

Prerequisites

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

You also need the following:

Step 1: Start a New Project in Sumerian

  1. From the Dashboard, navigate to the scene templates.
  2. Choose the Augmented Reality template.

Step 2: Add a Sphere

  1. Choose Create Entity at the top of the interface.
  2. Under the 3D Primitives category, choose Sphere.
  3. In the Entity Panel, drag the sphere onto the ARAnchor entity to add it as a child of the ARAnchor.
  4. With the sphere selected, navigate to the Inspector Panel, and then expand the Transform component.
  5. Change the Scale X, Y, Z values to (0.1, 0.1, 0.1).
  6. In the Entity Panel, hide the ARAnchor by choosing the eye icon to the left ARAnchor.

    Your Entity Panel should look like this.

Step 3: Add the Script

  1. With the ARAnchor selected, navigate to the Inspector Panel, choose Add Component, and then choose Script.
  2. To add a script to the Script component, on the Script Component tab in the Inspector Panel, choose the + (plus) button.
  3. You can see several preset scripts. However, for this tutorial, we want to write our own script, so choose Custom.
  4. In the Script component, choose the edit button (pencil icon) next to the script that you just created. The Script Editor opens.
  5. Copy the following code into the setup function.
ctx.entity.setComponent(new sumerian.ArAnchorComponent());

const arSystem = ctx.world.getSystem('ArSystem');
if (!arSystem) {
    return;
}
ctx.imageAnchorCallback = function(anchorId) {
    if (anchorId) {
        console.log(anchorId);
        ctx.entity.getComponent('ArAnchorComponent').anchorId = anchorId;
        ctx.entity.show();
    }
};
const imageName = 'SumerianAnchorImage';
arSystem.registerImage(imageName, ctx.imageAnchorCallback);

Step 4: Publish the Scene

Publish the scene and copy the unique scene URL.

Step 5: Make Code Changes in Android Studio

  1. Open the starter app in Android Studio.
  2. In Android Studio, open the MainActivity.java file. Change the sceneURL variable to point to the URL of your published scene from the previous step. Append /?arMode=true to the URL. This parameter causes the scene to render in a way that’s more amenable to an AR experience (specifically, it enables the alpha channel on the WebGL canvas and removes the UI elements).

Step 6: Add a Custom Image in Android Studio

  1. If you’re going to use a custom image instead of the provided one, keep reading. If not, proceed to Step 7.
  2. Navigate to Project and drag the custom image into the Asset folder.
  3. In MainActivity.java, change IMAGE_FILENAME to the file name of your custom image.
  4. In MainActivity.java, change IMAGE_WIDTH_IN_METERS to the width in meters of your custom image in the real world.

Step 7: Build the App

  1. Build the app on your ARCore-capable device.
  2. Once loaded, point the camera at the image, or at your custom image if you’re using one. The sphere should appear at the image’s location.

You should now have a much better understanding of using the ArSystem, ARAnchors, and image recognition in the SumerianARCoreStarter sample Android app. To learn more, check out the following tutorials:

Back to Tutorials

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