What if you could build an entire AR game in your browser with just 60 lines of code? This live coding session shows you exactly how.
#1about 7 minutes
Exploring AR and VR for enterprise data visualization
Past projects demonstrate using handwriting chatbots and virtual reality to interact with and visualize large enterprise datasets from different angles.
#2about 1 minute
Understanding the core differences between AR and VR
Augmented reality enhances your real-world environment by adding virtual objects, whereas virtual reality completely replaces it with a simulated one.
#3about 3 minutes
The evolution from marker-based to markerless AR
Early augmented reality relied on physical markers like QR codes, but modern markerless AR uses device sensors to dynamically find anchors in the environment.
#4about 3 minutes
The WebXR standard and its browser ecosystem
The WebXR standard unifies web-based AR and VR, with growing support in browsers like Chrome and future adoption expected in Safari.
#5about 3 minutes
Setting up a WebXR project with Three.js
A basic WebXR application is initialized using Three.js to manage the 3D scene, camera, renderer, lighting, and the AR session button.
#6about 3 minutes
Creating and placing 3D objects in an AR scene
Learn to create a 3D object using Three.js geometry and materials, then position and orient it in the real world based on user touch input.
#7about 3 minutes
Animating 3D objects in WebXR using tweening
Use a tweening library to smoothly animate an object's position from a starting point to an end point and remove it from the scene upon completion.
#8about 6 minutes
Implementing collision detection and game logic
Load a 3D model, check for intersections between its bounding box and another object, and trigger game events like explosions and sounds on collision.
#9about 5 minutes
The future of AR hardware and 3D interfaces
The next evolution in AR will be lightweight glasses that replace physical screens with large virtual displays, leading to a future of 3D user interfaces.
#10about 9 minutes
Getting started with WebXR development
The Q&A covers recommended resources like Mozilla's WebXR examples, using TypeScript with Three.js, and simulating AR experiences with a Chrome extension.
Related jobs
Jobs that call for the skills explored in this talk.
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTMLInside last week’s Dev Digest 215 .
🗿 Make AI talk like a caveman
🧠 A guide to context engineering for LLMs
🤖 Simon Willison on agentic engineering
🔐 Axios supply chain attack post mortem
🛡️ Designing AI agents to resist prompt injection
🎨 HTML in c...
Daniel Cranney
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI Inside last week’s Dev Digest 198 .
🎂 30 years of JavaScript
⏰ How long is a JavaScript second
💻 Clean code in Angular
🤦♂️ AI makes different mistakes than humans
👨💻 In-browser and offline AI
🟠 Undocumented Hacker News features
🐋 DeepSeek censored...
Daniel Cranney
The State of WebDev AI 2025 Results: What Can We Learn?Introduction
The 2025 edition of The State of WebDev AI offers a detailed snapshot of how developers are using AI today, which tools have gained the most traction over the past year, and what these trends suggest about the future of the industry.
In...