SlideShare a Scribd company logo
LECTURE 10:
MOBILE AR
COMP 4010 – Virtual Reality
Semester 5 – 2017
Bruce Thomas, Mark Billinghurst
University of South Australia
October 19th 2017
1983 – Star Wars – Collaborative AR
1999 – Shared Space Demo
• Face to face collaborative AR like Star Wars concept
CPU: 300 Mhz
HDD; 9GB
RAM: 512 mb
Camera: VGA 30fps
Graphics: 500K poly/sec
1998: SGI O2 2008: Nokia N95
CPU: 332 Mhz
HDD; 8GB
RAM: 128 mb
Camera: VGA 30 fps
Graphics: 2m poly/sec
By 2008 phones had the same hardware as used in Shared Space demo
Mobile PhoneAR
• Mobile Phones
• camera
• processor
• display
• AR on Mobile Phones
• Simple graphics
• Optimized computer vision
• Collaborative Interaction
2005: Mobile AR version of Shared Space
• AR Tennis
• Shared AR content
• Two user game
• Audio + haptic feedback
• Bluetooth networking
Henrysson, A., Billinghurst, M., & Ollila, M. (2005, October). Face to face collaborative AR on
mobile phones. In Proceedings of ISMAR 2005. Proceedings. (pp. 80-89). IEEE.
ARTennis Demo
https://www.youtube.com/watch?v=HbsCqvzaRso
Mobile AR History
Evolution of Mobile AR
Wearable AR
Handheld
AR Displays
Camera phone
1995 1997 2001 2003 2004
Camera phone
- Self contained AR
Wearable
Computers
PDAs
-Thin client AR
PDAs
-Self contained AR
Camera phone
- Thin client AR
Handheld Displays
Tethered Applications
• Fitzmaurice Chameleon (1994)
• Rekimoto’s Transvision (1995)
• Tethered LCD
• PC Processing and Tracking
Example: AR Pad (Mogilev 2002)
Handheld AR Display
• LCD screen
• Camera
• SpaceOrb 3 DOF controller
• Peripheral awareness
• Viewpoint awareness
Demo: ARpad
• https://www.youtube.com/watch?v=kC4vTJHCwq4
Backpack AR: Touring Machine (1997)
• University of Columbia
• Feiner, MacIntyre, Höllerer, Webster
• Combines
• See through head mounted display
• GPS tracking
• Orientation sensor
• Backpack PC (custom)
• Tablet input
MARS View
• Virtual tags overlaid on the real world
• “Information in place”
PCI 3D Graphics Board
Hard Drive
Serial
Ports
CPU
PC104 Sound Card
PC104 PCMCIA
GPS
Antenna
RTK correction Antenna
HMD
Controller
Tracker
Controller
DC to DC
Converter
Battery
Wearable
Computer
GPS RTK
correction
Radio
Example self-built working
solution with PCI-based 3D graphics
Columbia Touring Machine
Backpack AR - Hardware
More Backpack/Wearable AR Systems
1997 Backpack AR
• Feiner’s Touring Machine
• AR Quake (Thomas)
• Tinmith (Piekarski)
• MCAR (Reitmayr)
• Bulky, HMD based
Demo: Trimble Backpack AR (2003)
https://www.youtube.com/watch?v=jL3C-OVQKWU
Mobile Phone Cameras
• 1997 Philip Kahn invents camera phone
• 1999 First commercial camera phone
Sharp J-SH04
Millions of Camera Phones
0
200
400
600
800
1000
1200
2002 2003 2004 2005 2006 2007 2008 2009 2010
DSC
Phone
Handheld AR – Thin Client
2001 BatPortal (AT&T Cambridge)
• PDA used as I/O device
• Wireless connection to workstation
• Room-scale ultrasonic tracking (Bat)
2001 AR-PDA (C Lab)
• PDA thin graphics client
• Remote image processing
• www.ar-pda.com
2003 ARphone (Univ. of Sydney)
• Transfer images via Bluetooth (slow – 30 sec/image)
• Remote processing – AR Server
•
•
Mobile Phone AR – Thin Client
Early Phone Computer Vision Apps
2003 – Mozzies Game - Best mobile game
Optical motion flow detecting phone orientation
Siemens SX1 – Symbian, 120Mhz, VGA Camera
2005 – Marble Revolution (Bit-Side GmbH)
Winner of Nokia's Series 60 Challenge 2005
2005 – SymBall (VTT)
Handheld AR – Self Contained
2003 PDA-based AR
• ARToolKit port to PDA
• Studierstube ported to PDA
• Mr Virtuoso AR character
• Wagner’s Invisible Train
• Collaborative AR
Demo: The Invisible Train
• https://www.youtube.com/watch?v=6LE98k0YMLM
Mobile Phone AR – Self Contained
2004 Mobile Phone AR
• Moehring, Bimber
• Henrysson (ARToolKit)
• Camera, processor, display together
2007 - First Mobile AR Advertising App
• Developed by HIT Lab NZ
• Txt message to download AR application (200K)
• See virtual content popping out of real paper advert
• Tested May 2007 by Saatchi and Saatchi
Demo: AR Advertising
https://www.youtube.com/watch?v=edTjuXcce_c
2008 - Location Aware Phones
Nokia NavigatorMotorola Droid
Mobile Hardware Sensors Available
• Camera (resolution, fps)
• Maker based/markerless tracking
• Video overlap
• GPS (resolution, update rate)
• Outdoor location
• Compass
• Indoor/outdoor orientation
• Accelerometer
• Motion sensing, relative tilt
Sensors Support Real World Overlay
• Tag real world locations
• GPS + Compass input
• Overlay graphics data on live video
• Applications
• Travel guide, gaming, advertising, etc
• Eg: Wikitude (www.wikitude.com)
• First mobile outdoor AR application
• iOS, Android based, Public API released
• Other early companies
• Layar, AcrossAir, Tochnidot, RobotVision, etc
Wikitude – www.wikitude.com
• Overlays Points of Interest on real world
• GPS, compass data
• Uses data feeds
• Flickr
• Wikipedia
• Google
• Web authoring
Layar – www.layar.com
2010 – Launch of Vuforia
• Qualcomm’s image based tracking library (now PTC)
• Computer vision tracking - marker, markerless
• Integrated with Unity 3D game engine
• 200,000+ downloads, 10,000+ apps developed
• http://www.vuforia.com/
Example Vuforia Applications
https://www.youtube.com/watch?v=Z567LhV_wsQ
2016: Pokemon GO
Killer Combo: brand + social + mobile + geo-location + AR
Pokemon GO Effect
• Fastest App to reach $500 million in Revenue
• Only 63 days after launch, > $1 Billion in 6 months
• Over 500 million downloads, > 25 million DAU
• Nintendo stock price up by 50% (gain of $9 Billion USD)
2017 - Release of ARKit/Arcore SDKs
• Visual/Inertial Tracking for mobile phones
• Combines camera + IMU input for robust hybrid tracking
• Very accurate relative tracking
• Easy integration with game engines
Demo: ARKit
https://www.youtube.com/watch?v=6xDyVBsBtX8
Mobile AR State of the Art
• Thousands of Mobile AR apps
• Number of users predicted to grow to 1 Billion by 2020
• Hardware available
• Phones, Tablets, Head mounted displays
• Software Tools
• Tracking: Vuforia, ARKit SDK, etc
• Authoring tools: Unity, AR Creator, Entiti, etc
• Rapidly Growing market
Mobile AR Browsers
COMP 4010 - Lecture10: Mobile AR
AR Browsers
• AR equivalent of web browser
• Request and serve up content
• Commercial outdoor AR applications
• Aurasma, Junaio, Layar, Wikitude, etc
• All have their own language specifications
• Wikitude – ARML
• Junaio – XML, AREL
Typical AR Browser Architecture
Example: Nokia City Lens (2015)
• Similar features to more recent AR Browsers
Demo: Nokia City Lens
https://www.youtube.com/watch?v=V69fYmpvQNI
AR	Penguin
Junaio AR Penguin Navigation
Demo: Junaio AR Penguin Navigation
https://www.youtube.com/watch?v=IK4-zPD_25U
How an AR Browser Works
Example: Junaio AR Browser Demos
https://www.youtube.com/watch?v=AS9vFMY-zdk
NOTE: Junaio has been discontinued, but other browsers work the same
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
Back-end Servers
Overall AR Browser Data Flow
Typical of mobile AR Browsers
Mobile AR Interface Design
Mobile AR Interface Guidelines
•Consider your user
•Follow good HCI principles
•Adapt HCI guidelines for handhelds
•Design to device constraints
•Design for Micro-Interactions
•Design for perceptual issues
•Use Design Patterns
Consider Your User
• Consider context of user
• Physical, social, emotional, cognitive, etc.
• Mobile Phone AR User
• Probably Mobile
• One hand interaction
• Short application use
• Need to be able to multitask
• Use in outdoor or indoor environment
• Want to enhance interaction with real world
Follow Good HCI Principles
• Provide good conceptual model/Metaphor
• customers want to understand how UI works
• Make things visible
• if object has function, interface should show it
• Map interface controls to customer s model
• infix -vs- postfix calculator -- whose model?
• Provide feedback
• what you see is what you get!
Adapting Existing Guidelines
• Mobile Phone AR
• Phone HCI Guidelines
• Mobile HCI Guidelines
• HMD Based AR
• 3D User Interface Guidelines
• VR Interface Guidelines
• Desktop AR
• Desktop UI Guidelines
Example: Apple iOS Interface Guidelines
• Make it obvious how to use your content.
• Avoid clutter, unused blank space, and busy
backgrounds.
• Minimize required user input.
• Express essential information succinctly.
• Provide a fingertip-sized target for all controls.
• Avoid unnecessary interactivity.
• Provide feedback when necessary
From: https://developer.apple.com/ios/human-interface-guidelines/
Applying Principles to Mobile AR
• Clean
• Large Video View
• Large Icons
• Text Overlay
• Feedback
AR vs. Non AR Design
• Design Guidelines
• Design for 3D graphics + Interaction
• Consider elements of physical world
• Support implicit interaction
Characteristics Non-AR Interfaces AR Interfaces
Object Graphics Mainly 2D Mainly 3D
Object Types Mainly virtual objects Both virtual and physical objects
Object behaviors Mainly passive objects Both passive and active objects
Communication Mainly simple Mainly complex
HCI methods Mainly explicit Both explicit and implicit
Maps vs. AR Browser View
• Google Maps
• 2D, mouse driven, text/image heavy, exocentric
• AR Browser
• 3D, location driven, simple graphics, egocentric
Design to Device Constraints
• Understand the platform and design for limitations
• Hardware, software platforms
• E.g. Handheld AR game with visual tracking
• Use large screen icons
• Consider screen reflectivity
• Support one-hand interaction
• Consider the natural viewing angle
• Do not tire users out physically
• Do not encourage fast actions
• Keep at least one tracking surface in view
Art of Defense Game
Handheld AR Constraints/Affordances
• Camera and screen are linked
• Fast motions a problem when looking at screen
• Intuitive “navigation”
• Phone in hand
• Two handed activities: awkward or intuitive
• Extended periods of holding phone tiring
• Awareness of surrounding environment
• Small screen
• Extended periods of looking at screen tiring
• In general, small awkward platform
• Vibration, sound
• Can provide feedback when looking elsewhere
Micro-Interactions
▪ Using mobile phones people split their attention
between the display and the real world
Time Looking at Screen
Oulasvirta, A. (2005). The fragmentation of attention in mobile
interaction, and what to do with it. interactions, 12(6), 16-18.
Dividing Attention to World
• Number of times looking away from mobile screen
Design for Micro Interactions
▪ Design interaction for less than a few seconds
• Tiny bursts of interaction
• One task per interaction
• One input per interaction
▪ Benefits
• Use limited input
• Minimize interruptions
• Reduce attention fragmentation
Mobile AR and Perception
• Creating the illusion that virtual images are
seamlessly part of the real world
• Must match real and virtual cues
• Depth, occlusion, lighting, shadows..
Mobile AR as Perception Problem
• Goal of AR to fool human senses – create illusion
that real and virtual are merged
• Depth
• Size
• Occlusion
• Shadows
• Relative motion
• Etc..
Possible Depth Cues
• Pictorial: visual cues
• Occlusion, texture, relative brightness
• Kinetic: motion cues
• Relative motion parallax, motion perspective
• Physiological: motion cues
• Convergence, accommodation
• Binocular disparity: two different eye images
Which of these POI are near or far?
Use Depth Cues
Information Presentation
• Consider
• The amount of information
• Clutter, complexity
• The representation of information
• Navigation cues, POI representation
• The placement of information
• Head, body, world stabilized
• Using view combinations
• Multiple views
Example: Twitter 360
• www.twitter-360.com
• iPhone application
• See geo-located tweets in real world
• Twitter.com supports geo tagging
But: Information Clutter from Many Tweets
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Solution: Information Filtering
Information Filtering
Before After
OutdoorAR:Limited FOV
• Show POI outside FOV
• Zooms between map and panorama views
Zooming Views
Demo: Zooming Views
• https://www.youtube.com/watch?v=JLxLH9Cya20
Design Patterns
“Each pattern describes a problem which occurs
over and over again in our environment, and then
describes the core of the solution to that problem in
such a way that you can use this solution a million
times over, without ever doing it the same way twice.”
– Christopher Alexander et al.
Use Design Patterns to Address Reoccurring Problems
C.A. Alexander, A Pattern Language, Oxford Univ. Press, New York, 1977.
Handheld AR Design Patterns
Title Meaning Embodied Skills
Device Metaphors Using metaphor to suggest available player
actions
Body A&S Naïve physics
Control Mapping Intuitive mapping between physical and
digital objects
Body A&S Naïve physics
Seamful Design Making sense of and integrating the
technological seams through game design
Body A&S
World Consistency Whether the laws and rules in
physical world hold in digital world
Naïve physics
Environmental A&S
Landmarks Reinforcing the connection between digital-
physical space through landmarks
Environmental A&S
Personal Presence The way that a player is represented in the
game decides how much they feel like living
in the digital game world
Environmental A&S
Naïve physics
Living Creatures Game characters that are responsive to
physical, social events that mimic behaviours
of living beings
Social A&S Body A&S
Body constraints Movement of one’s body position
constrains another player’s action
Body A&S Social A&S
Hidden information The information that can be hidden and
revealed can foster emergent social play
Social A&S Body A&S
*A&S = awareness and skills
Demo: Design Patterns
https://www.youtube.com/watch?v=3_3GlviyVN0
Example: Seamless Design
• Design to reduce seams in the user experience
• Eg: AR tracking failure, change in interaction mode
• Paparazzi Game
• Change between AR tracking to accelerometer input
Yan Xu , et.al. , Pre-patterns for designing embodied interactions in handheld augmented reality games,
Proceedings of the 2011 IEEE International Symposium on Mixed and Augmented Reality--Arts, Media,
and Humanities, p.19-28, October 26-29, 2011
Demo: Paparazzi Game
• https://www.youtube.com/watch?v=MIGH5WGMnbs
Example: Living Creatures
• Virtual creatures should respond to real world events
• eg. Player motion, wind, light, etc
• Creates illusion creatures are alive in the real world
• Sony EyePet
• Responds to player blowing on creature
Mobile AR Game Design
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
Demo: Roku’s Reward
https://www.youtube.com/watch?v=BUOHfVXkUaI
COMP 4010 - Lecture10: Mobile AR
COMP 4010 - Lecture10: Mobile AR
Research Directions
Research Directions
•Tracking
• Markerless tracking, hybrid tracking
•Interactions
• Displays, input devices, gesture
•Applications
• Collaboration
•Ubiquitous AR
• Mobile AR + Ubiquitous Computing
Project Tango
• Smart phone + Depth Sensing
• Sensors
• Gyroscope/accelerometer/compass
• 180º field of view fisheye camera
• An infrared projector.
• 4 MP RGB/IR camera
COMP 4010 - Lecture10: Mobile AR
Project Tango Overview
• https://www.youtube.com/watch?v=OsEgnIA8AD8
How it Works
• Sensors
• 4MP RGB/IR camera : can capture full color images and
detect IR reflections.
• IR Depth Sensor : Used to measure depths with IR pulse
• Tracking Camera : To track objects
• 3 Basic operations
• In real time can map depth of environment
• Measure depth accurately using IR pulse
• Create a 3D model of the environment real time
Applications
• Indoor tracking, games, disability, etc
Gestural interfaces
• 1. Micro-gestures
• (unistroke, smartPad)
• 2. Device-based gestures
• (tilt based examples)
• 3. Embodied interaction
• (eye toy)
Natural Gesture Interaction on Mobile
• Use mobile camera for hand tracking
• Fingertip detection
Remote Collaboration
• Mobile AR offers new types of remote collaboration
• E.g. Vuforia’s project chalk
• Virtual annotation of live video from remote collaboration
• Using SLAM tracking to space stabilize the annotations
Demo: Project Chalk
https://www.youtube.com/watch?v=C-7gXStKByE&t=29s
Vipaar Lime - https://www.vipaar.com/
• Remote collaboration on handheld
• Remote users hands appear in live camera view
Ubiquitous AR (GIST, Korea)
• How does your AR device work with other devices?
• How is content delivered?
CAMAR - GIST
(CAMAR: Context-Aware Mobile Augmented Reality)
Trend Towards Ubiquitous AR
Reality Virtual Reality
Terminal
Ubiquitous
Desktop AR VR
Milgram
Weiser
UbiComp
Mobile AR
Ubi AR
Ubi VR
Conclusions
Mobile AR
• Has a long history going back over 20+ years
• Current phones are powerful enough to create
compelling mobile AR experiences
• Wide range of sensors
• Tracking software such as ARKit/ARcore available
• Many useful design guidelines available
• Adapt existing mobile HCI guides, develop new guidelines
• Opportunities for future research
• Tracking, interaction, collaboration, etc.
www.empathiccomputing.org
@marknb00
mark.billinghurst@unisa.edu.au

