Making a Small AR App with Unity and Vuforia

* No programming skills required for this tutorial.

Let’s get straight to the steps.

Hardware you need

  1. A laptop/PC/Mac. I’m going to use Mac for this tutorial but all the steps also apply to Windows OS.
  2. A camera (webcam on laptops is good enough)
  3. Internet connection

Software you need

1. Unity

Unity is a modern 3D game engine. It’s extremely versatile and easy to learn.

Download at Unity’s official website, select personal plan, install the latest version and complete the registration process. A personal plan is good enough for beginners. I’m using the plus plan cause I’m developing some commercial titles. But the basic features are exactly the same.

When the installer asks which components to install, select Unity, Documentation, Standard Assets and Android Build Support. You can always install other components later with the Unity installer.

2. Vuforia

Vuforia provides Augmented Reality support for multiple platforms, including Android, iOS, UWP and Unity. In this tutorial, we are going to use it for Unity only.

Go to Vuforia's official site, complete the registration process and download the Vuforia unity package on the download page.

Now we have all we need, let’s dive into the development.

Step 1: Step up the project

Open Unity, click on the +New button to create a new unity project. Name the project and choose a location for it as you like.

Now we have an empty Unity project! You may feel lost in the editor but no worry, I will cover all the steps in details so you won’t get lost. I’ve annotated different views in the editor for better communication, but if you want to learn more about this interface, sufficient training can be found on Unity’s official tutorial website.

Step 2: Import Vuforia core assets

Go to Assets -> Import Package -> Custom package…, and select the Vuforia unity package you just download.

Import everything as shown in the new window.

In the project window, find the AR Camera, drag it into the hierarchy view. Remember to delete the existing Main Camera inside hierarchy view, otherwise Unity will not know which camera to use. Your hierarchy view should look like this.

Now we can save the scene first by Command + S or Control + S on Windows. Put it in the Assets folder and name it as you want.

Step 3: Add Vuforia license

Your Vuforia needs a license to function properly. In this step, we’re going to add a Vuforia license.

Go to the License Manager page and click Add License Key. Fill it as the following image and confirm.

Then click into your new license, you’ll get your license number. Copy it, and go back to Unity.

In Unity, select AR Camera in hierarchy view, click Open Vuforia Configuration in the inspector window, and paste your license number there.

Step 4: Prepare the image target

Vuforia works by identifying an Image Target inside the real world camera view. When it finds the target, it overlay objects that you made in Unity onto it.

Go to Vuforia’s target manager page. Click Add Databse. Name it as you want and select Device for type.

Then clock into your new database. Click Add Target, and fill as in the following image. In this step, you need to prepare and upload an image as the Image Target. I’m using my company’s logo here, you can use any image you want. The color of that image does not matter.

After you’ve successfully added one target, you can download databased from Vuforia’s website. Remember to select Unity as the platform.

Now go back to Unity and import the database you just downloaded. The operation is same as importing Vuforia’s core assets.

Step 5: Set up image target

Now we’ve prepared the Image Target, we can find it under Vuforia - Prefabs folder and drag it into the hierarchy. Remember to place it under AR Camera like this.

Then select the Image Target in hierarchy view, and set Database & Image Target in the inspector window.

I think there is some compatibility issue here, as sometimes you still cannot see your image in the scene view. In this case, locate your image in Editor - Vuforia - ImageTargetTextures - YourDataBaseName folder and select your image. In the inspector window, set Texture Shape to 2D. Now you should be able to see your image in the scene view.

Step 6: Add content

In this tutorial, we are going to add a sphere, just to show that Vuforia is working properly. In the hierarchy view, right-click on Image Target and create a sphere.

Here we also need to set up the AR Camera. Again, click on it in the hierarchy view, and set World center mode to CAMERA in the inspector window. Then, click on the Open Vuforia Configuration, tick Load xxx Database and activate.

Now, open your image on your phone or print it to a paper, click that play button above the scene view, put that image in front of your camera, you should be able to see that sphere. And… we are done!

Step 7: One more thing - install your app on Android

If you have an Android phone, you can actually install the app you just built onto your phone!

In Unity, go to File -> Build Settings, click Add Open Scene and switch platform to Android. Then click on Player Settings at the bottom. Set the three field as shown in the image in the inspector window.

Now you can go back to Building Settings and build! If you need more assistance for building your app, you can find plenty of results on the internet.

If you’ve done everything properly, you can get your first AR App like this!

A closing note