04 / SDF bevels & recycled cards
Glass, with no glass.
Move through a pool of twelve cards on a curved field. Their apparent bevels come from a height function; the color fringe comes from separate refracted texture samples.
Rendering needs WebGL
This study uses a locally authored shader. Its source, explanation and parameter controls remain available if a drawing context cannot be created.
Drag the open field, or use the pan controls.
What this study teaches
A rounded-rectangle signed distance drives a bevel height field and finite-difference normals in a native WebGL shader. Three refracted samples of an original procedural texture create dispersion. A bounded pool reprojects over a spherical field, and selectable HTML labels use the same projected card data. GPU cloth and the publisher’s full camera-matrix implementation are outside this study.
Independent implementation informed by “Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL”, Filip Kantedal, Codrops. This is newly authored code and artwork, not a recovered original project. Independently authored WebGL material and spherical projection study. No video stream, XPBD cloth solver or original project assets are included. HTML labels share projected centers and scale; this is not a claimed replica of the original CSS3D camera adapter.