HowTo: Make your own AR App

Categories:Lab, Technology, Tutorial

Do you want to know how to make your own Augmented Reality apps? Then this is the article for you! Of course, I won’t share all our secrets, but after reading this you’ll be on your way to making fresh AR experiences.

This how-to will be an introduction to setting up Unity3D and Vuforia and sharing a few tips and tricks. For this how-to some basic knowledge of Unity is required.

 

You will need

  • Unity as your development framework. A free personal license is enough to get started. I’ll be using version 5.4.3f1. You get Unity3D here https://unity3d.com/
  • Vuforia as your AR tracking software. For this you’ll need to create an account on their website. https://developer.vuforia.com/
  • A printer to print out a marker for tracking, a black and white printer will do
  • A webcam. It’s not necessary, but it’s handy for debugging

Once you’ve got all this then let’s get started!

To help you along I included an example Unity project. This Unity scene contains everything discussed in this article. The marker and data set can be found in the “Extras” folder. The project can be downloaded here: https://github.com/twnkls/VuforiaDemo

 

Setting up Vuforia

Go to and log in to the Vuforia developer portal. If you log in you can go to the ‘Downloads’ tab and select ‘Download for Unity’. For this guide, I will be using Vuforia version 6.1.17.

download-package

First we can go to the ‘Develop’ tab and create a license by pressing the ‘Add License Key’ button. Choose ‘Development’ as license option, this license will be free of charge. You will need the key you just created to activate the Vuforia plugin in Unity. Now you are good to go!

create-license

Next, you need to create a marker. A marker is a physical object that Vuforia will look for. When it sees a marker that is the same as the Image Target (that you uploaded to Vuforia) you get tracking. When that happens, the program can place content on top of your marker. With Vuforia you can create different types of marker, but for this guide we will use the ‘Single Image’.

create-dataset

To make a good marker you have to understand a bit how the scanning works. Vuforia looks for unique points in the image, these points are called features. The more features an image has the better tracking it will have. Images with high contrast and non-repeating content will usually have more features. Unsure if your image is suitable? Just upload your image to the Target Manager and Vuforia will give the image a rating.

However, this rating system isn’t perfect! Sometimes a 5-star rating performs worse than a 3-star rating. If you select the marker you can press ‘Show Features’ to show all the features in the image. If the features are spread over the whole image and if there are plenty of them the marker is usually good.

marker-features

The width value for Vuforia is the same as the Unity units. For example, if you make the width 1, in Unity 1 will be the width of the marker. I prefer to use the mm scale, so an A4 paper in landscape is 297mm width. Now if I make a cube in Unity with the scale 100x100x100 it will be a cube of 100x100x100 mm in the real world.

The name can be anything you like.

If you added your marker, you need to export the dataset as a Unity package. This dataset contains the data for the marker. You can create the dataset by pressing the ‘Download Database (All)’ button. Then in the pop-up window select the ‘Unity Editor’ option.

download-dataset

 

Setting up Unity

Continuing on the Unity side, start a new project with 3D selected. Then include both the Vuforia package and the dataset package in the project.

After this you can start to setup the scene. First, delete the standard main camera and replace it with the Vuforia AR camera. The camera prefab is located in the “Vuforia/Prefabs” folder.
Select the added ‘AR Camera’ and in the inspector, add license key to the ‘App License Key’. Also, don’t forget to load and activate the dataset under the ‘Database Load Behaviour’. The rest of the settings can be left on default for now.

AR-Camera-Inspector

Now you can add the Image Target you made before. In the folder “Vuforia/Prefabs” you can find the ‘ImageTarget’ Prefab. Add this prefab to your scene. In the inspector change the ‘Database’ and ‘Image Target’ fields to your marker. Leave the rest of the settings to the default values.

Image-Target-Inspector

Now everything is ready to go! To show when you have tracking you can add any 3D object as a child of the ‘ImageTarget’. If you run the project, you should see a camera feed on the background. If you hold the marker in front of the camera you will see your 3D object on top of it!

Going further

This only the start! You now have the basics to make whatever you want in AR. Let me give you some pointers to make your AR apps even better.

 The strength of an AR app is to mix the real world and the virtual content and how to make the virtual content appear on top of the real world.

At the top you can find an example project, in this project I made use of the ‘DepthMask’ shader, this shader will show the camera feed instead of the 3D objects. This way you can control how the 3D objects appear on top of the camera feed.
By default Vuforia turns off the renderer and the colliders of all the children. In the example project I made a script where you can select what GameObjects need to be turned on or off when tracking is found or lost. This gives you more control over animation and script events to trigger when the tracking state changes.

That’s the basics of developing for Augmented Reality.

I hope you make some wonderful AR apps, and I would love to hear about your projects!

Comments are closed.