CareerHigh - Building Better Career

Augmented Reality Tutorial Series - Week 1
person Aman     access_time 10¬†months ago

Welcome to week 1 of the 4-week Augmented Reality Tutorial Series. In this post, we will introduce you to Augmented Reality (AR), its history and its working. Then we will learn some basics of Unity and Vudoria (Do not worry if you haven't heard about them, we will start with very basics.). And then we will head towards the most interesting part of this tutorial,i.e. building your own AR application. So Let's get started...

Definition of Augmented Reality

So, what is Augmented Reality after all? Most people think that it is a part of Virtual Reality (VR) and some even mistake it for VR. We hope that by the end of this tutorial you’ll be able to understand the differences between Virtual Reality and Augmented Reality.

Here is what Wikipedia says about Augmented Reality:

Augmented reality (AR) is an interactive experience of a real-world environment where the objects that reside in the real-world are "augmented" by computer-generated perceptual information, sometimes across multiple sensory modalities, including visual, auditory, haptic, somatosensory, and olfactory.

AR combines both virtual and real information, however, the real world is always the primary place of action for AR. On the other hand, VR has a fully virtual environment with the virtual world as the primary place of action. Virtual reality replaces the "real" with the "artificial" whereas augmented reality enhances real life with artificial images.

The two most important points about AR:

  1. First, it must be interactive with real-time updates.

  2. Second, it must have virtual information registered in 3D space, in the physical environment.

A brief history of Augmented Reality

Augmented Reality as a concept has been around for decades, and there are many examples of practical application of the same. So let us quickly understand the history of AR.

At first, VR and AR were born as only theoretical concepts. It took almost a couple of decades for technology to catch up. In the 1990s, AR was used for assisting workers with indoors assembly and maintenance.

We will not bore you with historical details. Here is a brilliant image containing the timeline of major discoveries, achievements, milestones and other events related to AR.

You can visit the following pages if you want more details and see how awesome AR has become over the years!

  1. [https://www.igreet.co/brief-history-of-augmented-reality/]

  2. [https://www.colocationamerica.com/blog/history-of-augmented-reality]

  3. [https://en.wikipedia.org/wiki/Augmented_reality#History]

How does AR work?

In simple words, AR deploys a virtual image by using computer vision and tracks it to a physical point in your live environment. Because of this tracking, when you move the camera around, (take it closer or further away) the object is able to sustain, scale and optimize its location in your view of the real world.

The simplest form of tracking is achieved by a device through a combination of accelerometer and gyroscope in order to figure out your position automatically. There are applications that combine the power of GPS with AR to give a more realistic experience.

Applications of AR

The popularity of AR is rapidly increasing with its applications ranging from gaming, event-organising, and healthcare, to insurance, retail, education, sports, and live entertainment. The elevated business interest in AR can be vivid from the increasing number of AR startups in Silicon Valley like Zipmatch, Holobuilder, SVVR etc.

AR is already improving the customer experience by transforming the way brands interact with their customers, helping them achieve their goals and finalize sales.

Some applications of AR include:

  1. Augmented Reality Classrooms (Education Sector)

  2. Augmented Furniture - you observe any furniture in your real environment before buying one (Retail Sector)

  3. Google Translate - The app lets you point your camera at a text from another language. The app then translates it in real time. This can help you do things like reading street signs or menus. (Travel Sector)

  4. Pokemon Go - Pokemon Go is an augmented reality (AR) mobile game in which you capture, battle, and train virtual creatures, called Pokémon, which appear as if they are in the player's real-world location. (Gaming/Entertainment Sector)

Enough of discussion, not let us get into the technical details.

A quick introduction to Unity and Vuforia

When building your own Augmented Reality-based application, you’d be dealing with 2 things:

Vuforia: In simple terms, Vuforia Engine is a software platform for creating Augmented Reality apps. Using Vuforia, developers can easily add advanced computer vision functionality to any application, allowing it to recognize images and objects, and interact with spaces in the real world.


Unity: In simple terms, Unity is a cross-platform game engine which is primarily used to develop video games and simulations for computers, consoles, and mobile devices.


So, the key to learning Augmented Reality is to combine Vuforia with Unity.

Installation of Unity and Vuforia

Are you ready to take the first step toward creating your first AR application?

  1. Visit the Unity Download page to begin the installation process.

  2. During installation, on the "Unity component selection" page, select the components that are needed for your development platform. Enable "Android Build Support" if you are building for an android device. Enable "iOS Build Support" if you are building for an iOS device (iPhone). You should also enable "Vuforia Augmented Reality Support" to support the AR project work.

  3. Complete the installation

 

If you run into any issues during the installation process, please feel free to put it in the comments section below and we would be happy to help you. Jump to Comments Section

 

Your first AR unity Project

  • • Launch Unity and sign in or create a new account and click on “New” to create a new project.
  • • Change the default project name. It doesn't matter what you call it but makes sure that the 3D option is selected and then click on “Create project”.

  • • A unity window will be opened and it will look something like this:

  • • In the left panel (Hierarchy), delete the default “Main Camera”. To do so, right-click on it and select “delete”. Or you can directly press “delete” key on your keyboard.

  • • To activate Vuforia in your Unity project, access the Build settings from File > Build Settings, then select the Player Settings, and select the tab for the mobile device you are building to. Under the XR Settings panel, enable the Vuforia Augmented Reality Support property
  • • To activate Vuforia in your Unity project, access the Build settings from File > Build Settings, then select the Player Settings, and select the tab for the mobile device you are building to. Under the XR Settings panel, enable the Vuforia Augmented Reality Support property.

  • • You need to add a new AR Camera in order to enable AR functionality. So let’s add an AR Camera to our project by clicking on GameObject > Vuforia > AR Camera.

  • • You will see a popup window like the one shown below, click on import. It will import assets required by Vuforia to your project.

  • •  Let’s add what is called a “target image”.

Augmented reality applications require some trigger target to start the AR animation. Your AR app will scan your camera screen and will look for that target, and will start its AR animation as soon as that target is detected. Some applications have a location-based trigger (GPS based) while others are activated by features of the physical scenery itself. Here we will rely on a 2D target image to reveal the digital content.

So in general, a target image is a specific image that you will want your camera to recognize to start your AR animation.

  • • To add a target image to our project, go to GameObject > Vuforia > Image.

  • • After adding image target, you will see something like below. If you do not see this, zoom a bit inside your scene, or double click on Image target object in Hierarchy panel on left side.

  • It is a default image that comes from the Vuforia core samples. We just want to confirm that our setup is working. So we will use this image for the time being.

Hovering Images over the Real-world target

  • • Right click on your Image target in the Hierarchy panel, Select 3D Object → Quad.

A quad is a 3D object which is useful in cases where a scene object must be used simply as a display screen for an image or movie.

  • • With the Quad selected, check the Transform fields in the Inspector. Typically you want the scale to be set to {1,1,1}. However, you can change these as per your requirement. Position, scale, rotation values are relative to its parent object. We have changed rotation in the x-direction by 90 to have a proper rotation with respect to Image target.

  • • Now drag the image which you want to overlay on the Image target in the resource section.

  • • Let's create a Material, First, right-click in the resources section area, Select Create > Material

The material contains the details to map a 2D texture onto a 3D model, it is like a font for text. You cannot see text if it doesn't have a font of some color.

A material can have multiple textures. A material can apply textures in different ways. Transparent, shiny, matte, and bumped appearances can all be achieved using the same textures in different materials

  • • Use your image as a texture map of this material. For that, with the material selected, drag your image into a box of Albedo in the inspector panel of the material

  • • Drag the Material onto the Quad

  • • Now we should test if our setup is working properly before going any further. To launch our project, click on the play button at the top of the window.

  • • If everything is set up properly, your image should appear when you point the image target to the laptop’s camera. You can either print the image target on paper or Like me, you can just take a picture of it on your phone and point your phone to your computer’s camera.

  • • To stop running the project, click again on the play button.

Create Your Image Target or any other Vuforia assets

  • • Visit the Vuforia Developer Portal and log in (or create a new account).

  • • Navigate to the License Manager in the Develop section and click the Get Development Key button to open the Add License Key page.

  • • On the Add License Key page, enter a name for your app. Accept the terms and conditions, then click the Confirm button to generate a new license key.

  • • Click on the name of your App to view the license details. This allows you to retrieve your development license key.

  • • Copy the license key to the clipboard and navigate back to your Unity Project.

  • • Click on AR Camera object in the right panel, click on the “Inspector” tab to see the configurations of the object.

  • • Paste your Vuforia Development key into the App License Key text box under the Vuforia section and then click the Add License button.

  • • Now, click on the “Target Manager” tab and click on “Add database” to start uploading your own assets.

 

  • • Create a database to start using your own assets.

  • • Once your database is created, click on the created database, that will bring you to the target list page for the database, where you can add new Targets and download the database in specific formats to use with several platforms. Click the Add Target button to open the Add Target popup window.

There are four different types of Targets you can add: Single Image, Cuboid/Box, Cylinder and 3D Object.

So select according to your requirement, currently, we are using Single Image so we will select the same.

The Width value is a scale value that you need to set to the size you want the image to appear in your Unity Scene (in real-world units). Unity measures everything in your Scene in relation to the size of your Target image. For this example, the width of the playing card is 5.5cm, so you would use 5.5cm as the Width value. If you need a larger size Target, then increase this Width.

  • • Enter a name for the Target image, and click the Add button to upload the Image Target to the database

 

  • • After adding target, your Target List will look something like below

 

Use any image, but make sure that the image has enough detail to be rated as a 5-star Target so that the camera can easily track it.

  • • Once you are satisfied with your image rating, select the checkbox at the left of the Image target name and click the Download Database button.

  • • For importing this package to Unity, double click on the downloaded file that will open z window like the one shown below. Click on “Import” to import the package.

  • • Then, click on the image target in the left panel, and, in the right panel, change the database dropdown from “VuforiaMars_Image” to the name of your custom database.

  • • Now you can use this Image Target as per your need, in this tutorial we will use this to play video and overlay image.

In the above section, we learned how to change the default Image Target to a custom Image Target. The rest of it remains the same.

So now, let's play videos on the real world target

  • • First, drag your video to the resources section

  • • Add 3d object “quad” to image target as a child object.

  • • Then, click on the Quad in the left panel, and, in the right panel, click on “add component”, and add video player.

  • • Now drag your video to video clip section of a video player

  • • When pressing play, you should be able to have your custom image tracked and see the video appear above it.

Testing on Android devices

  • • To build your project, go to File > Build Settings. Select Android and click on switch platform.

  • • Now go to “Player Settings” where you have to confirm that the “Vuforia Augmented Reality Supported” option is checked in XR Settings.

  • • You may also have to unselect the Android TV compatibility in the “Other Settings” dropdown that seems to be checked by default. Finally, you have to change the default package name.

  • • After this, you can go back to the Build Settings window and click “Build And Run”.

Your project should be built successfully!
  • • Apk file will be created in the project folder, transfer it to your phone, install it and launch the app on your Android device!

If you went through all these steps and you can test this basic app successfully on your device, you’re all set! You can now upload your own assets and build your own AR apps!

In this tutorial, we’ve only played with tracking images and learned to overlay images and videos on them!

Week 1 Task

Every week, we will challenge you to build engaging AR experiences by making use of what you have learned in the tutorial.

So this week‘s task is

Make a Newspaper AR Application 

  • • Implement a basic app that displays related digital content (video, images etc.) about an article when a photo in the article is scanned with the camera of a mobile device.

  • • The end result should look something like following

 

Upload a video of the above app on YouTube or Upload it on GitHub. And share the links in the comment section. If you want to make creative AR application using today’s learning, feel free to do so and Post your youtube video link or GitHub project link in the comment section. We will give a shout-out to the best application in next week’s blog post. Till then Happy Learning.

Hopefully, this was helpful and don’t hesitate to let us know if any of those steps don’t work anymore or if anything doesn’t make sense! Post your doubts in the comments section, we would be happy to help you.


We would love to hear your feedback and suggestions. Click here to provide your feedback so that we can improve the platform.

For more exciting content like this,  Signup now to stay updated!

Answer the Poll

Are you interested in making your own custom animation in AR?

Post your comments here

Please login to reply