Mobile Augmented Reality Using Junaio

Mark Billinghurst mark.billinghurst@hitlabnz.org

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

More Information

•  Mark Billinghurst – mark.billinghurst@hitlabnz.org

•  Website – www.hitlabnz.org