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

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 • about 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.