mobile augmented reality using junaio
DESCRIPTION
Slides from a course taught about how to use Junaio to create mobile AR experiences. Taught on October 5th 2012 by Mark BillinghurstTRANSCRIPT
Mobile Augmented Reality Using Junaio
Mark Billinghurst [email protected]
HIT Lab NZ University of Canterbury
www.junaio.com
AR browser developed by Metaio for iOS/Android Popular with many advanced features
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
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”)
Junaio Interface (Location Based)
AR Tag
Search Icon
Scan Mode
Radar Display
View Mode Current
Channel
Selecting an AR Tag
Selecting a POI shows more information
Multiple Views
Select View Mode to see different views
List View
AR (Live) View
Map View
QR Code Launch
Hit scan button on interface, point at QR code
Glue Tracking - Markerless
Search for “instant tracker”
How Junaio Works
Back-end Servers
Data Flow
Creating Your First POI
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
Free Webserver
Other options also available
Finding the POI location
Use Google maps, right click the POI location Copy Lat/Long information
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
Edit index.php
Edit index.php to add your own POI information
POI icon
POI location
POI pop-up info
Create a New Channel
Click ‘My channels’ then ‘Create a New Channel’
Fill Out the New Channel Form
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
Channel Validation
Runs a number of tests to see if server path is correct, if content is there, returned code correct
Validation Tests
Expand Results – shows XML feedback
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
AR Outcome
XML Parameters
Many XML Parameters can be set See http://www.junaio.com/develop/docs/arel-xml-schemaxml-parameters/
Adding More POI – edit index.php <results>
<object id=\"1\”> //Define POI One <location> <lat>-43.536743</lat> <lon>172.587705</lon> <alt>0</alt> </location> </object> <object id=\"2\"> //Define POI Two <location> <lat>-43.536743</lat> <lon>172.587000</lon> <alt>0</alt> </location> </object> </results>";
POI One Location
POI Two Location
Junaio Results
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
Junaio AREL
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
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
index.php
Just loads search.php
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();
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);
Location Based POI
AR Application Running
Loading a 3D model
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
createLocationBasedModel3D
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
);
Result
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/
Adding Interactivity
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/
Server File Structure
HTML – GUI
JavaScript - interactivity
Main Index
PHP - content
search.php – specify Lego Man if(!empty($_GET['l'])) $position = explode(",", $_GET['l']); … //return the lego man $oLegoMan = ArelXMLHelper::createLocationBasedModel3D(
"1", // id "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
); …
Use local position
Lego model and texture
styles.css – HTML GUI #buttons { position: absolute; bottom: 44px; right: 44px; }
.ipad div { width: 104px; height: 106px; }
#buttons div { background-image: url("../images/button.png"); background-repeat: no-repeat; background-size: 100%;
float: left; }
Button location
Button style
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
Result
Creating A Glue Channel
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/
Create a Tracking Data Set
Generate the tracking XML file http://dev.junaio.com/tools/trackingxmlcreator
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>
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");
$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 array(0,-100,0), //translation array(3,3,3), //scale new ArelRotation(ArelRotation::ROTATION_EULERDEG, array(-90,0,0)), //rotation 1 //CoordinateSystemID );
ArelXMLHelper::outputObject($oObject); ArelXMLHelper::end();
Tracking Pattern
Model
Position
Result
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
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
Authoring Tools
BirdsView - http://www.birdsview.de/
Location Based CMS Add content, publish to Layar or Junaio
BirdsView on Junaio
BirdsView on Junaio
Limitations BirdsView Branding
Their logo, not yours
Limited POI Content Images, Text, URL
Public Channel Your content + everyone else's
Hoppala Augmentation
http://www.hoppala-agency.com/ Rich media overlay
Hoppala in Junaio
Metaio Creator
Drag and drop Junaio authoring
BuildAR – buildar.com
Resources
Book Demos
Resources
• Developer documentation – http://www.junaio.com/develop/docs/
• Google Group – https://groups.google.com/forum/?fromgroups#!forum/junaio-
developer
Conclusions
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
