"use client";

import { useEffect, useRef } from "react";

/* ------------------------------------------------------------------ */
/*  Vertex shader (shared by all passes)                               */
/* ------------------------------------------------------------------ */

const VERT = /* glsl */ `#version 300 es
precision highp float;
in vec2 aPosition;
out vec2 vTextureCoord;
out vec3 vVertexPosition;
void main() {
  vTextureCoord = aPosition * 0.5 + 0.5;
  vVertexPosition = vec3(aPosition, 0.0);
  gl_Position = vec4(aPosition, 0.0, 1.0);
}`;

/* ------------------------------------------------------------------ */
/*  Fragment shaders — extracted from Unicorn Studio project           */
/* ------------------------------------------------------------------ */

/** Pass 1 — NoiseFill: Perlin noise with anchored color palette */
const FRAG_NOISE_FILL = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
in vec3 vVertexPosition;
uniform sampler2D uTexture;
uniform float uTime;
uniform float uOpacity;
uniform vec2 uMousePos;
uniform vec2 uResolution;

vec3 hash33(vec3 p3) {
  p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
  p3 += dot(p3, p3.yxz + 19.19);
  return -1.0 + 2.0 * fract(vec3(
    (p3.x + p3.y) * p3.z,
    (p3.x + p3.z) * p3.y,
    (p3.y + p3.z) * p3.x
  ));
}

float perlin_noise(vec3 p) {
  vec3 pi = floor(p);
  vec3 pf = p - pi;
  vec3 w = pf * pf * (3.0 - 2.0 * pf);
  float n000 = dot(pf - vec3(0,0,0), hash33(pi + vec3(0,0,0)));
  float n100 = dot(pf - vec3(1,0,0), hash33(pi + vec3(1,0,0)));
  float n010 = dot(pf - vec3(0,1,0), hash33(pi + vec3(0,1,0)));
  float n110 = dot(pf - vec3(1,1,0), hash33(pi + vec3(1,1,0)));
  float n001 = dot(pf - vec3(0,0,1), hash33(pi + vec3(0,0,1)));
  float n101 = dot(pf - vec3(1,0,1), hash33(pi + vec3(1,0,1)));
  float n011 = dot(pf - vec3(0,1,1), hash33(pi + vec3(0,1,1)));
  float n111 = dot(pf - vec3(1,1,1), hash33(pi + vec3(1,1,1)));
  float nx00 = mix(n000, n100, w.x);
  float nx01 = mix(n001, n101, w.x);
  float nx10 = mix(n010, n110, w.x);
  float nx11 = mix(n011, n111, w.x);
  float nxy0 = mix(nx00, nx10, w.y);
  float nxy1 = mix(nx01, nx11, w.y);
  return mix(nxy0, nxy1, w.z);
}

vec4 applyLayerMix(vec4 color, vec4 bg, float amount) {
  color.rgb = mix(bg.rgb, color.rgb, amount);
  color.a = max(bg.a, amount);
  return color;
}

uvec2 pcg2d(uvec2 v) {
  v = v * 1664525u + 1013904223u;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  v ^= v >> 16;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  return v;
}

float randFibo(vec2 p) {
  uvec2 v = floatBitsToUint(p);
  v = pcg2d(v);
  uint r = v.x ^ v.y;
  return float(r) / float(0xffffffffu);
}

float deband() {
  return (randFibo(gl_FragCoord.xy) - 0.5) / 255.0;
}

out vec4 fragColor;

const float PI = 3.14159265359;
const float TAU = 6.28318530718;

vec3 anchoredPal(float t, vec3 col1, vec3 col2, float chroma) {
  vec3 mid = 0.5 * (col1 + col2);
  vec3 axisAmp = 0.5 * (col2 - col1);
  vec3 base = mid + axisAmp * cos(TAU * t);
  vec3 axis = length(axisAmp) > 0.0001 ? normalize(axisAmp) : vec3(1.0, 0.0, 0.0);
  vec3 ref = abs(axis.x) > 0.9 ? vec3(0.0, 1.0, 0.0) : vec3(1.0, 0.0, 0.0);
  vec3 tangent1 = normalize(cross(axis, ref));
  vec3 tangent2 = normalize(cross(axis, tangent1));
  float richness = 0.24 * length(axisAmp) + 0.02;
  vec3 ripple =
    tangent1 * sin(TAU * (t * 2.0 + 0.123)) +
    tangent2 * sin(TAU * (t * 3.0 + 0.437));
  vec3 col = base + (richness * chroma) * ripple;
  col = clamp(col, -10.0, 10.0);
  col = 1./(1. + exp(-col * 4. + 0.25) * 7.5);
  return clamp(col, 0.0, 1.0);
}

mat2 rot(float a) {
  return mat2(cos(a),-sin(a),sin(a),cos(a));
}

float getPerlinNoise(vec2 uv, float turbulence, float direction, float driftVal, float time, float scale, float phase) {
  float turb = turbulence * 3.2;
  vec2 skew = vec2(direction, 1. - direction);
  vec2 d = vec2(0, driftVal * time * 0.0125) * mix(1., 14., scale);
  float noise = perlin_noise(vec3(uv * skew - d, phase + time * 0.03));
  return mix(0.5, noise * 0.5 + 0.5, turb);
}

float getNoise(vec2 uv, float turbulence, float driftVal, float time, float scale, float direction, float phase) {
  return getPerlinNoise(uv, turbulence, direction, driftVal, time, scale, phase);
}

void main() {
  vec2 uv = vTextureCoord;
  float aspectRatio = uResolution.x / uResolution.y;
  vec2 aspect = vec2(aspectRatio, 1.0);
  vec2 mPos = vec2(0.5, 0.5) + mix(vec2(0), (uMousePos - 0.5), 0.0000);
  vec2 pos = mix(vec2(0.5, 0.5), mPos, 0.0000);
  float scale = mix(1., 14., 5.3400);
  mat2 rotation = rot(0.2500 * 2. * PI);
  vec2 st = (uv - pos) * aspect * scale * rotation;
  float noise = getNoise(st, 1.0000, 0.2700, uTime, 5.3400, 0.7900, 0.0000);
  noise = smoothstep(noise - 0.5, noise + 0.5, 0.9000);
  vec4 color = texture(uTexture, uv);
  vec4 bg = color;
  float shift = 0.0000 + (0.0000 * uTime * 0.01);
  vec3 noiseColor = anchoredPal(noise + shift, vec3(0.2823529411764706, 0.788235294117647, 0.984313725490196), vec3(0, 0, 0), 0.0000);
  color.rgb = noiseColor.rgb;
  float dither = deband();
  color.rgb += dither * 0.5;
  color = applyLayerMix(clamp(color, 0.0, 1.0), bg, uOpacity);
  fragColor = color;
}`;

/** Pass 2 — Circle: mouse-tracking additive glow */
const FRAG_CIRCLE = /* glsl */ `#version 300 es
precision highp float;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec2 uMousePos;
uniform vec2 uResolution;

vec3 blend(int blendMode, vec3 src, vec3 dst) {
  return src + dst;
}

vec4 applyLayerMix(vec4 color, vec4 bg, float amount) {
  color.rgb = mix(bg.rgb, color.rgb, amount);
  color.a = max(bg.a, amount);
  return color;
}

const float TAU = 6.28318530718;
out vec4 fragColor;

mat2 rot(float a) {
  return mat2(cos(a),-sin(a),sin(a),cos(a));
}

void main() {
  vec2 uv = vTextureCoord;
  vec4 bg = texture(uTexture, uv);
  float displacement = 0.0;
  vec2 aspectRatio = vec2(uResolution.x / uResolution.y, 1.0);
  vec2 skew = vec2(max(0.5000, 0.001), max(1.0 - 0.5000, 0.001));
  float halfRadius = 0.1860 * 0.5;
  float falloffAmount = max(1.0900, 0.001);
  float innerEdge = halfRadius - falloffAmount * halfRadius * 0.5;
  float outerEdge = halfRadius + falloffAmount * halfRadius * 0.5;
  vec2 pos = vec2(0.5, 0.5);
  pos += (uMousePos - 0.5) * 1.0000;
  vec2 scaledUV = uv * aspectRatio * rot(0.0378 * TAU) * skew;
  vec2 scaledPos = pos * aspectRatio * rot(0.0378 * TAU) * skew;
  float radius = distance(scaledUV, scaledPos);
  float falloff = smoothstep(innerEdge + displacement, outerEdge + displacement, radius);
  falloff = (1.0 - falloff) * 0.2700;
  vec4 color;
  vec3 blended = blend(1, vec3(0.0196078431372549, 0.6509803921568628, 0.9254901960784314), bg.rgb);
  color = applyLayerMix(vec4(blended, 1.0), bg, falloff);
  fragColor = color;
}`;

/** Pass 3 — Mondrian: pixelation grid with sway animation */
const FRAG_MONDRIAN = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform float uTime;
uniform vec2 uMousePos;
uniform vec2 uResolution;

float ease(int easingFunc, float t) { return t; }

float getExponentialWeight(int index) {
  switch(index) {
    case 0: return 1.0000000000;
    case 1: return 0.7165313106;
    case 2: return 0.5134171190;
    case 3: return 0.3678794412;
    case 4: return 0.2636050919;
    case 5: return 0.1888756057;
    case 6: return 0.1353352832;
    case 7: return 0.0969670595;
    case 8: return 0.0694877157;
    case 9: return 0.0497870684;
    case 10: return 0.0356739933;
    case 11: return 0.0255615332;
    case 12: return 0.0183156389;
    case 13: return 0.0131237287;
    case 14: return 0.0094035626;
    case 15: return 0.0067379470;
    default: return 0.0;
  }
}

out vec4 fragColor;

const int ITERATIONS = 16;
const float TAU = 6.28318530718;
const float REFERENCE_SHORT_SIDE = 1000.0;

mat2 rot(float a) {
  float s = sin(a); float c = cos(a);
  return mat2(c, -s, s, c);
}

vec2 perp(vec2 v) { return vec2(-v.y, v.x); }

vec2 rotateAround(vec2 point, vec2 center, mat2 rotation, float aspectRatio) {
  vec2 translated = point - center;
  translated.x *= aspectRatio;
  translated = rotation * translated;
  translated.x /= aspectRatio;
  return translated + center;
}

vec2 getGridOffset(int index) {
  switch (index) {
    case 0: return vec2(-0.22, -0.18);
    case 1: return vec2(0.18, -0.24);
    case 2: return vec2(-0.14, 0.20);
    case 3: return vec2(0.24, 0.12);
    case 4: return vec2(-0.30, 0.02);
    case 5: return vec2(0.08, -0.32);
    case 6: return vec2(0.30, -0.06);
    case 7: return vec2(-0.06, 0.30);
    case 8: return vec2(0.12, 0.26);
    case 9: return vec2(-0.26, -0.08);
    case 10: return vec2(0.28, 0.22);
    case 11: return vec2(-0.18, 0.28);
    case 12: return vec2(0.04, -0.20);
    case 13: return vec2(-0.32, 0.14);
    case 14: return vec2(0.22, -0.14);
    default: return vec2(0.0);
  }
}

vec2 pixelateUV(vec2 uv, vec2 anchorPos, float pixelSizePx, vec2 gridOffset) {
  float shortSide = max(min(uResolution.x, uResolution.y), 0.0001);
  vec2 scale = uResolution / shortSide;
  float pixelSize = pixelSizePx / REFERENCE_SHORT_SIDE;
  vec2 scaledAnchorPos = anchorPos * scale;
  vec2 pixelCoord = floor((((uv * scale) - scaledAnchorPos) / pixelSize) + gridOffset) * pixelSize;
  vec2 sampleCoord = pixelCoord + (vec2(0.5) - gridOffset) * pixelSize + scaledAnchorPos;
  return sampleCoord / scale;
}

vec2 distortUV(vec2 uv) {
  if (0.8200 > 0.0001) {
    float aspectRatio = uResolution.x / uResolution.y;
    vec2 anchorPos = vec2(0.5, 0.5) + mix(vec2(0.0), (uMousePos - 0.5), 0.0000);
    vec2 mixPos = vec2(0.5, 0.5) + mix(vec2(0.0), (uMousePos - 0.5), 0.0000);
    vec2 accumulatedUv = vec2(0.0);
    float accumulatedWeight = 0.0;
    float maxPixelSize = 1.0 + 0.8200 * 50.0;
    float curvePower = mix(0.0, -0.5, 0.9800);
    mat2 distortionRotation = rot(0.0000 * TAU);
    vec2 rotatedUv = rotateAround(uv, anchorPos, rot(0.0000 * TAU * -1.0), aspectRatio);
    for (int i = 0; i < ITERATIONS; i++) {
      float weight = getExponentialWeight(i);
      float curve = pow(getExponentialWeight((ITERATIONS - 1) - i), curvePower);
      float pixelSizePx = mix(maxPixelSize, 1.0, curve);
      float offsetStrength = mix(0.35, 0.0, curve);
      vec2 baseOffset = getGridOffset(i) * offsetStrength;
      vec2 swayDir = normalize(perp(baseOffset) + vec2(0.00001, 0.0));
      float swayAmount = 1.0;
      if (uTime > 0.0) {
        swayAmount = sin(uTime * 0.035 + float(i) * 1.6180339) * abs(offsetStrength) * 0.18;
      }
      vec2 gridOffset = baseOffset + swayDir * swayAmount;
      vec2 pixelUv = pixelateUV(rotatedUv, anchorPos, pixelSizePx, gridOffset);
      accumulatedUv += pixelUv * weight;
      accumulatedWeight += weight;
    }
    vec2 blurredUv = rotateAround(
      accumulatedUv / max(accumulatedWeight, 0.0001),
      anchorPos, distortionRotation, aspectRatio
    );
    float blendRadius = ease(0,
      max(0.0, 1.0 - distance(blurredUv * vec2(aspectRatio, 1.0), mixPos * vec2(aspectRatio, 1.0)) * 4.0 * (1.0 - 1.0000))
    );
    return mix(uv, blurredUv, 1.0000 * blendRadius);
  }
  return uv;
}

void main() {
  vec2 baseUv = vTextureCoord;
  vec2 uv = distortUV(baseUv);
  vec4 color = texture(uTexture, uv);
  fragColor = color;
}`;

/** Pass 4 — Dither: blue-noise ordered dithering */
const FRAG_DITHER = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform sampler2D uBlueNoise;
uniform float uTime;
uniform vec2 uResolution;

uvec2 pcg2d(uvec2 v) {
  v = v * 1664525u + 1013904223u;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  v ^= v >> 16;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  return v;
}

float randFibo(vec2 p) {
  uvec2 v = floatBitsToUint(p);
  v = pcg2d(v);
  uint r = v.x ^ v.y;
  return float(r) / float(0xffffffffu);
}

const int MAX_LEVEL = 4;
const float TAU = 6.28318530718;

