6. Image Anchors

Written by Chris Language

In this section, you’ll dive a little deeper into augmented reality and learn about image anchors and tracking. You’ll also create an interactive AR Business Card that you can show off to your friends, making them green with envy.

While this image might look real, only the card lying on the table exists in the physical world; the buttons, photo and contact information are all virtual. Boom, mind blown! :]

What are image anchors?

Image-based AR has been around for quite some time. Many modern, camera-equipped smart devices are capable of AR, usually by using tracking cards and a technique known as marker-based augmented reality, which is now known as image anchors in Reality Composer.

The image serves as an anchor point on a real-world surface. A special algorithm then analyzes the camera data to determine the image’s position, scale and orientation. You then use that tracking information to project, scale and place virtual content overtop the camera’s image.

A great example of this technology is Om Nom: Candy Flick, a surprisingly fun little augmented reality game. The goal of that game is to flick candy toward Om Nom and hope he catches it.

Unfortunately, you lose the tracking the moment the image goes outside of the camera’s view, spoiling the entire AR experience.

Creating an image anchor-based experience in Reality Composer only takes a few steps, which you’re about to do next.

Creating an image anchor project

The first step in the process is to create a project for your AR experience. Open Reality Composer, and it will open Finder to locate an existing project. You want to create a new project instead, so select New Document.

Reality Composer gives you the opportunity to choose the type of anchor you need for your AR experience. Select Image and make sure to uncheck Use template content. Complete the process by clicking Choose.

Reality Composer creates an empty image-based anchor project with a single scene. Because you disabled the option to use template content, no other content exists.

With the scene selected and the Properties panel open, rename the scene to Main.

This is the main scene for the AR experience. Note that the Anchor type is set to Image. You can leave the rest of the settings at their default values.

There’s one little issue, though: you’ve created the project, but you haven’t saved it yet. To save your project, select File ▸ Save from the main menu.

Change the project name to ARBusinessCard.rcproject, then set the destination to a location of your choice. For example, the Desktop.

Click Save to complete the process.

Excellent, you now have a new project saved to your local device. The next time you want to open your project, double-click ARBusinessCard.rcproject in Finder, and it will open in Reality Composer.

Adding an image anchor

The next step is to choose the image to use as the image anchor. For this project, you’ll need some kind of image to track, so you’ll use a specially-issued, one-of-a-kind Ray Wenderlich Team card.

The entire AR experience will spawn out of this card — that is, once you bring the card into view of the camera.

Note: You’re welcome to print a copy of the card for testing purposes. You can find the image at starter/resources/RWTeamCard.png. The physical size of the card is 9cm in length and 5cm in width.

When creating or choosing an image to use as an image anchor, there are three basic factors to consider:

• Quality: Make sure you’re using a crisp, clear image. A blurry or dirty image might be difficult to recognize.

• Scale: Always think of the environment surrounding the image. A big, poster-sized image is recognizable from a greater distance than a small business card. If your AR experience requires more space, consider using images with a larger scale.

• Uniqueness: When creating AR experiences for a collection of images, make sure the images aren’t similar enough that the recognition algorithm gets confused and mistakes one image for another. Consider using unique, noisy backgrounds, markers or patterns.

With the Main scene still selected and the Properties panel open, click the Choose button next to Image Asset.

A pop-up with available images appears, but you’ll notice that it shows no available images yet. That’s because you still need to import the image that you’ll use for the anchor.

Click the Import button, then locate the image starter/resources/RWTeamCard.png. Once selected, click Import to complete the process.

Reality Composer imports the selected image. During this step, Reality Composer analyzes the image to ensure it’s suitable for recognition.

If you’ve selected a poor-quality image, Reality Composer gives you a warning, stating that the selected image is not suitable for recognition. No warning is usually a good sign that you’ve provided an adequate image for an anchor.

Now, you could adjust the physical width and height of your anchor image; however, in this case, it’s not necessary because you’ve already scaled the image correctly to represent its physical counterpart.

You’ve set your image anchor, and it’s visible within the main scene. You’re ready for the next step.

Adding an image

Your business card is very basic at the moment. A good starting point to make it more exciting is to add your photo.

Reality Composer refers to images as Frames. You can choose between a bordered frame and a borderless frame. The great part about frames is that they support transparent images, allowing you to create stunning experiences.

Click the Objects button at the top menu bar to open the content library, and then search for Frame. You’ll find two frames within the Arts section. Double-click the borderless frame to add it to the scene.

Next, rename the frame object to PhotoA. Then, set the Position to (X: 2cm, Y: 1.5cm, Z: 0cm) and the Scale to 30% in the Transform section.

The frame will now hover slightly above the card.

In the Configure section, click Choose for the Image, then Import a new image.

Instead of importing a single image, this time, you’ll import all of the images that you’ll use for this AR experience.

Inside starter/resources, select the first image, AuthorButton.png. While holding the Shift key, select the last image, PhotoB.png; this action will select all of the images from the first to the last. After they’re all highlighted, click Import to complete the process.

