WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2021 • Jun 30, 2021

Live Coding an Augmented Reality Game with WebXR

Christian Grail

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.

Pause
Mute Enter Fullscreen
#1 about 6 min

Moving from enterprise software to virtual reality interfaces

Translating dense business workflows into immersive three-dimensional environments simplifies spatial pattern discovery but introduces extreme physical isolation.

#2 about 2 min

Transitioning from virtual to augmented reality

Maintaining the surrounding physical context with augmented reality prevents collisions and disorientation inherent to fully opaque virtual simulations.

#3 about 4 min

Evolution from marker-based to markerless tracking

Replacing static reference codes with computational contrast scanning delivers seamless spatial tracking without restrictive printouts.

#4 about 4 min

WebXR standards and current hardware capabilities

Standardizing spatial web APIs via WebXR circumvents rigid mobile app installations while integrating automated depth-scanning capabilities.

#5 about 3 min

Setting up a WebXR scene with Three.js

Initializing a fundamental three-dimensional canvas inside the browser prepares the foundational matrix to support custom immersive rendering.

#6 about 4 min

Constructing and positioning primitive shapes in space

Defining dimensional box properties and mapping coordinate controllers plots new physical boundaries securely inside the running projection.

#7 about 4 min

Animating spatial objects using interpolation tweens

Creating programmatic tween timelines simplifies smooth vector transformations needed to propel geometries cleanly across a rendered scale.

#8 about 4 min

Loading and transforming complex external 3d assets

Injecting modular model files dynamically into customized coordinates embeds dense polygon assets without crashing lightweight rendering pipelines.

#9 about 3 min

Programming object hit detection and audio feedback

Tracking bounding box intersections triggers synchronized conditional scripts to instantly swap target visuals and execute complementary audio files.

#10 about 6 min

Hardware ergonomics and the future of spatial computing

Replacing cumbersome handheld smartphones with localized wearable optics guarantees a comfortable pathway to daily immersive interface adoption.

#11 about 10 min

Community questions on WebXR development and hardware

Addressing early integration bottlenecks highlights viable hardware simulators and necessary plugin architectures before deploying final spatial code.

Matching moments

2:13 min

Introduction to enhanced internet using WebXR technology

Desiree Santos Desiree Santos +1 · World Congress 2024

3:00 min

Choosing appropriate frameworks and development tools for WebXR

Desiree Santos Desiree Santos +1 · World Congress 2024

2:47 min

Architectural pathways for cross-platform mixed reality development

Mario Petricevic · World Congress 2024

2:29 min

Debunking XR misconceptions with practical manufacturing examples

rafek rafek · World Congress 2024

2:09 min

Introduction to building iOS augmented reality applications

Nermin Sehic · LIVE

3:22 min

Reviewing community applications and interactive experiences built with a-frame

Drishti Jain · LIVE

More from World Congress 2021

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
about 5 years ago

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Data Science on Software Data thumbnail
48:10
about 5 years ago

Data Science on Software Data

Markus Harrer

The journey from developer to devops - what i've learnt along the way thumbnail
42:44
about 5 years ago

The journey from developer to devops - what i've learnt along the way

Liam Hurrel, Alireza Chegini

How Data is Shaping our Games thumbnail
43:30
about 5 years ago

How Data is Shaping our Games

Johanna Pirker

Cross platform Augmented Reality development with React Native thumbnail
40:50
about 5 years ago

Cross platform Augmented Reality development with React Native

Vladimir Novick

How to Build a Monetization Strategy Based on User's in-app Behavior thumbnail
38:59
about 5 years ago

How to Build a Monetization Strategy Based on User's in-app Behavior

Natalie Sieradzki

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 16:10–16:40

Stage 5

From Software Agents to Physical Devices: Inside the Agentic Hardware Stack

Michael Yuan, Vivian Hu

Michael Yuan
Vivian Hu
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–16:00

Stage 6

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

September 24, 2026 · 10:20–10:50

Stage 1

The Browser Is Becoming an AI Runtime

Ajit Varma, Will Bryk

Ajit Varma
Will Bryk
Open session

World Congress 2026 North America

September 23, 2026 · 14:20–14:50

Stage 2

Build Interactive Copilot Experiences with Canvas Extensions

James Clancey

Principal Product Manager at GitHub

James Clancey
Open session

World Congress 2026 North America

September 25, 2026 · 09:40–10:10

Stage 5

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

September 25, 2026 · 14:50–15:20

Stage 4

Intelligence in Motion: Building the Next Generation of AI-Powered Apps on Zoom's Developer Platform

Speaker TBA

Related videos

WebXR: Enabling Virtual and Augmented Reality on the Web thumbnail
22:20
World Congress 2024 • about 2 years ago

WebXR: Enabling Virtual and Augmented Reality on the Web

Desiree Santos, Erick Henrique

Unleashing a New Reality: The Transformative Power of XR Technologies for Developers thumbnail
23:03
World Congress 2024 • about 2 years ago

Unleashing a New Reality: The Transformative Power of XR Technologies for Developers

Bastian Schütz

XR Demystified: Separating Facts from Fiction in 2024 thumbnail
30:46
World Congress 2024 • about 2 years ago

XR Demystified: Separating Facts from Fiction in 2024

rafek

Virtual Reality – The path to create your world thumbnail
41:40
LIVE • almost 5 years ago

Virtual Reality – The path to create your world

Drishti Jain

Apple Vision Pro: Proven Development Methods Meet the Latest Technology thumbnail
28:48
World Congress 2024 • about 2 years ago

Apple Vision Pro: Proven Development Methods Meet the Latest Technology

Mario Petricevic

AR Kit intro - placing 3D objects in a scene and interacting with them in real-time thumbnail
48:21
LIVE • over 5 years ago

AR Kit intro - placing 3D objects in a scene and interacting with them in real-time

Nermin Sehic

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.