float getBlueNoise(vec2 st, float delta, float size) {
  ivec2 texSize = textureSize(uBlueNoise, 0);
  vec4 blueNoise = texelFetch(uBlueNoise, ivec2(fract(st * (uResolution / size) / vec2(texSize) * vec2(texSize.x / texSize.y, 1.0)) * vec2(texSize)) % texSize, 0);
  return mod((blueNoise.r - 0.5) * TAU + (delta * (1.0 / TAU)), TAU) / TAU - 0.005;
}

vec3 dither(vec3 color, vec2 st) {
  float delta = floor(uTime);
  vec2 offset = vec2(randFibo(vec2(123, 16) + delta), randFibo(vec2(56, 96) + delta));
  float noise = getBlueNoise(st, delta, 2.);
  float dither_threshold = max(0.0001, 1.0000);
  float num_levels = 1.0 / dither_threshold;
  return floor(color * num_levels + noise) / num_levels;
}

out vec4 fragColor;

void main() {
  vec2 uv = vTextureCoord;
  vec4 color = texture(uTexture, uv);
  color.rgb = mix(color.rgb, dither(color.rgb, vTextureCoord), 0.3900);
  fragColor = color;
}`;

/** Pass 5 — Vignette: radial edge darkening */
const FRAG_VIGNETTE = /* glsl */ `#version 300 es
precision highp float;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec2 uResolution;

vec4 applyLayerMix(vec4 color, vec4 bg, float amount) {
  color.rgb = mix(bg.rgb, color.rgb, amount);
  color.a = max(bg.a, amount);
  return color;
}

const float TAU = 6.28318530718;
out vec4 fragColor;

mat2 rot(float a) {
  return mat2(cos(a),-sin(a),sin(a),cos(a));
}

void main() {
  vec2 uv = vTextureCoord;
  vec4 color = texture(uTexture, uv);
  float displacement = 0.0;
  vec2 aspectRatio = vec2(uResolution.x / uResolution.y, 1.0);
  vec2 skew = vec2(0.0000, 1.0 - 0.0000);
  float halfRadius = 0.3840 * 0.5;
  float innerEdge = halfRadius - 1.0000 * halfRadius * 0.5;
  float outerEdge = halfRadius + 1.0000 * halfRadius * 0.5;
  vec2 pos = vec2(0.5098175560928837, 0.6802178090953911);
  vec2 scaledUV = uv * aspectRatio * rot(0.0000 * TAU) * skew;
  vec2 scaledPos = pos * aspectRatio * rot(0.0000 * TAU) * skew;
  float radius = distance(scaledUV, scaledPos);
  float falloff = smoothstep(innerEdge + displacement, outerEdge + displacement, radius);
  vec4 vignetteColor;
  vignetteColor = applyLayerMix(vec4(vec3(0, 0, 0), 1.0), color, falloff * 1.0000);
  vec4 col = mix(color * (1. - falloff), vec4(vignetteColor.rgb, vignetteColor.a), 1.0000);
  fragColor = col;
}`;

/** Pass 6a — BlobTracking Mask: motion detection with temporal feedback */
const FRAG_BLOB_MASK = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform sampler2D uPreviousFrameTexture;
uniform vec2 uResolution;
out vec4 fragColor;

float luma(vec3 color) {
  return dot(color, vec3(0.299, 0.587, 0.114));
}

vec4 maskPass(vec2 uv) {
  vec2 texel = 1.0 / uResolution;
  vec4 current = texture(uTexture, uv);
  float currentLuma = luma(current.rgb);
  if (current.a < 0.005 && currentLuma < 0.005) return vec4(0.0);
  float l = luma(texture(uTexture, uv + vec2(-1.0, 0.0) * texel).rgb);
  float r = luma(texture(uTexture, uv + vec2( 1.0, 0.0) * texel).rgb);
  float t = luma(texture(uTexture, uv + vec2( 0.0,-1.0) * texel).rgb);
  float b = luma(texture(uTexture, uv + vec2( 0.0, 1.0) * texel).rgb);
  float gx = r - l;
  float gy = b - t;
  float gradMag = length(vec2(gx, gy));
  vec4 prevOutput = texture(uPreviousFrameTexture, uv);
  if (all(equal(prevOutput, vec4(0.0)))) {
    return vec4(0.0, currentLuma, gx * 0.5 + 0.5, gy * 0.5 + 0.5);
  }
  float prevLuma = prevOutput.g;
  vec2 prevGrad = (prevOutput.ba - 0.5) * 2.0;
  float prevGradMag = length(prevGrad);
  float lumaDiff = abs(currentLuma - prevLuma);
  float threshold = 0.5500 * 0.2;
  float lumaMotion = smoothstep(threshold, threshold + 0.15, lumaDiff);
  float magChange = abs(gradMag - prevGradMag);
  float structuralMotion = smoothstep(0.08, 0.5, magChange);
  float detected = max(lumaMotion, lumaMotion * structuralMotion);
  detected = smoothstep(0.05, 0.4, detected);
  float prevDetected = prevOutput.r;
  float riseRate = 0.6;
  float fallRate = mix(0.5, 0.85, 1.0000);
  detected = (detected > prevDetected)
    ? mix(prevDetected, detected, riseRate)
    : prevDetected * fallRate;
  return vec4(detected, currentLuma, gx * 0.5 + 0.5, gy * 0.5 + 0.5);
}

void main() {
  fragColor = maskPass(vTextureCoord);
}`;

/** Pass 6b — BlobTracking Peak: spatial peak detection */
const FRAG_BLOB_PEAK = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec2 uResolution;
out vec4 fragColor;

vec2 getDirection(int i) {
  float angle = float(i) * 0.7853981634;
  return vec2(cos(angle), sin(angle));
}

vec4 peakPass(vec2 uv) {
  vec2 texel = 1.0 / uResolution;
  const float ACTIVE_THRESHOLD = 0.02;
  const float FILL_RADIUS = 6.0;
  vec4 centerSample = texture(uTexture, uv);
  float centerVal = centerSample.r;
  float quickMax = centerVal;
  quickMax = max(quickMax, texture(uTexture, uv + vec2(4.0, 0.0) * texel).r);
  quickMax = max(quickMax, texture(uTexture, uv + vec2(-4.0, 0.0) * texel).r);
  quickMax = max(quickMax, texture(uTexture, uv + vec2(0.0, 4.0) * texel).r);
  quickMax = max(quickMax, texture(uTexture, uv + vec2(0.0, -4.0) * texel).r);
  if (quickMax < ACTIVE_THRESHOLD * 0.5) {
    return vec4(0.0, 0.5, 0.5, 0.0);
  }
  float nearestActiveDist = FILL_RADIUS + 1.0;
  float maxVal = centerVal;
  vec2 gradient = vec2(0.0);
  if (centerVal > ACTIVE_THRESHOLD) {
    nearestActiveDist = 0.0;
  }
  for (int i = 0; i < 8; i++) {
    vec2 dir = getDirection(i);
    for (float d = 2.0; d <= FILL_RADIUS; d += 2.0) {
      vec2 offset = dir * d * texel;
      float v = texture(uTexture, uv + offset).r;
      if (v > ACTIVE_THRESHOLD) {
        nearestActiveDist = min(nearestActiveDist, d);
      }
      maxVal = max(maxVal, v);
      if (v > 0.01) {
        gradient += dir * d * v;
      }
    }
  }
  float result = 0.0;
  if (nearestActiveDist <= FILL_RADIUS) {
    result = 1.0 - smoothstep(FILL_RADIUS * 0.5, FILL_RADIUS, nearestActiveDist);
    result *= mix(0.7, 1.0, smoothstep(0.0, 0.1, maxVal));
  }
  float gradLen = length(gradient);
  vec2 gradDir = (gradLen > 0.001) ? gradient / gradLen : vec2(0.0);
  vec2 gradEncoded = gradDir * 0.5 + 0.5;
  float peakness = (maxVal > ACTIVE_THRESHOLD && result > 0.02) ?
    clamp(maxVal / 0.2, 0.0, 1.0) : 0.0;
  return vec4(result, gradEncoded.x, gradEncoded.y, peakness);
}

