WEBXR / THREE.JS · AN INTERACTIVE FIELD GUIDE
Make sense ofa spatial world.
From your first session to a room that feels real. Explore a demo, change a parameter, understand what happens. All in your browser.
Viewpoints / projections / depth
Two eyes. One shared world.
Explore stereo rendering- 15concepts
- 15tunable demos
- 3essays
- 2languages
What are you working on?
Start with a question. Follow it through.
- 01Start your first XR sceneConnect session requests, coordinate origins, visibility changes and environment blending.4 guides
- 02Understand your frame budgetSeparate the responsibilities of views, the scene and the compositor to investigate quality and performance.3 guides
- 03Build an interaction that worksConnect input sources, pointing, hand poses and movement into an interaction journey.3 guides
- 04Place an object in the roomDistinguish the information needed for placement, stable positioning, occlusion and lighting.5 guides
Browse by area
Small concepts. Complete experiences.
Four areas that follow the life of an XR experience.
Sessions and lifecycle
How a page asks the browser for an immersive session, and what it is allowed to assume once it has one.
Explore this area- Interactive guide
WebXR sessions
How a page asks for an immersive session, and what a reference space actually anchors to.
8 min read - Interactive guide
Reference spaces
Where (0, 0, 0) actually is, and why the same coordinate lands in five different places.
8 min read - Interactive guide
Session visibility
Three states, not two. The middle one is where most implementations get it wrong.
4 min read - Interactive guide
Environment blend modes
Why the same scene vanishes on an additive display, and what black really means.
5 min read
Rendering and presentation
What actually gets drawn, how many times, and who composites the result.
Explore this area- Interactive guide
Stereo rendering
Two eyes, two projections, and why IPD and foveation matter for framerate.
8 min read - Interactive guide
WebXR layers
Compositor layers, and why text and video are sharper outside your framebuffer.
6 min read - Interactive guide
Foveated rendering
Lowering the shading rate where the lens and your eye are already soft, and what it costs.
6 min read
Input and movement
Controllers, hands, and the uncomfortable problem of moving someone through a space they are standing still in.
Explore this area- Interactive guide
VR controllers
Reading controller input, casting a pointer ray, and firing haptics.
6 min read - Interactive guide
Hand tracking
The 25-joint hand model, and how a pinch gesture is detected from it.
9 min read - Interactive guide
Locomotion
Teleport versus smooth movement, and the comfort trade-off behind the choice.
7 min read
Understanding the real world
Five ways a runtime tells your page something about the room the user is standing in — each with a different shape and a different lie.
Explore this area- Interactive guide
AR hit testing
Finding real-world surfaces so virtual objects can sit on them.
9 min read - Interactive guide
Plane detection
Surfaces that appear, grow and merge — and why that changes how you attach content.
6 min read - Interactive guide
Anchors
Keeping placed content on a real point while the runtime rewrites its own map.
7 min read - Interactive guide
Depth sensing
Reading the device depth buffer, and the one comparison that makes AR sit in the room.
7 min read - Interactive guide
Lighting estimation
Spherical harmonics and a reflection cube map, so virtual objects belong to the room.
7 min read
AI × XR · LONG READS
The questions beyond the API.
Longer pieces about where AI and XR meet, and what the seam between them actually costs.
The runtime gives you geometry, not meaning
Scene understanding is the obvious use for a vision model on a headset, and it is also where the web platform has drawn a line it does not intend to move.
9 min readThere is no typing indicator in a room
Conversational latency that a text interface absorbs invisibly becomes a performance problem the moment the speaker has a body.
10 min readWhat sits between a generated mesh and a WebXR scene
The generation step got fast. The steps on either side of it did not, and the gap between them is where the time actually goes.
10 min read
See the change. Understand the reason.
Each guide pairs an adjustable demo with code and common mistakes. Desktop simulations explain visible effects; the text makes the limits of real devices explicit.