Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Design for AR &
Build an AR app
Version 2.0
Kumar Ahir - Jul 18
About myself
@kernel_kumar
kumar.ahir@gmail.com
Interior
Designer
Questions
AR for disabled
AR/VR without devices
AR for wearables
Handy AR hardware for explorations
Building AR mockup
Content
Difference between AR and VR and XR
Devices - Hardware
Applications - Consumer and Business
Technology standards
D...
VR | AR | MR | XR
Virtual Augmented Mixed Extended
Virtual
Immersive
Block the real world
Teleport to a new world and time
Part of simulation
Augmented
Overlay information
V...
Design Fundamentals Mobile AR
Single Hand use
Still a WINDOW - you can move around
3d in Flat screen
Interactions attached...
Design Fundamentals Mobile AR
Interactions and information based on Proximity
Portals - door to VR
Minimal animation which...
Everything is placed on a reference Plane
User onboarding every time for first 10 times
Tap
Swipe
Pinch
Voice
Facial expressions (ARKit)
Phone Gestures - Shake/Tilt
Air Gesture - Hand
Interactions
Technology
Unity
ARCore
ARKit
Vuforia
Marker based
Markerless
2D Image Tracking
Environment scanning
3d Object perception
...
Let’s Create !
Vuforia
Unity
Photoshop
We’ll create a marker based AR
experience using Vuforia SDK and
Unity Game Engine.
...
How marker based AR works
Mobile
Device
World Image
Image
captured by
camera
Database of
Images in
Software
Software conti...
Setting up Vuforia
Go to https://developer.vuforia.com/ and register yourself
Once registered, login to the portal and you...
Creating License
The created license key is a long list of alphanumeric characters.
We will use this license key in later ...
Adding Target Database
Database is collection of images that are used as target
Target is an image that the application wi...
Features of the target image
When downloading
database make sure to
select Unity Editor as we are
working in Unity and the
database will be
downloaded ...
Now time to work in Unity
Download latest version of Unity from
https://unity3d.com/get-unity/download
For this tutorial a...
When downloading make sure to check Android Build
Support and iOS Build support depending on what
device framework you wan...
Learn more about Unity Development environment at below link
https://unity3d.com/learn/tutorials/topics/interface-essentia...
Open Unity and Create a new project
Select 3d Template. Since we are going to deal
with 3d environment.
Specify the locati...
Default Camera and Light
Unity IDE on creating a new project
Default Sample Scene.
If you do Ctrl+S (windows)
it will save...
Setup project for publishing it for AR environment
Open Build settings from File->Build Settings
Open Player Settings and ...
Scene Main Camera
Remove default Main Camera from scene by first selecting and then hit Delete button (on keyboard)
We nee...
Vuforia AR Camera
Add Vuforia AR Camera to scene
On adding Unity will import packages for Vuforia
Add Database marker created in Vuforia developer portal
Import custom package and browse to folder where database marker u...
Database marker file
unitypackage
On selecting the file, it will
ask for Import. Just click
import button. Make sure
every...
Vuforia AR Camera
Setup Vuforia configuration
Select AR Camera in Project hierarchy panel to open its Property Inspector i...
Add License key and check for marker database
Remember creating a license key in Vuforia developer portal? Time to use it ...
Test the app and ARCamera
Play button to test the app
My finger is on camera so this space
is blank. You should see yourse...
Add a GameObject to hold the marker image
This is just for reference to place augmented information around it.
Remember in...
Set up image target
Image Target in scene
Marker database and image
You added this in developer
portal and then downloaded...
Set up image target
Click in Scene area and hit “F” key. This will focus on the selected GameObject.
Make sure you have se...
Time to add some augmented data around marker
Right click on Image Target and browse to Cube. This will add a cube in scen...
Layouting the augmented data
By default the cube dimension is 1mtr. So you can change the scale parameter to adjust it acc...
Add more 3d
Gameobject to make a
complex scene
Time to test the camera
Hit play button to start the camera, now when you bring the marker infront of camera
you’ll see th...
Let’s Design
Let’s create
We are hiring
Front End Developer
Virtual Reality Programmers
3d Artist
UI Designer
UX Researcher
Flexible work hours
Equi...
Kumar Ahir
kumar.ahir@gmail.com
@kernel_kumar
Reach out to me for any doubts or
help
Am open for project collaboration
If ...
Resources
AR in Action - Youtube channel
references
Finding FOV the easy way - http://doc-ok.org/?p=1274
https://www.blog.google/products/google-ar-vr/best-practic...
Build an AR app v2.0
Build an AR app v2.0
Build an AR app v2.0
Build an AR app v2.0
Build an AR app v2.0
Upcoming SlideShare
Loading in …5
×