void main() {
  fragColor = peakPass(vTextureCoord);
}`;

/** Pass 6c — BlobTracking Slot: blob position tracking with temporal feedback */
const FRAG_BLOB_SLOT = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform sampler2D uPreviousFrameTexture;
uniform vec2 uResolution;
out vec4 fragColor;

const int MAX_BLOBS = 16;
const float GRID_SIZE = 8.0;
const float BLOB_SLOT_HEIGHT = 0.02;

vec2 getBlobSlotUV(int blobIndex) {
  float slotX = (float(blobIndex) + 0.5) / 8.0000;
  return vec2(slotX, BLOB_SLOT_HEIGHT * 0.5);
}

bool isBlobSlot(vec2 uv) {
  return uv.y < BLOB_SLOT_HEIGHT;
}

int getBlobIndexForUV(vec2 uv) {
  return int(floor(uv.x * 8.0000));
}

bool isBlobStateAlive(vec4 state) {
  return state.z > 0.01 && state.w > 0.05 && state.x >= 0.0;
}

bool checkBlobCollision(vec2 cPos, int slotIndex, float minSpacing, bool checkLower, bool checkHigher) {
  if (checkLower) {
    for (int j = 0; j < MAX_BLOBS; j++) {
      if (j >= slotIndex) break;
      if (j >= int(8.0000)) break;
      vec4 jState = textureLod(uPreviousFrameTexture, getBlobSlotUV(j), 0.0);
      if (!isBlobStateAlive(jState)) continue;
      if (length(cPos - jState.xy) < minSpacing) return true;
    }
  }
  if (checkHigher) {
    for (int j = 0; j < MAX_BLOBS; j++) {
      int idx = slotIndex + 1 + j;
      if (idx >= int(8.0000)) break;
      vec4 jState = textureLod(uPreviousFrameTexture, getBlobSlotUV(idx), 0.0);
      if (!isBlobStateAlive(jState)) continue;
      if (length(cPos - jState.xy) < minSpacing) return true;
    }
  }
  return false;
}

vec4 sampleGridCell(vec2 cellCenter, vec2 cellSize, out vec2 sumPos2, out vec2 bestPeakPos) {
  const int SAMPLE_COUNT = 25;
  float sumW = 0.0;
  vec2 sumPos = vec2(0.0);
  sumPos2 = vec2(0.0);
  float bestPeakStrength = 0.0;
  bestPeakPos = vec2(0.0);
  for (int s = 0; s < SAMPLE_COUNT; s++) {
    float x = float(s % 5);
    float y = float(s / 5);
    vec2 offset = (vec2(x, y) / 4.0 - 0.5) * cellSize;
    vec2 samplePos = cellCenter + offset;
    if (samplePos.x < 0.0 || samplePos.x > 1.0 ||
        samplePos.y < 0.0 || samplePos.y > 1.0) continue;
    vec4 peakData = texture(uTexture, samplePos);
    float fieldStrength = peakData.r;
    float peakness = peakData.a;
    if (fieldStrength > 0.01) {
      float w = fieldStrength * (1.0 + peakness * 0.3);
      sumW += w;
      sumPos += samplePos * w;
      sumPos2 += samplePos * samplePos * w;
      float peakScore = fieldStrength * (0.5 + peakness);
      if (peakScore > bestPeakStrength) {
        bestPeakStrength = peakScore;
        bestPeakPos = samplePos;
      }
    }
  }
  return vec4(sumW, sumPos.x, sumPos.y, bestPeakStrength);
}

vec4 slotPass(vec2 uv) {
  if (!isBlobSlot(uv)) return vec4(0.0);
  int slotIndex = getBlobIndexForUV(uv);
  if (slotIndex >= int(8.0000)) return vec4(0.0);
  vec2 slotUV = getBlobSlotUV(slotIndex);
  vec4 prevState = texture(uPreviousFrameTexture, slotUV);
  vec2 prevPos = prevState.xy;
  float prevSize = prevState.z;
  float prevConf = prevState.w;
  bool wasAlive = (prevSize > 0.01 && prevConf > 0.05 && prevPos.x >= 0.0);
  vec2 bestPos = vec2(-1.0);
  vec2 bestSize = vec2(0.0);
  float bestScore = 0.0;
  float cols = ceil(sqrt(8.0000));
  float rows = ceil(8.0000 / cols);
  float col = mod(float(slotIndex), cols);
  float row = floor(float(slotIndex) / cols);
  vec2 slotCenter = vec2((col + 0.5) / cols, (row + 0.5) / rows);
  float slotRadius = 0.5 / max(cols, rows);
  const float MIN_SPACING = 0.07;
  const float TRACK_RADIUS = 0.05;
  vec2 cellSize = vec2(1.0 / GRID_SIZE);
  for (int cell = 0; cell < 64; cell++) {
    int cx = cell % 8;
    int cy = cell / 8;
    vec2 cellCenter = (vec2(float(cx), float(cy)) + 0.5) / GRID_SIZE;
    vec2 sumPos2;
    vec2 bestPeakPos;
    vec4 sampleResult = sampleGridCell(cellCenter, cellSize, sumPos2, bestPeakPos);
    float sumW = sampleResult.x;
    vec2 sumPos = sampleResult.yz;
    float bestPeakStrength = sampleResult.w;
    if (sumW < 0.015) continue;
    vec2 cPos = sumPos / sumW;
    if (bestPeakStrength > 0.2) {
      cPos = mix(cPos, bestPeakPos, 0.05);
    }
    vec2 var = max(sumPos2 / sumW - cPos * cPos, vec2(0.0));
    float activity = clamp(sumW / 0.25, 0.0, 1.0);
    float minActivity = wasAlive ? 0.12 : 0.2;
    if (activity < minActivity) continue;
    float sizeScalar = sqrt(max(var.x, var.y)) * mix(1.5, 3.5, activity);
    float maxSize = mix(0.2, 1.2, 0.5000);
    sizeScalar = sizeScalar * maxSize;
    float distFromSelf = length(cPos - prevPos);
    if (checkBlobCollision(cPos, slotIndex, MIN_SPACING, true, false)) continue;
    if (wasAlive && distFromSelf > TRACK_RADIUS) continue;
    if (!wasAlive) {
      if (checkBlobCollision(cPos, slotIndex, MIN_SPACING, false, true)) continue;
    }
    float score = sumW * activity;
    float distFromSlot = length(cPos - slotCenter);
    float regionBonus = exp(-distFromSlot * distFromSlot / (slotRadius * slotRadius * 2.0));
    if (wasAlive) {
      score *= exp(-distFromSelf * 2.0);
      score *= (0.5 + 0.5 * regionBonus);
    } else {
      score *= (0.8 + 0.2 * regionBonus);
    }
    if (score > bestScore) {
      bestScore = score;
      bestPos = cPos;
      bestSize = vec2(sizeScalar);
    }
  }
  vec2 newPos, newSize;
  float SPAWN_THRESHOLD = mix(0.12, 0.05, 1.0000);
  float TRACK_THRESHOLD = mix(0.06, 0.02, 1.0000);
  float acceptThreshold = wasAlive ? TRACK_THRESHOLD : SPAWN_THRESHOLD;
  float newConf = 0.0;
  float bestConf = clamp(bestScore * 8.0, 0.0, 1.0);
  const float MIN_PEAK_STRENGTH = 0.02;
  float peakAtBest = 0.0;
  vec2 texel = 1.0 / uResolution;
  for (int p = 0; p < 25; p++) {
    float px = float(p % 5) - 2.0;
    float py = float(p / 5) - 2.0;
    float pVal = texture(uTexture, bestPos + vec2(px, py) * texel * 2.0).r;
    peakAtBest = max(peakAtBest, pVal);
  }
  bool canAccept = bestScore > acceptThreshold && peakAtBest > MIN_PEAK_STRENGTH;
  if (canAccept) {
    if (wasAlive) {
      float smoothFactor = mix(1.0, 0.05, 0.1800);
      newPos = mix(prevPos, bestPos, smoothFactor);
      newSize = vec2(prevSize);
    } else {
      newPos = bestPos;
      newSize = bestSize;
    }
    newConf = clamp(max(prevConf * 0.8, bestConf), 0.0, 1.0);
  } else {
    newPos = vec2(-1.0);
    newSize = vec2(0.0);
    newConf = 0.0;
  }
  return vec4(newPos, newSize.x, newConf);
}

void main() {
  fragColor = slotPass(vTextureCoord);
}`;

