Metaballs

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * Blobs that merge and separate like mercury, with a hard edge.7 *8 * A metaball field sums an inverse-square falloff from every centre, then9 * thresholds the result. Because the field is additive, two blobs that10 * approach each other produce a bridge before they touch — that bridging is11 * what makes them read as liquid rather than as overlapping circles, and it12 * falls out of the maths rather than being animated.13 *14 * The threshold is applied with a narrow smoothstep rather than a hard step:15 * a hard cut aliases badly on a curved boundary, and a wide one turns the16 * mercury back into fog. The width is scaled by resolution so the edge stays17 * one pixel wide on any display.18 */19 20const VERTEX = `21attribute vec2 position;22void main() { gl_Position = vec4(position, 0.0, 1.0); }23`;24 25/* MAX_BALLS is a compile-time constant because GLSL ES 1.0 cannot loop to a26   uniform bound. The count uniform then masks off the unused ones. */27const FRAGMENT = `28precision mediump float;29#define MAX_BALLS 1230 31uniform vec2  uResolution;32uniform vec3  uBalls[MAX_BALLS];   /* xy = centre, z = radius */33uniform int   uCount;34uniform vec3  uColorA;35uniform vec3  uColorB;36uniform float uThreshold;37 38void main() {39  vec2 uv = gl_FragCoord.xy / uResolution;40  float aspect = uResolution.x / uResolution.y;41  vec2 p = vec2(uv.x * aspect, uv.y);42 43  float field = 0.0;44  for (int i = 0; i < MAX_BALLS; i++) {45    if (i >= uCount) break;46    vec2 centre = vec2(uBalls[i].x * aspect, uBalls[i].y);47    float r = uBalls[i].z;48    vec2 d = p - centre;49    /* Inverse square, the classic metaball kernel: it never reaches zero, so50       every blob contributes everywhere and the field stays smooth. */51    field += (r * r) / max(dot(d, d), 1e-5);52  }53 54  /* Edge width tied to resolution, so the boundary is one pixel wide whatever55     the display density — a fixed width shimmers on retina and aliases on 1x. */56  float w = 2.5 / uResolution.y * 60.0;57  float mask = smoothstep(uThreshold - w, uThreshold + w, field);58 59  /* Colour ramps with field strength, so the thick middle of a blob reads60     differently from the thin bridge between two. */61  float depth = clamp((field - uThreshold) * 0.35, 0.0, 1.0);62  vec3 colour = mix(uColorA, uColorB, depth);63 64  gl_FragColor = vec4(colour * mask, 1.0);65}66`;67 68function compile(gl: WebGLRenderingContext, type: number, src: string) {69  const s = gl.createShader(type);70  if (!s) return null;71  gl.shaderSource(s, src);72  gl.compileShader(s);73  return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null;74}75 76function toRgb(hex: string): [number, number, number] {77  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());78  if (!m) return [1, 1, 1];79  const n = parseInt(m[1], 16);80  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];81}82 83export interface MetaballsProps {84  /** Number of blobs, capped at 12 by the shader's loop bound. */85  count?: number;86  colorA?: string;87  colorB?: string;88  speed?: number;89  /** Blob size. Larger merges more readily. */90  radius?: number;91  /** Where the field is cut. Lower makes everything fatter and merge sooner. */92  threshold?: number;93  /** The pointer becomes an extra blob. */94  interactive?: boolean;95  still?: boolean;96  className?: string;97}98 99export function Metaballs({100  count = 7,101  colorA = "#c3f53c",102  colorB = "#f4ffd4",103  speed = 1,104  radius = 0.15,105  threshold = 1,106  interactive = true,107  still = false,108  className = "",109}: MetaballsProps) {110  const ref = useRef<HTMLCanvasElement>(null);111 112  useEffect(() => {113    const canvas = ref.current;114    if (!canvas) return;115    const gl = canvas.getContext("webgl", { alpha: false, antialias: false });116    if (!gl) return;117 118    const vs = compile(gl, gl.VERTEX_SHADER, VERTEX);119    const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);120    if (!vs || !fs) return;121    const program = gl.createProgram();122    if (!program) return;123    gl.attachShader(program, vs);124    gl.attachShader(program, fs);125    gl.linkProgram(program);126    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;127    gl.useProgram(program);128 129    const buffer = gl.createBuffer();130    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);131    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);132    const position = gl.getAttribLocation(program, "position");133    gl.enableVertexAttribArray(position);134    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);135 136    const uniform = (n: string) => gl.getUniformLocation(program, n);137    const uResolution = uniform("uResolution");138    const uBalls = uniform("uBalls");139    const uCount = uniform("uCount");140    gl.uniform3fv(uniform("uColorA"), toRgb(colorA));141    gl.uniform3fv(uniform("uColorB"), toRgb(colorB));142    gl.uniform1f(uniform("uThreshold"), threshold);143 144    const MAX = 12;145    const total = Math.max(1, Math.min(MAX, Math.round(count)));146    // Each blob gets its own Lissajous phase so they never fall into lockstep,147    // which would make the whole field pulse as one object.148    const phases = Array.from({ length: total }, (_, i) => ({149      ax: 0.7 + (i % 3) * 0.31,150      ay: 0.5 + (i % 4) * 0.27,151      px: i * 1.7,152      py: i * 2.3,153      r: radius * (0.7 + ((i * 37) % 60) / 100),154    }));155 156    const data = new Float32Array(MAX * 3);157    const reduced =158      still ||159      (typeof matchMedia === "function" &&160        matchMedia("(prefers-reduced-motion: reduce)").matches);161 162    let uploadedWidth = 0;163    let uploadedHeight = 0;164 165    const resize = () => {166      const dpr = Math.min(devicePixelRatio || 1, 2);167      const w = Math.floor(canvas.clientWidth * dpr);168      const h = Math.floor(canvas.clientHeight * dpr);169      if (!w || !h) return;170      if (w === uploadedWidth && h === uploadedHeight) return;171      uploadedWidth = w;172      uploadedHeight = h;173      canvas.width = w;174      canvas.height = h;175      gl.viewport(0, 0, w, h);176      gl.uniform2f(uResolution, w, h);177    };178 179    let pointerX = -9;180    let pointerY = -9;181    const onMove = (e: PointerEvent) => {182      const box = canvas.getBoundingClientRect();183      pointerX = (e.clientX - box.left) / box.width;184      pointerY = 1 - (e.clientY - box.top) / box.height;185    };186    const onLeave = () => {187      pointerX = -9;188      pointerY = -9;189    };190 191    const start = performance.now();192 193    const draw = (now: number) => {194      resize();195      const t = ((now - start) / 1000) * speed;196 197      let used = 0;198      for (let i = 0; i < total; i += 1) {199        const p = phases[i];200        // Kept inside 0.15–0.85 so blobs never park half off-screen, which201        // reads as a rendering error rather than as motion.202        data[used * 3] = 0.5 + Math.sin(t * p.ax + p.px) * 0.35;203        data[used * 3 + 1] = 0.5 + Math.cos(t * p.ay + p.py) * 0.35;204        data[used * 3 + 2] = p.r;205        used += 1;206      }207 208      if (interactive && pointerX > -1 && used < MAX) {209        data[used * 3] = pointerX;210        data[used * 3 + 1] = pointerY;211        data[used * 3 + 2] = radius * 1.35;212        used += 1;213      }214 215      gl.uniform3fv(uBalls, data);216      gl.uniform1i(uCount, used);217      gl.drawArrays(gl.TRIANGLES, 0, 3);218    };219 220    let frame = 0;221    const loop = (now: number) => {222      draw(now);223      frame = requestAnimationFrame(loop);224    };225 226    draw(reduced ? start + 3200 : start);227    if (!reduced) {228      if (interactive) {229        canvas.addEventListener("pointermove", onMove);230        canvas.addEventListener("pointerleave", onLeave);231      }232      frame = requestAnimationFrame(loop);233    }234 235    const observer = new ResizeObserver(() => {236      resize();237      if (reduced) draw(start + 3200);238    });239    observer.observe(canvas);240 241    return () => {242      cancelAnimationFrame(frame);243      observer.disconnect();244      canvas.removeEventListener("pointermove", onMove);245      canvas.removeEventListener("pointerleave", onLeave);246      gl.deleteProgram(program);247      gl.deleteShader(vs);248      gl.deleteShader(fs);249      gl.deleteBuffer(buffer);250    };251  }, [count, colorA, colorB, speed, radius, threshold, interactive, still]);252 253  return <canvas ref={ref} aria-hidden className={`block h-full w-full ${className}`} />;254}255