How to Create an EasyAR Image Target in Unity

You can access the full course here: EasyAR and Marker-Based Apps for Beginners

Tutorial

In this lesson, we are going to work on setting up our image target inside of Unity.

EasyAR documentation (image tracking)

EasyAR Image Tracking documentation

We first need to understand what kind of image targets to have.

We see a series of examples stating the dos and donts.  For example, the image on the left has rich textures whereas the one on the right does not.

EasyAR Image targets showing bad vs. good image types

The next recommendation is that texture should not be in a repeated pattern. This is so that, during identification, it is able to find unique elements of the image target to know its position, scale, orientation

Repeated pattern image which should not be used for EasyAR Image targets

The image content needs to fill up as much of the object as possible. Having a big margin (right) is not that good.

EasyAR Image Target showing excessive margin vs. none

We also want to maintain an image that is rather square or rectangular. We don’t want long images (such as the one below) as the image target, as it tries to track square objects.

Floorplan image example that is very wide

This website also goes into how to setup EasyAR. We can also download some sample projects for Unity

Links for EasyAR samples

Project

Let’s go back onto our project and start to set it up to work with the image targets.

We first open the EasyAR folder => Prefabs.

EasyAR folder in Unity Assets folder

We notice a Composites and Primitive folder underneath this. These folders contain pre-built prefabs that we can drag and drop into our project so that we don’t have to build each object separately before putting them together.

Primitives folder in EasyAR Prefabs

Since we are working on Image targets, we can go to Composites and find the EasyAR_ImageTracker-1 component.

EasyAR Composites for Image Tracking

Let’s drag it into the scene.  We see that there is really no 3D object representing it – it’s just a bunch of empty objects.

Empty Unity scene for EasyAR project

Opening up the object in its hierarchy, we see a number of child objects – Render Camera, VideoCameraDevice, ImageTracker objects.

VideoCameraDevice in Unity Hierarchy

The EasyAR_ImageTracker is the main object that is going to be running the AR Unity game. We notice the Easy AR Controller component and the AR Session component which are going to be running the whole show.

EasyAR Image Tracker component in Inspector

The RenderCamera manages what a camera sees onto our screen and rendering the objects in the world on top of that camera so that it appears as though the 3D objects are actually in the world.

RenderCamera component in Unity Inspector

We don’t need to make any changes here though we could drag the main camera into the target camera field though that happens automatically when we start the game.

RenderCamera component in Unity Inspector with Main Camera as Target

The VideoCamera inspector has a bunch of information about how we could use the camera. Let’s keep the Focus Mode as “Continuousauto”. The Camera Type could be chosen as the front or the back camera. The Camera preference can be kept to “Prefer Object Sensing” value as we are doing object tracking.

Video Camera Device set to Continousauto

The ImageTracker component manages many of the image targets. The TrackerMode can be left at “Prefer Quality”.  Simultaneous Target Number represents the umber of image targets that can be tracked on screen at once. Let’s change this number to 4 as we are tracking 4 image targets.

ImageTracker component in Unity Inspector

Creating an Image Target

We navigate to EasyAR => Prefabs => Primitives > ImageTarget.

EasyAR Image Target Primitives in Assets

Let’s drag and drop that into the scene.  We also zoom into it.

Unity scene with EasyAR Image Target added

Zooming in, we notice an image on the screen with a ? (RED).

EasyAR Image Target showing red question mark

On the right we see the Image Target Controller that manages what image target we’re looking for and how it is rendered. The most important thing is the Image File Source.

ImageTarget component with Image info added in Inspector

We see it opens with with a bunch of information. We set the PathType to StreamingAssets. For the Path, we enter Marker1.jpg.

We see the scene change to show a new image target.

EasyAR Image Target showing image in scene

Name is just the name of the file, so we just enter Marker1. Scale is currently set at 0.1 Let’s increase the size to 1 as this allows us to work easily inside the scene.

ImageTarget component in Inspector with Marker name