/** Pass 6d — BlobTracking Draw: renders blobs, lines, labels onto scene */
const FRAG_BLOB_DRAW = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform sampler2D uBgTexture;
uniform sampler2D uFontAtlas;
uniform vec2 uResolution;
out vec4 fragColor;

const float FONT_COLS = 8.0;
const float FONT_ROWS = 8.0;
const int FONT_START_CHAR = 32;
const int MAX_BLOBS = 16;
const float BLOB_SLOT_HEIGHT = 0.02;

float sampleChar(vec2 uv, int charCode) {
  int charIndex = charCode - FONT_START_CHAR;
  if (charIndex < 0 || charIndex >= 64) return 0.0;
  float col = mod(float(charIndex), FONT_COLS);
  float row = floor(float(charIndex) / FONT_COLS);
  float cellSize = 1.0 / 8.0;
  float x = (col + uv.x) * cellSize;
  float y = 1.0 - (row + 1.0 - uv.y) * cellSize;
  return textureLod(uFontAtlas, vec2(x, y), 0.0).r;
}

float renderDigit(vec2 uv, vec2 pos, vec2 size, int digit) {
  vec2 localUV = (uv - pos) / size;
  if (localUV.x < 0.0 || localUV.x > 1.0 || localUV.y < 0.0 || localUV.y > 1.0) return 0.0;
  int charCode = 48 + digit;
  float sdf = sampleChar(localUV, charCode);
  float edge = 0.7;
  float smoothing = 0.05;
  return smoothstep(edge - smoothing, edge + smoothing, sdf);
}

float renderChar(vec2 uv, vec2 pos, vec2 size, int charCode) {
  vec2 localUV = (uv - pos) / size;
  if (localUV.x < 0.0 || localUV.x > 1.0 || localUV.y < 0.0 || localUV.y > 1.0) return 0.0;
  float sdf = sampleChar(localUV, charCode);
  float edge = 0.6;
  float smoothing = 0.05;
  return smoothstep(edge - smoothing, edge + smoothing, sdf);
}

float renderFloat(vec2 uv, vec2 pos, vec2 charSize, float value) {
  float result = 0.0;
  float spacing = charSize.x * 0.35;
  float clamped = clamp(value, 0.0, 0.9999);
  int digits = int(clamped * 10000.0);
  int d1 = digits / 1000;
  int d2 = (digits / 100) % 10;
  int d3 = (digits / 10) % 10;
  int d4 = digits % 10;
  float startX = pos.x - spacing * 2.5;
  result = max(result, renderDigit(uv, vec2(startX, pos.y), charSize, 0));
  result = max(result, renderChar(uv, vec2(startX + spacing, pos.y), charSize, 46));
  result = max(result, renderDigit(uv, vec2(startX + spacing * 2.0, pos.y), charSize, d1));
  result = max(result, renderDigit(uv, vec2(startX + spacing * 3.0, pos.y), charSize, d2));
  result = max(result, renderDigit(uv, vec2(startX + spacing * 4.0, pos.y), charSize, d3));
  result = max(result, renderDigit(uv, vec2(startX + spacing * 5.0, pos.y), charSize, d4));
  return result;
}

vec2 getBlobSlotUV(int blobIndex) {
  float slotX = (float(blobIndex) + 0.5) / 8.0000;
  return vec2(slotX, BLOB_SLOT_HEIGHT * 0.5);
}

vec4 getBlobStateFromSlot(int i, sampler2D tex) {
  if (i >= int(8.0000)) return vec4(-1.0, -1.0, 0.0, 0.0);
  return textureLod(tex, getBlobSlotUV(i), 0.0);
}

bool isBlobStateActive(vec4 state) {
  return state.x >= 0.0 && state.z >= 0.01 && state.w >= 0.1;
}

int countActiveBlobs(sampler2D tex) {
  int count = 0;
  for (int i = 0; i < MAX_BLOBS; i++) {
    if (i >= int(8.0000)) break;
    vec4 state = getBlobStateFromSlot(i, tex);
    if (isBlobStateActive(state)) count++;
  }
  return count;
}

vec2 getNthActiveBlobPos(int n, sampler2D tex, float aspectRatio) {
  int count = 0;
  for (int i = 0; i < MAX_BLOBS; i++) {
    if (i >= int(8.0000)) break;
    vec4 state = getBlobStateFromSlot(i, tex);
    if (!isBlobStateActive(state)) continue;
    if (count == n) {
      return vec2(state.x * aspectRatio, state.y);
    }
    count++;
  }
  return vec2(0.0);
}

float boxSDF(vec2 p, vec2 center, vec2 halfSize) {
  vec2 d = abs(p - center) - halfSize;
  float outside = length(max(d, 0.0));
  float inside = min(max(d.x, d.y), 0.0);
  return outside + inside;
}

float dashedLineSDF(vec2 p, vec2 a, vec2 b, float dashLength, float gapLength) {
  vec2 pa = p - a;
  vec2 ba = b - a;
  float lineLen = length(ba);
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
  float distAlongLine = h * lineLen;
  float period = dashLength + gapLength;
  float inPeriod = mod(distAlongLine, period);
  if (inPeriod > dashLength) return 1.0;
  return length(pa - ba * h);
}

float dottedLineSDF(vec2 p, vec2 a, vec2 b) {
  float dotLength = 0.004;
  float dotGap = 0.008;
  return dashedLineSDF(p, a, b, dotLength, dotGap);
}

float lineStyleDistance(vec2 p, vec2 a, vec2 b, float dashLength, float gapLength) {
  return dottedLineSDF(p, a, b);
}

