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

Nokia City Lens

• More recent AR Browser

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

Architecture

AR Browsers

• Layar (defunct) • http://www.layar.com/

• Wikitude • http://www.wikitude.com/

• Aurasma • http://www.aurasma.com/

• Catchoom • http://www.catchoom.com/

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 •  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

Junaio Interface (Location Based)

AR Tag

Search Icon

Scan Mode

Radar Display

Current Channel

Labels

Selecting an AR Tag

•  Selecting a POI shows more information

Multiple Views

•  Select View Mode to see different views

AR (Live) View

Map/List View

Glue Tracking - 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-­‐new-­‐winter-­‐collecCon/    

         

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

• Catchoom • CraftAR

• Aurasma • Aurasma Studio

Wikitude Studio - studio.wikitude.com/

•  Load image targets •  Add virtual content to target •  Publish to server and view on mobile

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

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": { "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 } }

TRACKING PATTERNS

Good Tracking 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

Good Examples

Bad Tracking 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

Bad Examples