Creating a Simulation of Liquid Glass in Virtual Environments with Three.js and WebGPU
Led by Filip Kantedal of Shader, this project unveils a striking infinite liquid glass carousel—a mesmerizing 3D environment that showcases video cards seemingly afloat in a seamless, boundless grid. This experiment marries the power of Three.js, WebGPU, and the Three.js Shading Language (TSL) to craft a visual spectacle where videos flow fluidly through "glass" without using traditional geometry or lights in the scene.
The Technical Stack
The project’s foundation revolves around Next.js and React Three Fiber's v10, utilizing WebGPU for enhanced rendering performance. Material definitions are processed through TSL, and dynamic textures are created using HLS video streams. This setup operates with an efficient single-pass method, eliminating the need for post-processing or render targets. The combination of these technologies enables not just functionality but a new level of visual fidelity and responsiveness that previous iterations of web technology could only dream of. This is more significant than it looks; it opens doors to creating more immersive web experiences.
Fabricating Liquid Glass Without Geometry
At the heart of this creation is a clever technique where each video card is represented as a flat subdivided plane. Rather than employing traditional 3D modeling techniques to craft glass, the project achieves an elegant aesthetic of rounded edges and translucent qualities through algorithmically generated visual effects using a streamlined custom shader. The complexity lies in manipulating pixels to calculate distances from a virtual edge, which defines curvature. This method not only saves computational resources but also allows for incredible optical effects that can make digital interfaces feel more intuitive.
The shader generates a height map that delineates varying thicknesses, shaping the glass's curvature through a mathematical superellipse. With this feature, Kantedal and his team mimic real-world glass characteristics. The addition of a tangent twist simulates chromatic dispersion, creating rainbow-like fringes—effects that, in the past, could only be synthesized through elaborate modeling. It's an example of how modern rendering techniques can enhance realism, allowing varying indices of refraction to manipulate light differently across color channels.
Dynamic Interaction with an Infinite Illusion
The illusion of infinity is achieved without a truly infinite grid. Instead, as users navigate the grid, cards that exit one boundary reappear on the opposite side—a design choice that plays into natural spatial perception. This isn't merely a visual trick; it capitalizes on how our brains interpret space, adding depth by tilting and reducing the size of cards positioned further from the viewer. User interaction is handled through the Motion library's pan gestures, capturing positions and velocities to ensure a smooth and responsive experience with minimal re-renders during dragging. That said, this kind of user feedback is essential for keeping the experience fluid and engaging.
Real Text on the Virtual Canvas
An intriguing layer of complexity is introduced with real HTML text overlays on each glass card to ensure crispness and accessibility. Each text element dynamically follows the curvature of the surface through browser CSS perspective and matrix transformations, maintaining real-time alignment as users interact with the grid's viewport. This serves not only practical design purposes but also enhances the aesthetic appeal. (And this is the part most people overlook.) It captures a seamless blend of functional and visual elements that serve the user experience more intelligently.
Advancing to a Liquid Simulation
After feedback sparked the idea of making the glass appear more "liquid," the project evolved further. By integrating a GPU cloth simulation with an XPBD solver running exclusively on WebGPU, the grid now exhibits responsive dynamics, mimicking the behavior of jelly rather than rigid glass. This shift transforms how users perceive and interact with the environment, as it now reacts in real-time, much like materials we encounter in the physical world. Consequently, text labels have transitioned to be rendered inside the scene, allowing them to deform and refract in keeping with the fluid motion of the glass, deepening user immersion and engagement.
Looking Ahead
Kantedal and his team will be present at the Three.js Conference in Paris, inviting attendees to engage with them on various topics from WebGPU to experimental tech demos. As they continue to refine and share their work, this project sets a fresh precedent for 3D interaction etiquette in modern web applications. What this means for you is that the methodologies developed here could influence not just future web designs but also how we think about interface interaction as a whole. Expect to see additional innovations that push digital interfaces further towards the tactile.
For a deeper understanding and firsthand experience, you can explore the live demo of this mesmerizing development at their demo site.
