Particle Morph

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4import { createPointerSource } from "../lib/pointerSource";5 6/**7 * A point cloud that morphs between formations and scatters away from the8 * pointer.9 *10 * Every particle's home position for BOTH formations is uploaded once as11 * static attributes, and the vertex shader interpolates between them using a12 * single uniform. Nothing is rewritten per frame — morphing 20,000 points13 * costs one float upload, not 20,000 buffer writes. The usual approach,14 * recomputing positions in JavaScript and re-uploading the buffer each frame,15 * is what limits those implementations to a couple of thousand points.16 *17 * Raw WebGL rather than three.js: this is one draw call of gl.POINTS, and a18 * scene graph would be ~150KB to issue it.19 */20 21const VERTEX = `22attribute vec3 aFrom;23attribute vec3 aTo;24attribute float aSeed;25 26uniform float uMix;        /* 0 = from, 1 = to */27uniform float uTime;28uniform vec2  uPointer;29uniform float uRepel;30uniform float uSize;31uniform mat4  uProjection;32 33varying float vDepth;34 35void main() {36  /* Eased per-particle so the cloud arrives in a wave rather than as a block.37     The offset is derived from the seed, which is uploaded once. */38  float staggered = clamp(uMix * 1.6 - aSeed * 0.6, 0.0, 1.0);39  float eased = staggered * staggered * (3.0 - 2.0 * staggered);40  vec3 pos = mix(aFrom, aTo, eased);41 42  /* Slow drift, so a settled formation still breathes instead of freezing. */43  pos.x += sin(uTime * 0.6 + aSeed * 6.28) * 0.06;44  pos.y += cos(uTime * 0.5 + aSeed * 5.13) * 0.06;45 46  /* Pointer repulsion in screen-ish space, falling off with distance. */47  vec2 delta = pos.xy - uPointer;48  float dist = length(delta);49  float push = smoothstep(0.9, 0.0, dist) * uRepel;50  pos.xy += normalize(delta + 1e-6) * push * 0.45;51 52  vec4 clip = uProjection * vec4(pos, 1.0);53  gl_Position = clip;54 55  vDepth = clamp(1.0 - (pos.z * 0.5 + 0.5), 0.0, 1.0);56  /* Perspective-correct point size: nearer particles are larger, which is57     what stops a flat cloud looking like a sticker. */58  gl_PointSize = uSize * (1.0 + vDepth) / max(clip.w, 0.001);59}60`;61 62const FRAGMENT = `63precision mediump float;64uniform vec3 uColorNear;65uniform vec3 uColorFar;66varying float vDepth;67 68void main() {69  /* Round, soft-edged points. gl_PointCoord is the only way to shape a point70     sprite — without this they render as hard squares. */71  vec2 c = gl_PointCoord - 0.5;72  float d = length(c);73  if (d > 0.5) discard;74  float alpha = smoothstep(0.5, 0.15, d);75 76  gl_FragColor = vec4(mix(uColorFar, uColorNear, vDepth), alpha);77}78`;79 80function compile(gl: WebGLRenderingContext, type: number, src: string) {81  const s = gl.createShader(type);82  if (!s) return null;83  gl.shaderSource(s, src);84  gl.compileShader(s);85  return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null;86}87 88function toRgb(hex: string): [number, number, number] {89  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());90  if (!m) return [1, 1, 1];91  const n = parseInt(m[1], 16);92  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];93}94 95/** Deterministic PRNG, so the cloud is identical on every load and build. */96function rng(seed: number) {97  return () => {98    seed |= 0;99    seed = (seed + 0x6d2b79f5) | 0;100    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);101    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;102    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;103  };104}105 106export type Formation = "sphere" | "grid" | "torus" | "scatter";107 108function shape(kind: Formation, i: number, total: number, random: () => number) {109  const t = i / total;110  switch (kind) {111    case "sphere": {112      // Fibonacci sphere — even coverage without the polar clustering that113      // naive lat/long sampling produces.114      const phi = Math.acos(1 - 2 * (i + 0.5) / total);115      const theta = Math.PI * (1 + Math.sqrt(5)) * i;116      return [117        Math.sin(phi) * Math.cos(theta),118        Math.sin(phi) * Math.sin(theta),119        Math.cos(phi),120      ] as const;121    }122    case "torus": {123      const u = t * Math.PI * 2 * 7;124      const v = t * Math.PI * 2 * 23;125      const r = 0.38;126      return [127        (1 + r * Math.cos(v)) * Math.cos(u) * 0.8,128        (1 + r * Math.cos(v)) * Math.sin(u) * 0.8,129        r * Math.sin(v),130      ] as const;131    }132    case "grid": {133      const side = Math.ceil(Math.sqrt(total));134      const x = (i % side) / (side - 1) - 0.5;135      const y = Math.floor(i / side) / (side - 1) - 0.5;136      return [x * 2, y * 2, 0] as const;137    }138    default:139      return [random() * 2 - 1, random() * 2 - 1, random() * 2 - 1] as const;140  }141}142 143export interface ParticleMorphProps {144  count?: number;145  from?: Formation;146  to?: Formation;147  colorNear?: string;148  colorFar?: string;149  /** Point size in pixels at unit depth. */150  size?: number;151  /** Seconds for a full there-and-back cycle. 0 holds the `from` shape. */152  cycle?: number;153  /** Pointer push strength. */154  repel?: number;155  still?: boolean;156  className?: string;157}158 159export function ParticleMorph({160  count = 9000,161  from = "sphere",162  to = "torus",163  colorNear = "#c3f53c",164  colorFar = "#1a3d2e",165  size = 90,166  cycle = 8,167  repel = 1,168  still = false,169  className = "",170}: ParticleMorphProps) {171  const canvasRef = useRef<HTMLCanvasElement>(null);172 173  useEffect(() => {174    const canvas = canvasRef.current;175    if (!canvas) return;176    const gl = canvas.getContext("webgl", { alpha: false, antialias: true });177    if (!gl) return;178 179    const vs = compile(gl, gl.VERTEX_SHADER, VERTEX);180    const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);181    if (!vs || !fs) return;182    const program = gl.createProgram();183    if (!program) return;184    gl.attachShader(program, vs);185    gl.attachShader(program, fs);186    gl.linkProgram(program);187    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;188    gl.useProgram(program);189 190    const total = Math.max(64, Math.round(count));191    const random = rng(11);192    const fromData = new Float32Array(total * 3);193    const toData = new Float32Array(total * 3);194    const seeds = new Float32Array(total);195 196    for (let i = 0; i < total; i += 1) {197      const a = shape(from, i, total, random);198      const b = shape(to, i, total, random);199      fromData.set(a, i * 3);200      toData.set(b, i * 3);201      seeds[i] = random();202    }203 204    const attach = (name: string, data: Float32Array, componentsPer: number) => {205      const buffer = gl.createBuffer();206      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);207      gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);208      const loc = gl.getAttribLocation(program, name);209      gl.enableVertexAttribArray(loc);210      gl.vertexAttribPointer(loc, componentsPer, gl.FLOAT, false, 0, 0);211      return buffer;212    };213 214    const buffers = [215      attach("aFrom", fromData, 3),216      attach("aTo", toData, 3),217      attach("aSeed", seeds, 1),218    ];219 220    const uniform = (n: string) => gl.getUniformLocation(program, n);221    const uMix = uniform("uMix");222    const uTime = uniform("uTime");223    const uPointer = uniform("uPointer");224    const uProjection = uniform("uProjection");225    gl.uniform1f(uniform("uSize"), size);226    gl.uniform1f(uniform("uRepel"), repel);227    gl.uniform3fv(uniform("uColorNear"), toRgb(colorNear));228    gl.uniform3fv(uniform("uColorFar"), toRgb(colorFar));229 230    // Additive blending: overlapping points accumulate rather than occluding,231    // which is what gives a cloud its density falloff.232    gl.enable(gl.BLEND);233    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);234 235    const reduced =236      still ||237      (typeof matchMedia === "function" &&238        matchMedia("(prefers-reduced-motion: reduce)").matches);239 240    let uploadedWidth = 0;241    let uploadedHeight = 0;242 243    const resize = () => {244      const dpr = Math.min(devicePixelRatio || 1, 2);245      const w = Math.floor(canvas.clientWidth * dpr);246      const h = Math.floor(canvas.clientHeight * dpr);247      if (!w || !h) return;248      if (w === uploadedWidth && h === uploadedHeight) return;249      uploadedWidth = w;250      uploadedHeight = h;251      canvas.width = w;252      canvas.height = h;253      gl.viewport(0, 0, w, h);254 255      // Minimal perspective matrix — a full matrix library would be more code256      // than the six numbers actually used here.257      const aspect = w / h;258      const fov = 1.2;259      const near = 0.1;260      const far = 10;261      const f = 1 / Math.tan(fov / 2);262      gl.uniformMatrix4fv(uProjection, false, new Float32Array([263        f / aspect, 0, 0, 0,264        0, f, 0, 0,265        0, 0, (far + near) / (near - far), -1,266        0, 0, (2 * far * near) / (near - far), 0,267      ]));268    };269 270    /* Drifts itself on a coarse pointer, so the cloud still parts and reforms271       on a phone instead of sitting inert. */272    const pointer = createPointerSource(canvas);273 274    const start = performance.now();275 276    const draw = (now: number) => {277      resize();278      const elapsed = (now - start) / 1000;279      // Ping-pong through the cycle, so it morphs there and back forever280      // rather than snapping home.281      const mix = cycle > 0 ? (Math.sin((elapsed / cycle) * Math.PI * 2) + 1) / 2 : 0;282 283      gl.uniform1f(uMix, mix);284      gl.uniform1f(uTime, elapsed);285      const local = pointer.read(elapsed);286      // Element space (0-1, Y up) to the clip-ish space the shader works in.287      gl.uniform2f(uPointer, local.x * 2 - 1, local.y * 2 - 1);288 289      gl.clearColor(0.039, 0.043, 0.055, 1);290      gl.clear(gl.COLOR_BUFFER_BIT);291      gl.drawArrays(gl.POINTS, 0, total);292    };293 294    let frame = 0;295    const loop = (now: number) => {296      draw(now);297      frame = requestAnimationFrame(loop);298    };299 300    // One frame synchronously, so there is never a blank panel waiting on rAF.301    draw(reduced ? start + 2000 : start);302    if (!reduced) frame = requestAnimationFrame(loop);303 304    const observer = new ResizeObserver(() => {305      resize();306      if (reduced) draw(start + 2000);307    });308    observer.observe(canvas);309 310    return () => {311      cancelAnimationFrame(frame);312      observer.disconnect();313      pointer.dispose();314      gl.deleteProgram(program);315      gl.deleteShader(vs);316      gl.deleteShader(fs);317      buffers.forEach((b) => gl.deleteBuffer(b));318      // Not losing the context — see MeshGradient. It cannot be reacquired.319    };320  }, [count, from, to, colorNear, colorFar, size, cycle, repel, still]);321 322  return <canvas ref={canvasRef} aria-hidden className={`block h-full w-full ${className}`} />;323}324