Live Coding an Augmented Reality Game with WebXR

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.