Mobile Augmented Reality Using junaio


Published on

Slides from a course taught about how to use Junaio to create mobile AR experiences. Taught on October 5th 2012 by Mark Billinghurst

Published in: Technology
1 Comment
  • why my channel cant be validate (customizing your POI) on your slide no 53? appear error like this on my channel..

    XML Parsing Error: DOMDocument::loadXML(): Premature end of data in tag br line 7 in Entity, line: 7
    DOMDocument::loadXML(): Premature end of data in tag br line 5 in Entity, line: 7
    DOMDocument::loadXML(): Premature end of data in tag br line 5 in Entity, line: 7
    DOMDocument::loadXML(): Premature end of data in tag br line 3 in Entity, line: 7
    DOMDocument::loadXML(): Premature end of data in tag br line 3 in Entity, line: 7
    DOMDocument::loadXML(): Premature end of data in tag br line 1 in Entity, line: 7
    Show request response
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile Augmented Reality Using junaio

  1. 1. Mobile Augmented Reality Using Junaio Mark Billinghurst HIT Lab NZ University of Canterbury
  2. 2.  AR browser developed by Metaio for iOS/Android  Popular with many advanced features
  3. 3. 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
  4. 4. Try it Yourself  Download Junaio (app store, android market)   Search for Junaio  Run Junaio  To try Glue channels   Download the Junaio Demo Book from   Hit scan button, point at QR codes  To try Location channels   Hit search icon in Junaio   Click popular tab, pick channel (eg “Flickr”)
  5. 5. Junaio Interface (Location Based) Scan View Mode Current ModeSearch Channel RadarIcon DisplayAR Tag
  6. 6. Selecting an AR Tag  Selecting a POI shows more information
  7. 7. Multiple ViewsList View Map View AR (Live) View   Select View Mode to see different views
  8. 8. QR Code Launch  Hit scan button on interface, point at QR code
  9. 9. Glue Tracking - Markerless  Search for “instant tracker”
  10. 10. How Junaio Works
  11. 11. Back-end Servers
  12. 12. Data Flow
  13. 13. Creating Your First POI
  14. 14. You will Need  A Junaio developer account   Create at  A web server where content can be uploaded   Eg free server from  GPS Location of POI  POI content   Text, 2D image, etc
  15. 15. Free Webserver  Other options also available
  16. 16. Finding the POI location  Use Google maps, right click the POI location  Copy Lat/Long information
  17. 17. Server Content  Download “Hello World” template content   Available from  Edit on local machine   Edit index.php to add POI information   Use own POI icon  Upload to web server
  18. 18. Edit index.php POI icon POI location POI pop-up info  Edit index.php to add your own POI information
  19. 19. Create a New Channel  Click ‘My channels’ then ‘Create a New Channel’
  20. 20. Fill Out the New Channel Form
  21. 21. 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:  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
  22. 22. Channel Validation  Runs a number of tests to see if server path is correct, if content is there, returned code correct
  23. 23. Validation Tests
  24. 24. Expand Results – shows XML feedback
  25. 25. 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
  26. 26. AR Outcome
  27. 27. XML Parameters  Many XML Parameters can be set   See
  28. 28. 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>";
  29. 29. Junaio Results
  30. 30. 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
  31. 31. Junaio AREL
  32. 32. 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
  33. 33. Example 2: Customizing your POI  Using AREL HTML5 to develop custom interface  Download Tutorial 2  pois-images-sounds-videos-and-more/  In Example 1 edited index.php, now use search.php
  34. 34. index.php  Just loads search.php
  35. 35. 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();
  36. 36. 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", " tutorial/test.mp3")) //buttons );//output the objectArelXMLHelper::outputObject($oObject);
  37. 37. Location Based POI
  38. 38. AR Application Running
  39. 39. Loading a 3D model
  40. 40. 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
  41. 41. createLocationBasedModel3D
  42. 42. Loading T-Rex//T-Rex as static obj$oObject = ArelXMLHelper::createLocationBasedModel3D( "trex", //ID "The T-Rex", //name "", //model NULL, //texture $tRexLocation, //position array(5,5,5), //scale new ArelRotation(ArelRotation::ROTATION_EULERDEG, array(0,-90,0)) //rotation);
  43. 43. Result
  44. 44. 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
  45. 45. Adding Interactivity
  46. 46. 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  interactions-and-location-based-model-3ds/
  47. 47. Server File Structure HTML – GUI JavaScript - interactivity Main Index PHP - content
  48. 48. search.php – specify Lego Manif(!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);…
  49. 49. 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;}
  50. 50. 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
  51. 51. Result
  52. 52. Creating A Glue Channel
  53. 53. 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 
  54. 54. Create a Tracking Data Set  Generate the tracking XML file 
  55. 55. index.php – XML code  Specify tracking pattern <results trackingurl="">  Specify Model <assets3d> <model><![CDATA[ metaioman.md2]]></ model> <texture><![CDATA[ metaioman.png]]></ texture> <transform> [Put transform information here] </transform> </assets3d>  Attach model to tracking pattern <properties>                   <coordinatesystemid>1</coordinatesystemid>                </properties>  
  56. 56. Using AREL  require_once dirname(dirname(dirname((dirname(__FILE__))))) . "/libArel/arel_xmlhelper.class.php";ArelXMLHelper::start(NULL, NULL, ""); Tracking Pattern$oObject = ArelXMLHelper::createGLUEModel3D( "1", //ID "", //model Path "", //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();
  57. 57. Result
  58. 58. 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
  59. 59. Good Examples
  60. 60. 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
  61. 61. Bad Examples
  62. 62. Authoring Tools
  63. 63. BirdsView -  Location Based CMS   Add content, publish to Layar or Junaio
  64. 64. BirdsView on Junaio
  65. 65. BirdsView on Junaio
  66. 66. Limitations  BirdsView Branding   Their logo, not yours  Limited POI Content   Images, Text, URL  Public Channel   Your content + everyone elses
  67. 67. Hoppala Augmentation  Rich media overlay
  68. 68. Hoppala in Junaio
  69. 69. Metaio Creator  Drag and drop Junaio authoring
  70. 70. BuildAR –
  71. 71. Resources
  72. 72. Book Demos
  73. 73. Resources•  Developer documentation –•  Google Group –!forum/junaio- developer
  74. 74. Conclusions
  75. 75. 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
  76. 76. More Information•  Mark Billinghurst – •  Website –