Performant Augmented Reality for the Web

on YouTube ↗23m

" summary

Builds a declarative Angular component that wires WebGL and WebRTC into a mobile AR pipeline using three.ar.js plus three.js, ARKit/ARCore and NX tooling; loads OBJ/MTL models, uses requestAnimationFrame, raycasting for touch hits, and offloads rendering from Angular change detection to hit 60fps rendering. Demo is a filmed room prototype (a “Jeff” dinosaur) and one browser-friendly repo; one demo only runs on specific device/browser combinations.

AI-written summary · about

" chapters (23)

1. 0:00Intro
2. 0:32AnX
3. 1:38Resources
4. 2:27Reality
5. 3:31Augmented Reality
6. 4:14Mental Reality
7. 4:33Medical Industry
8. 5:50WebGL API
9. 7:10Tree AR
10. 9:11Setup
11. 12:37AR Perspective Camera
12. 13:29VR Controls
13. 13:56Render
14. 15:13Change Detection
15. 15:48Update Function
16. 16:22Animation Frame
17. 17:16Load Model
18. 18:01Click Events
19. 18:46Matrix Data
20. 19:22Directives
21. 20:53Tools
22. 21:39Demo
23. 22:12Outro

" related talks

• 26mHow To Do Augmented Reality On The Web — The AR.js Open-Source ProjectJerome Etienne · JSConf.Asia 2018
• 56mBringing mixed reality to the webMarko Letic · HolyJS 2018 Moscow
• 57mOn the path to WebARJerome Etienne, Alexandra Etienne · DevFest Nantes 2017
• 47mAugmented Reality on the WebAlina Karpelceva · Build Stuff 2019
• 23mWebAR: the Augmented Reality for your BrowserAnastasiia Miroshnichenko · iJS London 2019
• 26mLocation based immersive experiences with Angular and WebXRAyşegül Yönet · Angular Connect 2018
• 26mExploring Augmented Reality on the WebJordan Santell · JSConf EU 2018
• 22mThe Case for Augmented Reality on the WebMarley Rafson · JSConf EU 2019