Understand the Extended reality spectrum, elements of and XR experience and step by step guide to create an AR experience using SparkAR studio of Facebook

1. Design and Create
AR experiences
with no code
15-Feb-2020
Kumar Ahir
AR, VR Designer
Entrepreneur
Powered by HelloMeets

2. Part 1 - Intro to AR
Understand the XR spectrum
Types of AR
Industry case studies
Tools for AR
Content for AR

3. Part 2 - SparkAR and experience
SparkAR IDE
Hands on creating AR experiences

4. Towards
HyperReality
Keichii Matsuda

5. Your experience with different realities?
What do you know of AR and VR?
Where and how have you experienced it?

9. Basic elements of XR
● Field of View
● Degrees of Freedom
● World Interaction

13. Magicverse
With each device
sensing, capturing
and storing the 3d
space it’s possible to
create a cloud of
Spatial maps leading
a Magicverse

16. Medium for Digital content

17. The XR Spectrum - AR, VR, MR

18. Types of AR

19. Marker based AR
Image Pattern
Face
Body

20. Markerless AR
Local Environment
Spatial tagged
Geo Tagged

21. Markerless AR
Surface detection
SLAM
Ambient light
Spatial Geometry
GPS

22. AR/MR headsets

24. Content for XR

25. Content for XR
● 360 photo/video – 360
cameras
● 3D renders – like games

26. Content for XR
● Stereoscopic 3d
photo/video –
photogrammetry
● DisplayLand app

27. Industry case studies
Training and Simulation - Healthcare, Manufacturing, Defense
Remote support and Diagnostics - IT, Healthcare
Visualizations - Architecture, Interior, Marketing, E-commerce
Gaming

30. Face filters
Surface detection
SLAM
Ambient light
Spatial Geometry
GPS

32. Tools for AR creation
Browser based – Plugxr.com, Assemblr.com, Blippar.com
Mobile based – PaintSpace, Torch3d
Desktop based – SparkAR, Lens studio, Unity, Ottifox

33. Content for AR
Images
3D models - low and hi poly
Where to get 3d models for the AR creation?
Tools to create 3d models

34. Let’s create

35. SparkAR
What is it?

37. We will start
with a simple
project
template of
Face decoration

38. SparkAR IDE
1. Toolbar
2. Scene
3. Assets
4. Properties
5. View
6. Interactions
7. Patch Editor
8. Publish
1
2
3
4
5
8
7
6

39. SparkAR IDE – handling the view
1. Pan – Alt+Mouse or Middle Mouse
2. Rotate – Ctrl/Cmd + Mouse
3. Zoom – Middle Mouse or Gesture

40. Publish the first Face filter
● Open SparkAR app on mobile
● Connect the mobile to laptop
● Click Test on Device
● Send

41. Let’s Create
our own
first face filter

42. Steps
● Create New project
● Add Face tacker to camera
● Asset – image (Import from computer)
● Add Asset – material – select the image/texture
● Add Plane to Face tracker
● Add material to the Plane
● Import more assets(images) and Add to the face tracker
● Send to device and experiment

43. Share your creations
don’t forget to tag
Hellomeets
Kumar Ahir

44. Thank you
reach out to me at
kumar.ahir@gmail.com
twitter.com/@kernel_kumar
linkedin.com/in/kumarahir
And read my articles on XR and Design on Medium