Week 7. Creating AR using Unity & Vuforia

Moving on from Arduino, this week we learned how to use Unity and Vuforia to create augmented reality (AR). The process is quite complicated so it is important to follow each step one by one.

  1. Download Unity
    – Unity for personal use is free.
    – During installation, make sure to check boxes for all relevant additions. (Mac users check IOS-related ones. MUST check Vuforia.)
    – Need to make an account or connect with Google/Facebook to access Unity.
    Screen Shot 2017-11-04 at 5.27.40 PM
  2. Create a Developer’s Account for Vuforia
    – To do this, visit the Vuforia Developer Portal.
    – Click “Register” on the top right corner of the page and create account.
    Screen Shot 2017-11-04 at 5.27.30 PM
    Screen Shot 2017-11-04 at 5.48.07 PM
  3. Create License Key for Application
    – Click on “Get Development Key”.
    – Name the license key whatever you want, check the box and then click “Confirm”.
    Screen Shot 2017-11-04 at 6.03.51 PMScreen Shot 2017-11-04 at 6.04.08 PM.png
  4. Afterwards, click on “Target Manager” and add database
    – Click “Add Database”, name your database whatever you want, set type as “Device” and then create.
    Screen Shot 2017-11-04 at 6.16.31 PMScreen Shot 2017-11-04 at 6.13.41 PM.png
  5. Add Target
    – Click on the newly made database (in this case ARARAR).
    – Press “Add Target” and upload an image.
    – For maximum usability, make sure that the image is in JPEG format, RGB color and is less than 2MB.
    – Set the width as 50 (does not really matter but 50 is a good number).
    – Name it whatever you want and then click “Add” (in this case I named it rocks).
    Screen Shot 2017-11-04 at 6.27.28 PM.pngScreen Shot 2017-11-04 at 6.27.38 PM.png

    Screen Shot 2017-11-04 at 6.29.26 PM.png

    Screen Shot 2017-11-04 at 6.29.35 PM.png

  6. Double Check the Target
    – For maximum experience, make sure that the image rating is 5 stars.
    – Vuforia prefers high contrast images, so click on the target, press “Show Features” and see if the image has many yellow dots (indicating that it is high contrast).
    Screen Shot 2017-11-04 at 6.42.52 PM.pngScreen Shot 2017-11-04 at 6.43.06 PM
    Screen Shot 2017-11-04 at 6.43.09 PM
  7. Download Database
    – Select target and click “Download Database”.
    – When downloading, make sure to set the development platform as “Unity Editor”.
    – It will be downloaded as a Unity Package.
    Screen Shot 2017-11-04 at 6.52.20 PM.pngScreen Shot 2017-11-04 at 6.50.48 PM.png

    Now moving on to Unity…!

  8. Open Unity and Create a New Project
    – Make sure to set the project as 3D and to disable unity analytics.
    – You are creating a folder, not a single file!
    Screen Shot 2017-11-04 at 6.59.10 PM
    Screen Shot 2017-11-04 at 7.11.06 PM
    Screen Shot 2017-11-04 at 7.18.35 PM.png
  9. Switch Platform
    – Go to File → Build Settings → IOS → Switch Platform.
    – Make sure to check “Symlink Unity libraries”.
    Screen Shot 2017-11-04 at 7.42.22 PM.png
    Screen Shot 2017-11-04 at 7.44.21 PM.png
  10. Change Player Settings
    – After switching the platform, click on “Player Settings”. This will reveal a tab on the right.
    – Set “Company Name” and “Product Name”.
    – Go to “XR Settings” at the bottom of the tab and check “Vuforia Augmented Reality Supported”.
    Screen Shot 2017-11-04 at 7.54.57 PM
    Screen Shot 2017-11-04 at 7.59.28 PM.png
  11. Import Image Database Package
    – Close the “Build Settings” window.
    – Go to Assets → Import Package → Custom Package.
    – Select the pre-downloaded image database package and import.
    – Make sure that the package components are present (e.g. the image uploaded).
    Screen Shot 2017-11-04 at 8.12.47 PMScreen Shot 2017-11-04 at 8.12.54 PMScreen Shot 2017-11-04 at 8.13.21 PM
  12. Download 3D Model
    – Click “Asset Store”.
    – Search / Filter for a 3D model you want to use and import it (In this case, we used “Cute Kitten”).
    – Click “Import” once more when a sub-window pops up.
    – After the 3D model has been imported, make sure that all the components are present.
    Screen Shot 2017-11-04 at 10.37.45 PMScreen Shot 2017-11-04 at 10.38.30 PMScreen Shot 2017-11-04 at 10.38.41 PMScreen Shot 2017-11-04 at 10.40.49 PM
  13. Add AR Camera
    – Delete “Main Camera” placed on the left tab of the application.
    – Click GameObject → Vuforia → AR Camera and import it.
    Screen Shot 2017-11-04 at 10.50.23 PMScreen Shot 2017-11-04 at 10.50.48 PMScreen Shot 2017-11-04 at 10.50.53 PM
  14. Add Vuforia License
    – Copy the License Key from Vuforia website under personal developer portal.
    – Click ARCamera → Vuforia Behaviour → Open Vuforia Configuration.
    – Paste the License Key into “App License Key” (No need to press “Add License”).
    Screen Shot 2017-11-04 at 11.02.08 PMScreen Shot 2017-11-04 at 11.02.18 PMScreen Shot 2017-11-04 at 11.00.59 PMScreen Shot 2017-11-04 at 11.01.06 PMScreen Shot 2017-11-04 at 11.03.32 PM
  15. Activate Datasets
    – Do not forget to activate the dataset by checking the box “Load ARARAR Database” and “Activate” (In other cases, the name of the database will be different).
    Screen Shot 2017-11-04 at 11.08.04 PM.png
  16. Add Database Image
    – Click GameObject → Vuforia → Image.
    – From the tab on the right, select the correct database (It is ARARAR in this case, but can be different for others).
    – Check if the image created is the same as the one you uploaded onto Vuforia.
    Screen Shot 2017-11-04 at 11.13.35 PMScreen Shot 2017-11-04 at 11.14.02 PMScreen Shot 2017-11-04 at 11.14.20 PM
  17. Add 3D Model
    – Drag “KittenNPC”, which is under Assets → Kitten → Prefabs, onto the image.
    – Set the x-y-z position as 0-0-0.
    – Make sure to enlarge the model to your preference by using the toggles / scale.
    – Also, check the left tab and place the “KittenNPC” under “Image Target”.
    Screen Shot 2017-11-04 at 11.21.16 PMScreen Shot 2017-11-04 at 11.22.46 PMScreen Shot 2017-11-04 at 11.25.14 PM
  18. Play AR
    – Click on the play button and see what you get when you place the image in front of your camera!

    giphy (28)

The above is what you should be getting!

It will probably take some practice to get everything perfect at once, but it really is worth a try. Since it was my first time making an AR, I had a few obstacles I had to overcome but it was really satisfying in the end!

This was it for Week 7! 🙂

 

Leave a comment