Unity Vuforia Tutorial

by jkredzvr

Quick demo Augmented Reality application with Vuforia in Unity platform

( Crawled an hour ago )

CU VRAR Club logo

Simple Unity Vuforia Application

The repository contains a simple augmented reality application using Vuforia, built on the Unity Platform. This app, deployed on a laptop, will use the webcamera and Vuforia unity package to recognize a selected image marker and project a 3D model above the marker on the screen.


Please download and install all software and register for Unity & Vuforia accounts before attending the event.

Table of content

Installation and Account Registration

Install the following programs/packages and create accounts for Unity and Vuforia. Unity Personal Version is a free beginner friendly development platform for 2D, 3D, VR and AR applications. Note: When installing Unity 5.6, it will default to a Unity folder in program files. If you have downloaded a previous version of Unity and want to keep it, rename the default folder name.

Unity Project Setup

First open up Unity 5.6 and create a new project in folder location and project name you desire. Make sure that the Unity project is selected as 3D.

Saving Project Screenshot

Once Unity has opened, we will import the Vuforia Unity Package to allow of our Unity Augmented Reality application the ability to recognize images/3D models using the laptop camera, and track and display virtual objects on this image. Import the Vuforia Unity Package by navigating to Assets/Import Packages/Custom Packages at the top of the menu toolbar.

Import Package

Locate the Vuforia Unity Package downloaded earlier, and click open.

Import Package 2

An import unity package popup menu will appear asking which files should be imported. Click on all, then click import.

Import Package 3

Another popup message will ask you have backed up your project. Go ahead and click that you have made a copy.

Vuforia AR Camera Set Up

Once the Vuforia package has been imported, the Assets/Vuforia folder will appear in the Project Folder located in the bottom panel of the Unity program. This folder houses scripts and "Prefab" gameobjects of the Vuforia components that can be dragged into your Unity application to build an augmented reality app. The AR Camera Prefab will give Vuforia access to a camera feed (either laptop, camera, HMD head mount display) and recognized images or "markers" set in your Vuforia account. Navigate to the Assets/Vuforia/Prefabs folder and drag the ARCamera prefab into either the Hiearchy window or Scene Window.

AR Cam Setup

When the ARCamera prefab is dragged into your scene or hierarchy, the gameobject will appear in the hiearchy window indicating that it is now part of scene of your Unity application. Configure the Vuforia settings to connect with your Vuforia account by first selecting the ARCamera in the hiearchy window to view its components in the Inspector, and then clicking on the Open Vuforia Configuration button in the Vuforia Behaviour Component.

AR Cam Setup 2

After clicking Open Vuforia Configuration, the Inspector view will show the Vuforia Configuration file where you will paste your Vuforia License Key

AR Cam Setup 3

Vuforia License Key

Log into the Vuforia License Manager page with the Vuforia Account you created. Click on Add License Key to create a free key enabling your Unity application to use Vuforia's image recognition services up to a specified limit.

Vuforia License Key

Select Project Type: Development, create a name for the app, and click next to continue.

Vuforia License Key 2

The next page will have the Vuforia license key for your app, which can be copied and pasted into Vuforia Configuration App License key text field in the Unity application.

Vuforia License Key 3

Vuforia Target Image Database

Go back to Vuforia License Manager page, click on Target Manager link, and click on Add Database button to set up a set of images your AR app will recognize. Provide a name for the database of images that will be recoginzed by the app and make sure Type:Devices is selected.

Vuforia Target Images Vuforia Target Images 2 Vuforia Target Images 3

When the database is created, click on the database link and click on Add Target Button to start adding the images to be recognized.

Vuforia Target Images 4

Vuforia can recognize different types of targets ranging from 2D images, 3D objects, and shapes. For reliable image recognition and tracking, Vuforia suggests chosing images and objects with the following characteristics:

Attribute Example
Rich in detail Street-scene, group of people, collages and mixtures of items, or sport scenes
Good contrast Has both bright and dark regions, is well lit, and not dull in brightness or color
No repetitive patterns Grassy field, the front of a modern house with identical windows, and other regular grids and patterns

