Build an Augmented Reality Business Card Using Unity

Prerequisites:

Unity v2019.1.4 (Make Sure That You Have The Right Version)
Vuforia Support for Unity
iOS/Android Build Support (Optional, iOS Support requires macOS and the latest version of XCode
Unity Package and Targets Folder (Link Provided in the description)

Download Unity Package
Download Targets Folder

Setup Unity

1. First, after installing Unity Hub and opening we will click on “New”, we will select “3D” as a template, name the project and select its location. Then we click on “create”.
2. We go to where we have saved the file of the given design package “Assembly.unitypackage” and open the file.
3. We click on Import.
4. On the left under “Sample Scene”, we delete both “Main Camera” and ‘Directional Light” and Save.
5. We go to the “GameObject” tab and select “Vuforia Engine” and then “AR Camera”.
6. We left Click on “AR Camera” and then elect “Vuforia Engine” and then select “Image”. We would notice that we have “Image Target: added underneath AR Camera. Then we save.
7. Now we have to add a database so we go to https://developer.vuforia.com/vui/auth/register to register with your info then we say “create account”
8. You will have to verify your email address by clicking on the link sent to your email.
9. Now we login to https://developer.vuforia.com/vui/auth/login with the previously set email and password.
10. After getting logged in, we click “Get Development Key” and then proceed to “License Manager” where we will enter a License name we like and then check the box below and click “confirm”.
11. Now that we have a license created, we click on it and copy the given license key.
12. Then we go back to Unity and go to “Edit” tab, then “Project Settings”. Then we go down to “XR Settings and check the “Vuforia Augmented Reality Support” in all three tabs.
13. We then close that window and select “AR Camera” and on the right, we select “Open Vuforia Engine Configuration” and paste the hash we copied before under “App License Key”. Then we click “Add License”.
14. Now, we go back to Vuforia and select the “Target Manager” tab. We click on “Add Database”. We give it a name and check Type “ Device” then click “create”.
15. Then we download the “Targets” file from github on this link https://github.com/The-Assembly/Augmented-Reality-Business-Card/tree/master/Targets
16. Now that we have created a database, we have to add targets. We click on it and then select “Add Target”.
17. We then Select Type “Single Image”. We browse to “Assembly.jpg”. Then we say width is “1” and select “Add”.
18. Then we add our 2nd Target following the same steps but choosing “Untitled-1.jpg” instead.
19. Then we add our 3rd Target by Selecting Type “3D Object” and browsing to “7gc.od” and then clicking “Add”.
20. Now that we have our database with our targets, we select “Download Database All” and then check “Unity Editor”. Then select “Download”.
21. We open the file we just downloaded and select “Import”.

Sirius Black Poster

The Harry Potter Franchise has always been a favorite of many and so is their animated Daily Wizards Newspaper “Daily Prophet”. For this reason, we will be showing how to create such a poster using Unity where you could bring newspaper images to life with Augmented Reality Technology.

1. Go to “Image Target” and then “Image Target Behaviour”. Then Select the database we named before and then “untitled-1.jpg” as Image Target.
2. Now we select “ Image Target” and then “3D Object” then “Quad”.
3. Now we go to “Transform” tab on the right and then “Rotation” and write “90” in the x-axis.
4. Now we scale he quad down into sirus black image size.
5. Now we go to “Add Component” in “Quad” and select “Video Player”
6. Then we go to “Assets” and then “Videos” and drag the Sirus black video to the “Video Clip” tab.
7. Then we go to Assets  Vuforia  Scripts  DefaultTrackableEventHandler.cs and open it.
8. We alter the code by adding at the top “ using UnityEngine.Video; ”
9. Then we go to the “On Tracking Lost ()” method and add a line at the end with “mTrackableBehaviour.gameObject.GetComponentInChildren().Stop();”
10. Then we go to the “On Tracking Found ()” method and add a line at the end with “mTrackableBehaviour.gameObject.GetComponentInChildren().Play();”

AR Business Card

The humble business card has always been a simple but effective tool for professional networking, yet the advent of technology threatens to render it obsolete in a paperless, online world. However, technology itself may provide a reprieve with the possibility of supercharging your card with augmented reality experiences. The card no longer needs to be restricted to simple textual information, instead becoming a real world anchor for all sorts of media and interactivity to breathe life into your profile - accessible on the fly and on demand. In this workshop, we’ll show you how to use Unity & Vuforia to turn a simple printed card into a mixed reality portal for a wide array of interactive features including video and 3D animation - all over layed on top of your card as viewed through the app.

1. Under “AR Camera”, we create an “Image Target”.
2. We go to image Target and select the previously created database and ‘Assembly” as Target
3. Then we add 3D Object  Cylinder and scale it as x=1 and z=0.7.
4. Now we go to Business Card Folder and select a photo and drop it in the cylinder
5. Then we copy paste 5 cylinders and paste their pictures inside.
6. Now we add 3D Object  Quad and then rotate it 90 degrees in the x-axis direction.
7. We then select the user avatar and drop it in the quad
8. Then we add 3D Object Text (Text Mesh Pro)
9. We go to Window  Text Mesh Pro and Import both “TMP Essential Resources” & “TMP Examples and Extras”.
10. We select Font size as “1.5” and Fill in User Details such as “Name” and “Address”
11. Now we go to the “Assets” folder and create a folder named “Scripts”. Then inside the folder, we create a “C# Script” and rename it according to what we want. For Example : “Instagram”.
12. Then we open the script and delete methods “Start()” and “Update()”
13. Now, we add method “OnMouseDown()” and add this line “Application.OpenURL();” where we paste the link of the wanted social media platform between the ().
14. Then we pick the script and drop it in “Add Component” for that object.
15. We repeat the same steps above for the rest of the social media links.

Object Recognition using Vuforia

Similar to 2D image recognition, Vuforia supports 3D object recognition. The required target (object) could be scanned using Object Scanner app provided by Vuforia for Android. For this workshop, since the Object Scanner app is exclusive for Android, a scanned object is provided. We need to add this object to the Targets database online similar to how we added the image targets.

1. We select AR Camera  Vuforia Engine  3D Scan
2. We make sure that the Target is 66.od
3. Then we include the controls from the business card under ObjectTarget.
4. Set the position of the objects to 0 so that it would be placed close to the object target and then adjust the placement according to your requirement.

Exporting into an App

To export the whole scene into an application, we follow these steps:

1. We go to file  Build Settings
2. Then we select “Add Open Scenes”
3. Then we select the preferred platforms. In this case it’s iOS or Android.
4. Now we select “Switch Platform” and then select “Build and Run”.

Note: for iOS exporting, you need to have the latest version of XCode but for Android Exporting, it won’t be an issue.