Adding Objects to the top of the scene.

EasyAR Image Target zoomed in on

We need to add whatever object we want to render as a child of this image target. So, right-click on Image Target => 3D Object => Cube.

Unity 3D Object menu with Cube selected

The scene changes and displays a cube.

Cube added to Unity EasyAR project

Then, set the scale to 0.5 x 0.5 x 0.5.

Cube object scaled in Unity EasyAR project

Drag it to this position.

Cube positioned with EasyAR Image Target

One thing that looked weird was that the cube looked like it was underneath the image target. To fix it, we need to move the cube over to the -ve Z-axis. The positive axis of the ImageTarget is facing the ground, the -ve is what points upwards.

Cube moved underneath image target

So our ImageTarget is setup and ready to go. In the next lesson, we will setup multiple of these targets with their model on top and the ability to interact with each other.

 

Transcript

Hey everyone, and welcome back.

In this lesson, we are gonna work on actually starting to set up our image targets inside of Unity. So right now I’m on the EasyAR documentation website. And this is just gonna have some information about the Planar Image Tracking.

So first of all, what I think is most important is getting an understanding of what sort of image targets you should have. And over here, it’ll give you a bunch of examples of what you should do and what you should not do. First of all, on the left here, you’ll see that this image has rich textures, whereas the one on the right is fairly simple.

Then down here, it says that textures should not repeat in patterns. And that is good just because when it’s identifying it, it needs to find unique elements of the image target, so it can know its position, scale, orientation, things like that.

You also want to be filling up as much of the object as possible. So having quite a big margin isn’t that good. And also maintaining an image that is rather square or rectangular. You don’t really want a long image like this as your image target, as it really tries to track much more square objects. So yeah, this website here also goes over a bunch of other stuff, it goes over how to set it up. And you can also download some of the sample projects for Unity right here. We’re not gonna be going through that. Actually, we’re gonna be hopping back into our project right now and beginning to set up our project so it can actually start to work with the image targets.

So the first thing we need to do is go to the EasyAR folder right here, open that up, then we want to go to Prefabs. And you’ll see that we have Composites folder right here and a Primitives folder right here. Now, these two are basically a bunch of pre-built Prefabs that we can just drag and drop into our project so we don’t have to create each component, each object, and put them all together.

And since we are working on image targets, we can go to Composites right here. And I’m gonna zoom out a bit on this and we want to find the EasyAR_ImageTracker component right here. Let’s drag this into the scene. And you’ll see that when it’s in the scene, there’s not a real 3D object that’s representing it. It’s just a bunch of empty objects. But if we open this object up here in the hierarchy, you’ll see that there is a number of different objects that are a child of it.

We have the first main EasyAR_ImageTracker object. Then we have a RenderCamera object, a VideoCameraDevice object, and an ImageTracker device object as well. First of all, if we look at the EasyAR_ImageTracker. This is the main object that is going to be running the AR in a Unity game.

We have the EasyAR Controller component and the AR Session component as well. And these two are pretty much gonna be running the entire thing. Then the RenderCamera, this manages of course, rendering what our camera sees onto our screen and rendering the objects in the world on top of that camera so that it appears as if our 3D objects are really in the world. All we need to do here, actually, we don’t really need to change anything here, we can if we want drag the main camera into the target camera field here, although that does do it automatically when we start the game.

On the VideoCameraDevice, this just contains a bunch of information about how we wanna set up our camera. We can choose the Camera Size, the Focus Mode. I recommend just keeping this on continuous order as you don’t really want this at any sort of fixed focal length. Then we have some other stuff such as the camera type, so you can choose this to be the front camera or the back camera and some other preferences right here. Since we are doing object tracking, we can just keep it on this right here.

