Custom Shader

Plain TypeScript — a helper function, let accumulators, and a for loop — compiled to GLSL and WGSL at build time. No engine, no materials: this page is one quad and your code.

function palette(t: number): Vec3 {
  return vec3(
    0.5 + 0.5 * cos(6.28318 * (t + 0.0)),
    0.5 + 0.5 * cos(6.28318 * (t + 0.33)),
    0.5 + 0.5 * cos(6.28318 * (t + 0.67)),
  );
}

fragment({ uTime }, { vUv }) {
  const x = vUv.x * 6 - 3;
  const y = vUv.y * 6 - 3;
  let value = 0;
  let frequency = 1;
  let amplitude = 0.6;
  for (let i = 0; i < 5; i += 1) {
    value = value + amplitude
      * sin(x * frequency + uTime + i * 1.7)
      * cos(y * frequency - uTime * 0.6 + i * 0.9);
    frequency *= 1.9;
    amplitude *= 0.65;
  }
  return vec4(palette(value * 0.5 + 0.15), 1);
}