Creating an Endless Liquid Glass Carousel with Three.js, WebGPU, and TSL

Editor’s Note: The upcoming Three.js Conference is an ideal backdrop for exploring an innovative project that captivates the imagination. The dynamic team from Shader, featuring Jacob, Simon, and Filip, has developed an enthralling infinite liquid glass carousel that showcases the capabilities of Three.js, WebGPU, and TSL. Here, they break down the creative process behind this mesmerizing experiment, highlighting its interactions with video refraction and advanced graphics rendering.

Hello! I’m Filip, co-founder of Shader, a Swedish studio dedicated to crafting immersive 3D experiences. Much of our time is spent on client projects, but we also dedicate time to experimental, deadline-free creations. Our latest endeavor is the infinite liquid glass grid—a captivating grid of glass-like video cards powered by WebGPU, offering an illusion of endlessness.

The Technical Foundation

At the core of this project is a stack built with Next.js utilizing React Three Fiber v10 along with the WebGPU renderer. The materials were crafted in TSL (Three.js Shading Language), and we employed Motion to manage drag interactions. Notably, we work entirely within a single rendering pass, with no post-processing layers or additional render targets.

Creating the Glass Effect

One of the standout aspects is our design choice to forgo complex geometries. Each card in the grid is merely a flat, subdivided plane. The visual complexity—such as rounded edges and light refraction—is simulated within the material itself, eliminating the need for actual glass models.

Conventional methods utilizing MeshPhysicalMaterial can yield realistic glass effects, but they require actual geometries and a lit environment, leading to resource-heavy operations. We preferred a more efficient approach: a custom shader applied to flat planes, calculated for optimal performance across multiple units.

The process begins with a 2D signed distance function (SDF) to determine the shape of our glass card. By calculating the distance to a bounding shape, we can define the visual thickness of the glass, which tapers off towards the edges. The implementation of the superellipse formula allows for customizable bevel settings, creating the illusion of varying glass thickness.

Refraction and Color Dispersion

To simulate light refraction through the glass, we determine the normals at each pixel by sampling the height data. These normals are used to refract incoming light, utilizing different indices of refraction based on the color channels to generate a chromatic dispersion effect reminiscent of real glass edges.

We designed the shader execution to be efficient, employing a simple loop that adjusts based on the GPU’s capabilities, allowing for greater flexibility between devices while maintaining the same visual quality across platforms.

We utilize the video content itself as the texture for the cards, producing the effect of the video being warped through the glass. To enhance the glass-like quality, we introduce a reflection component based on the viewer's perspective and a rim light effect for added dimension.

Simulating Infinite Space

The grid gives the illusion of infinity, but it’s a clever trick of placement. As users interact, cards that exit one edge of the display reappear on the opposing side. This effect is achieved by mapping the cards to points on a sphere, where their positioning creates visual depth without needing a truly infinite surface.

User drag actions are managed by integrating Motion’s gesture recognition. This approach ensures fluid manipulation of the grid without lag or unnecessary re-renders, optimizing user experience for smoother interactions.

Crisp Text on Liquid Surface

For enhanced accessibility and quality, the grids display real HTML for titles and descriptions. Each text element runs parallel to the liquid cards, achieving high fidelity and resizing capabilities. This integration demands precise alignment between the CSS positioning of HTML elements and the dynamic transformations dictated by the GPU rendering.

Adding Liquid Movement

To address criticisms regarding the static nature of the grid, we've taken it a step further by implementing a GPU cloth simulation system. This adds a level of realism by enabling the cards to exhibit fluid motion akin to jelly, creating ripples and dynamic interactions during user engagement.

Unfortunately, this innovative cloth system interferes with our prior HTML text setup, forcing us to adapt our approach to rendering text. We transitioned to a method using pmndrs/glyph which allows text to follow the warping cloth-like structure in the scene, enhancing the overall experience without sacrificing clarity.

Join Us in Paris

For those attending the Three.js Conference in Paris, we’d love to connect! We're eager to discuss WebGPU, TSL, and the fascinating projects you're developing. Spotting us should be easy; I’ll be alongside Simon, who will be sharing his musical talents in Sweden.

If you’re intrigued by our work, check out more of our projects at shader.se. Looking forward to meeting everyone!