15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens

System « HoloLens :: Next Reality

NEXT REALITY 30 AR BUSINESS MAGIC LEAP FOLLOW US   

HOLOLENS

H O LO L E N S D E V 1 0 2

How to Create an ImageTarget with Vuforia

& Set Up the Camera System
BY JASON ODOM  03/29/2017 8:49 PM

N ow that we've set up Vuforia in Unity, we can work on the more exciting aspects of making
physical objects come to life on the HoloLens. In this guide, we will choose an image (something
that you physically have in your home), build our ImageTarget database, and then set up our
Unity camera to be able to recognize the chosen image so that it can overlay the 3D holographic
effect on top of it.

While it may sound like a lot of grunt work, this is where the fun really begins, since you're
choosing your image and laying down the groundwork for the actual development of the action
that will occur whenever you see the object through your HoloLens headset.

Previous: How to Install & Set Up Vuforia in Unity

Step 1
https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 1/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality
Step 1

Choose Your Image

Vuforia uses a system of ImageTargets that area essentially used as visual patterns that the device
can translate to the software for it to recognize. Think of QR codes or facial recognition software,
which are two sides of the same coin. Vuforia then draws its 3D image or object on top of that in
the device you are using.

So, you need to make a decision on which picture you want to use for this effect. I recommend
using something that you can find around the house easily. A trading card is what I went with,
but a book or even a CD cover would do just fine. Really, anything can work. If it's a flat image,
you can find an image of it online or scan it into your computer to use in your ImageTarget
database.

Here is my choice for the project, and yes... my nerd flag flies a little bit higher than many. Meet
Avacyn, the Purifier.

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 2/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

A scanned image of the trading card Avacyn, the Purifier, illustrated by James Ryman for Wizards of the Coast.
You'll need a good quality image to use with Vuforia.

If you don't want to find something around your house to use, I recommend just using the image
above. For the two or three of you out there that do not have a copy of this Magic: The Gathering
card around your house, just take a copy of this image and save it to your phone. When you are
ready to test the project, just use your phone as a replacement for the card.

Step 2

Create a Database
Make sure you're signed into the Vuforia Developer Portal online and select the "Target Manager"
button under the Develop tab. When the Target Manager window appears, hit the "Add Database"
button, name this database "VuforiaHoloLens" (or whatever you'd like), make sure Device is
toggled, and hit the "Create" button.

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 3/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

Step 3

Upload Your Image

Once you have a database created, it is time to add your target image. This is the image we have
chosen to use as a pattern for Vuforia to recognize, i.e., the trading card image above. Click on the
"Add Target" button.

Important note: Before uploading, the image file must be 8-bit grayscale or 24-bit RGB, so you'll
have to convert the image file that you're using to that first.

In the Add Target window, make sure you select the "Single Image" option, then click the
"Browse" button and select the image you want to use. Enter "0.5" into Width box and then click
the "Add" button. If you are using your own image for this project, the number in Width will likely
be different. I came to this number through trial and error.

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 4/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

Step 4

Download the Database

Once back at the Target Manager, with our single target created, click the "Download Database
(All)" button.

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 5/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

Make sure and select the "Unity Editor" option on the popup, then click on the "Download"
button. This will deliver our database to us in a UNITYPACKAGE file format.

Make sure and store the download somewhere that is easy to get to. We will need it in a while.

Step 5

Create a New Unity Project

As mentioned in the previous guide, I will assume you know how to set up Unity for HoloLens
development. That said, we will not be using the HoloToolkit for this tutorial, so I will show you

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 6/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

what changes need to be manually made to the camera to make it compatible with HoloLens.

First, let's open Unity, click the "New" button on the Projects selection screen, and name your
project "VuforiaHoloLens" (or whatever you called your database, to keep it simple and have an
easier time following along).

Step 6

Set Up the Camera

Once the new project has completed the loading process, select the "Camera" in the Hierarchy
window and look at the Inspector. You should see this:

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 7/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

Change the Clear Flags dropdown from "Skybox" to "Solid Color."

Next click on the Background color swatch. This will pull up the Color picker window, where
you'll need to change the color to black—RGBA(0,0,0,0).

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 8/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

Change the Field of View to "16," then change the Near Clipping Plane to "0.85."

Step 7

Import Your Vuforia Database

Now we need to install the database we downloaded in Step 4 above. Go to the directory where
you downloaded your UNITYPACKAGE file and double-click on it. The Import Unity Package
window will appear. Make sure everything is selected and hit "Import."

Back in the configuration window in the Inspector, look down at the Datasets section. Check the
box next to Load VuforiaHoloLens (or whatever you called the database), then select Activate.

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 9/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

Step 8

Set Up the Vuforia Camera

In most cases, having two cameras could be confusing for a system like Unity. However, in our
case, the Vuforia camera will use the HoloLens camera as a reference point to do its magic. To
make that happen, navigate in the Project window to Vuforia -> Prefabs directory. Select the
"ARCamera" prefab and drag it into the Hierarchy window.

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 10/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

Select the "ARCamera" object in the Hierarchy window, then look in the Inspector and change
World Center Mode to "CAMERA" from the dropdown.

Now click on the donut icon on the far right side of Central Anchor Point and select "Main
Camera" to use the transform component of the Main Camera as the center point for Vuforia.

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 11/12
15/2/2019 HoloLens Dev 102: How to Create an ImageTarget with Vuforia & Set Up the Camera System « HoloLens :: Next Reality

Let's stop here for now. We're just about finished, and in the next (and final) tutorial, you'll be
able to see your wok in action. So stay tuned!

Next Up: How to Add Holographic Effects to Your Vuforia ImageTarget

Follow NextReality on Facebook, Twitter, and YouTube

Follow WonderHowTo on Facebook, Twitter, Pinterest, and Google+

Cover image and screenshots by Jason Odom/NextReality

Next.Reality.news About Us Privacy Policy Terms of Use

https://hololens.reality.news/how-to/hololens-dev-102-create-imagetarget-with-vuforia-set-up-camera-system-0175899/ 12/12