Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Augmented Reality and HTML5 - Wikitude @FINHTML5 conference

Presentation at #FINHTML5 conference on the state of Augmented Reality and how HTML5 relates to that. The presentation also includes an overview of common functionality of a Augmented Reality engine (example ARchitect by Wikitude)

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Augmented Reality and HTML5 - Wikitude @FINHTML5 conference

  1. 1. Adding AugmentedReality to theHTML5 mixPhilipp Nagele - Director Partner Relations@wikitude | www.wikitude.com | + Wikitude Developers The global leader in Augmented Reality Updated 15.1.2013
  2. 2. Agenda•  About Wikitude and who we are•  Evolution of AR•  Why HTML5 is relevant for AR•  AR in the web browser•  Live Demo and Coding
  3. 3. What is Wikitude? The World’s leading mobile Augmented Realityplatform (first mobile AR browser in 2008)Voted “Best Augmented Reality Browser” for 2009,2010, 2011, 2012 (Augmented Planet) The Makers of the leading AR SDK, voted “Best AR Tool or Platform” 2011, 2012Truly global reach: 13 million users, 32 languages 100 million POIs aggregatedThe company behind the international ARstandard “ARML 2.0” by OGC 3
  4. 4. Reach your audience – 13 million users!
  5. 5. Wikitude’s Global Reach
  6. 6. What is Augmented Reality? …the technical and boringview of real-world answer is: Augmented reality (AR) is a live view of the real- world whose elements are augmented by computeraugmented by generated content. computer generated content.
  7. 7. Use Cases forAugmentedReality
  8. 8. Understand what you are looking at… Mock-ups only!
  9. 9. What’s around me…? Mock-ups only!
  10. 10. Make smarter choices…. Mock-ups only!
  11. 11. Follow your friends’ footprints… Mock-ups only!
  12. 12. AR Gaming
  13. 13. Augmented Reality 1.0
  14. 14. Augmented Reality 1.0
  15. 15. 3D Architecture: Roman Gladiator Schoolh"p://www.youtube.com/watch?v=c45TkpAAuPk:
  16. 16. Make the invisible visibleConnect the offline with the online world
  17. 17. State of AR
  18. 18. From Science Fiction …Concept first mentioned 1901by L. Frank Baum in a shortstory “The Master Key”
  19. 19. … to Hollywood … 21:
  20. 20. …. to hardware based systems …
  21. 21. … to smartphones and tablets …
  22. 22. … to AR Glasses? Matt Kwan, PhD CandidateGoogle Concept ‘Project Glass’ 24:
  23. 23. The other third screen?Desktop Mobile Augmented Reality
  24. 24. The other third screen? Desktop Mobile Augmented RealityInformationDensity +:Context =:Relevance
  25. 25. Source: Cybershack, ExploreEngage.com
  26. 26. The solution isHTML(5)and JavaScript
  27. 27. Technology Overview•  Wikitude uses ARchitect as central platform component for the Wikitude World Browser as well as the SDK for external developers Na#ve&OS&•  Augmented Reality Rendering Engine incl. JavaScript API•  Content is created using HTML5, JavaScript Wikitude World Wikitude SDK and CSS Browser•  Geo-based and Image Recognition features unified ARchitect Engine•  Convenience features for easy content creation Native OS•  Available for BlackBerry 10, iOS and Android 29:
  28. 28. HTML content creation and AR rendering Web View 3D Augmented Reality View
  29. 29. GeoObjects & HTML content Web View Menu bar jQuery support Augmented Reality View Geo-located POIs Multiple Drawables - 3 images - 3 text labels
  30. 30. Support for jQuery and web APIs
  31. 31. Image Recognition and Geo combined
  32. 32. Features of theARchitectEngine
  33. 33. HTML Drawables •  Complex visualization of a POI cumbersome •  adding multiple image drawables, label drawables and arrange them •  HTML Drawable renders HTML code as a compositevar$poiHTMLdrawable$=$new$AR.HtmlDrawable($ ${uri:"myHotel.html"},$$ $4,$$ ${scale:1,$updateRate:AR.HtmlDrawable.UPDATE_RATE.STATIC}$);$
  34. 34. Relative locations •  Convenience feature to define relative locations •  Relative to current location (e.g. 300m west) •  Relative to other any other location (e.g. 200m east of lat= 47.812 lon= 13.045)
  35. 35. Example: Solar System
  36. 36. Animations •  Advanced Animation capabilities in ARchitect Engine •  Sprite Animations •  3D Transformations •  Animation Groups
  37. 37. 3D Transformations - •  Any:drawable:can:be:animated:using:3D:transformaIons: –  Heading:(y5axis): –  Roll:(z5axis): –  Tilt:(x5axis):
  38. 38. Radar component •  Visualizes Geo-Objects in radar component •  Geo-Objects have separate representation in radar component (marker) •  Radar design is fully customizable –  North indicator –  Background image –  Geo-Objects •  Helps user find your content
  39. 39. Direction Indicator •  Indicates:posiIon:of: Drawable:which:is:out:of: field:of:vision: •  Shows:shortest:path:to: object: •  Fully:customizable: •  Help:users:find:content:
  40. 40. Image Recognition •  Augment Targets using ARchitect Engine capabilities (Drawables, Sounds, Animations) var$logoTracker$=$new$AR.Tracker("WikitudeLogo.zip");$ var$image$=$new$AR.ImageResource("overlay.png");$ var$overlay$=$new$AR.ImageDrawable(image,$1.0);$ var$trackable2DObject$=$$ $$$$$$$$new$AR.Trackable2DObject(logoTracker,$ "WikitudeLogo",{$drawables:${$cam:$overlay$}});$
  41. 41. 3D Models•  Import of 3D models•  Full functionality of drawables•  Works with Geo and Image Recognition
  42. 42. AR in astandard webbrowser
  43. 43. Can AR applications run in a web browser? •  HTML5:based:APIs: –  Stream:API: –  Geo:LocaIon: –  Device:OrientaIon: •  Proof:of:concept:running:in: Opera:Mobile:
  44. 44. Sensor Fusion
  45. 45. Thank youPhilipp Nagele, Director Partner RelationsPhilipp.nagele@wikitude.com@pnagele, @wikitude, +PhilNageleSlides available tomorrow on Slideshare

×