21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Charlie Gerard Follow

Software developer, creative coder and tinkerer of things.
Feb 1 · 9 min read

How to create Augmented Reality posters

with Unity & Vuforia
A few months ago, I started looking into di erent Augmented Reality
frameworks and used Unity & Vuforia to create AR posters, like this
one:

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 1/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

I spent some time putting together a step by step tutorial on how to

make your own and here it is!

This tutorial is currently working for MacOS High Sierra v10.13.2

with Unity 2017.3.

Initial setup
—-

If you don’t already have it, start by downloading Unity 2017.3.

When you see the “Unity component selection” window, make sure to
tick the “Vuforia Augmented Reality” box to automatically install the
extension (previous versions of Unity require to install Vuforia
separately).

Select the “Vuforia Augmented Reality” option to install the extension automatically.

Create a new project

—-

After installing, launch Unity, sign in or create a new account and click
on “New” to create a new project.

Change the default project name if you want but most importantly,
click on 3D and then click on “Create project”.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 2/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Create a new project and select the “3D” option.

A Unity window should open, like below:

Default Unity project window.

In the left panel (Hierarchy), delete the default “Main Camera” and
“Directional light” objects. To do so, right-click on each object and
select “delete”.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 3/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Start by deleting the Main camera and Directional light.

Import the Vuforia assets

—-

To test that our initial setup is working, let’s use some default Vuforia
assets.

In the middle panel, click on the “Asset store” tab and wait for the asset
store to load.

Search for “Vuforia Core Samples” and download/import the package.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 4/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Download/import the Vuforia core samples from the asset store.

Once the assets are imported, let’s add an ARCamera to our project by
clicking on GameObject > Vuforia > AR Camera.

Add an AR Camera to your project

You should see an AR Camera object added to the Hierarchy panel.

Click on it and in the right panel, click on the “Inspector” tab to see the
con gurations of the object.

Towards the bottom of that section, you should see a button “Open
Vuforia Con guration” that is disabled by default. To enable it, go to
File > Build Settings and click on the “Player Settings” button.

Scroll down and in the XR Settings section, select the option “Vuforia
Augmented Reality Supported”. You can then close the Build Settings

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 5/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

window and go back to the AR Camera con gurations window.

The “Open Vuforia Con gurations” button should now be enabled.

Start con guring the ARCamera.

As we imported the Vuforia core samples assets, we need to activate

them so they can be used and recognised by the AR Camera game
object.

To do so, after opening the Vuforia con guration panel, activate the
databases:

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 6/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Activate the Vuforia core sample databases

Now that the databases are activated, we are able to use the assets and
have them recognised and trackable.

Let’s add what is called a “target image”. A target image is a speci c

image that you will want your camera to recognise to start your AR
animation.

To add a target image to our project, go to GameObject > Vuforia >

Image.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 7/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Add a target image to your project.

You may have to zoom in a little bit inside your scene to see the image
but the result should look like this:

Target image added.

The default image comes from the Vuforia core samples we imported
earlier. It can be replaced later to use your custom image but for now,
we just want to check that our setup is working.

When our camera recognises this image, we want to overlay a 3D object

over it. For this, right-click on the image target in the left panel and
select Vuforia > Model target.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 8/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Add a 3D object over your image target.

By default, the 3D model is quite big so we need to scale it down.

Click on the model target object in the left panel and update its scale in
the right panel. A scale X, Y and Z of 0.5 should work well.

After scaling it down, it should look something like this:

3D model added on top of our image target.

At this stage, we should test that our setup is working properly before
starting to add our own assets. To launch our project, click on the play
button a the top of the window.

If everything is setup properly, a 3D model should appear when you

point the image target to the laptop’s camera. You can either print the
image target or just take a picture of it on your phone and point your
phone to your computer’s camera.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 9/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

To stop running the project, click again on the play button.

Using your own assets

—-

To start using your own assets, register / log in on the Vuforia

developer portal.

Once logged in, go to the “Develop” tab and get a development key.

Get a Vuforia development key

Once you con rm, you will have access to a License key you will need to
use later in Unity.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 10/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Now, click on the “Target Manager” tab and click on “Add database” to
start uploading your own assets.

Create a database to start using your own assets.

Once your database is created, click on “Add target” and select the type
of le your target is, as well as the path to nd it, width and how you’d
like to call it.

For the width, Vuforia uses meters as the default unit scale. As my
demo poster is an A4 sheet which is 21cm (0.21m) large, 0.21 should
be ne.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 11/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Once added, your Target Manager page should look something like
this:

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 12/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

The rating is really important as it de nes how well Vuforia is going to

be able to track the target image.

