Constructing an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL

Editor’s Notice: With the Three.js Convention workshops already underway and the convention simply two days away, it looks like the proper second to go behind the scenes of an experiment that made fairly a splash. Jacob, Simon, and Filip from Shader created this mesmerizing infinite liquid glass grid as a playful exploration of Three.js, WebGPU, and TSL. Now they’re pulling again the curtain to indicate us how they constructed it, from the pretend glass and refraction to the infinite spherical grid. We’re thrilled to have them share the story behind the experiment as a part of our convention celebration.

Hey! I’m Filip, co-founder of Shader, a artistic growth studio in Sweden. Many of the yr, we ship interactive 3D experiences for purchasers. Just a few weeks of it, we spend on bizarre experiments with no temporary and no deadline. The most recent one is an infinite liquid glass carousel: a grid of glass video playing cards operating within the browser on WebGPU. The video bends by means of the glass, the grid has no edges, and there isn’t a single gentle within the scene.

The stack

Subsequent.js with React Three Fiber v10 on the WebGPU renderer. Supplies are written in TSL (Three.js Shading Language), Movement handles the drag springs, and HLS video streams are used as textures. No post-processing and no render targets. The whole lot occurs in a single move.

Liquid glass, no geometry required

The trick right here is that every card is only a flat, subdivided airplane. The rounded corners, beveled edges, and refraction are all faked within the materials. We by no means mannequin any glass.

Should you’ve used Three.js, you may be pondering that that is precisely what MeshPhysicalMaterial is for. And it’s: set transmission, ior, thickness, and dispersion on a rounded field, and also you get very convincing glass out of the field. However that cup is actual geometry, it wants a lit scene, and transmission renders every part behind the item right into a separate buffer first. That’s a number of equipment for a pair hundred playing cards, and it refracts the scene behind the cardboard when what we truly wish to bend is the cardboard’s personal video.

So we roll our personal: a flat airplane, a small customized shader, and a single render move.

All of it begins with a 2D signed distance operate. For each pixel on the cardboard, it provides us the gap to the sting of a rounded rectangle. Adverse means inside, optimistic means outdoors. That is the basic rounded-box SDF, written in TSL:

const roundedBoxDistance = Fn(([point]) => {
  const radius = min(u.cornerRadius, min(halfSize.x, halfSize.y));
  const q = abs(level).sub(halfSize).add(radius);
  return size(max(q, vec2(0)))
    .add(min(max(q.x, q.y), float(0)))
    .sub(radius);
});

From that distance, we construct a peak map. Consider it because the thickness of the glass at each level: flat within the center, then curving easily all the way down to zero on the edges. The curve is a superellipse, so bevelPower lets us go from a mushy pillow to a pointy, chunky bevel:

const bevelHeight = Fn(([distance]) => {
  const edge = clamp(
    float(1).add(distance.div(max(uniforms.bevelWidth, float(0.001)))),
    0,
    1,
  );
  const energy = max(uniforms.bevelPower, float(1));
  const profile = pow(
    max(float(1).sub(pow(edge, energy)), float(0)),
    float(1).div(energy),
  );
  return profile.mul(uniforms.thickness);
});

To make the glass bend gentle, we have to know which means the floor is going through at each pixel. So we pattern the peak map a tiny step to the left, proper, up, and down. The distinction between these samples provides us the slope, and the slope provides us a standard. It’s the identical trick you’d use to calculate normals from a terrain peak map, simply utilized to our pretend glass.

Now for the great half. As soon as now we have a standard and a view route, we will refract the ray. If we refract it just a few occasions with a barely completely different index of refraction for every shade channel, we get chromatic dispersion, the rainbow fringe you see across the edges of actual glass. Every “faucet” bends the ray a bit in a different way and largely feeds into one shade channel:

let refracted = vec3(0);
for (const faucet of faucets) {
  const eta = float(1).div(
    max(uniforms.ior.add(uniforms.dispersion.mul(faucet.offset)), float(1.0001)),
  );
  const ray = refract(viewDir.negate(), regular, eta);
  const journey = uniforms.thickness.div(max(abs(ray.z), float(0.05)));
  const displaced = baseUv.add(
    ray.xy.mul(journey).mul(uniforms.refractStrength).div(uniforms.planeSize),
  );
  refracted = refracted.add(
    mapNode.pattern(displaced).rgb.mul(vec3(...faucet.weight)),
  );
}

Discover that it is a plain JavaScript for loop. TSL builds the shader as a node graph, so the loop is unrolled when the shader compiles. That makes the faucet depend a easy high quality knob: extra faucets on beefy GPUs, fewer on cellular, whereas the shader code stays precisely the identical.

The feel being refracted is the cardboard’s personal video, so the video actually bends by means of the glass. That’s the bottom layer. To make it learn as glass relatively than a wobbly video, we add two extra elements on prime, and there isn’t a single gentle within the scene for any of it.

First, a mirrored image. We mirror the view route across the floor regular and use that bounced route to search for a shade in an surroundings map wrapped round a sphere. This turns determining what every little bit of glass displays right into a easy texture lookup. How a lot reflection we present is managed by Fresnel: glass displays little or no once you look straight at it and rather more at grazing angles.