void computePolygonLineDistances(vec2 uvA, float aspectRatio, sampler2D tex, float maxConnectionDist, float dashLength, float gapLength, inout float minLineDist) {
  int activeCount = countActiveBlobs(tex);
  if (activeCount < 2) return;
  for (int i = 0; i < MAX_BLOBS; i++) {
    if (i >= activeCount) break;
    int nextIdx = (i + 1) % activeCount;
    vec2 p1 = getNthActiveBlobPos(i, tex, aspectRatio);
    vec2 p2 = getNthActiveBlobPos(nextIdx, tex, aspectRatio);
    if (length(p1 - p2) > maxConnectionDist) continue;
    float d = lineStyleDistance(uvA, p1, p2, dashLength, gapLength);
    minLineDist = min(minLineDist, d);
  }
}

float renderLabelIntensity(vec2 uvA, float aspectRatio, sampler2D tex) {
  float textResult = 0.0;
  float charHeight = mix(0.015, 0.05, 0.2000);
  vec2 charSize = vec2(charHeight, charHeight);
  int blobCountInt = int(8.0000);
  for (int i = 0; i < MAX_BLOBS; i++) {
    if (i >= blobCountInt) break;
    vec4 state = getBlobStateFromSlot(i, tex);
    if (!isBlobStateActive(state)) continue;
    vec2 blobPos = state.xy;
    float blobSize = state.z * 0.5;
    vec2 labelPos = vec2(
      blobPos.x * aspectRatio - blobSize + charSize.x * 0.4,
      blobPos.y - blobSize + charSize.y * 0.4
    );
    float intensity = clamp(blobSize * 4.0, 0.0, 1.0);
    labelPos.x += charSize.x;
    textResult = max(textResult, renderFloat(uvA, labelPos, charSize, intensity));
  }
  return textResult;
}

vec2 blobStylePointSquareData(vec2 uvA, vec2 centerA) {
  float pointRadius = 0.005;
  float d = boxSDF(uvA, centerA, vec2(pointRadius));
  return vec2(abs(d), d);
}

vec4 drawPass(vec2 uv) {
  vec4 background = texture(uBgTexture, uv);
  if (background.a < 0.001) return vec4(0.0);
  float aspectRatio = uResolution.x / uResolution.y;
  float minBlobDist = 1.0;
  float minLineDist = 1.0;
  bool foundAny = false;
  int blobCountInt = int(8.0000);
  for (int i = 0; i < MAX_BLOBS; i++) {
    if (i >= blobCountInt) break;
    vec4 state = getBlobStateFromSlot(i, uTexture);
    if (isBlobStateActive(state)) {
      foundAny = true;
      break;
    }
  }
  if (!foundAny) {
    if (1 == 1) { return background; }
    return vec4(0.0);
  }
  vec2 uvA = vec2(uv.x * aspectRatio, uv.y);
  float lineWidth = 0.2000 * 0.005;
  float dashLength = 0.015;
  float gapLength = 0.01;
  float minFillDist = 1.0;
  for (int i = 0; i < MAX_BLOBS; i++) {
    if (i >= blobCountInt) break;
    vec4 state = getBlobStateFromSlot(i, uTexture);
    if (!isBlobStateActive(state)) continue;
    vec2 blobPos = state.xy;
    float blobSize = state.z * 0.5;
    vec2 centerA = vec2(blobPos.x * aspectRatio, blobPos.y);
    vec2 blobData = blobStylePointSquareData(uvA, centerA);
    float blobD = blobData.x;
    minBlobDist = min(minBlobDist, blobD);
    minFillDist = min(minFillDist, blobData.y);
  }
  computePolygonLineDistances(uvA, aspectRatio, uTexture, 0.5000, dashLength, gapLength, minLineDist);
  float connectionWidth = lineWidth;
  float blobLineWidth = lineWidth;
  float blobResult = 1.0 - smoothstep(blobLineWidth * 0.5, blobLineWidth * 1.5, minBlobDist);
  float fillResult = (minFillDist < 0.0) ? 0.4600 : 0.0;
  float lineResult = 1.0 - smoothstep(connectionWidth * 0.5, connectionWidth * 1.5, minLineDist);
  float textResult = renderLabelIntensity(uvA, aspectRatio, uTexture);
  float result = max(max(max(blobResult, lineResult), fillResult), textResult);
  vec3 finalColor = mix(background.rgb, vec3(0.8666666666666667, 0.8274509803921568, 1), result * 1.0000);
  float finalAlpha = background.a;
  return vec4(finalColor, finalAlpha);
}

void main() {
  fragColor = drawPass(vTextureCoord);
}`;

/** Pass 7 — Outline: Sobel edge detection with overlay blend */
const FRAG_OUTLINE = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform sampler2D uBgTexture;
uniform vec2 uResolution;

vec3 blend(int blendMode, vec3 src, vec3 dst) {
  return vec3(
    (dst.x <= 0.5) ? (2.0 * src.x * dst.x) : (1.0 - 2.0 * (1.0 - dst.x) * (1.0 - src.x)),
    (dst.y <= 0.5) ? (2.0 * src.y * dst.y) : (1.0 - 2.0 * (1.0 - dst.y) * (1.0 - src.y)),
    (dst.z <= 0.5) ? (2.0 * src.z * dst.z) : (1.0 - 2.0 * (1.0 - dst.z) * (1.0 - src.z))
  );
}

vec4 applyLayerMix(vec4 color, vec4 bg, float amount) {
  color.rgb = mix(bg.rgb, color.rgb, amount);
  color.a = max(bg.a, amount);
  return color;
}

out vec4 fragColor;

float luma(vec3 c) {
  return dot(c, vec3(0.299, 0.587, 0.114));
}

float interleavedGradientNoise(vec2 st) {
  return fract(52.9829189 * fract(dot(st, vec2(0.06711056, 0.00583715))));
}

void main() {
  vec2 uv = vTextureCoord;
  float thickness = 0.3900;
  vec2 pixel = (1.0 / uResolution) * max(thickness * 4.0, 0.001);
  float noise = interleavedGradientNoise(gl_FragCoord.xy);
  pixel *= mix(1.0, noise, 0.1);
  float tl = luma(texture(uTexture, uv + pixel * vec2(-1,-1)).rgb);
  float t  = luma(texture(uTexture, uv + pixel * vec2( 0,-1)).rgb);
  float tr = luma(texture(uTexture, uv + pixel * vec2( 1,-1)).rgb);
  float l  = luma(texture(uTexture, uv + pixel * vec2(-1, 0)).rgb);
  float r  = luma(texture(uTexture, uv + pixel * vec2( 1, 0)).rgb);
  float bl = luma(texture(uTexture, uv + pixel * vec2(-1, 1)).rgb);
  float b  = luma(texture(uTexture, uv + pixel * vec2( 0, 1)).rgb);
  float br = luma(texture(uTexture, uv + pixel * vec2( 1, 1)).rgb);
  float gx = -tl - 2.0 * l - bl + tr + 2.0 * r + br;
  float gy = -tl - 2.0 * t - tr + bl + 2.0 * b + br;
  float edge = length(vec2(gx, gy));
  float soft = max(0.0000 * 0.5, 0.001);
  edge = smoothstep(1.0000 - soft, 1.0000 + soft, edge);
  edge *= (1.0000 * 2.0);
  vec4 scene = texture(uBgTexture, uv);
  vec3 outline = vec3(0, 0.6549019607843137, 0.8549019607843137) * edge;
  vec3 blended = blend(5, outline, scene.rgb);
  vec4 col = applyLayerMix(vec4(blended, 1.0), scene, 0.6700);
  fragColor = col;
}`;

/* ------------------------------------------------------------------ */
/*  WebGL helpers                                                      */
/* ------------------------------------------------------------------ */

