Anatomy of a shader blob

Every post on this site opens with a generative blob. It looks organic, but the machinery is tiny: one fullscreen triangle, one fragment shader, three uniforms worth of personality.

One triangle, not two

The classic fullscreen quad is two triangles and six vertices. You only need one triangle that overshoots the viewport:

gl.bufferData(
  gl.ARRAY_BUFFER,
  new Float32Array([-1, -1, 3, -1, -1, 3]),
  gl.STATIC_DRAW,
);

The GPU clips the overshoot, and you save a diagonal seam's worth of redundant fragment work.

Wobble comes from fbm

A circle becomes a blob when its radius varies with angle. Sample fractal Brownian motion — layered value noise — around the ring, and slide the third dimension with time:

float fbm(vec3 p) {
  float value = 0.0;
  float amplitude = 0.5;
  for (int i = 0; i < 4; i++) {
    value += amplitude * noise(p);
    p *= 2.02;
    amplitude *= 0.5;
  }
  return value;
}

Four octaves is the sweet spot. Fewer looks like a lava lamp; more burns fragment budget on detail you can't see at blog-hero sizes.

Determinism as a feature

The slug is FNV-hashed into a seed that offsets the noise field and picks three colors from a ten-accent palette. Same post, same blob, forever — but no two posts share one. The artifact becomes part of the post's identity, like a favicon for an idea.