Contours

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * Topographic contour lines over a slowly shifting terrain.7 *8 * The lines come from the DERIVATIVE of the height field, not from the height9 * itself. Thresholding fract(height) directly gives lines whose apparent10 * thickness depends on how steeply the terrain is changing — hairline on11 * cliffs, bloated across plateaus, exactly where a map needs them evenly12 * weighted. Dividing by the rate of change normalises that out, so every13 * contour is the same width regardless of gradient.14 *15 * fwidth() would be the usual way to get that derivative, but it needs an16 * extension in WebGL1 that is not universal, so the gradient is computed17 * explicitly. It costs two extra field samples and works everywhere.18 */19 20const VERTEX = `attribute vec2 position;21void main() { gl_Position = vec4(position, 0.0, 1.0); }`;22 23const FRAGMENT = `24precision highp float;25uniform vec2  uResolution;26uniform float uTime;27uniform vec3  uColorLine;28uniform vec3  uColorBase;29uniform float uScale;30uniform float uLevels;31uniform float uThickness;32 33float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }34 35float noise(vec2 p) {36  vec2 i = floor(p);37  vec2 f = fract(p);38  f = f * f * (3.0 - 2.0 * f);39  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), f.x),40             mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x), f.y);41}42 43/* Fractal sum: each octave adds finer relief at half the amplitude, which is44   what makes the terrain read as landscape rather than as blobs. */45float terrain(vec2 p) {46  float h = 0.0;47  float amp = 0.5;48  for (int i = 0; i < 5; i++) {49    h += noise(p) * amp;50    p *= 2.02;51    amp *= 0.5;52  }53  return h;54}55 56void main() {57  vec2 uv = gl_FragCoord.xy / uResolution;58  float aspect = uResolution.x / uResolution.y;59  vec2 p = vec2(uv.x * aspect, uv.y) * uScale + vec2(uTime * 0.06, uTime * 0.02);60 61  float h = terrain(p);62 63  /* Explicit gradient: fwidth needs OES_standard_derivatives, which is not64     guaranteed in WebGL1. Two extra samples buy universal support. */65  float e = 1.5 / uResolution.y * uScale;66  float dx = terrain(p + vec2(e, 0.0)) - h;67  float dy = terrain(p + vec2(0.0, e)) - h;68  float gradient = length(vec2(dx, dy)) + 1e-5;69 70  float banded = fract(h * uLevels);71  /* Distance to the nearest contour, normalised by slope so every line is the72     same visual width however steep the terrain is under it. */73  float dist = min(banded, 1.0 - banded) / (gradient * uLevels);74  float line = 1.0 - smoothstep(0.0, uThickness, dist);75 76  vec3 colour = mix(uColorBase, uColorLine, line);77  /* A faint elevation tint, so the map reads as terrain and not as wallpaper. */78  colour *= 0.65 + h * 0.7;79  gl_FragColor = vec4(colour, 1.0);80}`;81 82function compile(gl: WebGLRenderingContext, type: number, src: string) {83  const s = gl.createShader(type);84  if (!s) return null;85  gl.shaderSource(s, src);86  gl.compileShader(s);87  return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null;88}89 90function toRgb(hex: string): [number, number, number] {91  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());92  if (!m) return [0, 0, 0];93  const n = parseInt(m[1], 16);94  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];95}96 97export interface ContoursProps {98  line?: string;99  base?: string;100  /** Terrain zoom. Higher packs more relief into the frame. */101  scale?: number;102  /** Contour intervals. Higher means more, closer lines. */103  levels?: number;104  thickness?: number;105  speed?: number;106  still?: boolean;107  className?: string;108}109 110export function Contours({111  line = "#c3f53c",112  base = "#0a0b0e",113  scale = 3,114  levels = 14,115  thickness = 1.4,116  speed = 1,117  still = false,118  className = "",119}: ContoursProps) {120  const ref = useRef<HTMLCanvasElement>(null);121 122  useEffect(() => {123    const canvas = ref.current;124    if (!canvas) return;125    const gl = canvas.getContext("webgl", { alpha: false, antialias: false });126    if (!gl) return;127 128    const vs = compile(gl, gl.VERTEX_SHADER, VERTEX);129    const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);130    if (!vs || !fs) return;131    const program = gl.createProgram();132    if (!program) return;133    gl.attachShader(program, vs);134    gl.attachShader(program, fs);135    gl.linkProgram(program);136    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;137    gl.useProgram(program);138 139    const buffer = gl.createBuffer();140    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);141    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);142    const position = gl.getAttribLocation(program, "position");143    gl.enableVertexAttribArray(position);144    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);145 146    const uniform = (n: string) => gl.getUniformLocation(program, n);147    const uResolution = uniform("uResolution");148    const uTime = uniform("uTime");149    gl.uniform3fv(uniform("uColorLine"), toRgb(line));150    gl.uniform3fv(uniform("uColorBase"), toRgb(base));151    gl.uniform1f(uniform("uScale"), scale);152    gl.uniform1f(uniform("uLevels"), levels);153    gl.uniform1f(uniform("uThickness"), thickness);154 155    const reduced =156      still ||157      (typeof matchMedia === "function" &&158        matchMedia("(prefers-reduced-motion: reduce)").matches);159 160    let uw = 0;161    let uh = 0;162    const resize = () => {163      // Capped at 1.5: five octaves sampled three times per pixel makes164      // resolution the dominant cost here.165      const dpr = Math.min(devicePixelRatio || 1, 1.5);166      const w = Math.floor(canvas.clientWidth * dpr);167      const h = Math.floor(canvas.clientHeight * dpr);168      if (!w || !h || (w === uw && h === uh)) return;169      uw = w;170      uh = h;171      canvas.width = w;172      canvas.height = h;173      gl.viewport(0, 0, w, h);174      gl.uniform2f(uResolution, w, h);175    };176 177    const start = performance.now();178    const draw = (now: number) => {179      resize();180      gl.uniform1f(uTime, ((now - start) / 1000) * speed);181      gl.drawArrays(gl.TRIANGLES, 0, 3);182    };183 184    let frame = 0;185    const loop = (now: number) => {186      draw(now);187      frame = requestAnimationFrame(loop);188    };189 190    draw(start);191    if (!reduced) frame = requestAnimationFrame(loop);192 193    const observer = new ResizeObserver(() => {194      resize();195      if (reduced) draw(start);196    });197    observer.observe(canvas);198 199    return () => {200      cancelAnimationFrame(frame);201      observer.disconnect();202      gl.deleteProgram(program);203      gl.deleteShader(vs);204      gl.deleteShader(fs);205      gl.deleteBuffer(buffer);206    };207  }, [line, base, scale, levels, thickness, speed, still]);208 209  return <canvas ref={ref} aria-hidden className={`block h-full w-full ${className}`} />;210}211