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
over 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
over 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

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

Open session

ULTRON: Your Agent Has No Hands - Real-Time Voice, MCP, and Ten Phones on Stage

  • Sagar Tamang

    Two Spoon Technologies

    AI Engineer

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Building World-Aware Physical AI with Agent Memory and Context Graphs

  • Vasundhara Shukla

    Neo4j

    Developer Advocate

  • Zaid Zaim

    Neo4j

    Developer Advocate | Microsoft AI MVP

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.