function compile(gl: WebGL2RenderingContext, type: number, src: string) {
  const s = gl.createShader(type)!;
  gl.shaderSource(s, src);
  gl.compileShader(s);
  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
    console.error("Shader error:", gl.getShaderInfoLog(s));
    gl.deleteShader(s);
    return null;
  }
  return s;
}

function link(gl: WebGL2RenderingContext, vert: string, frag: string) {
  const p = gl.createProgram()!;
  const vs = compile(gl, gl.VERTEX_SHADER, vert);
  const fs = compile(gl, gl.FRAGMENT_SHADER, frag);
  if (!vs || !fs) return null;
  gl.attachShader(p, vs);
  gl.attachShader(p, fs);
  gl.bindAttribLocation(p, 0, "aPosition");
  gl.linkProgram(p);
  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
    console.error("Link error:", gl.getProgramInfoLog(p));
    return null;
  }
  gl.deleteShader(vs);
  gl.deleteShader(fs);
  return p;
}

interface FBO {
  fb: WebGLFramebuffer;
  tex: WebGLTexture;
}

function makeFBO(gl: WebGL2RenderingContext, w: number, h: number): FBO {
  const tex = gl.createTexture()!;
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, w, h, 0, gl.RGBA, gl.HALF_FLOAT, null);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  const fb = gl.createFramebuffer()!;
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
  return { fb, tex };
}

function destroyFBO(gl: WebGL2RenderingContext, fbo: FBO) {
  gl.deleteFramebuffer(fbo.fb);
  gl.deleteTexture(fbo.tex);
}

/* ------------------------------------------------------------------ */
/*  Texture generators                                                 */
/* ------------------------------------------------------------------ */

function createNoiseTex(gl: WebGL2RenderingContext): WebGLTexture {
  const size = 256;
  const data = new Uint8Array(size * size * 4);
  for (let i = 0; i < data.length; i++) data[i] = (Math.random() * 256) | 0;
  const tex = gl.createTexture()!;
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
  return tex;
}

function createFontAtlas(gl: WebGL2RenderingContext): WebGLTexture {
  const size = 512;
  const cell = size / 8;
  const c = document.createElement("canvas");
  c.width = size;
  c.height = size;
  const ctx = c.getContext("2d")!;
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, size, size);
  ctx.fillStyle = "#fff";
  ctx.font = `bold ${cell * 0.65}px monospace`;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  for (let i = 0; i < 64; i++) {
    const col = i % 8;
    const row = Math.floor(i / 8);
    ctx.fillText(String.fromCharCode(32 + i), (col + 0.5) * cell, (row + 0.5) * cell);
  }
  const tex = gl.createTexture()!;
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  return tex;
}

/* ------------------------------------------------------------------ */
/*  Component                                                          */
/* ------------------------------------------------------------------ */