Select the target you would like to download (the image we just
uploaded), and click on “Download Database”. This will download a
le we will need to import later in Unity.

Back to Unity, click on the ARCamera game object, open the Vuforia
con gutation and add the license key you just created.

To import the assets you just uploaded to Vuforia, go to Assets > Import
package > Custom package… and select the database le we just
downloaded.

A window will appear with the di erent les that are going to be
imported; just click “import”.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 13/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Import custom assets

Once your assets are imported, click on the ARCamera again and in the
Vuforia con guration, you should see your database added to the list of
databases. Click on “load” and “activate” to be able to use the assets.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 14/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Then, click on the image target in the left panel, and, in the right panel,
change the database dropdown from “VuforiaMars_Image” to the name
of your custom database.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 15/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Change the image target database to your custom one.

Selecting your custom database should have changed the target image
used in the “Scene” window.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 16/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

The target image should have changed to your custom assets. (Image source).

If you click on the play button now, you should be able to show your
custom image target in front of your computer’s camera and see the 3D
object appear!

To change the 3D object displayed, drag and drop your 3d model in the
“Models” folder inside the “Project” tab at the bottom left of the Unity
window.

Then, drag that model inside the “Model target” folder in the hierarchy
panel. Your new model should appear in the scene window.

You will probably have to change the scale of your model and its
position to be placed over your image target, but in the end it should
look something like this:

Custom 3d model and new image target. (Source for 3d model).

When pressing play, you should be able to have your custom image
tracked and see the 3d model appear above it.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 17/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Testing that the new assets are working.

Testing on your iOS / Android device

—-

Now that we know our AR app is working ne with our laptop’s camera,
let’s test it on our mobile phones or tablet.

Testing on Android devices

For Android, you will need to download Android Studio. Once

downloaded, you will have to replace the “tools” folder located in
/Users/<your username>/Library/Android/sdk to the one you can
download here. This is because the latest version does not seem to work
at the moment, but v25 works.

Once this is done, you need to setup the path to the SDK in Unity. Go to
Unity > Preferences and in the “External tools” tab, scroll down and
enter the path to the Android SDK. On Mac, it should be something
like: /Users/<your username>/Library/Android/sdk.

You might also need to install the JDK. To do so, visit this page and
download the JDK for your platform.

Once downloaded, you also need to enter the path in the Unity
preferences. For the JDK, it should be
/Library/Java/JavaVirtualMachines/jdk1.8.0_161.jdk/Contents/H
ome/.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 18/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Path to Android SDK and JDK in Unity.

Then, to build your project, go to File > Build Settings.

Select Android and click on the “Player Settings” where you have to
double check that the “Vuforia Augmented Reality Supported”
option is checked.

You may also have to unselect the Android TV compatibility in the

“Other Settings” dropdown that seems to be checked by default.

Finally, you have to change the default package name.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 19/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

After this, you can go back to the Build Settings window and click
“Build And Run”.

Your project should build successfully!

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 20/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

Testing on iOS devices

—-

To build for iOS, you need to start by adding your AppleID to Xcode. To
do so, open XCode, from the menu bar at the top of the screen choose
Xcode > Preferences. Choose Accounts at the top of the window to
display information about the Apple IDs that have been added to
Xcode.

To add your Apple ID, click the plus sign at the bottom left corner and
choose Add Apple ID. Add in your username and password and you
should be good to go back to Unity.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 21/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

In Unity, go to File > Build Settings > Player Settings.

You need to enter a description next to “Camera Usage Description”.

For example: “Camera access required for target detection.”.

Then, nd the “Target iOS minimum version” eld and change the
value to 9.0.

Finally, change the “Bundle Identi er” eld value.

Make sure you scroll down to the XR Settings and activate “Vuforia
Augmented Reality”.

Once this is done, you should be able to click on “Build and run”. This
may launch XCode and you may be prompted to select a “team” and
change the name of the Bundle identi er.

On your iOS device, make sure to have your AppleID “trusted” in the
Settings.

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 22/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

That should be it! If you try to run the project again, it should build
successfully and launch on your iOS device!

Going further
—-

If you went through all these steps and you can test this basic app
successfully on your device, you’re all set! You can now upload your
own assets and build your own AR posters!

In this tutorial, we’ve only played with tracking images and displaying a
3D model over it but you can also tracking small 3D models and overlay
images, videos, etc..!

—-

Hopefully this was helpful and don’t hesitate to let me know if any of
those steps don’t work anymore or if anything doesn’t make sense!

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 23/24
21/10/2018 How to create Augmented Reality posters with Unity & Vuforia

https://medium.com/@devdevcharlie/how-to-create-augmented-reality-posters-with-unity-vuforia-ec80a82e6d51 24/24