Kickstarting Augmented Reality – Hello World – vuforia Tutorial

Augmented Reality is one of the hot topics in mobile apps development. So, what is augmented reality?Augmented Reality means perception of real world with some additional virtual elements (augmentations) that adds (augments) to the reality. These augmentations can be in any form such as sound, visual, etc. For a more formal definition, refer wikipedia.

This vuforia tutorial is meant for newcomers to get started with developing Augmented Reality applications. By the end of this vuforia tutorial, you will be able to develop an AR application like shown in the below video.

Tools Needed

We will be using Vuforia AR SDK and Unity 3D engine for our Hello World application. Make sure you have downloaded the following before proceeding further.

1. Unity SDK – Download
2. Vuforia Unity Extension – Download

Getting Started

Without wasting further time, lets get started with the vuforia tutorial. For the Hello World application we need the following basic resources.

1. Tracking Image [download]
2. Augment Model [download]

The tracking image is the image which acts as a bridge between real world and augmented world. In AR applications, the application scans the real world for presence of a tracking target. This tracking target acts as a point of reference for positioning the virtual elements such as 3D Models in the augmented world. Take a print out of the tracking image and keep it ready for testing the AR app at the end of this vuforia tutorial.

Target Database

Go to Vuforia TargetManager. Register and Login. Under Target Manager, click “Create Database” and give a suitable database name such as “HelloWorldDB” and click “Create”. Click and open the newly created database.

Click “Add Target”. Give a suitable target name such as “HelloWorldTarget”, select Single Image as the type of target. For width, give a suitable width such as 10. While the value of width needs to be decided based on unit of augmentation, for this vuforia tutorial you can give any value and scale the target as well as augmentation as per our needs. Upload the tracking image.

After few moments, when the new target is ready, select it and click “Download selected targets” and choose “Unity Editor” as the format and click “Create”. This will create the DB and download to your machine with a name such as “HelloWorldDB.unitypackage”.

Environment Setup

In this step, we will install and setup the environment for developing AR applications.

1.Install and launch the Unity SDK downloaded earlier. If it asks for license, choose a suitable license. For the purposes of this Vuforia tutorial, it is enough to activate the Free License.

2. Create new project. (File -> New Project…, Choose appropriate location, Set up defaults for 3D, and click “Create Project”)

3. Import the Vuforia Unity Extension. (Assets -> Import Package -> Custom Package …., Choose the download file such as vuforia-unity-android-ios-x-x-x.unitypackage , In the Importing package dialog, make sure all items are selected and click “import” ).

4. Save Project and Scene. (File->Save Project   and File-> Save Scene .  Make sure, the scene is saved under Assets directory of the project.)

AR Camera

For Augmented Reality applications we will use AR Camera instead of the default Main Camera in unity scene.

1. Delete the Main Camera from the Hierarchy Pane.
2. In Project Pane, Open the folders : Assets -> Qualcomm Augmented Reality -> Prefabs.
3. Under Prefabs, you’ll find ARCamera. Drag and drop ARCamera into Hierarchy Pane.

ImageTarget

This will act as bridge between real world and augmented world. All the augmented models shall be added as a child to this object.

1. In Project Pane, Open the folders : Assets -> Qualcomm Augmented Reality -> Prefabs.

2. Under Prefabs, you’ll find ImageTarget. Drag and drop ImageTarget into Hierarchy Pane. ImageTarget need to be added to hierarchy under same level as AR Camera.

Target Database

Import the target database downloaded earlier from Vuforia Target Manager.

1. Assets -> Import Package -> Custom Package
2. Choose the downloaded file such as HelloWorldDB.unitypackage

3. In the Importing package dialog, make sure all items are selected and click “import”.

Target Setup

Setup the ImageTarget and ARCamera to use the TargetDatabase, imported in last step.

1. Select ARCamera in Hierarchy Pane

2. In the inspector pane , find “Data Set Load Behaviour (Script)”. Under this, Select “Load Data Set <your DB name> and Select “Activate”.

3. Select ImageTarget in Hierarchy Pane.

4. In the inspector pane, find “Image Target Behaviour (Script)”. Under this, Configure Data Set to use your DB and ImageTarget to use your target.

Augmentation

1. In Project Pane, Select Assets. Then Rightclick -> Create -> Folder, and create a folder named Models.

2. Drag and drop Earth.fbx from your windows explorer (Finder in MacOSX) into Models folder of Unity. This will import the fbx graphic along with its dependencies into your Assets.

3. Now drag and drop Earth.fbx from Assets->Models to Hierarchy pane under ImageTarget.

Lighting

1. In the Hierarchy pane, click “Create -> Directional Light”. This will add directional light to hierarchy.

Positioning and Scaling

In the Scene Pane, You can position and re-orient the objects that has been added to hierarchy.

1. Select Earth in Hierarchy Pane. (Double-clicking will focus the scene pane to the selected game object).

2. Scale and re-orient the Earth model. And Move it above the Image Target. Like given below.

3. Select the Directional Light in Hierarchy Pane, and in Scene Pane, reorient the direction of light to illuminate the Earth in a good direction.

Scripting

A little bit of animation adds liveliness to the scene. Lets make the earth model keep spinning.

1. Select ImageTarget in Hierarchy Pane.

2. In Inspector pane, Find “Default Trackable Event Handler (Script)”

3. Double click the Script name “DefaultTrackableEventHandler” . The script is a c# script and will be opened in MonoDevelop.

4. Under #region UNTIY_MONOBEHAVIOUR_METHODS, add the following Update method after the end of Start() { … } method.
void Update()
{
// Earth is the only child to ImageTarget
Transform earth = transform.GetChild (0);
earth.Rotate (Vector3.forward * -15 * Time.deltaTime);
}

Final Step

Having done this much, now is the time to sit back and enjoy the results.

1.  If you haven’t already, take a print out of the tracking image in a paper.

2. Press the Play button in Unity. If you have webcam connected to your computer, the AR application will start within the Game Pane. Your camera will be captured and shown in the screen.

3. Bring the print out in front of the camera, when the AR app detects the tracking image, then the augmentation takes place. You should be seeing the globe rotating.

After having enough fun, you can stop the play mode by pressing the play button again.

Next Steps

1. Try building and running this app in different platforms like iOS or Android. (File->Build Settings…, Select a platform and click “Switch Platform”).

2. Explore various parameters for ARCamera in the inspector pane.

3. Explore various parameters for ImageTarget in inspector pane.

4. Explore the dev guides for Vuforia.

5. Explore the vuforia tutorials tutorials and documentation for Unity 3D.

how can we help you?

Tell us about your requirement and we’ll offer you the best possible solution. Get in touch now.