The intersection of web development, modern graphics APIs, and creative coding has reached a new milestone as developers increasingly leverage the capabilities of WebGPU to push browser-based 3D rendering beyond traditional limits. Ahead of the inaugural Three.js Conference in Paris, creative developers Jacob, Simon, and Filip from the Swedish digital studio Shader have published a technical breakdown of an experimental project titled the infinite liquid glass carousel. Built using Next.js, React Three Fiber, and the Three.js Shading Language (TSL), the project demonstrates how advanced visual effects such as chromatic dispersion, refraction, and physics-based cloth simulation can be achieved efficiently in a single rendering pass without relying on heavy post-processing pipelines or traditional lighting models.
The experiment features an expansive grid of video-playing glass cards that appear to infinitely loop across a seamless surface. Rather than utilizing standard, resource-heavy 3D geometry and multi-pass rendering buffers, the development team engineered a custom shader-driven technique. By combining signed distance functions (SDF), procedural height maps, and GPU-accelerated compute passes, the project highlights the performance gains and architectural shifts enabled by modern web graphics standards.
Technical Architecture and the WebGPU Stack
At the foundation of the infinite liquid glass grid is a high-performance technology stack centered around Next.js, React Three Fiber version 10, and the native WebGPU renderer. Shaders are constructed using TSL, a modern shading language designed to integrate seamlessly with the Three.js ecosystem. Motion libraries handle drag mechanics and inertial spring physics, while HTTP Live Streaming (HLS) video feeds serve as dynamic textures across the interface.
Crucially, the architecture avoids the performance bottlenecks typically associated with real-time web graphics. The project operates entirely within a single render pass, omitting post-processing chains and separate render targets. This optimization allows the browser to maintain high frame rates even when handling complex visual distortions across numerous interactive elements simultaneously.
Faking Glass: Geometry-Free Refraction and Optics
Replicating realistic glass in real-time computer graphics traditionally demands complex geometry, dedicated lighting systems, and transmission buffers that capture background elements. Standard implementations, such as Three.js’s MeshPhysicalMaterial, rely on heavy computational machinery to simulate refraction, index of refraction (IOR), and thickness on three-dimensional models.
To bypass these performance limitations, Shader’s development team adopted a geometry-free approach, rendering each card as a flat, subdivided 2D plane. The illusion of depth, rounded corners, beveled edges, and optical refraction is computed entirely within the material shader using mathematical approximations.
The process begins with a 2D signed distance function (SDF) that determines the precise distance from any given pixel to the edge of a rounded rectangle. Negative values indicate regions inside the shape, while positive values denote the exterior. From this distance calculation, developers construct a procedural height map that simulates the varying thickness of the glass—flat in the center and tapering smoothly toward the boundaries. Utilizing a superellipse curve profile controlled by a uniform variable for bevel power, the shader transitions seamlessly from soft, rounded contours to sharp, angular bevels.
To calculate the physical bending of light, the shader evaluates surface normals by sampling the height map at incremental coordinate offsets. The resulting slope data generates accurate surface vectors without the need for pre-baked normal maps.
Chromatic dispersion—the characteristic rainbow fringing observed around the edges of physical glass—is achieved by iterating through color channels with slightly modified indices of refraction. Each rendering tap bends the light ray independently and maps it to a specific color channel. Because TSL compiles shader logic into an optimized node graph, these computational loops are unrolled at compile time. This design enables adaptive quality scaling, allowing high-performance desktop GPUs to process numerous sampling taps while mobile devices utilize fewer iterations without altering the underlying codebase.
Furthermore, the refracted texture mapped onto the glass is the video feed of the card itself, ensuring that the underlying media visibly warps as it passes through the simulated medium. Additional optical layers—including environment map reflections governed by Fresnel equations and directional rim lighting generated via SDF distance steps—complete the visual illusion without introducing a single light source into the 3D scene.
The Illusion of Infinity: Spherical Grid Mapping
The architectural layout of the grid contributes significantly to the immersive nature of the experience. Although the layout appears to be an endless flat plane, it functions on a closed-loop system. When a user drags the interface beyond a specific boundary, cards exiting one edge are programmatically repositioned to the opposite side.
To prevent the visual monotony typically associated with standard grid structures, the development team mapped the wrapped Cartesian coordinates as distances traversed across the surface of a massive virtual sphere. The individual cards are oriented outward along the spherical curvature. Elements positioned in the center are presented head-on, while those situated closer to the periphery progressively tilt away and scale down along the curve. This geometric transformation translates spatial positioning into a perceived depth cue, subverting the flat constraints of standard browser viewports.
User interaction is managed through gesture-based panning handlers, with position and velocity data maintained as continuous motion values outside of the React component tree. The React Three Fiber frame loop reads these values directly, eliminating unnecessary component re-renders during drag operations and ensuring fluid input responsiveness.
Evolving into Dynamic Fluid Simulation
Following the initial public release of the demonstration, community feedback prompted the development team to introduce dynamic physics to better align with the concept of liquid interfaces. The static grid was subsequently upgraded to a fully interactive cloth simulation driven by Extended Position-Based Dynamics (XPBD).
Implemented as TSL compute passes running natively on WebGPU, the simulation treats the entire surface as an interconnected patch of virtual fabric. Distance and bending constraints, combined with anchoring points tethered to the underlying sphere and a viscosity parameter, allow the cards to wobble, lag, and settle dynamically in response to user input.
To accompany this structural evolution, the project integrated high-performance text rendering. Because rigid HTML layers fixed via CSS transformation matrices could not accurately track a non-linear, wobbling cloth surface, the development team transitioned to signed distance field (MSDF) font rendering via the pmndrs/glyph library. Rendered directly within the 3D scene, the typographic elements now deform and refract in tandem with the glass panels they inhabit.
Broader Industry Implications and WebGPU Adoption
The technical methodologies showcased in Shader’s experiment underscore the accelerating transition toward WebGPU as a viable standard for high-fidelity web applications. As major browsers continue to expand hardware-accelerated graphics support, techniques previously restricted to native desktop applications—such as compute-shader-driven physics simulations and custom material nodes—are becoming increasingly practical for web deployment.
By demonstrating that complex visual effects can be achieved efficiently through mathematical approximation rather than brute-force geometry, experiments of this scale provide valuable architectural insights for creative developers, UI/UX designers, and graphics engineers. The elimination of heavy multi-pass render targets and traditional lighting calculations points toward a leaner future for interactive web media, where performance and aesthetic complexity can coexist seamlessly across diverse hardware ecosystems.
Industry Event Integration and Community Engagement
The unveiling of the infinite liquid glass grid coincides with the calendar of the inaugural Three.js Conference held in Paris, an event gathering leading practitioners in browser-based 3D graphics. Developers Jacob and Filip are slated to participate in conference sessions, engaging with the global graphics community to discuss advancements in WebGPU, TSL shader programming, and experimental web development methodologies.
As web standards evolve and rendering pipelines mature, projects like the infinite liquid glass grid illustrate the capacity of open web technologies to deliver cinematic-grade visual experiences directly within standard browser environments, setting a new benchmark for interactive digital design.
