01 Mar 13
This article is for anyone who want’s to get started in the world of Augmented Reality (AR), it will be using Qualcomm’s Vuforia (Mainly because it’s very good, and its free!).
Setting up Vuforia
In order to get started, head over to https://developer.vuforia.com/resources/sdk/unity and download either the Windows of Mac version of Vuforia (Mac allows for iOS and Android whereas Windows only allows for Android).
When you have downloaded the file, you have to un-package it and find the installer. Follow the instructions from the Vuforia setup and go to the folder where Vuforia was installed.
Unity, meet Vuforia
Load up Unity and create your new project (File > New Project). Import any packages you might want, once you’ve loaded up you need to double click the Unity Package in the Vuforia folder you browsed to earlier.
It will prompt you to import several files into your application, just hit “Import” and you will now be ready to setup your first AR project.
Go to the project window (Window > Project) and extend the “Assets” folder if it’s not already.
Navigate to “Assets > Qualcomm Augmented Reality > Prefabs” and select the “ARCamera”, drag this into your Scene window, it doesn’t matter where.
Next grab the “ImageTarget” prefab and put that in your scene, again, doesn’t matter where.
Now click the “Main Camera” object in the Hierarchy Window and delete it. We don’t need two camera’s now do we!
With this done, we need to head to the Vuforia site to setup an Image-based marker (Marker’s are just something that the camera knows to recognise in order to put the Augmented reality onto it).
Vuforia’s Developer Site
In order to setup the markers you have to go to the site : “https://developer.vuforia.com/” and register in the top right. It doesn’t cost anything so go ahead and sign up.
Once you’ve logged in press the “Target Manager” button on the top bar, then press the “Create Database” button and enter a name.
Press the newly created database and you should see the button “Add Target”, press that.
Fill in the “Target Name” which can be anything. Select the “Single Image” as the “Target Type” and the “Target Dimension” width of 100 “The width of the target should be the same unity as the augmentation, it’s relative to the size of the augmented virtual content”, basically just put any number you want..
Now we need to add an image to the form you need to add the following image.
Press “Add” and let the site do it’s thing. Generally it takes around 10-15 minutes for their scripts to run and give you a marker for Unity. Go make a Coffee or something for the mean time.
When its done, you will see it’s “Star rating”, this rating tells you how effective the tracker will be in working. The higher the better, the one I’ve provided is a 5 star marker. (How the tracking works is another tutorial entirely so i’ll leave it for now).
Click the checkbox next to your newly created marker and press “Download Selected Targets” and select “Unity Editor”, use whatever name you want for the file and hit “Create”. It will download a Unity Package file for you, once thats downloaded press the file and import it into your Unity project.
Hooking up the Markers
With the marker imported into your Unity project, press the “ImageTarget” object in the Hierarchy window (Window > Hierarchy).
You should see in the Inspector Window (Window > Inspector) the script called “Image Target Behaviour”, set the Data Set to the first one you see. Once you’ve done that you’ll notice that the “ImageTarget” object has changed to the marker you put on the Vuforia site.
Select the “ARCamera” object in the Inspector Window and find the “Data Set Load Behaviour” script, and tick the boxes called “load Data Set [X]” (where X is the name of the database you downloaded) and then tick the “Activate” button that appears.
Augment me baby!
Ok, so you now have an AR marker and an AR camera. You are only missing the content now!
In Unity hit “Game Object > Create Other > Sphere” and drag the new object to be the child of the ImageTarget in the Hierarchy Window. Set the Sphere’s position to 0,0.5,0 and its scale to 1, 1, 1. It should look like the image below.
Assuming you’ve followed these steps, you should be at this stage. Now all you need to do is deploy it to a device (Android or iOS, take your pick!). For advice on setting up your system to develop for iOS check out this post or for Android check this post.