A Step By Step Guide of Creating Your Own Mixed Reality App
Have struggles figuring out how to best make mixed reality apps? Not anymore, as this page aims to help users create their own mixed reality app.
Mixed Reality (MR) uses a number of different types of technologies including advanced optics, sensors and computing. This bundled technology provides users with the opportunity to overlap augmented holographic digital content in an actual space. This provides the possibility of creating experiences that are incredibly unique and life-like.
About Vuforia and Unity
Vuforia is the biggest augmented reality platform that supports tablets, smartphones and digital eye-wear consisting of optical transparent devices and VR viewers. One of the main reasons why more people use Vuforia is that it connects products to excellent virtual experiences.
Unity, on the other hand, is the most popular game engine. It is the main game engine used in mobile development, and is quickly taking advantage of this by being the biggest player in augmented and mixed reality content creation.
Getting started with Vuforia
- Head over to Vuforia.com, go to the Dev Portal and Register to Create a New Account
- Once you create an account, login and click the Develop tab
Making a license for an app
A license key is an ID which is needed to integrate Vuforia with Unity. Under the Develop tab click ‘License Manager’. Choose ‘Add License Key’. We’re going to select ‘Development’ in order to create a free test app. Then give your Project an App Name. Click Next and then Confirm. Now that you’ve created a license key, it will show up in the License Manager.
Click on your App Name to get the license key. Copy this, we will need it later in Unity.
Creating a Database and a Target Image
Now back to Develop tab. This time we are going to head to ‘Target Manager’. Click ‘Add Database’ and enter some details. Name your Database and select the ‘Device’ type. You can read about Cloud and VuMark Databases on Vuforia’s website. Now, you are ready to add images to your newly created database.
Select the Database you created and click ‘Add Target’. Several types of targets are supported by Vuforia, in this walk through we are going to use Single Image. Targert Images must be either JPG or PNG and under 2.25 MB. Here is a link to an image that works well for tracking called stones.
Enter a Width value. This value can be anything, it tells Unity the scale of your target image in meters.
After adding your target and a short uploading, the target will be added to your Database. Once uploaded you’ll have a ‘Download Database (All)’ option. Click that then select ‘Unity Editor’ as your development platform.
One more piece to download. Go the the ‘Downloads’ tab and click Download for Unity found under SDK.
Let's jump into Unity
If you are unfamiliar with Unity, or need to download it, head over to unity3d.com
Now, let’s start up a new Unity Project.
We are going to have to import the packages we downloaded from Vuforia. Let’s start with the Vuforia for Unity SDK. Go to Assets > Import Package > Custom Package and select the Vuforia Unity SDK file. Then click Import on the popup. This will bring in all the Vuforia goodies we need to get started. Let’s also go ahead and import the Database we downloaded from Vuforia. Again go to import custom package and this time select the Image_Targets unity package.
Once we have imported everything, let’s get our scene started. First let’s Add an ARCamera to the scene. It’s found under Vuforia/Prefabs. Let’s drag it into our scene. Make sure it’s located at the origin (0,0,0) Since we have added the ARCamera we can delete the Main Camera in the scene as well.
Time to input that license key. Select the ARCamera and click Open Vuforia configuration from the Inspector. Under the VuforiaConfiguration you will find a slot at the top called App License Key. You guessed it…. let’s paste that long Vuforia license key here.
Now, if you hit play in Unity you should see your webcam load up. We’re getting close, next we need to get the Image Target setup. Under Vuforia/Prefabs let’s drag in the ImageTarget into the scene. Let’s also set this at the origin (0,0,0)
Select the Image Target asset in your scene and look under the Image Target Behavior (Script) area in the Inspector. We are going to want to select the Data Set. Once you do, you’ll see your ImageTarget place scale to the Width we set before. Also, notice that the Image Target attribute automatically selected stones (Or whatever the image target was called when you set it up in Vuforia).
Let’s select the ARCamera again and select Open Vuforia configuration again from the Inspector. This time we are going to check the box under Datasets that says Load Image_Targets Database. (This might be called something else if you named your Database differently) Once you check that box, another one will appear underneath called Activate. Let’s click that one as well.
Ok, now all we need is a 3d asset. Click the Asset Store tab. You can add whatever you want, but if you want to see what we had in our video search for ‘Angel Statue.’ You can click FREE ONLY and you should see it right there. Let’s go ahead and Import that.
Back in the projects tab, let’s drag the angelStatue Prefab into our scene. Found under angelStatue/Prefabs. We are going to drag it over into our scene, also at (0,0,0). That is going to be the scale of the model to the image. So, scale the mesh to the scale you’d like.
We are going to then drag and drop the angelStatue under the ImageTarget in the hierarchy so that it becomes a child of the ImageTarget group. This way the two will track together.
Now we have really got somewhere. Click the play button and find point your webcam at the stones image. I used an ipad with the image, but a print out works the best (no screen reflection).
We should have done this awhile back, but let’s go ahead and save our scene.
So we have a working Mixed Reality Vuforia scene, however I bet you’re thinking… how do I get this onto my phone. Go to File Build Settings. Click Add Open Scenes.
Select Android. We are going to need to go into the Player Settings. Change your Company Name…
then change the Company.ProductName under the Bundle Identifier (Under Other Settings/Identification) to match what the Company Name and Product Name are at the top of the PlayerSettings.
Now one more thing before you publish. You must have your Android setup for USB debugging, this is found under the Developer Options on the phone. Not sure how to do this check out this page on how to develop for Android, or search USB debugging Android and your phone name.
Now plug your phone to your computer if you haven’t already and select Build and Run. After a few progress bars you should get a Unity splash screen and the camera view. Go find some stones for your first Mixed Reality App!