Vuforia

NOTE: All files will be located in the Course Google Drive

Requirements:

  • Unity

  • Android Studio (If building for Android)

  • Access Google Drive for extra files.

  • Printed out images located in Google Drive

Note: Please ask questions over slack.

Introduction

Vuforia is an Augmented Reality Software Development Kit (SDK) for all mobile devices that allows for quick and easy creation of Augmented Reality applications. It uses computer vision techniques to recognize and track images and simple 3D objects, such as figures, in real-time. The SDK supports a variety of 2D and 3D target types.

Since Vuforia is able to work on all devices, it is a quick and easy way to create VR applications. In this tutorial, we are going to make something inspired by the Harry Potter world, the moving news paper.

In the film, Harry picks up a news paper and is immediately captivated by the moving images on the news paper showing the recent events. We can emulate something like this in Unity using Vuforia. Here is a video if you are curious what this will look like. and you have never seen the films

Vuforia Account Creation

The first thing we are going to do is create a Vuforia Account. Head over to the Vuforia website and click on Dev Portal and register with your email account. Go to developer window. Create a new Development Key and name it Video Playback AR . You will add this key to your Vuforia Configuration File located in resources file. We will get to that. Move on to Target Manager and create a new database called VideoPlayback. Add the image of the Hallows as a target with width 500. You are done with Vuforia for now.

Unity Modeling

Make sure the latest version of Unity is installed with Vuforia capabilities. (This is an option when first installing the Unity engine). It can be added later. Located below this tutorial will be links explaining how to download Unity and making sure Vuforia is enabled. Then create a new project and name it Hallows, after the Deathly Hallows in the Harry Potter universe.

After the project has been created the first thing we are going to do is head over to the asset store and search for Vuforia. We will be downloading Vuforia Core Samples and working with these assets. Make sure to first download the package and then Import.

Note: It will ask you if you have made a back up of anything. We are going to agree that you have and continue with the import. Unity deletes everything when importing a new project file.

Once Vuforia has been imported we are then going to navigate through the project folder to the sample projects. On the bottom left hand corner navigate to Sample Resources -> Scenes. Double click on ImageTargets. This is going to be the scene that we primarily work in.

Note: Make sure you are back in your scene view .

Once you zoom in and you will find 4 different cards, with various 3D models on them. These are the pre-mades that we will be modeling off of.

To make sure everything is working correctly we are going to play the scene and preview it using the webcam. (You can also build and run for either android or IOS). All you need to do is press the play button and then place one of the sample images in front of the camera. Either a 3d model or a video should pop up on the screen depending on the image.

Note: Make sure everything is working before you continue.

After we have ensured that everything is in working order we are going to add our own video to the collection.

The first thing we are going to do is make a copy of ImageTarget_Fissure, rename this copy ImageTarget_Hallows, this way the script files are all going to be in place. We are going to edit the transform of this newly created object in the X direction to 0.4. This way the object is shifted correctly and doesn't overlap with the previously made models.

Next we are going to add in our video into the Assets -> SampleResources -> SceneAssets -> ImageTargets -> Video. Place the harry potter video from the Google Drive in this location.

Click on video in the hierarchy in the top left and drag the Harry Potter video to the location of the Vuforia video on the left hand side replacing the video that is going to play with ours.

Then go back to Vuforia and download the database for the unity editor. Add the database to Unity by dragging the download into Unity. Note: Databases are automatically used. If not make sure to head to the configuration file and make sure the VideoPlayback database is used. Click on ImageTarget_Hallows. Once imported correctly head over to Image target textures and change it to the hallows_scaled. Also make sure to change the scale to 0.12065, or else you will have an extremely large photo.

Then navigate to Assets-> Editor -> Vuforia -> Image ->Target ->Textures and add the image of the hallows. Change the material to that of the Hallows Image.

Note: Make sure to change rotation in the video section to 180.

Now you should be able to replay the video and place your camera over the hallows image and have a new video playing over the image.

Enjoy the magic :)

Note: When building make sure to go to player settings through the build settings button and in Other Settings change Color Space to Gamma.

Feel free to print out the images and test with your camera or phone.