Build an AR app v2.0

554 views

Published on

This is the second version of Build an AR app presentation. It gives a detailed step by step guide on building a complete AR app from scratch using Vuforia

Published in: Design
  • Be the first to comment

Build an AR app v2.0

  1. 1. Design for AR & Build an AR app Version 2.0 Kumar Ahir - Jul 18
  2. 2. About myself @kernel_kumar kumar.ahir@gmail.com
  3. 3. Interior Designer
  4. 4. Questions AR for disabled AR/VR without devices AR for wearables Handy AR hardware for explorations Building AR mockup
  5. 5. Content Difference between AR and VR and XR Devices - Hardware Applications - Consumer and Business Technology standards Design fundamentals Let’s do it !!!
  6. 6. VR | AR | MR | XR Virtual Augmented Mixed Extended
  7. 7. Virtual Immersive Block the real world Teleport to a new world and time Part of simulation Augmented Overlay information View the real world Present in time and space Part of real world
  8. 8. Design Fundamentals Mobile AR Single Hand use Still a WINDOW - you can move around 3d in Flat screen Interactions attached to world UI and not flat screen Prompt to move around Visual affordances to interactive elements
  9. 9. Design Fundamentals Mobile AR Interactions and information based on Proximity Portals - door to VR Minimal animation which are grounded to plane Add Text with background - solid or translucent Feedback - sound, haptics Embed a story, not just 3d popup
  10. 10. Everything is placed on a reference Plane User onboarding every time for first 10 times
  11. 11. Tap Swipe Pinch Voice Facial expressions (ARKit) Phone Gestures - Shake/Tilt Air Gesture - Hand Interactions
  12. 12. Technology Unity ARCore ARKit Vuforia Marker based Markerless 2D Image Tracking Environment scanning 3d Object perception Face AR Body AR
  13. 13. Let’s Create ! Vuforia Unity Photoshop We’ll create a marker based AR experience using Vuforia SDK and Unity Game Engine. The app will work in Desktop To publish an android you’ll need Android SDK and JDK also installed
  14. 14. How marker based AR works Mobile Device World Image Image captured by camera Database of Images in Software Software continuously compares captured image with database and creates reference orientation mesh aligning the orientation of image in world space App Software running in background
  15. 15. Setting up Vuforia Go to https://developer.vuforia.com/ and register yourself Once registered, login to the portal and you’ll see a dashboard as shown You can create a free license key for test and development purpose License Manager manages license keys to be used while testing and publishing the app in Unity. This is an authentication mechanism. You can use the same license across different applications in test mode. However for publishing to app store, you’ll need to create different license for each app Target Manager manages the target images which the app will match with the live camera feed. These images are downloaded and embedded in the app at the time of creating the app
  16. 16. Creating License The created license key is a long list of alphanumeric characters. We will use this license key in later steps
  17. 17. Adding Target Database Database is collection of images that are used as target Target is an image that the application will compare live camera feed with to find a match in the real world The image should be such that it has got enough detailing to be able to recognize in real world The rating shows how good are the features in the image Once all the target images are uploaded, check all and click on download database. This download as unity package file with .unitypackage file extension
  18. 18. Features of the target image
  19. 19. When downloading database make sure to select Unity Editor as we are working in Unity and the database will be downloaded as Unity Package
  20. 20. Now time to work in Unity Download latest version of Unity from https://unity3d.com/get-unity/download For this tutorial am using 2018.1.1f1 version
  21. 21. When downloading make sure to check Android Build Support and iOS Build support depending on what device framework you want to publish your app to Have taken this screenshot from internet hence it’s showing version as 5.3.1f1, however we need to have latest version. For this tutorial I have used 2018.1.1f1 Vuforia comes as part of Unity in its latest builds.
  22. 22. Learn more about Unity Development environment at below link https://unity3d.com/learn/tutorials/topics/interface-essentials/editor-basics Project hierarchy Project folder Project assets/resources Property panel of Selected Object Visual representation of 3d scene Buttons to test the application Very basic understanding of Unity IDE
  23. 23. Open Unity and Create a new project Select 3d Template. Since we are going to deal with 3d environment. Specify the location where you want to save your project
  24. 24. Default Camera and Light Unity IDE on creating a new project Default Sample Scene. If you do Ctrl+S (windows) it will save the current scene
  25. 25. Setup project for publishing it for AR environment Open Build settings from File->Build Settings Open Player Settings and browse to XR Settings Tab and select Vuforia Augmented Reality Player Settings Button Player Settings Panel
  26. 26. Scene Main Camera Remove default Main Camera from scene by first selecting and then hit Delete button (on keyboard) We need a camera that supports AR (basically a Camera object provided by Vuforia) Vuforia comes as part of Unity in its latest builds. If not you can search for Vuforia Unity sdk and download and install
  27. 27. Vuforia AR Camera Add Vuforia AR Camera to scene On adding Unity will import packages for Vuforia
  28. 28. Add Database marker created in Vuforia developer portal Import custom package and browse to folder where database marker unitypackage is downloaded
  29. 29. Database marker file unitypackage On selecting the file, it will ask for Import. Just click import button. Make sure everything is selected
  30. 30. Vuforia AR Camera Setup Vuforia configuration Select AR Camera in Project hierarchy panel to open its Property Inspector in right side panel In inspector panel look for “Open Vuforia configuration”
  31. 31. Add License key and check for marker database Remember creating a license key in Vuforia developer portal? Time to use it now. Go to portal copy the license key and paste it in the App license key box Also check the marker database file you just imported is present in configuration panel Vuforia App license key Refer page 21 Do not click on Add License Marker database
  32. 32. Test the app and ARCamera Play button to test the app My finger is on camera so this space is blank. You should see yourself if your laptop/desktop camera is on and pointing you !
  33. 33. Add a GameObject to hold the marker image This is just for reference to place augmented information around it. Remember in Unity all units are in meters. You specified width (in mtrs) for your marker image in developer portal My finger is on camera so this space is blank. You should see yourself if your laptop/desktop camera is on and pointing you !
  34. 34. Set up image target Image Target in scene Marker database and image You added this in developer portal and then downloaded as unitypackage and then imported to Unity
  35. 35. Set up image target Click in Scene area and hit “F” key. This will focus on the selected GameObject. Make sure you have selected ImageTarget and then click in scene area and hit “F” key to focus on Image Target Image Target in scene
  36. 36. Time to add some augmented data around marker Right click on Image Target and browse to Cube. This will add a cube in scene as child of Image Target
  37. 37. Layouting the augmented data By default the cube dimension is 1mtr. So you can change the scale parameter to adjust it according to the marker dimension and also change its position with respect to marker Cube scale Quick tools for Position Rotation scale
  38. 38. Add more 3d Gameobject to make a complex scene
  39. 39. Time to test the camera Hit play button to start the camera, now when you bring the marker infront of camera you’ll see the object you added around the marker image That’s all we need. You can go ahead create an interesting 3d model around marker image and create an AR experience. Research a bit on adding external 3d model to the scene to make a richer experience You can download models from poly.google.com or turbosquid.com
  40. 40. Let’s Design
  41. 41. Let’s create
  42. 42. We are hiring Front End Developer Virtual Reality Programmers 3d Artist UI Designer UX Researcher Flexible work hours Equity options Monthly Team activity Lucrative package
  43. 43. Kumar Ahir kumar.ahir@gmail.com @kernel_kumar Reach out to me for any doubts or help Am open for project collaboration If you have an interesting idea and need a PoC developed, am happy to help
  44. 44. Resources AR in Action - Youtube channel
  45. 45. references Finding FOV the easy way - http://doc-ok.org/?p=1274 https://www.blog.google/products/google-ar-vr/best-practic es-mobile-ar-design/ https://code.likeagirl.io/design-lessons-from-mobile-ar-experiments-b32ea3f42bb https://uxdesign.cc/the-principles-of-good-user-experience-design-for-augmented-reality-d8e22777 aabd

×