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.

1. Mobile Augmented Reality
Using Junaio
Mark Billinghurst
mark.billinghurst@hitlabnz.org
HIT Lab NZ
University of Canterbury

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

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

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

11. Selecting an AR Tag
 Selecting a POI shows more information

12. Multiple Views
List View Map View
AR (Live) View
 Select View Mode to see different views

13. QR Code Launch
 Hit scan button on interface, point at QR code

14. Glue Tracking - Markerless
 Search for “instant tracker”

15. How Junaio Works

27. Back-end Servers

28. Data Flow

29. Creating Your First POI

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

32. Free Webserver
 Other options also available

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’

37. Fill Out the New Channel Form

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

40. Validation Tests

41. Expand Results – shows XML feedback

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

43. AR Outcome

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

46. Junaio 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

48. Junaio AREL

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

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

54. index.php
 Just loads search.php

55. search.php
 Loads the AREL helper classes
 php code providing valid information to Junaio
 Contains Channel Definition
1. Start it
startArelXMLHelper::start(NULL, WWW_ROOT . "/arel/index.php");
2. Return objects
ArelXMLHelper::outputObject($oObject);
3. End it
ArelXMLHelper::end();

56. Defining a POI
//1. Sound POI
$oObject = ArelXMLHelper::createLocationBasedPOI(
"1", //id
"Hello Sound POI", //title
array(48.12310, 11.218648, 0), //location
WWW_ROOT . "/resources/thumb_sound.png", //thumb
WWW_ROOT . "/resources/icon_sound.png", //icon
"This is our Sound POI", //description
array(array("Start Audio", "soundButton", "http://www.junaio.com/publisherDownload/
tutorial/test.mp3")) //buttons
);
//output the object
ArelXMLHelper::outputObject($oObject);

57. Location Based POI

58. AR Application Running

59. Loading a 3D model

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

61. createLocationBasedModel3D

62. Loading T-Rex
//T-Rex as static obj
$oObject = ArelXMLHelper::createLocationBasedModel3D(
"trex", //ID
"The T-Rex", //name
"http://dev.junaio.com/publisherDownload/junaio_model_obj.zip", //model
NULL, //texture
$tRexLocation, //position
array(5,5,5), //scale
new ArelRotation(ArelRotation::ROTATION_EULERDEG, array(0,-90,0)) //rotation
);

63. Result

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/

65. Adding Interactivity

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
);
…

69. styles.css – HTML GUI
#buttons {
position: absolute;
bottom: 44px; Button location
right: 44px;
}
.ipad div {
width: 104px;
height: 106px;
}
Button style
#buttons div {
background-image: url("../images/button.png");
background-repeat: no-repeat;
background-size: 100%;
float: left;
}

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

71. Result

72. Creating A Glue Channel

73. Glue Channels
 “Gluing” virtual content to normal printed material
 Key steps
 Creating tracking pattern dataset
 Specify relationship of content to pattern (AREL)
 Junaio “Hello Glue” example
 http://www.junaio.com/develop/quickstart/hello-glue/

74. Create a Tracking Data Set
 Generate the tracking XML file
 http://dev.junaio.com/tools/trackingxmlcreator

75. index.php – XML code
 Specify tracking pattern
<results trackingurl="http://dev.junaio.com/publisherDownload/tutorial/tracking_tutorial.zip">
 Specify Model
<assets3d>
<model><![CDATA[http://dev.junaio.com/publisherDownload/tutorial/ metaioman.md2]]></
model>
<texture><![CDATA[http://dev.junaio.com/publisherDownload/tutorial/ metaioman.png]]></
texture>
<transform>
[Put transform information here]
</transform>
</assets3d>
 Attach model to tracking pattern
<properties>
<coordinatesystemid>1</coordinatesystemid>
</properties>

76. Using AREL
require_once dirname(dirname(dirname((dirname(__FILE__))))) . "/libArel/arel_xmlhelper.class.php";
ArelXMLHelper::start(NULL, NULL, "http://dev.junaio.com/publisherDownload/tutorial/
tracking_tutorial.zip");
Tracking Pattern
$oObject = ArelXMLHelper::createGLUEModel3D(
"1", //ID
"http://dev.junaio.com/publisherDownload/tutorial/metaioman.md2", //model Path
"http://dev.junaio.com/publisherDownload/tutorial/metaioman.png", //texture Path
Model
array(0,-100,0), //translation
array(3,3,3), //scale Position
new ArelRotation(ArelRotation::ROTATION_EULERDEG, array(-90,0,0)), //rotation
1 //CoordinateSystemID
);
ArelXMLHelper::outputObject($oObject);
ArelXMLHelper::end();

77. Result

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

79. Good Examples

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

81. Bad Examples

82. Authoring Tools

83. BirdsView - http://www.birdsview.de/
 Location Based CMS
 Add content, publish to Layar or Junaio

84. BirdsView on Junaio

85. BirdsView on Junaio

86. Limitations
 BirdsView Branding
 Their logo, not yours
 Limited POI Content
 Images, Text, URL
 Public Channel
 Your content + everyone else's

87. Hoppala Augmentation
 http://www.hoppala-agency.com/
 Rich media overlay

88. Hoppala in Junaio

89. Metaio Creator
 Drag and drop Junaio authoring

90. BuildAR – buildar.com

91. Resources

92. Book Demos

93. Resources
• Developer documentation
– http://www.junaio.com/develop/docs/
• Google Group
– https://groups.google.com/forum/?fromgroups#!forum/junaio-
developer

94. Conclusions

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