Now over on the ImageTracker component, this is what manages many of the image targets. Right now we have the track mode on Prefer Quality or Prefer Performance. So we can just keep it on that for now. And simultaneous image target number. So this is the amount of image targets that can be rendered on screen at once that can be tracked on screen at once. Right now, by default, it is on one. But we have four image targets that we want to be tracking at one time. So let’s actually change this number over to four. Save that. And yeah, that’s pretty much this sort of setup a Prefab right here, which is in our project and ready to go.

Now what we can do is start to create an image target. So I’m gonna go back to the EasyAR folder here, inside Prefabs. Now I’m gonna go to Primitives. And what I wanna find is the image target Prefab right here. I’m gonna drag and drop that into the scene. And if I press F to focus on it, will zoom out a bit, but let’s just zoom into that right now.

And you’ll see that there is an image on screen with a question mark. And this is because on the right hand side in the Inspector, you’ll see that there’s an Image Target Controller component and this manages the image target. It manages what image target we’re looking for, and some other stuff on how it is rendered.

Most important thing we wannna look at though, is the Image File Source. So let’s click on that and you’ll see that It’ll open up over a bunch of information. First of all the Path Type, this is going to choose where it’s looking for the image target. Since we did put out image targets in the Streaming Assets folder, then we do want to make sure that the Path Type is on Streaming Assets. And then there are three more things we have path, the name and the scale. The path is the path to the image inside of the Streaming Assets folder.

So if we actually go over there to Streaming Assets, you will see that we have Marker1, Marker2, Marker3 and Marker4. So for the path here, let’s enter in Marker1.jpg because it’s in our subfolders, so we don’t need to put that raw. And as you can see, in the scene, it is suddenly changed to show this new image target here. It’s showing the Marker1 so we know which one it is. And then we can also with our game objects on top of this sort of narrow our reference on how large it will be in the real world. The name over here is just the name of the file so we can just enter in Marker1 we don’t have to add in the file extension.

And scale right now is set at .1. To make this a bit easier to work with inside of Unity, let’s actually increase this size to one. Like so. The reason it is on .1 is because if you are wanting to work with Physics, it’s good to maintain that one unit to unit to one of real-world meter sort of reference. And since these image targets are quite small, having the scale at around .1 sort of scales it to the right size, but we aren’t using any sort of Physics or anything like that. So scaling it up to 1.0 allows us to just work a lot easier inside of Unity.

Okay, so go to image target right here. How do we render something on top of it? Well, that’s fairly straightforward. All we need to do is add whatever sort of object we want to render as a child of this image target. So, let’s right click on image target here. I’m gonna go 3D Object Cube. We can set the scale to maybe .5 by .5 by .5. And you’ll see that we can then drag it up here and pretty much whatever is on this side of the image right here is what is gonna be rendered on top of the image target. So make sure this cube is a child of the image target. So if we disable it, the cube will disappear.

Now one thing we need to do before we actually build this to our device and test it out, is change the camera. If we look in the Game view right now, you will see that we have the default Unity camera. But what we need to do is change a few things on our main camera here.

First of all, let’s change Clear Flags from Skybox to Solid Color. And we can just make the color here black for now. And after this, we need to change the rendering path to be Forward rendering as that is what’s required by EasyAR. And apart from that everything should be set up and ready to go. So we can plug in our device and build it to it so we can test it out and see how it works.

So here we go. If we move our phone around the image target, you’ll see that the object appears but it does appear below the image target which is something we’re gonna be addressing right now. Now one thing that did look a bit weird was the fact that this cube look like it was underneath the image target.

And to fix that, we just have to move this cube over into the negative Z-axis. That is because the positive Z-axis of this image target here is facing towards the ground. And the negative is what points upwards. So everything that you want to appear should be over on this side of the image target.

And yeah, that is the image target set up and ready to go. In the next lesson, we are gonna begin to start and actually set up multiple of these targets and make it so these targets can actually have their model on top and begin to be able to interact with each other. So see you again in the next lesson.

Interested in continuing? Check out the full EasyAR and Marker-Based Apps for Beginners course, which is part of our Augmented Reality Mini-Degree.