Build an AR application using the WebXR API

on YouTube ↗30m

" summary

Creates a working mobile AR page with Chrome + an ARCore phone, a local webserver (port 8887) and USB debugging, using three.js to render a sunflower model, a reticle driven by hit test results from the WebXR Device API, and a soft shadow mesh so placed flowers cast real-looking shadows. Code shows exact session setup, required features (hit-test, DOM overlay), viewer reference space, cloning the model on select, and debugging via Chrome DevTools.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 0:37Ask Questions
3. 1:05Prerequisites
4. 2:09WebXR
5. 2:59What we'll do
6. 28:09Recap

" related talks

• 30mWebXR : augmented reality lands into our web browsersVincent Ogloblinsky · Devoxx Belgium 2019
• 23mBuilding Engaging Immersive ExperiencesChris Wilson, John Pallett · Chrome Dev Summit 2018
• 26mExploring Augmented Reality on the WebJordan Santell · JSConf EU 2018
• 47mAugmented Reality on the WebAlina Karpelceva · Build Stuff 2019
• 23mPerformant Augmented Reality for the WebAyşegül Yönet · NG-BE 2017
• 57mOn the path to WebARJerome Etienne, Alexandra Etienne · DevFest Nantes 2017
• 33mWebXR? Native virtual and augmented reality in browsersErick Wendel · BrazilJS Conf 2024
• 32mWriting Virtual and Augmented Reality Apps with Web TechnologyMichaela Lehr · You Gotta Love Frontend Conference 2018