> Markdown version of [/videos/199-live-coding-an-augmented-reality-game-with-webxr?t=0](https://www.wearedevelopers.com/videos/199-live-coding-an-augmented-reality-game-with-webxr?t=0). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Live Coding an Augmented Reality Game with WebXR

Spatial computing could completely replace physical monitors within a decade. Front-run this revolution by live coding an interactive WebXR game using a few lines of Three.js.

- **Speakers:** Christian Grail
- **Event:** World Congress 2021
- **Published:** June 30, 2021
- **Duration:** 44:30
- **URL:** https://www.wearedevelopers.com/videos/199-live-coding-an-augmented-reality-game-with-webxr

## Summary

Augmented reality represents a significant frontier in user interfaces, moving beyond the physical limitations and spatial disconnects common in virtual reality. By embedding digital elements into the real world, developers can create immersive enterprise or gaming experiences without causing the user to navigate their physical environment blind. This spatial evolution is heavily propelled by the WebXR standard, which merges web-based AR and VR to bypass the cumbersome friction of app store installations. WebXR offers a seamless path to deployment directly across most modern mobile browsers, paving the way for wider consumer and enterprise adoption.

Prototyping these spatial experiences requires surprisingly little code when utilizing the right frameworks. Leveraging the Three.js library and WebXR device APIs, developers can establish a basic AR scene with rendering capabilities, ambient lighting, and geometry generation in just a few dozen lines of JavaScript. This live coding implementation demonstrates the structural foundations of interactive augmented reality construction, calculating vector positions, mapping matrix transformations, and relying on controller-to-world geometry. By combining tweening functions for fluid object animation and establishing spatial mesh bounding boxes, developers can efficiently compute 3D collision detection between digital objects in real time.

Ultimately, the near-term saturation of WebXR hinges on comprehensive browser support, notably Apple's full integration within iOS Safari. However, the trajectory of 3D UI suggests a fundamental shift in daily computing workflows. As hardware inevitably evolves from handheld smartphones toward lightweight smart glasses, spatial computing has the potential to completely replace physical monitors and traditional 2D interfaces within the next decade. Developers investing in Three.js and spatial geometry today are actively front-running this transition toward ubiquitous, screenless computing environments.

**Keywords:** webxr development, augmented reality web apps, three.js ar integration, markerless ar tracking, spatial computing ui, javascript 3d animation, vr data visualization, ar collision detection, lidar depth sensing, cross-browser webxr, matrix transformations, tweening 3d objects, browser-based ar simulation, coordinate geometry deployment

## Chapters

1. **Moving from enterprise software to virtual reality interfaces** (00:00) — Translating dense business workflows into immersive three-dimensional environments simplifies spatial pattern discovery but introduces extreme physical isolation.
1. **Transitioning from virtual to augmented reality** (05:43) — Maintaining the surrounding physical context with augmented reality prevents collisions and disorientation inherent to fully opaque virtual simulations.
1. **Evolution from marker-based to markerless tracking** (07:42) — Replacing static reference codes with computational contrast scanning delivers seamless spatial tracking without restrictive printouts.
1. **WebXR standards and current hardware capabilities** (11:02) — Standardizing spatial web APIs via WebXR circumvents rigid mobile app installations while integrating automated depth-scanning capabilities.
1. **Setting up a WebXR scene with Three.js** (14:24) — Initializing a fundamental three-dimensional canvas inside the browser prepares the foundational matrix to support custom immersive rendering.
1. **Constructing and positioning primitive shapes in space** (17:00) — Defining dimensional box properties and mapping coordinate controllers plots new physical boundaries securely inside the running projection.
1. **Animating spatial objects using interpolation tweens** (20:25) — Creating programmatic tween timelines simplifies smooth vector transformations needed to propel geometries cleanly across a rendered scale.
1. **Loading and transforming complex external 3d assets** (23:43) — Injecting modular model files dynamically into customized coordinates embeds dense polygon assets without crashing lightweight rendering pipelines.
1. **Programming object hit detection and audio feedback** (26:49) — Tracking bounding box intersections triggers synchronized conditional scripts to instantly swap target visuals and execute complementary audio files.
1. **Hardware ergonomics and the future of spatial computing** (29:34) — Replacing cumbersome handheld smartphones with localized wearable optics guarantees a comfortable pathway to daily immersive interface adoption.
1. **Community questions on WebXR development and hardware** (35:03) — Addressing early integration bottlenecks highlights viable hardware simulators and necessary plugin architectures before deploying final spatial code.

## Related Moments

- [Introduction to enhanced internet using WebXR technology](https://www.wearedevelopers.com/videos/965-webxr-enabling-virtual-and-augmented-reality-on-the-web) (from "WebXR: Enabling Virtual and Augmented Reality on the Web")
- [Choosing appropriate frameworks and development tools for WebXR](https://www.wearedevelopers.com/videos/965-webxr-enabling-virtual-and-augmented-reality-on-the-web) (from "WebXR: Enabling Virtual and Augmented Reality on the Web")
- [Architectural pathways for cross-platform mixed reality development](https://www.wearedevelopers.com/videos/1190-apple-vision-pro-proven-development-methods-meet-the-latest-technology) (from "Apple Vision Pro: Proven Development Methods Meet the Latest Technology")
- [Debunking XR misconceptions with practical manufacturing examples](https://www.wearedevelopers.com/videos/1117-xr-demystified-separating-facts-from-fiction-in-2024) (from "XR Demystified: Separating Facts from Fiction in 2024")
- [Introduction to building iOS augmented reality applications](https://www.wearedevelopers.com/videos/136-ar-kit-intro-placing-3d-objects-in-a-scene-and-interacting-with-them-in-real-time) (from "AR Kit intro - placing 3D objects in a scene and interacting with them in real-time")
- [Reviewing community applications and interactive experiences built with a-frame](https://www.wearedevelopers.com/videos/248-virtual-reality-the-path-to-create-your-world) (from "Virtual Reality – The path to create your world")

## Related Articles

- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 118 - not a total recall](https://www.wearedevelopers.com/magazine/452-dev-digest-118-not-a-total-recall)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)
- [Dev Digest 132 - Binging WADFlix?](https://www.wearedevelopers.com/magazine/473-dev-digest-132-binging-wadflix)

## Related Jobs

- [Working Student Frontend Development](https://www.wearedevelopers.com/jobs/ext/1185791-working-student-frontend-development) at **ZEISS Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse**