Skip to content

◌ Folio MMXXVII

Loading folio

000

2025.11.12 · WebGL · 12 min read

ShaderMathfromasinglenoisefieldtoaworld

How one well-tuned noise function — and a careful color ramp — can stand in for an entire scene. A practical tour of the math we use in production.

There is a quiet conviction in my work: most of the time, you don't need a third texture, a fourth font weight, or another animation layer. You need to commit to the one good idea harder. The math behind that conviction is small.

A single, well-tuned noise function — fbm sampled across three octaves, advected slowly by time — is enough scene for an entire page. The trick is in the color ramp and the vignette. Treat them like a print job.

Below: the small fragment that runs every frame on this site, lightly annotated. It is the same shape we used on Aura Void, simplified to read in one breath.

We don't need GPGPU here. We don't even need a normal map. We need a sense of pressure. The mouse is a soft attractor, the noise is the ocean, the vignette is the proscenium.

If you can hold a single idea in your head while reading the file end to end, the rest of the system tends to follow. That is the whole brief.

float fbm(vec3 p) {
  float v = 0.0, a = 0.5;
  for (int i = 0; i < 5; i++) {
    v += a * noise3(p);
    p *= 2.04;
    a *= 0.5;
  }
  return v;
}

“The interface should disappear, leaving only the canvas and the content.” — a sticky note above the desk.