The engineering of 3D Spatial Web Interfaces
A 3D Spatial Web Interface is built on the Scene Document Model, which gives the pure 3D scene graph — solids, lights, groups, cameras — the structure and usability of a document: an element tree, bubbling events, addresses, per-element state, save and load. These guides define the terms, walk the model's architecture, and publish the measurements, grounded in one working implementation: the Software 4 Senses 3D Spatial Web Studio.
Start here: the category and its model
- What Is a 3D Spatial Web Interface? The category definition: the document-model-vs-render-target gap and the five defining properties.
- Functional 3D vs. Decorative 3D Web Interfaces The load-bearing contrast — and the Scroll-Triggered Canvas Trap most web 3D is stuck in.
- The Scene Document Model: Document Structure for 3D Elements 3D elements behaving like a document: an element tree, bubbling events, per-element state, and a scene that saves.
Architecture guides
- Mapping CSS Box Models and Grid Layouts to 3D Coordinates The measurement-twin pattern: the browser's own layout engine solves the boxes; a pure solver lifts them to world space.
- Event Propagation in 3D: From Screen Space to Scene Records CPU picking against distance-field twins of the simple primitives and conservative bounds for the rest, and a message bus that rebuilds DOM-style bubbling over the scene's record tree.
- Scroll Semantics for 3D Sites: Rails, Detents, and Scroll Grammars Rails, not WASD: one scalar cursor, snap physics, the eight grammars, and vestibular safety as lintable code.
- Synchronizing Web Animations API Easing with a GPU Render Loop The browser as interpolator: typed CSS custom properties, the analog-first 'current' keyframe, rendezvous barriers.
Measured deep-dives
- Picking and Culling Spatial Hierarchies: BVH for Document Scenes Offers-per-ray as the census unit, structural-only dirtiness, and an acceleration structure that declines audibly.
- Measuring WebGPU Compute Honestly: an A/B Discipline The eight-clause protocol — timestamp quantization, pixel-identity gates, noise floors — and the failure modes that produced fake results.
- Text in Ray-Marched Scenes: Distance Fields vs. Triangles Why 3D text must be a solid, and a complete A/B — including the kill criterion that failed.
Putting it to work
- Migrating a 2D HTML/CSS Layout to a 3D Spatial Web Interface Pages become stages, grid containers become rigs, divs become slabs — and CSS keeps doing the layout.
- Spatial Web Glossary Every coined term in one place, one line each.