Second, a rim gentle. A smoothstep on the SDF distance provides us a skinny band that hugs the sting of the cardboard, and we tint it with a prime to backside gradient between two colours so the spotlight appears to be like prefer it has a route.

Put collectively:

const reflection = mirror(viewWorld.negate(), normalWorld);
const surroundings = texture(envMap, equirectUV(reflection)).rgb;

const fresnel = u.fresnelF0.add(
  float(1)
    .sub(u.fresnelF0)
    .mul(pow(saturate(float(1).sub(dot(regular, viewDir))), 5)),
);

const rim = smoothstep(u.rimWidth.negate(), float(0), distance).mul(u.rimIntensity);
const rimColor = combine(u.rimColor, u.rimColorTop, rimGradient);

const completed = combine(
  refracted.mul(u.tint),
  surroundings,
  saturate(fresnel.mul(u.envIntensity)),
).add(rimColor.mul(rim));

That’s the entire materials. It’s a MeshBasicNodeMaterial with a customized colorNode, and each little bit of “lighting” you see is faked from a standard we computed ourselves.

An infinite grid that secretly lives on a sphere

The trick right here: the grid isn’t infinite in any respect. Drag far sufficient and a card that leaves one edge quietly teleports to the opposite.

A flat wrapping grid appears to be like like a spreadsheet, although. So as a substitute of inserting playing cards on a airplane, we deal with their wrapped x and y positions as distances walked alongside a large sphere and place every card on its floor, going through outward. Playing cards within the heart face you head-on, whereas the additional out they get, the extra they tilt away and shrink into the curve. Your mind reads that as depth as a substitute of an infinite flat airplane.

The drag itself is dealt with by Movement’s pan gesture on a fullscreen factor, with place and velocity saved as motionValues outdoors React. The R3F body loop reads them instantly, so there are zero re-renders whilst you drag.

Actual textual content on pretend glass

Yet one more factor you won’t discover at first: the title, class, and outline on each card are actual HTML. Not a texture, not SDF textual content, simply divs. Meaning crisp textual content at any zoom, regular CSS, selectable and accessible content material. The catch is that every div has to sit down precisely on prime of a card that lives on a sphere inside WebGPU and comply with it completely whilst you drag.

The trick is identical one Three.js’s CSS3DRenderer makes use of, achieved by hand. A hard and fast fullscreen layer will get a CSS perspective derived from the digital camera’s discipline of view. Inside it, a “digital camera” div carries the inverse digital camera matrix as a matrix3d. Inside that, one completely positioned div per pooled card carries the mesh’s world matrix as its personal matrix3d. The browser’s perspective math is identical math the GPU makes use of, so the div lands pixel excellent on the mesh and tilts alongside the sphere with it:

rootLayer.fashion.perspective = `${fov}px`;
cameraLayer.fashion.remodel = `translateZ(${fov}px) ${cssMatrix(digital camera.matrixWorldInverse)} translate(50vw, 50vh)`;
cardEl.fashion.remodel = `translate(-50%,-50%) ${cssMatrix(mesh.matrixWorld)}`;

Each body, the R3F loop updates the digital camera div as soon as, then walks the pool and writes a remodel to every seen card’s div (and hides those which might be off-screen). We strip the dimensions out of the matrix and apply it as width and peak in pixels as a substitute, which lets the textual content dimension itself with container items and keep sharp. Identical rule because the drag: the divs are pooled to match the mesh depend and up to date with direct fashion.remodel writes, by no means by means of React re-renders.

Replace: making it truly liquid

After we posted the demo, somebody identified that not all glass is “liquid glass” and that we have been driving the Apple hype. It was one particular person, however they’d some extent. So we made the grid truly transfer.

The entire floor is now a GPU material simulation: an XPBD solver written as TSL compute passes, operating completely on WebGPU. Each card sits on a patch of simulated material with distance and bending constraints, anchors that pull it again towards its spot on the sphere, and a viscosity time period that makes it wobble extra like jelly than cloth. Drag the grid and it lags behind, ripples, and settles. Fully overkill for a mission grid, and a number of enjoyable to construct.

The DOM textual content layer from the earlier part didn’t survive the transfer. Textual content glued to a inflexible mesh is one factor, textual content following a wobbling material is one other. The labels at the moment are rendered contained in the scene with pmndrs/glyph, utilizing MSDF fonts baked at construct time, so that they deform and refract together with the glass they sit on.

That’s the entire thing: an SDF pretending to be glass and a sphere pretending to be an infinite airplane.

Come say hello in Paris

Jacob and I can be at Three.js Convention in Paris. Should you’re going, come discover us and say hello! We’re at all times up for chatting about WebGPU, TSL, or no matter bizarre demo you’re constructing. To make us simpler to identify, right here’s a really skilled image of us, with Simon on the precise. He’s staying in Sweden to play his violin.

And if you wish to see extra of what we do, our touchdown web page at shader.se is an entire experiment of its personal.

See you there!