After wrestling with writing my own implementation of a QR code reader in Unity (you can check out my post on webcam screenshots in Unity here) I finally decided to leave it to the experts and go with a more robust solution.
Qualcomm’s Vuforia augmented reality platform, which works for both mobile and head-mounted AR devices, has been a popular choice for marker-based AR/MR in today’s immersive technology ecosystem, so I decided to get a prototype up and running! I had a hard time sorting through some of the documentation, so I wanted to share the steps that I went through to get a simple QR Code recognizer up and running.
The first thing that you’ll want to do is head over to developer.vuforia.com and sign up for a free developer account. Once you’ve gotten your account verified (they’ll send over an email) you will be able to download the SDK contents. Download the Vuforia package for Unity, and import it into a new Unity Project.
We’ll be using two Vuforia prefabs in this demo: the ImageTarget item, and the ARCamera item. From your scene, delete the MainCamera object in the hierarchy and replace it with the ARCamera item.
Next, drag in an ImageTarget item somewhere in your scene. This is going to represent a target in the physical world that our camera will pick up information from. The Vuforia documentation is sparse, but you can read a bit more about ImageTargets and how to use them, or look at the sample scenes, over on their developer portal.
Once we have the two basic prefabs set up, we’re going to go ahead and get our application registered with Vuforia. Make sure that you’re logged into the developer portal, and then on the site, click the ‘Develop’ tab at the top to view your information.
Click ‘Add License Key’ to generate a key to connect our application to the Vuforia database manager. You will need to add in the Application Name, select ‘Mobile Device’, and choose the Starter option for licensing. Confirm the licensing terms, and you should see your application in the manager list.
Switch back over to Unity and click on your ARCamera. In the inspector window, you will see a space for your App License Key. Copy and paste the key from the manager into the App License Key field, and save your scene.
Back over in the developer portal, click on the Target Manager header. This is where you will create databases of images that will serve as your markers for your augmented objects. Click ‘Add Database’ to create a database for your project. You will need to give your database a name, and choose if it is a device or cloud database. I picked device, which make the process super easy!
Once you have your database, you can begin to add targets. Since we’re using an image target, I chose an image, but there are some restrictions on the types of image (under 2 MB, 8-bit grayscale or 24-bit RGB color spaces) and some images work better than others for augmenting objects on top of – QR codes work really well for augmented purposes, so I went with that option. Note that the Vuforia framework contains quite a few other ways to track and target objects – this was just a first test – but I stuck with a QR code image for simplicity.
Select your target type (I picked Single Image), the image file you want to upload, a width (I used 1) and a name for your target. When you’ve included all of the information, click ‘Add’ to save it to the database. If you run into issues with the color space, I recommend opening the image up in GIMP, and going to Image -> Mode -> RGB, then saving over the original file. This fixed the errors that I had originally trying to upload photos.
When you have added in all of your desired targets, click ‘Download Database’ and select Unity as the download type. When the database download has finished, open the download to import the database into your Unity project.
After the database is downloaded and imported into your project, click on your ARCamera again and enabled the Database Load Behavior script. You should see your database appear in the inspector. Click on the database name check box and the ‘activate’ check box so that your camera will load in the database and begin looking for your targets through the camera.
Next, we want to tell our ImageTarget object what it is going to represent from our database. Click on the ImageTarget object in the Hierarchy, and find the Image Target Behavior script in the Inspector window. Choose your database from the drop down menu on the script, and pick the desired object from the second drop down list, which will populate from the database you’ve selected. You can have multiple databases in your project – just make sure that you activate each of them accordingly!
Finally, we want to add an object to appear when we locate the image target in our physical world – do this by adding your desired game object as a child object of the ImageTarget. I chose my favorite free kitten asset, and placed it facing the camera on top of the Image Target, but you can add any object you want to this instead. By default, the ImageTarget will already contain the script to show and hide images, so you’re all set once you add in a child “hologram”.
With that, you can build your application to your mobile phone and give it a try – point your application camera at a printed version of the image you set as your image target in your database, and watch your creation come to life!