Intermediate Tutorial


Creating Image Tracking AR Content for iOS Apps


30 minutes

Posted on: November 12, 2018

Learn Sumerian
Creating Image Tracking AR Content for iOS Apps

Tags

AR
augmented reality
ARSystem
ARAnchors
SumerianARKitStarter

In this tutorial you will learn about:


In this tutorial, we create image recognition in an augmented reality (AR) experience on an iOS device by using content you create with Sumerian. This exercise will show you how to use ARKit 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
  • SumerianARKitStarter sample iOS 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 of 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 Xcode

  1. Open Xcode, choose Open on the File menu, and then navigate to the SumerianArKitStarter.xcodeproj file in the top-level directory of the cloned repository.
  2. On the General tab of the application settings, set up your code-signing identity and provisioning profile. See Apple’s documentation if you’re not familiar with these concepts.
  3. In Xcode, open the ViewController.swift 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).
  4. In ViewController.swift, change the createDebugNodes variable to false.

Step 6: Add a Custom Image in Xcode

  1. If you’re going to use a custom image instead of the provided one, keep reading. If not, proceed to Step 7
  2. In Xcode, select the Assets.xcassets folder, and then drag the custom image into the AR Resources folder.

  3. Under the AR References Image, rename the custom image to SumerianAnchorImage.
  4. In Xcode, add the real-world dimensions of the image.

Step 7: Build the App

  1. Build the app on your ARKit-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 SumerianARKitStarter sample iOS app. To learn more, check out the following tutorials:

Back to Tutorials

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