Adding AugmentedReality to theHTML5 mixPhilipp Nagele - Director Partner Relations@wikitude | www.wikitude.com | + Wikitud...
Agenda•  About Wikitude and who we are•  Evolution of AR•  Why HTML5 is relevant for AR•  AR in the web browser•  Live Dem...
What is Wikitude? The World’s leading mobile Augmented Realityplatform (first mobile AR browser in 2008)Voted “Best Augment...
Reach your audience – 13 million users!
Wikitude’s Global Reach
What is Augmented Reality?                                               …the technical and boringview of real-world      ...
Use Cases forAugmentedReality
Understand what you are looking at…                  Mock-ups only!
What’s around me…?        Mock-ups only!
Make smarter choices….          Mock-ups only!
Follow your friends’ footprints…              Mock-ups only!
AR Gaming
Augmented Reality 1.0
Augmented Reality 1.0
3D Architecture: Roman Gladiator Schoolh"p://www.youtube.com/watch?v=c45TkpAAuPk:
Make the invisible visibleConnect the offline with the online world
State of AR
From Science Fiction …Concept first mentioned 1901by L. Frank Baum in a shortstory “The Master Key”
… to Hollywood …                    21:
…. to hardware based systems …
… to smartphones and tablets …
… to AR Glasses?                                    Matt Kwan, PhD CandidateGoogle Concept ‘Project Glass’                ...
The other third screen?Desktop               Mobile    Augmented Reality
The other third screen?               Desktop   Mobile   Augmented RealityInformationDensity                             +...
Source: Cybershack, ExploreEngage.com
The solution isHTML(5)and JavaScript
Technology Overview•  Wikitude uses ARchitect as central platform   component for the Wikitude World Browser   as well as ...
HTML content creation and AR rendering          Web View  3D Augmented Reality View
GeoObjects & HTML content                     Web View                      Menu bar                      jQuery support  ...
Support for jQuery and web APIs
Image Recognition and Geo combined
Features of theARchitectEngine
HTML Drawables                •  Complex visualization of a POI                   cumbersome                •  adding mult...
Relative locations           •  Convenience feature to define              relative locations           •  Relative to curr...
Example: Solar System
Animations              •  Advanced Animation                 capabilities in                 ARchitect Engine            ...
3D Transformations - •  Any:drawable:can:be:animated:using:3D:transformaIons:   –  Heading:(y5axis):   –  Roll:(z5axis):  ...
Radar component          •  Visualizes Geo-Objects in radar             component          •  Geo-Objects have separate   ...
Direction Indicator              •  Indicates:posiIon:of:                 Drawable:which:is:out:of:                 field:o...
Image Recognition       •  Augment Targets using ARchitect          Engine capabilities (Drawables,          Sounds, Anima...
3D Models•  Import of 3D models•  Full functionality of   drawables•  Works with Geo and   Image Recognition
AR in astandard webbrowser
Can AR applications run in a web browser?                     •  HTML5:based:APIs:                       –  Stream:API:   ...
Sensor Fusion
Thank youPhilipp Nagele, Director Partner RelationsPhilipp.nagele@wikitude.com@pnagele, @wikitude, +PhilNageleSlides avail...
Upcoming SlideShare
Loading in...5
×

Augmented Reality and HTML5 - Wikitude @FINHTML5 conference

7,131

Published on

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
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,131
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

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

×