Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Interactive Web Based AR Experiences


Published on

Presented at FITC Toronto 2018
Details at

Reza Ali, Google Inc.

Smartphone based augmented reality (AR) is enabling all types of new applications and interactive experiences. We believe that when AR is coupled with the web and exposed as an API that web developers can use to build AR content, we’ll start to see AR content become more pervasive and ubiquitous. Reza is excited to share what they have been developing at Google and how others can start creating web based AR experiences to enhance storytelling, interactive experiences, education, and shopping.

To raise awareness and excitement for web based augmented reality websites and how to design and implemented web based AR content.

Target Audience
Designers and developers who are interested in creating AR content via web technologies. Advertising agencies who are interested in integrating AR into their deliverables for their clients.

Assumed Audience Knowledge
General knowledge of how websites are made, HTML, CSS, Javascript, Threejs, WebGL

Five Things Audience Members Will Learn
The current state of smart phone based augmented reality
The current state of web based augmented reality (WebAR)
AR visual and interaction design guidelines
How to get started with WebAR (three,js,, js, node, etc.)
Things to keep in mind for designing performant WebAR applications

Published in: Design
  • If we are speaking about saving time and money this site ⇒ ⇐ is going to be the best option!! I personally used lots of times and remain highly satisfied.
    Are you sure you want to  Yes  No
    Your message goes here
  • Check the source ⇒ ⇐ This site is really helped me out gave me relief from headaches. Good luck!
    Are you sure you want to  Yes  No
    Your message goes here
  • There is a useful site for you that will help you to write a perfect. And valuable essay and so on. Check out, please
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉
    Are you sure you want to  Yes  No
    Your message goes here

Designing Interactive Web Based AR Experiences

  1. 1. Designing Interactive Web Based AR Experiences Reza Ali | @rezaali | WebXR | Daydream | Google | FITC Toronto 2018
  2. 2. Why smartphone AR?
  3. 3. Accurate 6-DOF motion tracking Compositing the virtual and real Basic world understanding: • Feature points & marker detection* • Horizontal & vertical plane detection* • Basic illumination determination
  4. 4. The future of augmented reality sounds a lot like the web
  5. 5. WebARonARCore WebARonARKit
  6. 6. WebARonARCore WebARonARKit
  7. 7.
  8. 8. We’ve been building prototypes to help explore: • Impactful use cases (understanding, vibes) • design principles (how, why, what, when, where) • diegetic interfaces (XR UX) • interaction design (raycast everything) • rendering techniques (sdf font rendering) • developer workflows (desktop prototyping)
  9. 9. WebAR-Article
  10. 10. 🤔 How long did it take? What went into it? How was this crafted? How was this design? Where is the code?
  11. 11. ES6
  12. 12. Minimizing the use of new Scratch matrices, vectors, quaternions ES6 imports / exports to avoid pollution Used [raw, image, glslify, json] loaders Serving & reload via webpack-dev-server eslint to catch mistakes and garbage
  13. 13. Low Poly [Obj & Mtl] Performant ⚡ Public & Remixable CC-BY License 🙂 Beautiful & Playful Baked AO 😋
  14. 14. Converted .obj to .drc Astronaut From Poly 185k > 9.5k ~20x 🤓 Astronaut From NASA 3.1M > 121k ~26x 😎 google/draco
  15. 15. Responsive Layout via Bootstrap CSS Styles via Bootswatch (Paper Theme) three.js (shadows, lights, shaders, math) Model sourced from Model compressed ~20x by Draco Desktop AR Prototyping Environment 💡
  16. 16. Polyfills AR api 🔥 RAY MARCHES 🔥 virtual scene (SDFs) GPU Hit Computation GPU > JS Encode float Simple 1 line include Rapidly iterate UX & UI Desktop AR Prototyping Environment
  17. 17. Show off Searching Reticle State Show off Tracked Reticle State Reticle Searching State Reticle Tracking State
  18. 18. Reticle Fade Out AR Flow
  19. 19. Show off AR Controls Production AR Controls (Debug View) AR Controls
  20. 20. AR Transition (0.25x Speed) Entering & Exiting AR 1. Remove model 2. Remove SDF grid 3. Remove HUD 4. Fade out sphere 5. Fade in HUD 6. Enter AR flow
  21. 21. Entering & Exiting AR 1. Zero window scroll 2. Pop off canvas 3. Remove all content 4. Add canvas back 5. Add fullscreen CSS 6. Reverse for exiting
  22. 22. WebAR-Article webar-article
  23. 23. Annotations Animations Interactions
  24. 24. ARControls
  25. 25. Poly API
  26. 26. Animation Test
  27. 27. Performance Test
  28. 28. SDF Font Rendering
  29. 29. Proximity Based Annotations
  30. 30. WebAR-Place
  31. 31. Microsite Design
  32. 32. Conclusions
  33. 33. Design Guidelines designguidelines.withgo
  34. 34. WebXR Spec immersive-web/webxr
  35. 35. Getting Started ar/develop/web/getting- started
  36. 36. Thanks! @rezaali
  37. 37. Off the record
  38. 38. Exponential growth
  39. 39. Are we there yet?
  40. 40. Novel hardware & software
  41. 41. Connecting the dots…