Augmented Images using ARCore and Unity
Tags: beginners, tutorial, unity3d, android
Published: 2022-01-11 12:49:05

Last time we installed Unity game engine and configured ARCore plugin. You can check the tutorial from [here](https://dev.to/whatminjacodes/unity-setup-and-arcore-installation-19md) if you haven't seen it.

This time we will create an Android AR app that displays 3D models on images! The finished project is in my [Github](https://github.com/whatminjacodes/tech-tuesday-tutorials/tree/main/intro-to-ar/02-augmented-images) if you just want to test this out without coding it yourself.

This tutorial assumes you have at least basic understanding of how Unity works (what are GameObjects and Prefabs etc) so if you are new to Unity I recommend you to first go through their beginner tutorial [Roll-a-Ball](https://learn.unity.com/project/roll-a-ball) that explains the basics well!

## Augmented Images
Augmented Images API in ARCore let's you to use computer vision algorithm to display 3D models on images in your environment, like on a postcard, a poster or a product package.

There are different SDKs for building applications like this (for example Vuforia) but on this series I'm only using [Google ARCore](https://arvr.google.com/arcore/).

Augmented Images API is able to display up to 20 pictures simultaneously. Check the [best practices](https://developers.google.com/ar/develop/unity-arf/augmented-images#best_practices) from ARCore documentation for information about what kind of images are good for being tracked.

The image I'm using is not the best but it works well enough. The 3D model might be a little unstable and you might see it shaking a bit but I'm using these on this tutorial because I have made them both myself so there won't be any copyright issues!

## Getting started
Create a new Unity project and follow the instructions on my [previous tutorial](https://dev.to/whatminjacodes/unity-setup-and-arcore-installation-19md) or download the finished project template from my [Github](https://github.com/whatminjacodes/tech-tuesday-tutorials/tree/main/intro-to-ar/01-arcore-and-unity-setup) and open it.

![Adding AR Tracked Image Manager to the ARSession Origin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fixpqvnq9plx9gz5mxg.jpg)

Click on ARSession Origin on Unity Hierarchy and Add Component. Search for AR Tracked Image Manager and add it.

Right click on Assets -> Create -> XR -> Reference Image Library. You can use your own photo or download the one I used from [here](https://github.com/whatminjacodes/3d-models/tree/main/frog). 

![Image of a frog 3D model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blmjd6kufdl7xm1r5cmg.jpg)

I'm using a Frog 3D model that I have made and an image of it in this project. Click on the created Reference Image Library and Add Image. Select the image of a frog (or whatever image you want to use).

![Adding images to the Reference Image Library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bx2s16j1s5laescvn74.jpg)

Give the image a name and you can specify the size of the (physical) image if you know it but it's not necessary. 

![Adding reference to the Reference Image Library into AR Session Origin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs1i75f9cq9m5ky297no.jpg)

Add the reference to a created Reference Image Library to the AR Session Origin.

## Creating the prefab that gets instantiated
Next we can add the prefab that will get instantiated when the image added to the Reference Image Library gets detected.

Right click on the Hierarchy, choose Create Empty and name it ARModel. Download the frog 3D model from [here](https://github.com/whatminjacodes/3d-models/tree/main/frog) and add it to the Unity's Asset folder. Drag and drop the frog model to the hierarchy and move it as a child of ARModel. Make sure that the child frog model is positioned in 0, 0, 0.

![Resetting the position of a model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5p29zzau96lx0hu6m9xh.png)

You can reset the position of a model by clicking the three dots in the Transform and choosing Reset. Change the Scale of the frog model to be 0.05 on all (X, Y, Z) axes or it will be huge otherwise. Also rotate the model -90 degrees on X axis and 180 degrees on Y Axis. This is because we are scanning an image on the screen, so the frog will be positioned correctly for that. If you are using a printed image and want the frog to stand on top of it, keep the frog's X, Y and Z rotation on 0.

![Creating a prefab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3xgg9xb99a0urjkhc9d.jpg)

Drag and drop the created ARModel to a Prefabs folder and delete ARModel from the Hierarchy.

![Adding reference to Tracked Image Prefab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgdpesfjbwiantv99f9x.jpg)

Then add a reference to ARModel to Tracked Image Prefab that's in AR Session Origin.

## Finished
Now everything's done! You can build the project and you should see a frog model instantiated when you point the camera to the frog image! If the 3D model doesn't jump on top of the image, try rotating the phone a bit around the image. Also try changing the brightness of your monitor. The example image is not the best quality and there might be reflections on the screen which might make the image even harder to detect, but it should still work!

![Animated gif of the result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z46b984evgm0di4ec1jx.gif)

Give me a follow if you want to see more tutorials! You can also follow my Instagram [whatminjaplays](https://www.instagram.com/whatminjaplays/) if you are interested to see more about my days as a software developer and a gaming enthusiast!