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.

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

3. Nokia City Lens
• More recent AR Browser

4. 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

5. Architecture

6. AR Browsers
• Layar (defunct)
• http://www.layar.com/
• Wikitude
• http://www.wikitude.com/
• Aurasma
• http://www.aurasma.com/
• Catchoom
• http://www.catchoom.com/

7. JUNAIO BROWSER

8. www.junaio.com
• AR browser developed by Metaio for iOS/Android
• Popular with many advanced features

11. The Junaio Platform

12. 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

13. Junaio Interface (Location Based)
AR Tag
Search
Icon
Scan
Mode
Radar
Display
Current
Channel
Labels

14. Selecting anARTag
• Selecting a POI shows more information

15. MultipleViews
• SelectView Mode to see different views
AR (Live) View
Map/List View

16. GlueTracking - Markerless
• Search for “instant scan”

17. AR
Penguin
More
info:
h+p://junaio.wordpress.com/2013/07/01/penguin-­‐navi/

18. Tamaris
More
info:
h+p://junaio.wordpress.com/2013/09/25/tamaris-­‐uses-­‐junaio-­‐to-­‐promote-­‐their-­‐new-­‐winter-­‐collecCon/

19. AUDI
R8
Video:
h+p://www.youtube.com/watch?
v=pJURQLsKH8w&list=PL6EEF2EABDC41CA8D&index=18

20. HOW IT WORKS

32. Back-end Servers

33. Data Flow

34. VISUAL DESIGN TOOLS

35. 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

36. Wikitude Studio - studio.wikitude.com/
• Load image targets
• Add virtual content to target
• Publish to server and view on mobile

37. CraftAR - https://my.craftar.net/

38. Picture at: http://goo.gl/5oPrsH

39. USING LAYAR CREATOR

40. Layar – www.layar.com
• AR Browser Platform

41. Location-based Augmented Reality
Copyright © 2014 Open Geospatial Consortium

42. Vision-based Augmented Reality
Copyright © 2014 Open Geospatial Consortium

44. 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

45. Register for Account
• https://www.layar.com/accounts/register/

46. Log into Creator Website
• https://www.layar.com/creator/

47. Add Pages
• Upload jpg, pdf, png files

48. Add Content
• Virtual Buttons/Objects of different type

49. Live Preview
• Hit Test button
• Live scan and view on phone

50. Adding 3D content
• Premium account needed
• Add Hotspot and edit JSON content

51. 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
}
}

52. TRACKING PATTERNS

53. 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

54. Good Examples

55. 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

56. Bad Examples