Using augmented reality, you too can step into the wizarding world of "Harry Potter" and experience moving pictures!

If you have watched the Harry Potter series, you will definitely remember the scene below where Harry reads the news about "Dumbledore's Dark Secrets" on the Daily Prophet. Even though that was done through magic in the story, today we can actually do the same thing using Augmented Reality. In this augmented reality tutorial, I will show you how to do the same thing using tools like Unity very easily.

Required Materials

Software

  1.    Unity (5.4.1 64 bit)
  2.    Vuforia for unity
  3.    Video Player
Other Downloads
  1.   Daily prophet newspaper image.
  2.   Video to augment.

Steps for This Augmented Reality Tutorial    

Create a new project in Unity.

1a-3.jpg

Import the downloaded Vuforia Package (Here is a Vuforia tutorial for beginners if needed).

2aharry.jpg

Drag and drop the AR Camera prefab (type in AR Camera in the search bar to locate it) and drag and drop the image target.

3a-3.jpg

Delete the main camera by selecting it and pressing delete.

Generating a License Key for Your AR Camera

You will need to create an account on Vuforia and log in. Navigate to 'Develop' section and click on 'Add License key'.

4a-3.jpg

Select Project type as 'Development' and specify the Application name. Click on 'Agree to terms and conditions' on the next page. You can see its name in the list of license keys, select it and you can see the license key generated.

5a-3.jpg

Paste this key into the AR Camera license key box which you can see by selecting AR Camera and clicking on 'Open Vuforia Configuration' on the right side of the screen.

6a-3.jpg

Now we need to specify the image to augment our video on, to do this first we need to download the data set: 

Log in to developer.vuforia.com and navigate to develop section. Click on add database, select develop and give it a name. You should now be able to see your data set name in the list as follows.

7a-2.jpg

Select your data set and click on 'Add target'. Browse to select the image you want to set (don't forget to download Harry Potter's Daily Prophet images) and set width to 1. Select the database and click on 'Download Database (all)'.

8a-1.jpg

Download for unity editor.

9a-1.jpg

Now import this data set into Unity. We activate this data set by selecting image target and setting the database as our downloaded database.

10a.jpg

Now activate this in AR Camera as well.

11a.jpg

Now go to Assets->Import new asset and select the video and c# file (playvideo.cs) and import it (link to video and C# script given at the end).

Right Click on Image Target ->3d object->plane.

12a.jpg

This will create a white plane on the marker, adjust it to fit the rectangular shape on the image as follows.

13a.jpg

Now drag and drop the video and C# script on the plane (check if orientation is proper if not rotate it by -180 degrees to align it properly). And the last step of this augmented reality tutorial is to just press the play button on the top and hold the printed image marker in front of your webcam to see the preview as follows.

14a.jpg

You can see the video playing on the image which makes it look like the images on the paper are in motion, giving it the feel of 'Daily Prophet'. 

And with that, you are ready with your own Daily Prophet version. Try doing it with different images and different videos. Feel free to ask if you have any questions regarding this augmented reality tutorial by commenting below. All the best, have fun! 

Links:  

C# Video Script 
Harry Potter Daily Prophet Image


Maker Pro Logo
Continue to site
Quote of the day

-