WebGPU · three.js TSL
Kinetic Type
The word is never drawn on the ring. It is rendered to an offscreen target first, and the ring reads that image as a scrolling texture — so the type wraps, repeats and mirrors itself as it turns.
A port, not a fresh build. This started as a WebGL sketch with hand-written GLSL, and I moved it to WebGPU and TSL to see what that actually changes — and what the newer stack lets the scene do that the old one could not.
A scene inside a scene
The text lives in its own scene with its own camera, and gets rendered into a texture instead of onto the screen. The ring then samples that texture seven times around and five times across, with the vertical offset driven by time. That is the whole effect: no text geometry touches the ring, and the same image repeats, mirrors and scrolls depending on which part of the surface you are looking at.
Why the letters stay sharp
A normal glyph atlas is a picture, so it blurs the moment it is magnified — and on a torus one letter can be six pixels wide at the back and a hundred at the front. An MSDF atlas stores distances to the glyph edge across three channels instead, and the shader takes the median of those to find the outline. The letters stay crisp at any size, which is the only reason wrapping type around curved geometry works at all.
Unlike the flower field, this one degrades: three's WebGPU renderer falls back to its WebGL2 backend on machines without WebGPU, and the scene survives it intact. Nothing here depends on storage buffers in the vertex stage.
Built from this Codrops article, then taken apart and rewritten for WebGPU.
WebGPU · three.js r185 · TSL · MSDF text · bloom