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

240 views

Published on

Presented at FITC Toronto 2018
Details at http://fitc.ca/event/to18/

Reza Ali, Google Inc.

Overview
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.

Objective
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, three.ar.js, js, node, etc.)
Things to keep in mind for designing performant WebAR applications

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    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 github.com/google-ar/WebARonARCore WebARonARKit github.com/google-ar/WebARonARKit
  7. 7. three.ar.js github.com/google-ar/ three.ar.js
  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 😋 poly.google.com poly.google.com
  14. 14. Converted .obj to .drc Astronaut From Poly 185k > 9.5k ~20x 🤓 Astronaut From NASA 3.1M > 121k ~26x 😎 https://github.com/ google/draco github.com/google/draco
  15. 15. Responsive Layout via Bootstrap CSS Styles via Bootswatch (Paper Theme) three.js (shadows, lights, shaders, math) Model sourced from poly.google.com 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 github.com/google-ar/ 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 ogle.com/ar-design
  34. 34. WebXR Spec https://github.com/ immersive-web/webxr
  35. 35. Getting Started developers.google.com/ 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…

×