Augmented Reality + HTML 5 = Argon
Marker-based AR <ul><li>Uses specially-designed markers to deliver content. </li></ul><ul><ul><li>Images or video </li></u...
Location-based AR <ul><li>C ombines the geo-location capabilities of a smart phone with the phone’s video camera to overla...
<ul><li>Currently under development by the Augmented Environments Lab (AEL) at Georgia Tech </li></ul><ul><li>2nd iteratio...
KML <ul><li>Developed for use with Google Earth </li></ul><ul><li>XML-based language schema for expressing geographic anno...
KARML <ul><li>KARML extends KML by extending/adding a few elements that are geared towards authoring AR experiences: </li>...
<Placemark> <ul><li>The <Placemark> element is the core element for building AR experiences with KARML </li></ul><ul><li>S...
Why are GeoSpots important? <ul><li>GPS/Cellular location sensors are only accurate to within 8-20 meters in daily use (th...
 
 
 
22 nd  floor observation deck ssid:  eguest pw:  movesomeone
Upcoming SlideShare
Loading in...5
×

Augmented Reality and HTML5 - The Future of Mobile App Development

4,284
-1

Published on

Presented at the Atlanta HTML5 Meetup

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,284
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Layar is a platform that hosts content and the requisite JSON responses used by the app to create AR experiences Wikitude “Worlds” is also a hosted solution that levereages KML and ARML (Augmented Reality Markup Language) ARML  ARML is based on KML but it enables to add much more information to your point of interest e.g. Telephone-number, Address, Links, different icons and images.
  • All rendering is done using a UIWebView; thus any HTML5/CSS3 features that can be used in WebKit can be used in Argon; CSS3 features include Transforms and Animation. Behind the scenes, Argon actually relies on CSS3 3D transforms when orienting HTML content ** Key component here is that both content development and delivery are primarily based on existing web technologies Channels = Onion Skins
  • KML = “Keyhole Markup Langauge”
  • Imagine Google maps: the pin = label, the bubble that displays when you click the pin = balloon  this is a metaphor
  • GeoSpot = hot spot that can trigger events
  • Think of an application that “transports” users to different locations
  • Orientation: billboard means it’s always directly facing the camera Can set heading, tilt, and roll directly if necessary (e.g. overlaying an element on the south-facing side of a building)
  • Download Argon first!! Suggest installing iNigma QR-code reader
  • Augmented Reality and HTML5 - The Future of Mobile App Development

    1. 1. Augmented Reality + HTML 5 = Argon
    2. 2. Marker-based AR <ul><li>Uses specially-designed markers to deliver content. </li></ul><ul><ul><li>Images or video </li></ul></ul><ul><ul><li>3D models </li></ul></ul>
    3. 3. Location-based AR <ul><li>C ombines the geo-location capabilities of a smart phone with the phone’s video camera to overlay location-relevant information </li></ul><ul><ul><li>Targeted to iPhone and Android devices </li></ul></ul><ul><ul><li>Third-party programs have been developed to distribute and display location-based AR content: </li></ul></ul><ul><ul><ul><li>LayAR </li></ul></ul></ul><ul><ul><ul><li>Wikitude </li></ul></ul></ul><ul><ul><ul><li>Argon </li></ul></ul></ul>
    4. 4. <ul><li>Currently under development by the Augmented Environments Lab (AEL) at Georgia Tech </li></ul><ul><li>2nd iteration (v1.2.0) is available in the iTunes AppStore </li></ul><ul><li>Leverages an extended version of KML called “KARML” to render points of interest </li></ul><ul><li>Visual elements are rendered using HTML 5 by way of WebKit </li></ul><ul><li>Includes a Javascript API for dynamically altering geo-spatial information </li></ul><ul><li>jQuery is bundled into the app </li></ul><ul><li>Distinct AR experiences are represented as separate “Channels” </li></ul><ul><li>Channels are served via .kml files hosted on a web server </li></ul>
    5. 5. KML <ul><li>Developed for use with Google Earth </li></ul><ul><li>XML-based language schema for expressing geographic annotation and visualization </li></ul><ul><li>HTML, CSS, and Javascript can be included in the <description> element, wrapped in a CDATA section </li></ul>
    6. 6. KARML <ul><li>KARML extends KML by extending/adding a few elements that are geared towards authoring AR experiences: </li></ul><ul><ul><li>Label (extended) </li></ul></ul><ul><ul><li>Balloon (extended) </li></ul></ul><ul><ul><li>Tracker </li></ul></ul><ul><ul><li>Sound </li></ul></ul>
    7. 7. <Placemark> <ul><li>The <Placemark> element is the core element for building AR experiences with KARML </li></ul><ul><li>Sounds, balloons, labels, and GeoSpots can all be attached to placemarks </li></ul><ul><ul><li>GeoSpots are defined via <Camera> or <LookAt> nested within a <Placemark> </li></ul></ul><ul><li>GeoSpots are special points of interest that are tied to the user’s location </li></ul><ul><li>Argon provides three ways to activate a GeoSpot: </li></ul><ul><ul><li>The User manually sets their location within the Argon app </li></ul></ul><ul><ul><li>The User wanders into a GeoSpot and the app actively recognizes it </li></ul></ul><ul><ul><li>The GeoSpot is set dynamically via the Javascript API </li></ul></ul>
    8. 8. Why are GeoSpots important? <ul><li>GPS/Cellular location sensors are only accurate to within 8-20 meters in daily use (though “Wi-Fi assist” can improve accuracy) </li></ul><ul><li>GeoSpots can be used to “enforce” 100% accuracy by communicating the User’s location directly to Argon </li></ul><ul><li>Special content can be associated with GeoSpots: </li></ul><ul><ul><li>360-degree panoramic images that effectively “surround” the User </li></ul></ul><ul><ul><li>Sounds </li></ul></ul>
    9. 12. 22 nd floor observation deck ssid: eguest pw: movesomeone
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×