export default function CubeI() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl = canvas.getContext("webgl2", {
      alpha: false,
      premultipliedAlpha: false,
      antialias: false,
    });
    if (!gl) return;

    gl.getExtension("EXT_color_buffer_float");

    /* --- Fullscreen quad ------------------------------------------ */
    const vao = gl.createVertexArray()!;
    gl.bindVertexArray(vao);
    const vbo = gl.createBuffer()!;
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
      gl.STATIC_DRAW,
    );
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

    /* --- Compile programs ----------------------------------------- */
    const pNoiseFill = link(gl, VERT, FRAG_NOISE_FILL);
    const pCircle = link(gl, VERT, FRAG_CIRCLE);
    const pMondrian = link(gl, VERT, FRAG_MONDRIAN);
    const pDither = link(gl, VERT, FRAG_DITHER);
    const pVignette = link(gl, VERT, FRAG_VIGNETTE);
    const pBlobMask = link(gl, VERT, FRAG_BLOB_MASK);
    const pBlobPeak = link(gl, VERT, FRAG_BLOB_PEAK);
    const pBlobSlot = link(gl, VERT, FRAG_BLOB_SLOT);
    const pBlobDraw = link(gl, VERT, FRAG_BLOB_DRAW);
    const pOutline = link(gl, VERT, FRAG_OUTLINE);
    if (
      !pNoiseFill || !pCircle || !pMondrian || !pDither || !pVignette ||
      !pBlobMask || !pBlobPeak || !pBlobSlot || !pBlobDraw || !pOutline
    ) return;

    /* --- Static textures ------------------------------------------ */
    const blueNoiseTex = createNoiseTex(gl);
    const fontAtlasTex = createFontAtlas(gl);

    /* --- FBOs ----------------------------------------------------- */
    let w = 2, h = 2;
    let fboA = makeFBO(gl, w, h);
    let fboB = makeFBO(gl, w, h);
    // Blob tracking temporal feedback
    let blobMask: [FBO, FBO] = [makeFBO(gl, w, h), makeFBO(gl, w, h)];
    let blobPeak = makeFBO(gl, w, h);
    let blobSlot: [FBO, FBO] = [makeFBO(gl, w, h), makeFBO(gl, w, h)];
    let blobMaskIdx = 0;
    let blobSlotIdx = 0;

    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio, 1.5);
      const rect = canvas.getBoundingClientRect();
      const newW = Math.floor(rect.width * dpr);
      const newH = Math.floor(rect.height * dpr);
      if (canvas.width !== newW || canvas.height !== newH) {
        w = newW;
        h = newH;
        canvas.width = w;
        canvas.height = h;
        gl.viewport(0, 0, w, h);
        destroyFBO(gl, fboA);
        destroyFBO(gl, fboB);
        fboA = makeFBO(gl, w, h);
        fboB = makeFBO(gl, w, h);
        destroyFBO(gl, blobMask[0]);
        destroyFBO(gl, blobMask[1]);
        destroyFBO(gl, blobPeak);
        destroyFBO(gl, blobSlot[0]);
        destroyFBO(gl, blobSlot[1]);
        blobMask = [makeFBO(gl, w, h), makeFBO(gl, w, h)];
        blobPeak = makeFBO(gl, w, h);
        blobSlot = [makeFBO(gl, w, h), makeFBO(gl, w, h)];
        blobMaskIdx = 0;
        blobSlotIdx = 0;
      }
    };
    resize();
    window.addEventListener("resize", resize);

    /* --- Mouse ---------------------------------------------------- */
    let rawMX = 0.5, rawMY = 0.5;
    let smMX = 0.5, smMY = 0.5;
    const onMove = (e: MouseEvent) => {
      const r = canvas.getBoundingClientRect();
      rawMX = (e.clientX - r.left) / r.width;
      rawMY = (e.clientY - r.top) / r.height;
    };
    canvas.addEventListener("mousemove", onMove);

    /* --- Render pass helper --------------------------------------- */
    function pass(
      prog: WebGLProgram,
      inputTex: WebGLTexture,
      target: WebGLFramebuffer | null,
      time: number,
      mx: number,
      my: number,
    ) {
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, target);
      gl!.useProgram(prog);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, inputTex);
      gl!.uniform1i(gl!.getUniformLocation(prog, "uTexture"), 0);
      const uT = gl!.getUniformLocation(prog, "uTime");
      if (uT) gl!.uniform1f(uT, time);
      const uM = gl!.getUniformLocation(prog, "uMousePos");
      if (uM) gl!.uniform2f(uM, mx, my);
      const uR = gl!.getUniformLocation(prog, "uResolution");
      if (uR) gl!.uniform2f(uR, w, h);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
    }

    /* --- Animation loop ------------------------------------------- */
    let noiseFillTime = 0; // speed=0.1
    let mondrianTime = 0;  // speed=0.17
    let ditherTime = 0;    // speed=0.5
    let prev = performance.now();
    let raf = 0;

    const frame = (now: number) => {
      const dt = Math.min((now - prev) / 1000, 0.1);
      prev = now;

      // Accumulate per-layer time (speed * 60 normalizes to frame-based time)
      noiseFillTime += dt * 0.1 * 60;
      mondrianTime += dt * 0.17 * 60;
      ditherTime += dt * 0.5 * 60;

      // Smooth mouse for circle layer (momentum=1.0 capped to 0.98)
      const cLerp = 1 - Math.pow(0.98, dt * 60);
      smMX += (rawMX - smMX) * cLerp;
      smMY += (rawMY - smMY) * cLerp;

      resize();
      gl!.bindVertexArray(vao);

      // 0. Clear FBO A → black (replaces trivial all-black gradient layer)
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
      gl!.clearColor(0, 0, 0, 1);
      gl!.clear(gl!.COLOR_BUFFER_BIT);

      // 1. NoiseFill: FBO A → FBO B (needs extra uOpacity uniform)
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboB.fb);
      gl!.useProgram(pNoiseFill);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, fboA.tex);
      gl!.uniform1i(gl!.getUniformLocation(pNoiseFill, "uTexture"), 0);
      gl!.uniform1f(gl!.getUniformLocation(pNoiseFill, "uTime")!, noiseFillTime);
      gl!.uniform1f(gl!.getUniformLocation(pNoiseFill, "uOpacity")!, 1.0);
      gl!.uniform2f(gl!.getUniformLocation(pNoiseFill, "uMousePos")!, 0.5, 0.5);
      gl!.uniform2f(gl!.getUniformLocation(pNoiseFill, "uResolution")!, w, h);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      // 2. Circle: FBO B → FBO A (mouse-interactive)
      pass(pCircle, fboB.tex, fboA.fb, 0, smMX, smMY);

      // 3. Mondrian: FBO A → FBO B
      pass(pMondrian, fboA.tex, fboB.fb, mondrianTime, 0.5, 0.5);

      // 4. Dither: FBO B → FBO A (needs blue noise texture on unit 1)
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
      gl!.useProgram(pDither);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, fboB.tex);
      gl!.uniform1i(gl!.getUniformLocation(pDither, "uTexture"), 0);
      gl!.activeTexture(gl!.TEXTURE1);
      gl!.bindTexture(gl!.TEXTURE_2D, blueNoiseTex);
      gl!.uniform1i(gl!.getUniformLocation(pDither, "uBlueNoise"), 1);
      gl!.uniform1f(gl!.getUniformLocation(pDither, "uTime")!, ditherTime);
      gl!.uniform2f(gl!.getUniformLocation(pDither, "uResolution")!, w, h);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      // 5. Vignette: FBO A → FBO B
      pass(pVignette, fboA.tex, fboB.fb, 0, 0.5, 0.5);

      // --- Blob tracking (4 sub-passes) ---
      // Scene is now in fboB

      // 6a. Mask: scene (fboB) + previous mask → current mask
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, blobMask[blobMaskIdx].fb);
      gl!.useProgram(pBlobMask);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, fboB.tex);
      gl!.uniform1i(gl!.getUniformLocation(pBlobMask, "uTexture"), 0);
      gl!.activeTexture(gl!.TEXTURE1);
      gl!.bindTexture(gl!.TEXTURE_2D, blobMask[1 - blobMaskIdx].tex);
      gl!.uniform1i(gl!.getUniformLocation(pBlobMask, "uPreviousFrameTexture"), 1);
      gl!.uniform2f(gl!.getUniformLocation(pBlobMask, "uResolution")!, w, h);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      // 6b. Peak: current mask → peak
      pass(pBlobPeak, blobMask[blobMaskIdx].tex, blobPeak.fb, 0, 0.5, 0.5);

      // 6c. Slot: peak + previous slot → current slot
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, blobSlot[blobSlotIdx].fb);
      gl!.useProgram(pBlobSlot);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, blobPeak.tex);
      gl!.uniform1i(gl!.getUniformLocation(pBlobSlot, "uTexture"), 0);
      gl!.activeTexture(gl!.TEXTURE1);
      gl!.bindTexture(gl!.TEXTURE_2D, blobSlot[1 - blobSlotIdx].tex);
      gl!.uniform1i(gl!.getUniformLocation(pBlobSlot, "uPreviousFrameTexture"), 1);
      gl!.uniform2f(gl!.getUniformLocation(pBlobSlot, "uResolution")!, w, h);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      // 6d. Draw: current slot + scene (fboB) + font atlas → FBO A
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
      gl!.useProgram(pBlobDraw);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, blobSlot[blobSlotIdx].tex);
      gl!.uniform1i(gl!.getUniformLocation(pBlobDraw, "uTexture"), 0);
      gl!.activeTexture(gl!.TEXTURE1);
      gl!.bindTexture(gl!.TEXTURE_2D, fboB.tex);
      gl!.uniform1i(gl!.getUniformLocation(pBlobDraw, "uBgTexture"), 1);
      gl!.activeTexture(gl!.TEXTURE2);
      gl!.bindTexture(gl!.TEXTURE_2D, fontAtlasTex);
      gl!.uniform1i(gl!.getUniformLocation(pBlobDraw, "uFontAtlas"), 2);
      gl!.uniform2f(gl!.getUniformLocation(pBlobDraw, "uResolution")!, w, h);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      // Swap temporal FBO indices
      blobMaskIdx = 1 - blobMaskIdx;
      blobSlotIdx = 1 - blobSlotIdx;

      // 7. Outline: FBO A → screen (bind same texture as both uTexture and uBgTexture)
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, null);
      gl!.useProgram(pOutline);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, fboA.tex);
      gl!.uniform1i(gl!.getUniformLocation(pOutline, "uTexture"), 0);
      gl!.activeTexture(gl!.TEXTURE1);
      gl!.bindTexture(gl!.TEXTURE_2D, fboA.tex);
      gl!.uniform1i(gl!.getUniformLocation(pOutline, "uBgTexture"), 1);
      gl!.uniform2f(gl!.getUniformLocation(pOutline, "uResolution")!, w, h);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      raf = requestAnimationFrame(frame);
    };
    raf = requestAnimationFrame(frame);

    /* --- Cleanup -------------------------------------------------- */
    return () => {
      cancelAnimationFrame(raf);
      canvas.removeEventListener("mousemove", onMove);
      window.removeEventListener("resize", resize);
      gl.deleteBuffer(vbo);
      gl.deleteVertexArray(vao);
      destroyFBO(gl, fboA);
      destroyFBO(gl, fboB);
      destroyFBO(gl, blobMask[0]);
      destroyFBO(gl, blobMask[1]);
      destroyFBO(gl, blobPeak);
      destroyFBO(gl, blobSlot[0]);
      destroyFBO(gl, blobSlot[1]);
      gl.deleteTexture(blueNoiseTex);
      gl.deleteTexture(fontAtlasTex);
      gl.deleteProgram(pNoiseFill);
      gl.deleteProgram(pCircle);
      gl.deleteProgram(pMondrian);
      gl.deleteProgram(pDither);
      gl.deleteProgram(pVignette);
      gl.deleteProgram(pBlobMask);
      gl.deleteProgram(pBlobPeak);
      gl.deleteProgram(pBlobSlot);
      gl.deleteProgram(pBlobDraw);
      gl.deleteProgram(pOutline);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      style={{
        width: "100%",
        height: "100%",
        display: "block",
        background: "#000",
      }}
    />
  );
}
Cube I
