LECTURE 4:
MOBILE AR BROWSERS
Mark Billinghurst
mark.billinghurst@unisa.edu.au
Zi Siang See
zisiang@reina.com.my
November ...
Nokia City Lens
•  More recent AR Browser
AR Browsers
• AR equivalent of web browser
• Request and serve up content
• Commercial outdoor AR applications
• Junaio, L...
Architecture
AR Browsers
• Layar (defunct)
• http://www.layar.com/
• Wikitude
• http://www.wikitude.com/
• Aurasma
• http://www.aurasma...
JUNAIO BROWSER
www.junaio.com
•  AR browser developed by Metaio for iOS/Android
•  Popular with many advanced features
The Junaio Platform
Key Features
•  Content provided in information channels
•  Over 2,000 channels available
•  Two types of AR channels
•  G...
Junaio Interface (Location Based)
AR Tag
Search
Icon
Scan
Mode
Radar
Display
Current
Channel
Labels
Selecting anARTag
•  Selecting a POI shows more information
MultipleViews
•  SelectView Mode to see different views
AR (Live) View
Map/List View
GlueTracking - Markerless
•  Search for “instant scan”
AR	
  Penguin	
  
	
  
More	
  info:	
  h+p://junaio.wordpress.com/2013/07/01/penguin-­‐navi/	
  	
  
	
  	
  
	
  
	
  	
...
Tamaris	
  
	
  
More	
  info:	
  h+p://junaio.wordpress.com/2013/09/25/tamaris-­‐uses-­‐junaio-­‐to-­‐promote-­‐their-­‐n...
AUDI	
  R8	
  
	
  
Video:	
  
h+p://www.youtube.com/watch?
v=pJURQLsKH8w&list=PL6EEF2EABDC41CA8D&index=18	
  	
  
	
  	
 ...
