Breaking the Plane
What if 3D objects could exist both in front of and behind your HTML content? This technique shatters the traditional z-index paradigm, allowing WebGL geometry to pierce through the document layer itself.
The geometric forms you see are not mere decorations. They occupy true 3D space, synchronized with your scroll position, creating an impossible spatial relationship between markup and mesh.
Dual Canvas Architecture
Two WebGL renderers operate in parallel—one at z-index -100 for background elements, another at z-index 100 for foreground. The camera's near and far clipping planes split the scene at a precise depth threshold, sorting objects by their distance from the viewer.
Technical Features
Depth Splitting
Objects seamlessly transition between foreground and background based on Z-position
Scroll Synchronization
Camera position perfectly tracks page scroll for spatial coherence
PBR Materials
Physically-based rendering with metallic, emissive, and transmissive surfaces
Element Framing
HTML elements mapped to 3D decorations that respond to their boundaries
The Splitting Plane
At Z = 0 in world space, the scene divides. Objects with positive Z coordinates render in front of HTML; negative Z renders behind. Watch the torus knot—its form physically intersects this invisible boundary, half emerging into your space.
How It Works
// The core rendering logic const splitDepth = 5.0; // Background pass: far objects camera.near = splitDepth; camera.far = 1000; rendererBg.render(scene, camera); // Foreground pass: near objects camera.near = 0.1; camera.far = splitDepth + 0.01; rendererFg.render(scene, camera);
Each frame renders twice with different frustum configurations. The epsilon offset prevents Z-fighting at the boundary. A forced pixels-per-meter calculation ensures 1:1 mapping between screen pixels and world units.
Rendering Modes
Toggle between rendering modes to understand how depth splitting works. In combined mode, observe how geometry smoothly crosses the HTML boundary.
"The screen is not a boundary—it's a threshold between dimensions."
— On Spatial Interface Design
Use Cases
Product showcases where 3D models emerge from specification sheets. Data visualizations that extend beyond their containers. Portfolio sites that blur the line between interface and artwork. Immersive documentation where examples literally come to life.
The technique preserves all benefits of semantic HTML—accessibility, SEO, progressive enhancement—while adding dimensional depth impossible with traditional CSS transforms.
Pixel-Perfect Alignment
A forced pixels-per-meter calculation ensures 3D coordinates map precisely to screen space. HTML element boundaries become 3D coordinates. The worlds align perfectly regardless of viewport dimensions or device pixel ratio.