Reality Composer selects the first imported image by default.

Within the Configure section, for the Image, click Replace, then choose PhotoA.png from the imported images.

Excellent! You replaced the image with the ever-so-handsome PhotoA.png.

With the imaged added, you’re ready for the next step.

Adding 3D text

To make things pop a bit more, your next step is to add some 3D text to the AR experience.

Add another Object to the scene, but this time do a search for Text. Double-click the Text object to add it to the scene.

Note: There’s also a dedicated Text button next to the Object button if you prefer to use that.

The new text object is way too big. You’ll fix that by taking a closer look at the available properties.

In the Properties panel, rename the text object to AuthorName. Inside the Transform section, set the Position to (X: 2cm, Y: 1.7cm, Z: 1.7cm) and the Rotation to (X: -90°, Y: 0°, Z: 0°). Leave the Scale at 100%.

Within the Look section, set the Thickness to 20% and the Font Size to 0.5cm. Select Glossy Paint for Text Material and keep the Text Color as White.

Within the Text section, change the text contents to Chris Language. Set the Font to American Typewriter and the Style to Bold aligned Vertically and Horizontally.

Once done, you’ll see the following result:

Congratulations, you just added 3D text to your AR experience.

Completing the scene

You’re actually creating the entire AR experience, even the buttons and the pop-ups, using only frames.

Now that you know how to add and configure images, add the rest using the following properties:

• PhotoB at Position (X: 2cm, Y: 1.5cm, Z: 0cm) and a Scale of 30%.

• BioPage at Position (X: 1.3cm, Y: 3.5cm, Z: -5cm) with a Rotation of (X: 45°, Y: 0°, Z: 0°) and a Scale of 78%.

• AuthorPage1 at Position (X: 1.3cm, Y: 3.5cm, Z: -5cm) with a Rotation of (X: 45°, Y: 0°, Z: 0°) and a Scale of 78%.

• AuthorPage2 at Position (X: 1.3cm, Y: 3.5cm, Z: -5cm) with a Rotation of (X: 45°, Y: 0°, Z: 0°) and a Scale of 78%.

• ContactPage at Position (X: 1.3cm, Y: 3.5cm, Z: -5cm) with a Rotation of (X: 45°, Y: 0°, Z: 0°) and a Scale of 78%.

• BioButton at Position (X: 6cm, Y: 1cm, Z: -1.6cm) and a Scale of 15%.

• AuthorButton at Position (X: 6cm, Y: 1cm, Z: 0cm) and a Scale of 15%.

• ContactButton at Position (X: 6cm, Y: 1cm, Z: 1.6cm) and a Scale of 15%.

Once you’re done, the final result will look like this:

Editing on iOS

Reality Composer has a neat feature that allows you to stay productive while on the go. You can easily transfer a project to Reality Composer on your iPad or iPhone. No more excuses for you, you can now continue working even while commuting to and from work.

Start Reality Composer on your iPhone or iPad. Leave the app running and the device unlocked.

If this is the first time you do this, you won’t see any recent available projects, but that’ll change soon.

Back in Reality Composer on macOS, click Edit on iOS in the top menu bar.

You’ll now see a list of all available devices with Reality Composer running.

Select the device you want to transfer the project to, such as your iPad.

A connection request will appear on the device. Click Accept to allow the project to transfer to the device.

Wait for a second while the project synchronizes with the device.

Once done, Reality Composer on macOS will indicate that the project is currently on your device.

Now, you can continue editing the project on your iPad or iPhone.

Once you’ve made all of your changes, click Done in the top-left corner to transfer all of your changes back to Reality Composer on macOS.

Note: While editing this particular project on your iPhone or iPad, you may have noticed some flickering on the images. This phenomenon is known Z-Fighting, and it happens because you’ve positioned the images on top of one another. This won’t be a problem for this particular project, so ignore it for now.

Key points

You’ve reached the end of this chapter, well done. You’ve now added all of the required objects to the scene. You can grab a copy of the final project here: final/ARBusinessCard/ARBusinessCard.rcproject.

Here’s a quick recap of what you learned:

• Image Anchors: You learned about image anchors, marker-based augmented reality that uses tracking cards or images.

• Image Anchor Project: You created an Image Anchor Project in Reality Composer and learned that linking and configuring a particular image to the anchor is also quite simple.

• Image Anchor Considerations: There are a few things to consider when creating or choosing an image to use as an image anchor. Quality, scale and uniqueness play a massive role.

• Frame Objects: You added and configured a few Frame objects, better known as images, to the scene.

• 3D Text Objects: You also added and configured a 3D Text object to the scene.

• Editing on iOS: Need to continue working while on the go? No problem, you learned how to transfer the project to your iPhone to get the job done.

With all of the overlapping images, you probably guessed that the AR experience isn’t quite done yet. In the next chapter, you’ll bring all of the objects to life with clever animation and basic interaction.