STYLEGALLERY / STUDIESCODE + CURIOSITY / 06INDEPENDENT EXAMPLE

06 / Parametric GPU tubes

A field made of functions.

A fixed grid stores only strand number, progress and radial angle. A vertex shader turns those parameters into curved, opaque tubes with real surface normals.

Each ring is progress × angle. No CPU position rebuild while moving.
What this study teaches

A native WebGL vertex shader derives curve positions, finite-difference tangents, a cross-section frame and normals from immutable progress/angle attributes. The animated reveal changes radius rather than transparency. A stable reference-axis fallback prevents zero-length cross products for this bounded curve family; it does not promise a globally continuous frame for arbitrary curves.

Independent implementation informed by “Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU”, Mathis Biabiany, Codrops. This is newly authored code and artwork, not a recovered original project. Independent mathematical strands replace the original hand-derived dataset. This study uses WebGL shaders rather than the publisher’s TSL/WebGPU runtime. The fallback axis is nondegenerate but cannot guarantee globally continuous frames for every possible curve.