Download as PDF, PPTX
![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](https://image.slidesharecdn.com/designinginteractivewebbasedarexperiencesfitctoronto2018-180424175031/75/Designing-Interactive-Web-Based-AR-Experiences-19-2048.jpg)
![Low Poly [Obj & Mtl]
Performant ⚡
Public & Remixable
CC-BY License 🙂
Beautiful & Playful
Baked AO 😋
poly.google.com poly.google.com](https://image.slidesharecdn.com/designinginteractivewebbasedarexperiencesfitctoronto2018-180424175031/75/Designing-Interactive-Web-Based-AR-Experiences-21-2048.jpg)
![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](https://crownmelresort.com/image.slidesharecdn.com/designinginteractivewebbasedarexperiencesfitctoronto2018-180424175031/75/Designing-Interactive-Web-Based-AR-Experiences-19-2048.jpg)
![Low Poly [Obj & Mtl]
Performant ⚡
Public & Remixable
CC-BY License 🙂
Beautiful & Playful
Baked AO 😋
poly.google.com poly.google.com](https://crownmelresort.com/image.slidesharecdn.com/designinginteractivewebbasedarexperiencesfitctoronto2018-180424175031/75/Designing-Interactive-Web-Based-AR-Experiences-21-2048.jpg)
Uploaded byFITC
Designing Interactive Web Based AR Experiences
This document discusses designing interactive augmented reality experiences for the web. It covers using smartphone AR capabilities like motion tracking and understanding the environment. It also discusses tools like WebARonARCore and WebARonARKit that allow bringing AR to the web. Prototypes were built to explore use cases, design principles, interfaces, and developer workflows. Code examples demonstrate techniques like loading assets, 3D rendering, model compression, and polyfills to enable AR capabilities on desktop. Guidelines and specifications and resources for getting started with web-based AR are also referenced.
More Related Content
Similar to Designing Interactive Web Based AR Experiences
Designing Interactive Web Based AR Experiences
- 1. Designing Interactive WebBased AR Experiences Reza Ali | @rezaali | WebXR | Daydream | Google | FITC Toronto 2018
- 4.
- 5. Accurate 6-DOF motiontracking Compositing the virtual and real Basic world understanding: • Feature points & marker detection* • Horizontal & vertical plane detection* • Basic illumination determination
- 7. The future ofaugmented reality sounds a lot like the web
- 8.
- 9.
- 10.
- 12. We’ve been buildingprototypes 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)
- 13.
- 17. 🤔 How long didit take? What went into it? How was this crafted? How was this design? Where is the code?
- 18.
- 19. Minimizing the useof 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
- 21. Low Poly [Obj& Mtl] Performant ⚡ Public & Remixable CC-BY License 🙂 Beautiful & Playful Baked AO 😋 poly.google.com poly.google.com
- 22. 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
- 23. Responsive Layout viaBootstrap 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 💡
- 24. 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
- 25. Show off Searching Reticle State Showoff Tracked Reticle State Reticle Searching State Reticle Tracking State
- 26.
- 27. Show off AR Controls Production ARControls (Debug View) AR Controls
- 28. AR Transition (0.25xSpeed) 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
- 29. Entering & ExitingAR 1. Zero window scroll 2. Pop off canvas 3. Remove all content 4. Add canvas back 5. Add fullscreen CSS 6. Reverse for exiting
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 42.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. Are we thereyet?
- 54. Novel hardware &software
- 55.