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
![Page 1: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/1.jpg)
Mobile Augmented Reality Using Junaio
Mark Billinghurst [email protected]
HIT Lab NZ University of Canterbury
![Page 2: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/2.jpg)
![Page 3: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/3.jpg)
www.junaio.com
AR browser developed by Metaio for iOS/Android Popular with many advanced features
![Page 4: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/4.jpg)
![Page 5: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/5.jpg)
![Page 6: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/6.jpg)
![Page 7: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/7.jpg)
![Page 8: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/8.jpg)
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
![Page 9: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/9.jpg)
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”)
![Page 10: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/10.jpg)
Junaio Interface (Location Based)
AR Tag
Search Icon
Scan Mode
Radar Display
View Mode Current
Channel
![Page 11: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/11.jpg)
Selecting an AR Tag
Selecting a POI shows more information
![Page 12: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/12.jpg)
Multiple Views
Select View Mode to see different views
List View
AR (Live) View
Map View
![Page 13: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/13.jpg)
QR Code Launch
Hit scan button on interface, point at QR code
![Page 14: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/14.jpg)
Glue Tracking - Markerless
Search for “instant tracker”
![Page 15: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/15.jpg)
How Junaio Works
![Page 16: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/16.jpg)
![Page 17: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/17.jpg)
![Page 18: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/18.jpg)
![Page 19: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/19.jpg)
![Page 20: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/20.jpg)
![Page 21: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/21.jpg)
![Page 22: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/22.jpg)
![Page 23: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/23.jpg)
![Page 24: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/24.jpg)
![Page 25: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/25.jpg)
![Page 26: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/26.jpg)
![Page 27: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/27.jpg)
Back-end Servers
![Page 28: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/28.jpg)
Data Flow
![Page 29: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/29.jpg)
Creating Your First POI
![Page 30: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/30.jpg)
![Page 31: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/31.jpg)
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
![Page 32: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/32.jpg)
Free Webserver
Other options also available
![Page 33: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/33.jpg)
Finding the POI location
Use Google maps, right click the POI location Copy Lat/Long information
![Page 34: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/34.jpg)
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
![Page 35: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/35.jpg)
Edit index.php
Edit index.php to add your own POI information
POI icon
POI location
POI pop-up info
![Page 36: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/36.jpg)
Create a New Channel
Click ‘My channels’ then ‘Create a New Channel’
![Page 37: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/37.jpg)
Fill Out the New Channel Form
![Page 38: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/38.jpg)
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
![Page 39: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/39.jpg)
Channel Validation
Runs a number of tests to see if server path is correct, if content is there, returned code correct
![Page 40: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/40.jpg)
Validation Tests
![Page 41: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/41.jpg)
Expand Results – shows XML feedback
![Page 42: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/42.jpg)
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
![Page 43: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/43.jpg)
AR Outcome
![Page 44: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/44.jpg)
XML Parameters
Many XML Parameters can be set See http://www.junaio.com/develop/docs/arel-xml-schemaxml-parameters/
![Page 45: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/45.jpg)
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
![Page 46: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/46.jpg)
Junaio Results
![Page 47: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/47.jpg)
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
![Page 48: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/48.jpg)
Junaio AREL
![Page 49: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/49.jpg)
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
![Page 50: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/50.jpg)
![Page 51: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/51.jpg)
![Page 52: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/52.jpg)
![Page 53: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/53.jpg)
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
![Page 54: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/54.jpg)
index.php
Just loads search.php
![Page 55: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/55.jpg)
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();
![Page 56: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/56.jpg)
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);
![Page 57: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/57.jpg)
Location Based POI
![Page 58: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/58.jpg)
AR Application Running
![Page 59: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/59.jpg)
Loading a 3D model
![Page 60: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/60.jpg)
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
![Page 61: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/61.jpg)
createLocationBasedModel3D
![Page 62: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/62.jpg)
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
);
![Page 63: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/63.jpg)
Result
![Page 64: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/64.jpg)
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/
![Page 65: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/65.jpg)
Adding Interactivity
![Page 66: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/66.jpg)
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/
![Page 67: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/67.jpg)
Server File Structure
HTML – GUI
JavaScript - interactivity
Main Index
PHP - content
![Page 68: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/68.jpg)
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
![Page 69: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/69.jpg)
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
![Page 70: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/70.jpg)
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
![Page 71: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/71.jpg)
Result
![Page 72: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/72.jpg)
Creating A Glue Channel
![Page 73: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/73.jpg)
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/
![Page 74: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/74.jpg)
Create a Tracking Data Set
Generate the tracking XML file http://dev.junaio.com/tools/trackingxmlcreator
![Page 75: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/75.jpg)
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>
![Page 76: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/76.jpg)
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
![Page 77: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/77.jpg)
Result
![Page 78: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/78.jpg)
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
![Page 79: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/79.jpg)
Good Examples
![Page 80: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/80.jpg)
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
![Page 81: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/81.jpg)
Bad Examples
![Page 82: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/82.jpg)
Authoring Tools
![Page 83: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/83.jpg)
BirdsView - http://www.birdsview.de/
Location Based CMS Add content, publish to Layar or Junaio
![Page 84: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/84.jpg)
BirdsView on Junaio
![Page 85: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/85.jpg)
BirdsView on Junaio
![Page 86: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/86.jpg)
Limitations BirdsView Branding
Their logo, not yours
Limited POI Content Images, Text, URL
Public Channel Your content + everyone else's
![Page 87: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/87.jpg)
Hoppala Augmentation
http://www.hoppala-agency.com/ Rich media overlay
![Page 88: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/88.jpg)
Hoppala in Junaio
![Page 89: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/89.jpg)
Metaio Creator
Drag and drop Junaio authoring
![Page 90: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/90.jpg)
BuildAR – buildar.com
![Page 91: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/91.jpg)
Resources
![Page 92: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/92.jpg)
Book Demos
![Page 93: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/93.jpg)
Resources
• Developer documentation – http://www.junaio.com/develop/docs/
• Google Group – https://groups.google.com/forum/?fromgroups#!forum/junaio-
developer
![Page 94: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/94.jpg)
Conclusions
![Page 95: Mobile Augmented Reality Using junaio](https://reader036.vdocuments.site/reader036/viewer/2022081403/554dbe62b4c905c7488b4b56/html5/thumbnails/95.jpg)
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