The Magic of Augmented Reality: A Step-by-Step Harry Potter Demo Guide
Immersive technologies like augmented reality (AR), virtual reality (VR) and mixed reality (MR) are captured under the umbrella of extended reality (XR), which has the ability to merge physical and virtual worlds. What if you could see a product in action before you buy it or learn new skills through digital, interactive experiences? That’s just the beginning of what technologies like AR can do.
There are many unique benefits that AR can provide that traditional media cannot. AR provides a more immersive experience by superimposing digital information onto the real world, which creates a sense of presence and interactivity that engages the user’s senses. Furthermore, it can be used to create educational content, going as far as simulating medical procedures and surgeries in the healthcare industry. AR can also be used to increase safety and efficiency in a variety of industries, such as the construction industry, to provide workers with information about potential hazards and updated safety protocols.
In this post, we will build a fun demo to introduce readers to the world of AR. We will be using Unity and Vuforia, which when used in conjunction allow developers to create highly interactive and immersive AR experiences that can be deployed on a wide range of platforms and devices. With Unity, a popular game engine, developers can create 3D models, animations, and other assets. Vuforia, a popular AR platform, will provide the necessary tools for recognizing and tracking real-world objects and overlaying digital content.
As a part of the demo, we will first provide the basic starting guide to set up Unity and Vuforia. We will further provide steps on how to re-create the Daily Prophet, a “magical” newspaper found in the popular novel series, Harry Potter. Follow along for an easy introduction to everything AR has to offer!
Import Vuforia package into Unity
Download Unity Hub for your OS from here, and set up a Unity account. After creating a new project via the Unity Hub, follow the process below to incorporate Vuforia, which will be used in the demo as mentioned previously.
1. Download the Vuforia Engine from the Developer Portal
2. In the Unity Editor, click Assets -> Import Package -> Custom Packages and select the Vuforia Engine package. Alternatively, you can double-click the package to import it:
3. When prompted, make sure all files are selected and import:
Add Vuforia AR Camera to the scene
- Delete the Main Camera from the scene in the Hierarchy panel:
2. Add the AR Camera by right-clicking in the Hierarchy panel, select Vuforia Engine -> AR Camera:
Create Vuforia license and import into the application
1. Log in to the Vuforia Developer Portal (create an account if you haven’t already). Create a Basic License for your app.
2. Click on the new license and copy the license key.
3. In the Unity Editor, under the Project pane, click on Resources -> VuforiaConfiguration. Paste the license key under the Inspector pane on the right:
Create and import image targets
1. Head back to the Vuforia Developer Portal and create a database to store the Image Targets.
2. Choose Device as the type:
3. Upload the target image, specifying a width of 1. The uploaded image should show up in the database. Download the database package by using the Download Database option with the Unity Editor option:
4. Double-clicking the downloaded file will result in a pop-up in Unity to import the database:
Use Image Target in Unity
- Right-click in the Hierarchy panel, select Vuforia Engine -> Image Target:
2. Select Image Target to view properties in the Inspector panel on the right. Change the Image Target Behavior to use the target image uploaded to the database:
Adding video
We will add a looping video of Sirius Black yelling when we present the AR target with the image.
- Right-click the Image Target in the Hierarchy menu, and add a 3D object. Select a plane.
2. Use the move, rotate, and resize tools to get the plane right in front of the still image of Harry Potter on the Daily Prophet.
3. Let’s now attach a Video Player to that plane:
4. On the Video Player settings on the right, set Render Mode to Material Override and Renderer to Plane (Mesh Renderer). Also check the Loop box, which will cause the video to loop. Set Source to URL.
5. Make sure you have a video source downloaded to your computer. I’m using this short loop of Sirius Black found here. You could use a loop of Harry Potter, or whatever video you have. Set the Source to that link.
Hit the Play button on the video window. You can either print out a copy of your Image Target, or download it to a mobile device. I downloaded the Daily Prophet image to my phone, and held it up to the camera. Vuforia will recognize the image and overlay Sirius Black on top of it. Your finished project should look like this!
In conclusion, augmented reality is an exciting technology that has the potential to revolutionize the way we interact with the world around us. From enhancing customer engagement to improving learning and training, AR has already made a big impact in various industries. While AR technology continues to evolve and becomes more innovative and immersive, there are still some challenges to be addressed, such as cost and privacy concerns. AR will play an increasingly important role in our lives, whether it’s playing games or learning new skills.
We hope that this demo was informative and inspiring, offering a glimpse into the technology of AR!
Slalom is a global consulting firm that helps people and organizations dream bigger, move faster, and build better tomorrows for all. Learn more and reach out today.
