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 · WWC 2024

3:00 min

Choosing appropriate frameworks and development tools for WebXR

Desiree Santos Desiree Santos +1 · WWC 2024

2:47 min

Architectural pathways for cross-platform mixed reality development

Mario Petricevic · WWC 2024

2:29 min

Debunking XR misconceptions with practical manufacturing examples

rafek rafek · WWC 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
almost 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

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

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

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

Building Stuff with GenAI - The Open Minded Workshop beyond OpenAI

Andreas Erben

CTO for Applied AI and Metaverse at daenet

Andreas Erben
Open session

World Congress 2026 North America

GitHub’s Team X-Ray: Your Repository Knows More About Your Team Than Your Team Does

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg

Related videos

WebXR: Enabling Virtual and Augmented Reality on the Web thumbnail
22:20
WWC 2024 • almost 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
WWC 2024 • almost 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
WWC 2024 • almost 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
WWC 2024 • almost 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.