Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Mobile Augmented Reality Using junaio

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Making Things Work Together
Making Things Work Together
Wird geladen in …3
×

Hier ansehen

1 von 96 Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Mobile Augmented Reality Using junaio (20)

Anzeige

Weitere von Mark Billinghurst (20)

Aktuellste (20)

Anzeige

Mobile Augmented Reality Using junaio

  1. 1. Mobile Augmented Reality Using Junaio Mark Billinghurst mark.billinghurst@hitlabnz.org HIT Lab NZ University of Canterbury
  2. 2. www.junaio.com   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 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”)
  5. 5. Junaio Interface (Location Based) Scan View Mode Current Mode Search Channel Radar Icon Display AR Tag
  6. 6. Selecting an AR Tag   Selecting a POI shows more information
  7. 7. Multiple Views List 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 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
  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 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
  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: 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
  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 http://www.junaio.com/develop/docs/arel-xml-schemaxml-parameters/
  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   http://www.junaio.com/develop/quickstart/customizing-your- 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", "http://www.junaio.com/publisherDownload/ tutorial/test.mp3")) //buttons ); //output the object ArelXMLHelper::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 "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 );
  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 http://www.junaio.com/develop/docs/3d-models/
  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   http://www.junaio.com/develop/quickstart/advanced- 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 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 ); …
  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   http://www.junaio.com/develop/quickstart/hello-glue/
  54. 54. Create a Tracking Data Set   Generate the tracking XML file   http://dev.junaio.com/tools/trackingxmlcreator
  55. 55. 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>  
  56. 56. 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();
  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 - http://www.birdsview.de/   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 else's
  67. 67. Hoppala Augmentation   http://www.hoppala-agency.com/   Rich media overlay
  68. 68. Hoppala in Junaio
  69. 69. Metaio Creator   Drag and drop Junaio authoring
  70. 70. BuildAR – buildar.com
  71. 71. Resources
  72. 72. Book Demos
  73. 73. Resources •  Developer documentation –  http://www.junaio.com/develop/docs/ •  Google Group –  https://groups.google.com/forum/?fromgroups#!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 –  mark.billinghurst@hitlabnz.org •  Website –  www.hitlabnz.org

×