This document discusses the mobile augmented reality browser Junaio. It has over 2,000 information channels available and supports two types of augmented reality channels: GLUE channels for visual tracking and location-based channels using GPS and compass tracking. The interface has multiple views including list, map and live AR view. Content can include images, text, videos and 3D models. Authoring tools are available to easily create location-based and visual tracking augmented reality experiences using Junaio.
8. 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
9. Try it Yourself
Download Junaio (app store, android market)
Search for Junaio
Run Junaio
To try Glue channels
Download the Junaio Demo Book from www.junaio.com
Hit scan button, point at QR codes
To try Location channels
Hit search icon in Junaio
Click popular tab, pick channel (eg “Flickr”)
31. You will Need
A Junaio developer account
Create at dev.junaio.com
A web server where content can be uploaded
Eg free server from http://www.000webhost.com/
GPS Location of POI
POI content
Text, 2D image, etc
33. Finding the POI location
Use Google maps, right click the POI location
Copy Lat/Long information
34. Server Content
Download “Hello World” template content
Available from http://www.junaio.com/develop/quickstart/
Edit on local machine
Edit index.php to add POI information
Use own POI icon
Upload to web server
35. Edit index.php
POI icon
POI location
POI pop-up info
Edit index.php to add your own POI information
36. Create a New Channel
Click ‘My channels’ then ‘Create a New Channel’
38. Channel Creation
Use any name and channel description
Channel Type: Location Based Channel
Callback URL is most important
Path to the index.php file on your server
Eg: http://www.junaiotest.comze.com/JunaioTest/1HelloWorld/?path=
Note ?path= at end of URL, you may not need this
Once channel is saved then it is added to My Channels list
Next Validate the Channel
39. Channel Validation
Runs a number of tests to see if server path is
correct, if content is there, returned code correct
42. Loading the Channel
If the Channel is validated you can run it
Either login into Junaio and enter developer mode
Channel appears under ‘My Favourites’
Or use QR code from My Channel page
44. XML Parameters
Many XML Parameters can be set
See http://www.junaio.com/develop/docs/arel-xml-schemaxml-parameters/
45. Adding More POI – edit index.php
<results>
<object id="1”>
//Define POI One
<location>
<lat>-43.536743</lat>
<lon>172.587705</lon> POI One Location
<alt>0</alt>
</location>
</object>
<object id="2">
//Define POI Two
<location>
<lat>-43.536743</lat>
<lon>172.587000</lon> POI Two Location
<alt>0</alt>
</location>
</object>
</results>";
47. Limitations of Plain XML
No interactivity
Only simple pop-ups
No user interface Customizations
Can only use Junaio GUI elements
No local interactivity
Always needs remote server connection
49. AREL
Augmented Reality Environment Language
Overcomes limitations of XML by itself
Based on web technologies; XML, HTML5, JavaScript
Core Components
1. AREL XML: Static file, specifies scene content
2. AREL JavaScript: Handles all interactions and animation. Any
user interaction send an event to AREL JS
3. AREL HTML5: GUI Elements. Buttons, icons, etc
Advantages
Scripting on device, more functionality, GUI customization
50.
51.
52.
53. Example 2: Customizing your POI
Using AREL HTML5 to develop custom interface
Download Tutorial 2
http://www.junaio.com/develop/quickstart/customizing-your-
pois-images-sounds-videos-and-more/
In Example 1 edited index.php, now use search.php
60. Example 3: Loading a 3D Model
Position a model relative to the user position
if(!empty($_GET['l']))
$position = explode(",", $_GET['l']);
//calculate the position of T-Rex based on the position of the request. An offset is added to
the latitude value.
$tRexLocation = $position;
$tRexLocation[0] += 0.00004;
Use createLocationBasedModel3D to load 3D model
64. 3D Models
Junaio supports two model formats:
MD2: Animated models, simple textures
OBJ: Static models, high quality textures
Use OBJ for high quality static models, MD2 for animated
Making Models
Make Models using Blender or similar tools
May need file conversion tools
Limit size to 500 – 1000 polygons/model
See http://www.junaio.com/develop/docs/3d-models/
66. Basic Interactivity
Add a button on screen to move virtual character
Use the following
HTML: button specification
Javascript: Interaction
PHP/XML: 3D model
Junaio Tutorial 5
http://www.junaio.com/develop/quickstart/advanced-
interactions-and-location-based-model-3ds/
67. Server File Structure
HTML – GUI
JavaScript - interactivity
Main Index
PHP - content
68. search.php – specify Lego Man
if(!empty($_GET['l']))
$position = explode(",", $_GET['l']); Use local position
…
//return the lego man
$oLegoMan = ArelXMLHelper::createLocationBasedModel3D(
"1", // id Lego model and texture
"lego man", //title
WWW_ROOT . "/resources/walking_model3_7fps.md2", // mainresource
WWW_ROOT . "/resources/walking_model.png", // resource
$position, // location
array(0.2, 0.2, 0.2), // scale
new ArelRotation(ArelRotation::ROTATION_EULERRAD, array(1.57,0,1.57)) // rotation
);
…
70. Logic_LBS5.js - JavaScript
Create an event listener
setEventListener();
Add functionality to model object
Load model from scene
Adding model behaviours
Add functionality to GUI objects
Define the event listener
Bind model behaviours to GUI objects
78. 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 format 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
80. 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
95. Conclusions
• Mobile AR
– Ideal for location based experiences
– Tourism, cultural information
– Commercially available software
– Junaio, Wikitude, Layar, etc
– Important research problems need to be solved
– tracking
– interaction
– information management
96. More Information
• Mark Billinghurst
– mark.billinghurst@hitlabnz.org
• Website
– www.hitlabnz.org