HOW IT WORKS
Back-end Servers
Data Flow
VISUAL DESIGN TOOLS
Visual Design Tool
• Drag and Drop tools for Mobile AR
• Web based tools for Mobile AR Layout
• Wikitude
• Wikitude Studio...
Wikitude Studio - studio.wikitude.com/
•  Load image targets
•  Add virtual content to target
•  Publish to server and vie...
CraftAR - https://my.craftar.net/
Picture at: http://goo.gl/5oPrsH
USING LAYAR CREATOR
Layar – www.layar.com
•  AR Browser Platform
Location-based Augmented Reality
Copyright © 2014 Open Geospatial Consortium
Vision-based Augmented Reality
Copyright © 2014 Open Geospatial Consortium
Steps for Using Layar Creator
1.  Register for account
•  https://www.layar.com/accounts/register/
2.  Log into Layar Crea...
Register for Account
•  https://www.layar.com/accounts/register/
Log into Creator Website
•  https://www.layar.com/creator/
Add Pages
•  Upload jpg, pdf, png files
Add Content
•  Virtual Buttons/Objects of different type
Live Preview
•  Hit Test button
•  Live scan and view on phone
Adding 3D content
•  Premium account needed
•  Add Hotspot and edit JSON content
JSON Content
{
"id": "103979",
"anchor": {
"referenceImage": "20f78eaa-9b27-409d-942d-8cee77078666"
},
"object": {
"conten...
TRACKING PATTERNS
GoodTracking Patterns
• pattern that is highly structured
• lot of visual hints with different colors
• high contrasts and...
Good Examples
BadTracking Patterns
• Reference Image not flat and blurry
• Shadows create false contrasts 
• Angled reference images cre...
Bad Examples
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Mobile AR Lecture 4 -AR Browsers
Upcoming SlideShare
Loading in …5
×

Mobile AR Lecture 4 -AR Browsers

703 views

Published on

Lecture 4 from a course on Mobile Based Augmented Reality Development taught by Mark Billinghurst and Zi Siang See on November 29th and 30th 2015 at Johor Bahru in Malaysia. This lecture provides an overview of Mobile AR Browsers. Look for the other 9 lectures in the course.

Published in: Technology

Mobile AR Lecture 4 -AR Browsers

  1. 1. LECTURE 4: MOBILE AR BROWSERS Mark Billinghurst mark.billinghurst@unisa.edu.au Zi Siang See zisiang@reina.com.my November 29th-30th 2015 Mobile-Based Augmented Reality Development
  2. 2. Nokia City Lens •  More recent AR Browser
  3. 3. AR Browsers • AR equivalent of web browser • Request and serve up content • Commercial outdoor AR applications • Junaio, Layar,Wikitude, etc • All have their own language specifications • Wikitude – ARML • Junaio – XML,AREL
  4. 4. Architecture
  5. 5. AR Browsers • Layar (defunct) • http://www.layar.com/ • Wikitude • http://www.wikitude.com/ • Aurasma • http://www.aurasma.com/ • Catchoom • http://www.catchoom.com/
  6. 6. JUNAIO BROWSER
  7. 7. www.junaio.com •  AR browser developed by Metaio for iOS/Android •  Popular with many advanced features
  8. 8. The Junaio Platform
  9. 9. Key Features •  Content provided in information channels •  Over 2,000 channels available •  Two types of AR channels •  GLUE channels – visual tracking •  Location based channels – GPS, compass tracking •  Simple to use interface with multiple views •  List, map,AR (live) view •  Point of Interest (POI) based •  POIs are geo-located content
  10. 10. Junaio Interface (Location Based) AR Tag Search Icon Scan Mode Radar Display Current Channel Labels
  11. 11. Selecting anARTag •  Selecting a POI shows more information
  12. 12. MultipleViews •  SelectView Mode to see different views AR (Live) View Map/List View
  13. 13. GlueTracking - Markerless •  Search for “instant scan”
  14. 14. AR  Penguin     More  info:  h+p://junaio.wordpress.com/2013/07/01/penguin-­‐navi/              
  15. 15. Tamaris     More  info:  h+p://junaio.wordpress.com/2013/09/25/tamaris-­‐uses-­‐junaio-­‐to-­‐promote-­‐their-­‐new-­‐winter-­‐collecCon/              
  16. 16. AUDI  R8     Video:   h+p://www.youtube.com/watch? v=pJURQLsKH8w&list=PL6EEF2EABDC41CA8D&index=18          
  17. 17. HOW IT WORKS
  18. 18. Back-end Servers
  19. 19. Data Flow
  20. 20. VISUAL DESIGN TOOLS
  21. 21. Visual Design Tool • Drag and Drop tools for Mobile AR • Web based tools for Mobile AR Layout • Wikitude • Wikitude Studio • Catchoom • CraftAR • Aurasma • Aurasma Studio
  22. 22. Wikitude Studio - studio.wikitude.com/ •  Load image targets •  Add virtual content to target •  Publish to server and view on mobile
  23. 23. CraftAR - https://my.craftar.net/
  24. 24. Picture at: http://goo.gl/5oPrsH
  25. 25. USING LAYAR CREATOR
  26. 26. Layar – www.layar.com •  AR Browser Platform
  27. 27. Location-based Augmented Reality Copyright © 2014 Open Geospatial Consortium
  28. 28. Vision-based Augmented Reality Copyright © 2014 Open Geospatial Consortium
  29. 29. Steps for Using Layar Creator 1.  Register for account •  https://www.layar.com/accounts/register/ 2.  Log into Layar Creator website 3.  Create new campaign - Campaign type 4.  Add pages •  Upload tracking images 5.  Design page/add buttons •  Decide page type 6.  Test Page – view on mobile 7.  Publish
  30. 30. Register for Account •  https://www.layar.com/accounts/register/
  31. 31. Log into Creator Website •  https://www.layar.com/creator/
  32. 32. Add Pages •  Upload jpg, pdf, png files
  33. 33. Add Content •  Virtual Buttons/Objects of different type
  34. 34. Live Preview •  Hit Test button •  Live scan and view on phone
  35. 35. Adding 3D content •  Premium account needed •  Add Hotspot and edit JSON content
  36. 36. JSON Content { "id": "103979", "anchor": { "referenceImage": "20f78eaa-9b27-409d-942d-8cee77078666" }, "object": { "contentType": "model/vnd.layar.l3d", "url": "http://public.layar.com/Customer_Care/3d_demos/layarEarth.l3d", "size": 1 }, "transform": { "translate": { "x": 0, "y": 0, "z": 0.5 }, "scale": 0.4 } }
  37. 37. TRACKING PATTERNS
  38. 38. GoodTracking Patterns • pattern that is highly structured • lot of visual hints with different colors • high contrasts and sharp edges • pattern in a "common" format, • Square or rectangle format in 3:2 or 4:3 or similar • not too dark and no reflection points • shortest side of the image 150 – 200 pixels
  39. 39. Good Examples
  40. 40. BadTracking Patterns • Reference Image not flat and blurry • Shadows create false contrasts  • Angled reference images create false reference orientation • Pattern too bright or dark • Angled with surrounding information
  41. 41. Bad Examples

×