Augmented Reality is just a feature!

1,531 views

Published on

An overview of how Web Standards and Augmented Reality are combining to create a new Augmented Web.

This presentation was part of the "Open and Interoperable AR" session at #AWE2013.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,531
On SlideShare
0
From Embeds
0
Number of Embeds
573
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Augmented Reality is just a feature!

  1. 1. https://buildAR.com - image creditAugmented Reality is just a feature!
  2. 2. Who am I?Rob Manson @namborCEO of MOB Labs the creators of buildAR.comChair of the W3Cs Augmented Web Community GroupInvited Expert with the ISO, W3C & the Khronos GroupCo-Founder of ARStandards.orgAuthor of “Getting started with WebRTC” (available July)https://buildAR.com
  3. 3. In 2010 we showed the first model of Web based ARARStandards Workshop in Seoul 2010Patterns of Interest Proposal – Rob Mansonhttps://buildAR.com
  4. 4. In 2012 we created a test for the Augmented WebYou can test your device at theAWEsomeWEB.com nowhttps://buildAR.com
  5. 5. https://buildAR.comAnd we rebuilt our whole platformbased on this vision for the future of AR
  6. 6. https://buildAR.com
  7. 7. Today WebRTC has already introducedthe Augmented Web to over 1 Billion deviceshttps://buildAR.com - image credit
  8. 8. https://buildAR.comCurrent local image processing pipelineusing the Media Capture & Streams API1. Setup <video> element in the DOMa. declaratively then via getElementById or similarb. createElement(“video”) then appendChild()2. Access the cameraa. getUserMedia()NOTE: Currently can only select the default camera3. Pipe camera stream into <video>a. video.src = stream4. Setup <canvas> element in the DOMa. declaratively then via getElementById or similarb. createElement(“canvas”) then appendChild()5. Get 2D drawing contexta. canvas.getContext(2d);6. Draw <video> frame onto <canvas>a. canvas.drawImage(video, top, left, width, height);7. Get RGBA Uint8ClampedArray of the pixelsa. context.getImageData(top, left, width, height).data;8. Burn CPU (not GPU) cyclesa. for (blah) { for (blah) { … } … }NOTE: May also integrate other sensor data here9. Render resultsa. using HTML/JS/CSSb. using another <canvas> and drawImage()c. using WebGLd. a combination of all
  9. 9. https://buildAR.comJSARToolkit demo
  10. 10. https://buildAR.comFAST feature detection demo
  11. 11. https://buildAR.comWhats in the near future?Integrating WebRTC and Visual SearchUsing WebGL/GLSL to utilise GPU parallelismKhronos Groups OpenVXKhronos Groups Camera Working GroupLots more demos to share! 8)
  12. 12. Please join the W3CsAugmented Web Community Grouphttps://buildAR.com - image credit

×