@vibesdotdev/runnable 0.0.0-stage → 1.0.0-rc.0

package/dist/svelte/viz/crystal/Crystal3DRenderer.svelte

@@ -0,0 +1,941 @@
+<script lang="ts">
+  let renderingError = $state<string | null>(null);
+  import { onDestroy } from 'svelte';
+  import type { CrystalBonds, CrystalSlice, Crystal3DRendererStats, VfxTier } from './types';
+  import { getVfxProfile, FCC_DIRS } from './types';
+
+  let {
+    crystalBonds,
+    sliceMap,
+    N,
+    threshold,
+    autoRotate,
+    glowIntensity,
+    zLayer = -1,
+    vfxTier = 'medium',
+    onStats,
+  }: {
+    crystalBonds: CrystalBonds | null;
+    sliceMap: Record<number, CrystalSlice>;
+    N: number;
+    threshold: number;
+    autoRotate: boolean;
+    glowIntensity: number;
+    zLayer: number;
+    vfxTier?: VfxTier;
+    onStats?: (stats: Crystal3DRendererStats) => void;
+  } = $props();
+
+  let canvas = $state<HTMLCanvasElement>(undefined!);
+  let gl: WebGL2RenderingContext | null = null;
+  const quality = $derived.by(() => getVfxProfile(vfxTier));
+
+  // GL resources
+  let bondProgram: WebGLProgram | null = null;
+  let boxProgram: WebGLProgram | null = null;
+  let bondVAO: WebGLVertexArrayObject | null = null;
+  let boxVAO: WebGLVertexArrayObject | null = null;
+  let bondInstanceBuffer: WebGLBuffer | null = null;
+  let bondVertexBuffer: WebGLBuffer | null = null;
+  let boxVertexBuffer: WebGLBuffer | null = null;
+  let bondCount = 0;
+  let animId = 0;
+  let glInitialized = false;
+
+  // Camera
+  let camTheta = $state(0.78);
+  let camPhi = $state(0.65);
+  let camDist = $state(2.8);
+  const targetX = 0.5;
+  const targetY = 0.5;
+  const targetZ = 0.5;
+  let isDragging = false;
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+
+  let activeNodes = 0;
+  let activeBonds = 0;
+  let dataPass = 0;
+  let dataFrame = 0;
+  let avgStrength = 0;
+  let maxStrengthVal = 0;
+  let densityPct = 0;
+  let fps = 0;
+
+  let bondProgramUniforms: {
+    viewProj: WebGLUniformLocation | null;
+    resolution: WebGLUniformLocation | null;
+    time: WebGLUniformLocation | null;
+    glow: WebGLUniformLocation | null;
+    pulse: WebGLUniformLocation | null;
+  } | null = null;
+
+  let boxProgramUniforms: {
+    viewProj: WebGLUniformLocation | null;
+    time: WebGLUniformLocation | null;
+  } | null = null;
+
+  let currentBondData: Float32Array | null = null;
+  let pulseTime = 0;
+
+  // ── Shaders ──
+
+  const BOND_VERT = `#version 300 es
+    precision highp float;
+
+    in vec2 a_quad;
+    in vec3 a_posA;
+    in vec3 a_posB;
+    in float a_strength;
+
+    uniform mat4 u_viewProj;
+    uniform vec2 u_resolution;
+    uniform float u_time;
+    uniform float u_glow;
+    uniform float u_pulse;
+
+    out float v_strength;
+    out float v_along;
+    out float v_edge;
+    out vec2 v_uv;
+
+    void main() {
+      vec3 pos = mix(a_posA, a_posB, a_quad.x);
+
+      vec4 clipA = u_viewProj * vec4(a_posA, 1.0);
+      vec4 clipB = u_viewProj * vec4(a_posB, 1.0);
+
+      vec2 ndcA = clipA.xy / clipA.w;
+      vec2 ndcB = clipB.xy / clipB.w;
+
+      vec2 dir = normalize((ndcB - ndcA) * u_resolution);
+      vec2 normal = vec2(-dir.y, dir.x);
+
+      float width = mix(0.6, 4.2, a_strength * a_strength);
+
+      float phase = a_posA.x * 7.0 + a_posA.y * 11.0 + a_posA.z * 5.0;
+      float pulse = 1.0 + 0.18 * sin(u_time * 2.2 + phase) * a_strength * u_pulse;
+      pulse += 0.08 * sin(u_time * 5.1 + phase * 3.0) * a_strength * u_pulse;
+      float glitchPhase = fract(u_time * 0.37 + a_posA.x * 13.7);
+      float glitch = step(0.97, glitchPhase) * 0.5 * a_strength;
+      width *= pulse + glitch;
+
+      vec4 clip = u_viewProj * vec4(pos, 1.0);
+      vec2 offset = normal * (a_quad.y * width) / u_resolution;
+      clip.xy += offset * clip.w;
+
+      gl_Position = clip;
+      v_strength = a_strength;
+      v_along = a_quad.x;
+      v_edge = abs(a_quad.y);
+      v_uv = clip.xy / clip.w * 0.5 + 0.5;
+    }
+  `;
+
+  const BOND_FRAG = `#version 300 es
+    precision highp float;
+
+    in float v_strength;
+    in float v_along;
+    in float v_edge;
+    in vec2 v_uv;
+
+    uniform float u_time;
+    uniform float u_glow;
+
+    out vec4 fragColor;
+
+    vec3 strengthColor(float t) {
+      vec3 c0 = vec3(0.02, 0.06, 0.03);
+      vec3 c1 = vec3(0.00, 0.85, 0.42);
+      vec3 c2 = vec3(0.92, 0.62, 0.12);
+      vec3 c3 = vec3(0.96, 0.18, 0.12);
+      vec3 c4 = vec3(1.00, 0.96, 0.88);
+
+      if (t < 0.2) return mix(c0, c1, t * 5.0);
+      if (t < 0.5) return mix(c1, c2, (t - 0.2) * 3.333);
+      if (t < 0.75) return mix(c2, c3, (t - 0.5) * 4.0);
+      return mix(c3, c4, (t - 0.75) * 4.0);
+    }
+
+    float hash(vec2 p) {
+      return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+    }
+
+    void main() {
+      vec3 color = strengthColor(v_strength);
+
+      float core = 1.0 - v_edge * 0.2;
+      float glow = exp(-v_edge * v_edge * 1.8) * u_glow;
+      float glowOuter = exp(-v_edge * 0.6) * u_glow * 0.3;
+
+      float flow = sin(v_along * 16.0 - u_time * 3.0) * 0.12 * v_strength;
+      float flow2 = sin(v_along * 8.0 - u_time * 1.5 + 1.57) * 0.06 * v_strength;
+
+      float scanline = sin(gl_FragCoord.y * 1.8) * 0.04 + 0.96;
+      scanline *= 0.92 + 0.08 * sin(gl_FragCoord.y * 0.7 + u_time * 0.5);
+
+      float caOffset = v_edge * 0.008 * u_glow;
+      float caR = strengthColor(v_strength + caOffset * 2.0).r;
+      float caB = strengthColor(max(0.0, v_strength - caOffset * 2.0)).b;
+      color.r = mix(color.r, caR, u_glow * 0.4);
+      color.b = mix(color.b, caB, u_glow * 0.4);
+
+      float noise = hash(v_uv * 512.0 + u_time * 100.0) * 0.03 * v_strength;
+
+      float alpha = mix(0.28, 0.98, v_strength * v_strength);
+      alpha *= core * scanline;
+
+      vec3 glowColor = color * (1.0 + glow * 1.2 + glowOuter + flow + flow2) + noise;
+      fragColor = vec4(glowColor, alpha);
+    }
+  `;
+
+  const BOX_VERT = `#version 300 es
+    precision highp float;
+
+    in vec3 a_position;
+    uniform mat4 u_viewProj;
+
+    out vec2 v_boxUv;
+
+    void main() {
+      gl_Position = u_viewProj * vec4(a_position, 1.0);
+      v_boxUv = a_position.xy;
+    }
+  `;
+
+  const BOX_FRAG = `#version 300 es
+    precision highp float;
+
+    in vec2 v_boxUv;
+    uniform float u_time;
+    out vec4 fragColor;
+
+    void main() {
+      float pulse = 0.7 + 0.3 * sin(u_time * 1.2 + v_boxUv.x * 4.0 + v_boxUv.y * 3.0);
+      float scanline = sin(gl_FragCoord.y * 1.8) * 0.05 + 0.95;
+      vec3 magiGreen = vec3(0.0, 0.72, 0.38) * pulse * scanline;
+      fragColor = vec4(magiGreen, 0.25 * pulse);
+    }
+  `;
+
+  // ── Stats ──
+
+  function publishStats() {
+    onStats?.({
+      nodes: activeNodes,
+      bonds: activeBonds,
+      avgStrength,
+      maxStrength: maxStrengthVal,
+      density: densityPct,
+      dataPass,
+      dataFrame,
+      fps,
+    });
+  }
+
+  function resetStats() {
+    bondCount = 0;
+    activeNodes = 0;
+    activeBonds = 0;
+    dataPass = 0;
+    dataFrame = 0;
+    avgStrength = 0;
+    maxStrengthVal = 0;
+    densityPct = 0;
+    publishStats();
+  }
+
+  // ── Matrix math ──
+
+  function mat4Perspective(fov: number, aspect: number, near: number, far: number): Float32Array {
+    const f = 1.0 / Math.tan(fov / 2);
+    const nf = 1 / (near - far);
+    return new Float32Array([
+      f / aspect, 0, 0, 0,
+      0, f, 0, 0,
+      0, 0, (far + near) * nf, -1,
+      0, 0, 2 * far * near * nf, 0,
+    ]);
+  }
+
+  function mat4LookAt(eye: number[], center: number[], up: number[]): Float32Array {
+    const zx = eye[0] - center[0], zy = eye[1] - center[1], zz = eye[2] - center[2];
+    let len = 1 / Math.sqrt(zx * zx + zy * zy + zz * zz);
+    const z0 = zx * len, z1 = zy * len, z2 = zz * len;
+
+    const xx = up[1] * z2 - up[2] * z1;
+    const xy = up[2] * z0 - up[0] * z2;
+    const xz = up[0] * z1 - up[1] * z0;
+    len = Math.sqrt(xx * xx + xy * xy + xz * xz);
+    len = len ? 1 / len : 0;
+    const x0 = xx * len, x1 = xy * len, x2 = xz * len;
+
+    const y0 = z1 * x2 - z2 * x1;
+    const y1 = z2 * x0 - z0 * x2;
+    const y2 = z0 * x1 - z1 * x0;
+
+    return new Float32Array([
+      x0, y0, z0, 0,
+      x1, y1, z1, 0,
+      x2, y2, z2, 0,
+      -(x0 * eye[0] + x1 * eye[1] + x2 * eye[2]),
+      -(y0 * eye[0] + y1 * eye[1] + y2 * eye[2]),
+      -(z0 * eye[0] + z1 * eye[1] + z2 * eye[2]),
+      1,
+    ]);
+  }
+
+  function mat4Multiply(a: Float32Array, b: Float32Array): Float32Array {
+    const out = new Float32Array(16);
+    for (let i = 0; i < 4; i++) {
+      for (let j = 0; j < 4; j++) {
+        out[j * 4 + i] =
+          a[i] * b[j * 4] +
+          a[4 + i] * b[j * 4 + 1] +
+          a[8 + i] * b[j * 4 + 2] +
+          a[12 + i] * b[j * 4 + 3];
+      }
+    }
+    return out;
+  }
+
+  // ── GL helpers ──
+
+  function compileShader(src: string, type: number): WebGLShader | null {
+    if (!gl) return null;
+    const s = gl.createShader(type);
+    if (!s) return null;
+    gl.shaderSource(s, src);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+      renderingError = ['[Crystal3D] Shader compile error:', gl.getShaderInfoLog(s)].join(' ');
+      gl.deleteShader(s);
+      return null;
+    }
+    return s;
+  }
+
+  function createProgram(vSrc: string, fSrc: string): WebGLProgram | null {
+    if (!gl) return null;
+    const vs = compileShader(vSrc, gl.VERTEX_SHADER);
+    const fs = compileShader(fSrc, gl.FRAGMENT_SHADER);
+    if (!vs || !fs) return null;
+    const prog = gl.createProgram();
+    if (!prog) return null;
+    gl.attachShader(prog, vs);
+    gl.attachShader(prog, fs);
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+      renderingError = ['[Crystal3D] Program link error:', gl.getProgramInfoLog(prog)].join(' ');
+      gl.deleteProgram(prog);
+      return null;
+    }
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+    return prog;
+  }
+
+  // ── GL init ──
+
+  function initGL() {
+    if (!canvas || glInitialized) return;
+
+    gl = canvas.getContext('webgl2', {
+      antialias: true,
+      alpha: false,
+      premultipliedAlpha: false,
+      powerPreference: 'high-performance',
+    });
+
+    if (!gl) {
+      renderingError = ['[Crystal3D] WebGL2 not available'].join(' ');
+      return;
+    }
+
+    bondProgram = createProgram(BOND_VERT, BOND_FRAG);
+    if (!bondProgram) return;
+    boxProgram = createProgram(BOX_VERT, BOX_FRAG);
+    if (!boxProgram) return;
+
+    const quadVerts = new Float32Array([
+      0, -1,  1, -1,  0,  1,
+      0,  1,  1, -1,  1,  1,
+    ]);
+
+    bondVertexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, bondVertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, quadVerts, gl.STATIC_DRAW);
+
+    bondInstanceBuffer = gl.createBuffer();
+
+    bondVAO = gl.createVertexArray();
+    gl.bindVertexArray(bondVAO);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, bondVertexBuffer);
+    const aQuad = gl.getAttribLocation(bondProgram, 'a_quad');
+    gl.enableVertexAttribArray(aQuad);
+    gl.vertexAttribPointer(aQuad, 2, gl.FLOAT, false, 0, 0);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, bondInstanceBuffer);
+    const aPosA = gl.getAttribLocation(bondProgram, 'a_posA');
+    const aPosB = gl.getAttribLocation(bondProgram, 'a_posB');
+    const aStr = gl.getAttribLocation(bondProgram, 'a_strength');
+
+    gl.enableVertexAttribArray(aPosA);
+    gl.vertexAttribPointer(aPosA, 3, gl.FLOAT, false, 28, 0);
+    gl.vertexAttribDivisor(aPosA, 1);
+
+    gl.enableVertexAttribArray(aPosB);
+    gl.vertexAttribPointer(aPosB, 3, gl.FLOAT, false, 28, 12);
+    gl.vertexAttribDivisor(aPosB, 1);
+
+    gl.enableVertexAttribArray(aStr);
+    gl.vertexAttribPointer(aStr, 1, gl.FLOAT, false, 28, 24);
+    gl.vertexAttribDivisor(aStr, 1);
+
+    gl.bindVertexArray(null);
+
+    const boxEdges = buildBoxEdges();
+    boxVertexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, boxVertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, boxEdges, gl.STATIC_DRAW);
+
+    boxVAO = gl.createVertexArray();
+    gl.bindVertexArray(boxVAO);
+    gl.bindBuffer(gl.ARRAY_BUFFER, boxVertexBuffer);
+    const aPos = gl.getAttribLocation(boxProgram, 'a_position');
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+
+    bondProgramUniforms = {
+      viewProj: gl.getUniformLocation(bondProgram, 'u_viewProj'),
+      resolution: gl.getUniformLocation(bondProgram, 'u_resolution'),
+      time: gl.getUniformLocation(bondProgram, 'u_time'),
+      glow: gl.getUniformLocation(bondProgram, 'u_glow'),
+      pulse: gl.getUniformLocation(bondProgram, 'u_pulse'),
+    };
+
+    boxProgramUniforms = {
+      viewProj: gl.getUniformLocation(boxProgram, 'u_viewProj'),
+      time: gl.getUniformLocation(boxProgram, 'u_time'),
+    };
+
+    glInitialized = true;
+    animate();
+  }
+
+  function buildBoxEdges(): Float32Array {
+    const corners = [
+      [0, 0, 0], [1, 0, 0], [1, 1, 0], [0, 1, 0],
+      [0, 0, 1], [1, 0, 1], [1, 1, 1], [0, 1, 1],
+    ];
+    const edges = [
+      [0, 1], [1, 2], [2, 3], [3, 0],
+      [4, 5], [5, 6], [6, 7], [7, 4],
+      [0, 4], [1, 5], [2, 6], [3, 7],
+    ];
+    const verts = new Float32Array(edges.length * 6);
+    let idx = 0;
+    for (const [a, b] of edges) {
+      verts[idx++] = corners[a][0];
+      verts[idx++] = corners[a][1];
+      verts[idx++] = corners[a][2];
+      verts[idx++] = corners[b][0];
+      verts[idx++] = corners[b][1];
+      verts[idx++] = corners[b][2];
+    }
+    return verts;
+  }
+
+  // ── Bond instance building ──
+
+  function buildBondInstances(
+    data: CrystalBonds,
+    thresholdVal: number,
+    zFilter: number,
+  ) {
+    const n = data.N;
+    const nc = n * n * n;
+    const bonds = data.bonds;
+    const invN = 1 / (n - 1 || 1);
+    const threshByte = Math.floor(thresholdVal * 255);
+
+    let estimatedBonds = 0;
+    for (let i = 0; i < nc * 12; i++) {
+      if (bonds[i] > threshByte) estimatedBonds++;
+    }
+    estimatedBonds = Math.ceil(estimatedBonds / 2);
+
+    const instances = new Float32Array(Math.max(estimatedBonds * 7, 7));
+    let count = 0;
+    let totalStrength = 0;
+    let maxStr = 0;
+    let bondTotal = 0;
+    const nodeHasBond = new Uint8Array(nc);
+
+    for (let nIdx = 0; nIdx < nc; nIdx++) {
+      const z = nIdx % n;
+      const y = Math.floor(nIdx / n) % n;
+      const x = Math.floor(nIdx / (n * n));
+      const base = nIdx * 12;
+
+      const px = x * invN;
+      const py = y * invN;
+      const pz = z * invN;
+
+      for (let d = 0; d < 12; d++) {
+        const v = bonds[base + d];
+        if (v <= threshByte) continue;
+
+        const [dx, dy, dz] = FCC_DIRS[d];
+        const nx = x + dx;
+        const ny = y + dy;
+        const nz = z + dz;
+        if (nx < 0 || nx >= n || ny < 0 || ny >= n || nz < 0 || nz >= n) continue;
+
+        const nbrIdx = nx * n * n + ny * n + nz;
+        if (nbrIdx <= nIdx) continue;
+
+        if (zFilter >= 0 && z !== zFilter && nz !== zFilter) continue;
+
+        const npx = nx * invN;
+        const npy = ny * invN;
+        const npz = nz * invN;
+        const strength = v / 255;
+
+        const off = count * 7;
+        if (off + 6 >= instances.length) break;
+        instances[off] = px;
+        instances[off + 1] = py;
+        instances[off + 2] = pz;
+        instances[off + 3] = npx;
+        instances[off + 4] = npy;
+        instances[off + 5] = npz;
+        instances[off + 6] = strength;
+        count++;
+
+        nodeHasBond[nIdx] = 1;
+        nodeHasBond[nbrIdx] = 1;
+
+        totalStrength += v;
+        bondTotal++;
+        if (v > maxStr) maxStr = v;
+      }
+    }
+
+    let nodeCount = 0;
+    for (let i = 0; i < nc; i++) if (nodeHasBond[i]) nodeCount++;
+
+    return {
+      instances: instances.subarray(0, count * 7),
+      count,
+      stats: {
+        nodes: nodeCount,
+        bonds: bondTotal,
+        avgStr: bondTotal > 0 ? totalStrength / bondTotal / 255 : 0,
+        maxStr: maxStr / 255,
+        density: (nodeCount / nc) * 100,
+      },
+    };
+  }
+
+  function uploadBondData(data: CrystalBonds) {
+    if (!gl || !bondInstanceBuffer) return;
+
+    const result = buildBondInstances(data, threshold, zLayer);
+    bondCount = result.count;
+
+    activeNodes = result.stats.nodes;
+    activeBonds = result.stats.bonds;
+    avgStrength = result.stats.avgStr;
+    maxStrengthVal = result.stats.maxStr;
+    densityPct = result.stats.density;
+    dataPass = data.pass;
+    dataFrame = data.frame ?? 0;
+    publishStats();
+
+    currentBondData = new Float32Array(result.instances);
+    gl.bindBuffer(gl.ARRAY_BUFFER, bondInstanceBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, currentBondData, gl.DYNAMIC_DRAW);
+  }
+
+  function uploadFromSlices(n: number, slices: Record<number, { z: number; N: number; data: number[] }>) {
+    if (!gl || !bondInstanceBuffer || n === 0) return;
+
+    const nc = n * n * n;
+    const invN = 1 / (n - 1 || 1);
+
+    function getSat(x: number, y: number, z: number): number {
+      const slice = slices[z];
+      if (!slice) return 0;
+      return slice.data[y * n + x] ?? 0;
+    }
+
+    const maxBonds = nc * 6;
+    const instances = new Float32Array(maxBonds * 7);
+    let count = 0;
+    let nodeCount = 0;
+
+    for (let x = 0; x < n; x++) {
+      for (let y = 0; y < n; y++) {
+        for (let z = 0; z < n; z++) {
+          const sat = getSat(x, y, z);
+          if (sat <= 0) continue;
+          nodeCount++;
+
+          const px = x * invN;
+          const py = y * invN;
+          const pz = z * invN;
+
+          for (const [dx, dy, dz] of FCC_DIRS) {
+            const nx = x + dx;
+            const ny = y + dy;
+            const nz = z + dz;
+            if (nx < 0 || nx >= n || ny < 0 || ny >= n || nz < 0 || nz >= n) continue;
+
+            const nbrIdx = nx * n * n + ny * n + nz;
+            const curIdx = x * n * n + y * n + z;
+            if (nbrIdx <= curIdx) continue;
+
+            if (zLayer >= 0 && z !== zLayer && nz !== zLayer) continue;
+
+            const nSat = getSat(nx, ny, nz);
+            if (nSat <= 0) continue;
+
+            const off = count * 7;
+            instances[off] = px;
+            instances[off + 1] = py;
+            instances[off + 2] = pz;
+            instances[off + 3] = nx * invN;
+            instances[off + 4] = ny * invN;
+            instances[off + 5] = nz * invN;
+            instances[off + 6] = Math.min(sat, nSat) / 12;
+            count++;
+          }
+        }
+      }
+    }
+
+    bondCount = count;
+    activeNodes = nodeCount;
+    activeBonds = count;
+    densityPct = (nodeCount / nc) * 100;
+    avgStrength = 0;
+    maxStrengthVal = 0;
+    dataPass = 0;
+    dataFrame = 0;
+    publishStats();
+
+    currentBondData = instances.subarray(0, count * 7);
+    gl.bindBuffer(gl.ARRAY_BUFFER, bondInstanceBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, currentBondData, gl.DYNAMIC_DRAW);
+  }
+
+  // ── Render loop ──
+
+  let lastFrameTime = 0;
+  let frameCounter = 0;
+  let fpsTimer = 0;
+
+  function animate() {
+    animId = requestAnimationFrame(animate);
+    if (!gl || !bondProgram || !boxProgram) return;
+
+    const now = performance.now();
+    const dt = (now - lastFrameTime) / 1000;
+    lastFrameTime = now;
+    pulseTime = now / 1000;
+
+    frameCounter++;
+    if (now - fpsTimer > 1000) {
+      fps = frameCounter;
+      frameCounter = 0;
+      fpsTimer = now;
+      publishStats();
+    }
+
+    const profile = quality;
+
+    if (autoRotate && !isDragging) {
+      camTheta += 0.15 * dt;
+    }
+
+    const dpr = Math.min(window.devicePixelRatio, profile.dprLimit);
+    const displayW = canvas.clientWidth;
+    const displayH = canvas.clientHeight;
+    const drawW = Math.floor(displayW * dpr);
+    const drawH = Math.floor(displayH * dpr);
+
+    if (canvas.width !== drawW || canvas.height !== drawH) {
+      canvas.width = drawW;
+      canvas.height = drawH;
+    }
+
+    gl.viewport(0, 0, drawW, drawH);
+    gl.clearColor(0.012, 0.028, 0.016, 0.96);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.enable(gl.DEPTH_TEST);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+    const eye = [
+      targetX + camDist * Math.sin(camPhi) * Math.cos(camTheta),
+      targetY + camDist * Math.cos(camPhi),
+      targetZ + camDist * Math.sin(camPhi) * Math.sin(camTheta),
+    ];
+    const aspect = drawW / drawH;
+    const proj = mat4Perspective(0.9, aspect, 0.01, 100);
+    const view = mat4LookAt(eye, [targetX, targetY, targetZ], [0, 1, 0]);
+    const viewProj = mat4Multiply(proj, view);
+
+    if (boxVAO && boxProgramUniforms) {
+      gl.useProgram(boxProgram);
+      gl.uniformMatrix4fv(boxProgramUniforms.viewProj, false, viewProj);
+      gl.uniform1f(boxProgramUniforms.time, pulseTime);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+      gl.bindVertexArray(boxVAO);
+      gl.drawArrays(gl.LINES, 0, 24);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    }
+
+    if (bondCount > 0 && bondVAO && bondProgramUniforms) {
+      gl.useProgram(bondProgram);
+      gl.uniformMatrix4fv(bondProgramUniforms.viewProj, false, viewProj);
+      gl.uniform2f(bondProgramUniforms.resolution, drawW, drawH);
+      gl.uniform1f(bondProgramUniforms.time, pulseTime);
+      gl.uniform1f(bondProgramUniforms.glow, Math.min(glowIntensity, profile.glowCap));
+      gl.uniform1f(bondProgramUniforms.pulse, profile.pulseScale);
+
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+      gl.bindVertexArray(bondVAO);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, bondCount);
+
+      if (profile.doublePass) {
+        gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, bondCount);
+      }
+
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    }
+  }
+
+  // ── Cleanup ──
+
+  function cleanupGL() {
+    if (animId) {
+      cancelAnimationFrame(animId);
+      animId = 0;
+    }
+    if (!gl) return;
+    if (bondProgram) gl.deleteProgram(bondProgram);
+    if (boxProgram) gl.deleteProgram(boxProgram);
+    if (bondVAO) gl.deleteVertexArray(bondVAO);
+    if (boxVAO) gl.deleteVertexArray(boxVAO);
+    if (bondInstanceBuffer) gl.deleteBuffer(bondInstanceBuffer);
+    if (bondVertexBuffer) gl.deleteBuffer(bondVertexBuffer);
+    if (boxVertexBuffer) gl.deleteBuffer(boxVertexBuffer);
+    const loseCtx = gl.getExtension('WEBGL_lose_context');
+    loseCtx?.loseContext();
+    bondProgram = null;
+    boxProgram = null;
+    bondVAO = null;
+    boxVAO = null;
+    bondInstanceBuffer = null;
+    bondVertexBuffer = null;
+    boxVertexBuffer = null;
+    bondProgramUniforms = null;
+    boxProgramUniforms = null;
+    gl = null;
+    glInitialized = false;
+  }
+
+  onDestroy(() => {
+    cleanupGL();
+  });
+
+  // ── Mouse interaction ──
+
+  function onMouseDown(e: MouseEvent) {
+    if (e.button !== 0) return;
+    isDragging = true;
+    lastMouseX = e.clientX;
+    lastMouseY = e.clientY;
+  }
+
+  function onMouseMove(e: MouseEvent) {
+    if (!isDragging) return;
+    const dx = e.clientX - lastMouseX;
+    const dy = e.clientY - lastMouseY;
+    lastMouseX = e.clientX;
+    lastMouseY = e.clientY;
+    camTheta -= dx * 0.005;
+    camPhi = Math.max(0.1, Math.min(Math.PI - 0.1, camPhi - dy * 0.005));
+  }
+
+  function onMouseUp() {
+    isDragging = false;
+  }
+
+  function onWheel(e: WheelEvent) {
+    e.preventDefault();
+    camDist = Math.max(0.5, Math.min(8.0, camDist + e.deltaY * 0.003));
+  }
+
+  let lastTouchDist = 0;
+  let lastTouchX = 0;
+  let lastTouchY = 0;
+
+  function onTouchStart(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      isDragging = true;
+      lastTouchX = e.touches[0].clientX;
+      lastTouchY = e.touches[0].clientY;
+    } else if (e.touches.length === 2) {
+      const dx = e.touches[1].clientX - e.touches[0].clientX;
+      const dy = e.touches[1].clientY - e.touches[0].clientY;
+      lastTouchDist = Math.sqrt(dx * dx + dy * dy);
+    }
+  }
+
+  function onTouchMove(e: TouchEvent) {
+    e.preventDefault();
+    if (e.touches.length === 1 && isDragging) {
+      const dx = e.touches[0].clientX - lastTouchX;
+      const dy = e.touches[0].clientY - lastTouchY;
+      lastTouchX = e.touches[0].clientX;
+      lastTouchY = e.touches[0].clientY;
+      camTheta -= dx * 0.005;
+      camPhi = Math.max(0.1, Math.min(Math.PI - 0.1, camPhi - dy * 0.005));
+    } else if (e.touches.length === 2) {
+      const dx = e.touches[1].clientX - e.touches[0].clientX;
+      const dy = e.touches[1].clientY - e.touches[0].clientY;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (lastTouchDist > 0) {
+        camDist = Math.max(0.5, Math.min(8.0, camDist * (lastTouchDist / dist)));
+      }
+      lastTouchDist = dist;
+    }
+  }
+
+  function onTouchEnd() {
+    isDragging = false;
+    lastTouchDist = 0;
+  }
+
+  // ── Reactivity ──
+
+  $effect(() => {
+    if (canvas && !glInitialized) initGL();
+  });
+
+  $effect(() => {
+    if (!glInitialized) return;
+    // Read zLayer so Svelte tracks it as a dependency
+    void zLayer;
+    if (crystalBonds && crystalBonds.N > 0) {
+      uploadBondData(crystalBonds);
+      return;
+    }
+    if (N > 0 && Object.keys(sliceMap).length > 0) {
+      uploadFromSlices(N, sliceMap);
+      return;
+    }
+    resetStats();
+  });
+
+  $effect(() => {
+    if (crystalBonds === null && N <= 0 && Object.keys(sliceMap).length === 0 && glInitialized) {
+      resetStats();
+    }
+  });
+
+  $effect(() => {
+    return () => {
+      if (animId) cancelAnimationFrame(animId);
+    };
+  });
+</script>
+
+<div class="viz-container">
+  {#if renderingError}<p role="alert">{renderingError}</p>{/if}
+  <canvas
+    bind:this={canvas}
+    class="crystal-canvas"
+    onmousedown={onMouseDown}
+    onmousemove={onMouseMove}
+    onmouseup={onMouseUp}
+    onmouseleave={onMouseUp}
+    onwheel={onWheel}
+    ontouchstart={onTouchStart}
+    ontouchmove={onTouchMove}
+    ontouchend={onTouchEnd}
+  ></canvas>
+</div>
+
+<style>
+  .viz-container {
+    width: 100%;
+    aspect-ratio: 5 / 3;
+    min-height: 360px;
+    max-height: 640px;
+    border-radius: 6px;
+    overflow: hidden;
+    background:
+      radial-gradient(circle at 50% 42%, rgba(0, 85, 42, 0.18), transparent 34%),
+      radial-gradient(circle at 82% 16%, rgba(230, 140, 30, 0.08), transparent 24%),
+      linear-gradient(145deg, rgba(4, 10, 6, 0.98), rgba(1, 3, 2, 0.99));
+    border: 1px solid rgba(0, 180, 90, 0.12);
+    position: relative;
+    box-shadow:
+      inset 0 0 0 1px rgba(0, 120, 60, 0.06),
+      inset 0 18px 48px rgba(0, 0, 0, 0.45),
+      0 0 40px rgba(0, 180, 90, 0.04),
+      0 18px 44px rgba(0, 0, 0, 0.22);
+  }
+
+  .viz-container::before,
+  .viz-container::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .viz-container::before {
+    inset: 12px;
+    border-radius: 14px;
+    border: 1px solid rgba(0, 180, 90, 0.1);
+    background:
+      linear-gradient(90deg, rgba(0, 180, 90, 0.05) 1px, transparent 1px),
+      linear-gradient(180deg, rgba(0, 180, 90, 0.03) 1px, transparent 1px);
+    background-size: 36px 36px;
+    opacity: 0.7;
+    z-index: 1;
+    mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
+  }
+
+  .viz-container::after {
+    inset: 0;
+    background:
+      radial-gradient(circle at center, transparent 36%, rgba(0, 2, 1, 0.6) 100%),
+      linear-gradient(90deg, transparent 49.6%, rgba(0, 180, 90, 0.14) 50%, transparent 50.4%),
+      linear-gradient(180deg, transparent 49.6%, rgba(230, 140, 30, 0.08) 50%, transparent 50.4%);
+    opacity: 0.6;
+    z-index: 3;
+  }
+
+  .crystal-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 2;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .crystal-canvas:active {
+    cursor: grabbing;
+  }
+</style>