• Like
  • Save
Augmented Reality and HTML5 - Wikitude @FINHTML5 conference
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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 …

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)

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • @ExploreEngage Hi Scott. Oops...sorry about that. :) We've added exploreengage.com to slide 25.
    Are you sure you want to
    Your message goes here
  • Nice presentation. We would like a credit on the AR glasses runners interface. Thanks, scott @ exploreengage.com
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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. 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. 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. Reach your audience – 13 million users!
  • 5. Wikitude’s Global Reach
  • 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. Use Cases forAugmentedReality
  • 8. Understand what you are looking at… Mock-ups only!
  • 9. What’s around me…? Mock-ups only!
  • 10. Make smarter choices…. Mock-ups only!
  • 11. Follow your friends’ footprints… Mock-ups only!
  • 12. AR Gaming
  • 13. Augmented Reality 1.0
  • 14. Augmented Reality 1.0
  • 15. 3D Architecture: Roman Gladiator Schoolh"p://www.youtube.com/watch?v=c45TkpAAuPk:
  • 16. Make the invisible visibleConnect the offline with the online world
  • 17. State of AR
  • 18. From Science Fiction …Concept first mentioned 1901by L. Frank Baum in a shortstory “The Master Key”
  • 19. … to Hollywood … 21:
  • 20. …. to hardware based systems …
  • 21. … to smartphones and tablets …
  • 22. … to AR Glasses? Matt Kwan, PhD CandidateGoogle Concept ‘Project Glass’ 24:
  • 23. The other third screen?Desktop Mobile Augmented Reality
  • 24. The other third screen? Desktop Mobile Augmented RealityInformationDensity +:Context =:Relevance
  • 25. Source: Cybershack, ExploreEngage.com
  • 26. The solution isHTML(5)and JavaScript
  • 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. HTML content creation and AR rendering Web View 3D Augmented Reality View
  • 29. GeoObjects & HTML content Web View Menu bar jQuery support Augmented Reality View Geo-located POIs Multiple Drawables - 3 images - 3 text labels
  • 30. Support for jQuery and web APIs
  • 31. Image Recognition and Geo combined
  • 32. Features of theARchitectEngine
  • 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. 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. Example: Solar System
  • 36. Animations •  Advanced Animation capabilities in ARchitect Engine •  Sprite Animations •  3D Transformations •  Animation Groups
  • 37. 3D Transformations - •  Any:drawable:can:be:animated:using:3D:transformaIons: –  Heading:(y5axis): –  Roll:(z5axis): –  Tilt:(x5axis):
  • 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. 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. 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. 3D Models•  Import of 3D models•  Full functionality of drawables•  Works with Geo and Image Recognition
  • 42. AR in astandard webbrowser
  • 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. Sensor Fusion
  • 45. Thank youPhilipp Nagele, Director Partner RelationsPhilipp.nagele@wikitude.com@pnagele, @wikitude, +PhilNageleSlides available tomorrow on Slideshare