The intersection of modern web standards, advanced graphics APIs, and creative development has reached a new milestone as the global web development community converges in Paris for the inaugural Three.js Conference. Ahead of the event, Jacob, Simon, and Filip, developers from the Swedish creative studio Shader, have captured widespread industry attention by releasing an experimental web application: an infinite liquid glass grid powered by WebGPU, Three.js, and the Three.js Shading Language (TSL).
The project, conceived during a dedicated R&D period free from client briefs or commercial deadlines, showcases how cutting-edge graphics pipelines can bypass traditional performance bottlenecks to render complex visual effects entirely within a single browser pass. As workshops commence and the main conference proceedings prepare to launch, this experiment serves as a timely case study on the expanding capabilities of browser-based 3D rendering.
Technical Architecture and the Shift to WebGPU
The technical stack behind Shader’s experiment relies on Next.js integrated with React Three Fiber version 10, executing directly on the WebGPU renderer. Traditionally, web-based 3D applications utilizing complex material properties—such as refraction, dispersion, and transmission—have been restricted by the performance overhead of WebGL. However, WebGPU provides low-level access to modern GPU hardware, enabling developers to execute highly parallel compute passes and custom shader logic with minimal CPU overhead.
To achieve their vision of an infinite carousel of video-bearing glass cards without lighting calculations or multi-pass render targets, the team bypassed standard geometric modeling. Instead of instantiating heavy 3D meshes with MeshPhysicalMaterial, the developers utilized flat, subdivided planes combined with custom material logic written in TSL.
This approach eliminates the need for separate buffer generation, which typically renders background scenes into intermediate textures before applying transmission effects. By performing all calculations in a single render pass, the application maintains high frame rates even when rendering complex surfaces and live High-Rate Video Streaming (HLS) feeds directly as card textures.
Simulating Glass Optics Through Code
Achieving the optical properties of real glass without physical geometry required a sophisticated mathematical approach. The foundation of the visual effect rests upon a two-dimensional signed distance function (SDF). For every individual pixel mapped across a card, the SDF calculates the exact distance to the boundary of a rounded rectangle, establishing whether the coordinate lies inside or outside the shape.
From this distance metric, the team generated a procedural height map to simulate variable glass thickness—flat across the center before tapering smoothly toward the edges. By utilizing a superellipse profile controlled by a customizable bevelPower parameter, the shader achieves edge profiles ranging from soft, rounded contours to sharp, angular bevels.
To simulate the bending of light, the shader calculates surface normals by sampling the height map in microscopic increments along the horizontal and vertical axes. By deriving surface slopes from these height variations, the system computes refraction vectors. Furthermore, chromatic dispersion—the physical phenomenon where white light splits into component colors as it passes through a dense medium—is simulated by evaluating multiple refraction taps across slightly varying indices of refraction (IOR) for individual color channels.
Rather than relying on real-time lighting calculations, the material integrates environment map reflections via spherical coordinates, scaling reflectivity dynamically using the Fresnel equations. The result is an illusion of depth, weight, and transparency achieved entirely through pixel manipulation and vector math.
Engineering an Infinite Spatial Illusion
The illusion of an infinite grid is maintained through spatial wrapping. Rather than utilizing an expansive physical plane, the application positions cards on the surface of a massive virtual sphere. As users pan across the interface via gesture controls handled by Motion pan mechanics, cards that cross boundary thresholds are systematically repositioned to the opposite side of the coordinate space.
This spherical distribution fundamentally alters user perception. Cards positioned near the center of the viewport face the viewer directly, while peripheral elements tilt away from the camera and recede into the curvature of the sphere. This geometric arrangement tricks the human brain into interpreting the layout as a continuous, deep environment rather than a flat, repeating spreadsheet.
Performance optimization remains central to this implementation. Position and velocity parameters are stored as persistent motion values entirely outside of React’s component state tree. Consequently, the React Three Fiber frame loop reads these values directly, resulting in zero React re-renders during active drag interactions.
Evolving from Static Geometry to Dynamic Physics
Following the initial public release of the experiment, community feedback prompted the development team to refine the physical behavior of the grid. Critics noted that rigid, static glass planes contradicted the implied flexibility of "liquid glass" design paradigms. In response, Shader updated the application to incorporate a full GPU cloth simulation driven by Extended Position-Based Dynamics (XPBD) solvers implemented via TSL compute passes.
Every card now rests upon a simulated mesh patch governed by distance and bending constraints, anchored to specific coordinates on the underlying sphere. A viscosity parameter introduces jelly-like oscillations, causing the grid to lag, ripple, and settle dynamically in response to user input.
To accommodate this structural deformation, the original Document Object Model (DOM) text overlay—which utilized CSS matrices synchronized with WebGPU world matrices—was replaced. Because text glued to a rigid mesh cannot accurately conform to a wobbling cloth surface, the developers integrated pmndrs/glyph, utilizing Multi-Channel Signed Distance Field (MSDF) fonts baked at build time. This ensures that typography deforms and refracts seamlessly alongside the animated glass panels.
Industry Implications and the Three.js Conference
The release of Shader’s experiment underscores a broader industry transition toward WebGPU adoption within the creative development sector. As browsers phase out legacy graphics pipelines and hardware manufacturers optimize WebGPU drivers across desktop and mobile platforms, developers are increasingly empowered to deploy production-grade simulation techniques historically reserved for native desktop applications and offline rendering engines.
The timing of the project coincides with the first-ever Three.js Conference in Paris, an event drawing international web graphics engineers, technical directors, and interactive designers. The conference program features specialized workshops, technical presentations, and panel discussions addressing the future of browser-based spatial computing, shader optimization, and the integration of WebGPU into enterprise web applications.
As industry professionals gather in France to evaluate the state of web graphics, experiments like the infinite liquid glass grid illustrate the practical utility of pushing framework boundaries. By demonstrating that advanced visual fidelity can be achieved without compromising browser performance, Shader’s work contributes valuable technical methodologies to the ongoing discourse surrounding the future of digital design and web engineering.