More Related Content

COMP 4010 - Lecture10: Mobile AR

  • 1. LECTURE 10: MOBILE AR COMP 4010 – Virtual Reality Semester 5 – 2017 Bruce Thomas, Mark Billinghurst University of South Australia October 19th 2017
  • 2. 1983 – Star Wars – Collaborative AR
  • 3. 1999 – Shared Space Demo • Face to face collaborative AR like Star Wars concept
  • 4. CPU: 300 Mhz HDD; 9GB RAM: 512 mb Camera: VGA 30fps Graphics: 500K poly/sec 1998: SGI O2 2008: Nokia N95 CPU: 332 Mhz HDD; 8GB RAM: 128 mb Camera: VGA 30 fps Graphics: 2m poly/sec By 2008 phones had the same hardware as used in Shared Space demo
  • 5. Mobile PhoneAR • Mobile Phones • camera • processor • display • AR on Mobile Phones • Simple graphics • Optimized computer vision • Collaborative Interaction
  • 6. 2005: Mobile AR version of Shared Space • AR Tennis • Shared AR content • Two user game • Audio + haptic feedback • Bluetooth networking Henrysson, A., Billinghurst, M., & Ollila, M. (2005, October). Face to face collaborative AR on mobile phones. In Proceedings of ISMAR 2005. Proceedings. (pp. 80-89). IEEE.
  • 9. Evolution of Mobile AR Wearable AR Handheld AR Displays Camera phone 1995 1997 2001 2003 2004 Camera phone - Self contained AR Wearable Computers PDAs -Thin client AR PDAs -Self contained AR Camera phone - Thin client AR
  • 10. Handheld Displays Tethered Applications • Fitzmaurice Chameleon (1994) • Rekimoto’s Transvision (1995) • Tethered LCD • PC Processing and Tracking
  • 11. Example: AR Pad (Mogilev 2002) Handheld AR Display • LCD screen • Camera • SpaceOrb 3 DOF controller • Peripheral awareness • Viewpoint awareness
  • 13. Backpack AR: Touring Machine (1997) • University of Columbia • Feiner, MacIntyre, Höllerer, Webster • Combines • See through head mounted display • GPS tracking • Orientation sensor • Backpack PC (custom) • Tablet input
  • 14. MARS View • Virtual tags overlaid on the real world • “Information in place”
  • 15. PCI 3D Graphics Board Hard Drive Serial Ports CPU PC104 Sound Card PC104 PCMCIA GPS Antenna RTK correction Antenna HMD Controller Tracker Controller DC to DC Converter Battery Wearable Computer GPS RTK correction Radio Example self-built working solution with PCI-based 3D graphics Columbia Touring Machine Backpack AR - Hardware
  • 16. More Backpack/Wearable AR Systems 1997 Backpack AR • Feiner’s Touring Machine • AR Quake (Thomas) • Tinmith (Piekarski) • MCAR (Reitmayr) • Bulky, HMD based
  • 17. Demo: Trimble Backpack AR (2003) https://www.youtube.com/watch?v=jL3C-OVQKWU
  • 18. Mobile Phone Cameras • 1997 Philip Kahn invents camera phone • 1999 First commercial camera phone Sharp J-SH04
  • 19. Millions of Camera Phones 0 200 400 600 800 1000 1200 2002 2003 2004 2005 2006 2007 2008 2009 2010 DSC Phone
  • 20. Handheld AR – Thin Client 2001 BatPortal (AT&T Cambridge) • PDA used as I/O device • Wireless connection to workstation • Room-scale ultrasonic tracking (Bat) 2001 AR-PDA (C Lab) • PDA thin graphics client • Remote image processing • www.ar-pda.com
  • 21. 2003 ARphone (Univ. of Sydney) • Transfer images via Bluetooth (slow – 30 sec/image) • Remote processing – AR Server • • Mobile Phone AR – Thin Client
  • 22. Early Phone Computer Vision Apps 2003 – Mozzies Game - Best mobile game Optical motion flow detecting phone orientation Siemens SX1 – Symbian, 120Mhz, VGA Camera 2005 – Marble Revolution (Bit-Side GmbH) Winner of Nokia's Series 60 Challenge 2005 2005 – SymBall (VTT)
  • 23. Handheld AR – Self Contained 2003 PDA-based AR • ARToolKit port to PDA • Studierstube ported to PDA • Mr Virtuoso AR character • Wagner’s Invisible Train • Collaborative AR
  • 24. Demo: The Invisible Train • https://www.youtube.com/watch?v=6LE98k0YMLM
  • 25. Mobile Phone AR – Self Contained 2004 Mobile Phone AR • Moehring, Bimber • Henrysson (ARToolKit) • Camera, processor, display together
  • 26. 2007 - First Mobile AR Advertising App • Developed by HIT Lab NZ • Txt message to download AR application (200K) • See virtual content popping out of real paper advert • Tested May 2007 by Saatchi and Saatchi
  • 28. 2008 - Location Aware Phones Nokia NavigatorMotorola Droid
  • 29. Mobile Hardware Sensors Available • Camera (resolution, fps) • Maker based/markerless tracking • Video overlap • GPS (resolution, update rate) • Outdoor location • Compass • Indoor/outdoor orientation • Accelerometer • Motion sensing, relative tilt
  • 30. Sensors Support Real World Overlay • Tag real world locations • GPS + Compass input • Overlay graphics data on live video • Applications • Travel guide, gaming, advertising, etc • Eg: Wikitude (www.wikitude.com) • First mobile outdoor AR application • iOS, Android based, Public API released • Other early companies • Layar, AcrossAir, Tochnidot, RobotVision, etc
  • 31. Wikitude – www.wikitude.com • Overlays Points of Interest on real world • GPS, compass data • Uses data feeds • Flickr • Wikipedia • Google • Web authoring
  • 33. 2010 – Launch of Vuforia • Qualcomm’s image based tracking library (now PTC) • Computer vision tracking - marker, markerless • Integrated with Unity 3D game engine • 200,000+ downloads, 10,000+ apps developed • http://www.vuforia.com/
  • 35. 2016: Pokemon GO Killer Combo: brand + social + mobile + geo-location + AR
  • 36. Pokemon GO Effect • Fastest App to reach $500 million in Revenue • Only 63 days after launch, > $1 Billion in 6 months • Over 500 million downloads, > 25 million DAU • Nintendo stock price up by 50% (gain of $9 Billion USD)
  • 37. 2017 - Release of ARKit/Arcore SDKs • Visual/Inertial Tracking for mobile phones • Combines camera + IMU input for robust hybrid tracking • Very accurate relative tracking • Easy integration with game engines
  • 39. Mobile AR State of the Art • Thousands of Mobile AR apps • Number of users predicted to grow to 1 Billion by 2020 • Hardware available • Phones, Tablets, Head mounted displays • Software Tools • Tracking: Vuforia, ARKit SDK, etc • Authoring tools: Unity, AR Creator, Entiti, etc • Rapidly Growing market
  • 42. AR Browsers • AR equivalent of web browser • Request and serve up content • Commercial outdoor AR applications • Aurasma, Junaio, Layar, Wikitude, etc • All have their own language specifications • Wikitude – ARML • Junaio – XML, AREL
  • 43. Typical AR Browser Architecture
  • 44. Example: Nokia City Lens (2015) • Similar features to more recent AR Browsers
  • 45. Demo: Nokia City Lens https://www.youtube.com/watch?v=V69fYmpvQNI
  • 47. Demo: Junaio AR Penguin Navigation https://www.youtube.com/watch?v=IK4-zPD_25U
  • 48. How an AR Browser Works
  • 49. Example: Junaio AR Browser Demos https://www.youtube.com/watch?v=AS9vFMY-zdk
  • 50. NOTE: Junaio has been discontinued, but other browsers work the same
  • 62. Overall AR Browser Data Flow Typical of mobile AR Browsers
  • 64. Mobile AR Interface Guidelines •Consider your user •Follow good HCI principles •Adapt HCI guidelines for handhelds •Design to device constraints •Design for Micro-Interactions •Design for perceptual issues •Use Design Patterns
  • 65. Consider Your User • Consider context of user • Physical, social, emotional, cognitive, etc. • Mobile Phone AR User • Probably Mobile • One hand interaction • Short application use • Need to be able to multitask • Use in outdoor or indoor environment • Want to enhance interaction with real world
  • 66. Follow Good HCI Principles • Provide good conceptual model/Metaphor • customers want to understand how UI works • Make things visible • if object has function, interface should show it • Map interface controls to customer s model • infix -vs- postfix calculator -- whose model? • Provide feedback • what you see is what you get!
  • 67. Adapting Existing Guidelines • Mobile Phone AR • Phone HCI Guidelines • Mobile HCI Guidelines • HMD Based AR • 3D User Interface Guidelines • VR Interface Guidelines • Desktop AR • Desktop UI Guidelines
  • 68. Example: Apple iOS Interface Guidelines • Make it obvious how to use your content. • Avoid clutter, unused blank space, and busy backgrounds. • Minimize required user input. • Express essential information succinctly. • Provide a fingertip-sized target for all controls. • Avoid unnecessary interactivity. • Provide feedback when necessary From: https://developer.apple.com/ios/human-interface-guidelines/
  • 69. Applying Principles to Mobile AR • Clean • Large Video View • Large Icons • Text Overlay • Feedback
  • 70. AR vs. Non AR Design • Design Guidelines • Design for 3D graphics + Interaction • Consider elements of physical world • Support implicit interaction Characteristics Non-AR Interfaces AR Interfaces Object Graphics Mainly 2D Mainly 3D Object Types Mainly virtual objects Both virtual and physical objects Object behaviors Mainly passive objects Both passive and active objects Communication Mainly simple Mainly complex HCI methods Mainly explicit Both explicit and implicit
  • 71. Maps vs. AR Browser View • Google Maps • 2D, mouse driven, text/image heavy, exocentric • AR Browser • 3D, location driven, simple graphics, egocentric
  • 72. Design to Device Constraints • Understand the platform and design for limitations • Hardware, software platforms • E.g. Handheld AR game with visual tracking • Use large screen icons • Consider screen reflectivity • Support one-hand interaction • Consider the natural viewing angle • Do not tire users out physically • Do not encourage fast actions • Keep at least one tracking surface in view Art of Defense Game
  • 73. Handheld AR Constraints/Affordances • Camera and screen are linked • Fast motions a problem when looking at screen • Intuitive “navigation” • Phone in hand • Two handed activities: awkward or intuitive • Extended periods of holding phone tiring • Awareness of surrounding environment • Small screen • Extended periods of looking at screen tiring • In general, small awkward platform • Vibration, sound • Can provide feedback when looking elsewhere
  • 74. Micro-Interactions ▪ Using mobile phones people split their attention between the display and the real world
  • 75. Time Looking at Screen Oulasvirta, A. (2005). The fragmentation of attention in mobile interaction, and what to do with it. interactions, 12(6), 16-18.
  • 76. Dividing Attention to World • Number of times looking away from mobile screen
  • 77. Design for Micro Interactions ▪ Design interaction for less than a few seconds • Tiny bursts of interaction • One task per interaction • One input per interaction ▪ Benefits • Use limited input • Minimize interruptions • Reduce attention fragmentation
  • 78. Mobile AR and Perception • Creating the illusion that virtual images are seamlessly part of the real world • Must match real and virtual cues • Depth, occlusion, lighting, shadows..
  • 79. Mobile AR as Perception Problem • Goal of AR to fool human senses – create illusion that real and virtual are merged • Depth • Size • Occlusion • Shadows • Relative motion • Etc..
  • 80. Possible Depth Cues • Pictorial: visual cues • Occlusion, texture, relative brightness • Kinetic: motion cues • Relative motion parallax, motion perspective • Physiological: motion cues • Convergence, accommodation • Binocular disparity: two different eye images
  • 81. Which of these POI are near or far?
  • 83. Information Presentation • Consider • The amount of information • Clutter, complexity • The representation of information • Navigation cues, POI representation • The placement of information • Head, body, world stabilized • Using view combinations • Multiple views
  • 84. Example: Twitter 360 • www.twitter-360.com • iPhone application • See geo-located tweets in real world • Twitter.com supports geo tagging
  • 85. But: Information Clutter from Many Tweets Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
  • 89. • Show POI outside FOV • Zooms between map and panorama views Zooming Views
  • 90. Demo: Zooming Views • https://www.youtube.com/watch?v=JLxLH9Cya20
  • 91. Design Patterns “Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem in such a way that you can use this solution a million times over, without ever doing it the same way twice.” – Christopher Alexander et al. Use Design Patterns to Address Reoccurring Problems C.A. Alexander, A Pattern Language, Oxford Univ. Press, New York, 1977.
  • 92. Handheld AR Design Patterns Title Meaning Embodied Skills Device Metaphors Using metaphor to suggest available player actions Body A&S Naïve physics Control Mapping Intuitive mapping between physical and digital objects Body A&S Naïve physics Seamful Design Making sense of and integrating the technological seams through game design Body A&S World Consistency Whether the laws and rules in physical world hold in digital world Naïve physics Environmental A&S Landmarks Reinforcing the connection between digital- physical space through landmarks Environmental A&S Personal Presence The way that a player is represented in the game decides how much they feel like living in the digital game world Environmental A&S Naïve physics Living Creatures Game characters that are responsive to physical, social events that mimic behaviours of living beings Social A&S Body A&S Body constraints Movement of one’s body position constrains another player’s action Body A&S Social A&S Hidden information The information that can be hidden and revealed can foster emergent social play Social A&S Body A&S *A&S = awareness and skills
  • 94. Example: Seamless Design • Design to reduce seams in the user experience • Eg: AR tracking failure, change in interaction mode • Paparazzi Game • Change between AR tracking to accelerometer input Yan Xu , et.al. , Pre-patterns for designing embodied interactions in handheld augmented reality games, Proceedings of the 2011 IEEE International Symposium on Mixed and Augmented Reality--Arts, Media, and Humanities, p.19-28, October 26-29, 2011
  • 95. Demo: Paparazzi Game • https://www.youtube.com/watch?v=MIGH5WGMnbs
  • 96. Example: Living Creatures • Virtual creatures should respond to real world events • eg. Player motion, wind, light, etc • Creates illusion creatures are alive in the real world • Sony EyePet • Responds to player blowing on creature
  • 97. Mobile AR Game Design
  • 106. Research Directions •Tracking • Markerless tracking, hybrid tracking •Interactions • Displays, input devices, gesture •Applications • Collaboration •Ubiquitous AR • Mobile AR + Ubiquitous Computing
  • 107. Project Tango • Smart phone + Depth Sensing • Sensors • Gyroscope/accelerometer/compass • 180º field of view fisheye camera • An infrared projector. • 4 MP RGB/IR camera
  • 109. Project Tango Overview • https://www.youtube.com/watch?v=OsEgnIA8AD8
  • 110. How it Works • Sensors • 4MP RGB/IR camera : can capture full color images and detect IR reflections. • IR Depth Sensor : Used to measure depths with IR pulse • Tracking Camera : To track objects • 3 Basic operations • In real time can map depth of environment • Measure depth accurately using IR pulse • Create a 3D model of the environment real time
  • 111. Applications • Indoor tracking, games, disability, etc
  • 112. Gestural interfaces • 1. Micro-gestures • (unistroke, smartPad) • 2. Device-based gestures • (tilt based examples) • 3. Embodied interaction • (eye toy)
  • 113. Natural Gesture Interaction on Mobile • Use mobile camera for hand tracking • Fingertip detection
  • 114. Remote Collaboration • Mobile AR offers new types of remote collaboration • E.g. Vuforia’s project chalk • Virtual annotation of live video from remote collaboration • Using SLAM tracking to space stabilize the annotations
  • 116. Vipaar Lime - https://www.vipaar.com/ • Remote collaboration on handheld • Remote users hands appear in live camera view
  • 117. Ubiquitous AR (GIST, Korea) • How does your AR device work with other devices? • How is content delivered?
  • 118. CAMAR - GIST (CAMAR: Context-Aware Mobile Augmented Reality)
  • 119. Trend Towards Ubiquitous AR Reality Virtual Reality Terminal Ubiquitous Desktop AR VR Milgram Weiser UbiComp Mobile AR Ubi AR Ubi VR
  • 121. Mobile AR • Has a long history going back over 20+ years • Current phones are powerful enough to create compelling mobile AR experiences • Wide range of sensors • Tracking software such as ARKit/ARcore available • Many useful design guidelines available • Adapt existing mobile HCI guides, develop new guidelines • Opportunities for future research • Tracking, interaction, collaboration, etc.