Further information and suggestions for improving image recognition and tracking stability can be found here.

For this sample app, we will choose the following image. Download this image or copy it from https://github.com/jkredzvr/Unity-Vuforia-Tutorial/blob/master/Screenshots/VuforiaTargetImage.png, and upload it the target Image field.

Vuforia Target Images 4

For the width input, enter the actual width (in meters) of the object or image that will be recogized. Since I will be printing the image on an 8.5" x 11" letter paper, I'll input 8.5" -> .259m.

Lastly give the image target a unique name that will be saved in the database, before clicking on the Add Button

Vuforia Target Images 5

Back on the Target Manager page, the uploaded target will appear with a star rating indicating whether the target image will be reliably recognized and tracked by the Vuforia software. If you choose to upload your own 2D images or images of objects, upload several different images and make sure that you have at least 4-5 star ratings or reliable tracking. Feel free to upload multiple different image targets if you want your app to recognize more than one image/object.

Vuforia Target Images 6

After uploading your image targets, click on the Download Database(All) button and select Unity Editor to download image database files into a Unity package.

Go back into the Unity program and navigate Assets/Import Packages/Custom Packages and select the downloaded Image Database Unity Package.

Vuforia Target Images 7

After importing all the database image Unity package, the VuforiaConfiguration component should show up with a checkbox to select a database to be loaded. Click on this option, and click on Activate checkbox that appears next.

Vuforia Target Images 8

Setting up Target Image in Unity

With the Vuforia Configurations loaded with the image databse set in your Vuforia account, we'll set up a virtual scene for our objects to appear when an image or object is recognized.

In Unity, navigate to the Assets/Vuforia/Prefabs folder and drag the ImageTarget prefab from the folder to the Hierachy View. The ImageTarget prefab acts as the recognized image/object target for where our virtual objects will be tracking its position. If a virtual objects above the ImageTarget, when laptop camera sees our actual image or target in the real world, the AR app will place and track our relative to where the ImageTarget is virtually...

Unity Target

Selecting the ImageTarget in the Hiearchy view, select the image database that was imported from the dropdown menu next to Database.

Unity Target 1

Setting Up a Virtual Object to be projected

Now lets project a virtual object over the our image target when our app recognizes the target. Click on the Unity Asset Store Tab and click on the Log In button. After logging in you will access to download free and paid assets from the Asset Store that can be added into your application. Assets can range from 3D Models, environments, characters, textures, shaders, scripts and many other components used to build a game or application.

Virtual Asset

We will be downloading the free Unity-Chan asset, which is a rigged 3D model with animations. In the search bar, search for Unity Chan and click on the "Unity-Chan" Model link.

Virtual Asset 1

Click on the Import Button and wait for it be loaded into your project. A popup box will ask which files to import, which you will click All, and Import.

After Unity-Chan import is complete, navigate to Assets/UnityChan/Prefabs folder and drag the unitychan prefab into the Hiearchy Window.

Virtual Asset 2

You will see the UnityChan model standing above the imagetarget, so when the app recognizes the target in the real world, the UnityChan model will appear how it is currently placed in Unity. Right now the image target was set to be a width of .259m (8.5"), and looking at UnityChan in the Unity program, she will be too large to appear on the app screen. To remedy this we will scale down the size of UnityChan.

First click and select UnityChan from the Hiearchy Window. In the inspector window, change the Transform: Scale x,y,z values to shrink UnityChan. I chose .25, but you can select modify it to your liking.

Virtual Asset 3

The last step for setting up our Virtual object, is to drag our object and set it as a child of the ARCamera. This lets the ARCamera know which gameobject or virtual object should appear when an image/object is recognized. To set an UnityChan as a child to the ARCamera, simply drag the UnityChan gameobject in the hiearchy, and drop it on top of the ARCamera. After dropping UnityChan onto the ARCamera, it should be located below the ARCamera as a child gameobject.

Virtual Asset 3

Deploying and Testing the AR App