@fusion.dev/helix-graph 0.126.0 → 0.127.0

package/dist/three/three-driver.js

@@ -1,21 +1,25 @@
-import { forceCenter, forceLink, forceManyBody, forceSimulation, } from 'd3-force-3d';
-import { AdditiveBlending, BoxGeometry, BufferAttribute, BufferGeometry, DoubleSide, Euler, InstancedBufferAttribute, InstancedMesh, LineSegments, Matrix4, Mesh, NormalBlending, OctahedronGeometry, PerspectiveCamera, Points, Quaternion, Raycaster, Scene, ShaderMaterial, TOUCH, Vector2, Vector3, WebGLRenderer, } from 'three';
+import { AdditiveBlending, BoxGeometry, BufferAttribute, BufferGeometry, DoubleSide, Euler, InstancedBufferAttribute, InstancedMesh, Matrix4, Mesh, NormalBlending, OctahedronGeometry, PerspectiveCamera, Points, Quaternion, Raycaster, Scene, ShaderMaterial, TOUCH, Vector2, Vector3, WebGLRenderer, } from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
+import { LineSegments2 } from 'three/addons/lines/LineSegments2.js';
+import { LineSegmentsGeometry } from 'three/addons/lines/LineSegmentsGeometry.js';
 import { mergeVertices } from 'three/addons/utils/BufferGeometryUtils.js';
+import { linkKey } from '../connect-graph/diff.js';
+import { rgbOf } from '../connect-graph/looks.js';
 import { ease, gesturesHeld, groupsOver, isLight, namesOver, signalsOver, } from '../overlay/overlay.js';
-import { surfaceOf } from './surface.js';
+import { surfaceOf } from '../shapes/surface.js';
 const SHAPES = { circle: 0, diamond: 2, ring: 0, square: 1 };
 const REACH = 100;
 const STEP = 250;
 const MORPH = 1400;
 const ZOOM = 1.5;
 const SAMPLE = 96;
-const LINKS = { dark: { close: 0.3, far: 0.05 }, light: { close: 0.55, far: 0.12 } };
+const LINKS = { dark: { close: 0.16, far: 0.025 }, light: { close: 0.36, far: 0.07 } };
 const REST = 8000;
 const WASH = { dark: 0.14, full: 1.5, light: 0.18, notes: 6, reach: 3.5 };
 const BLOOM = { dark: 0.28, light: 0 };
 const LIGHT = new Vector3(-0.4, 0.8, 0.45).normalize();
-const LIFT = 0.42;
+const WIDTH = { lit: 1.8, quiet: 0.8 };
 const FOV = 40;
 const FADE = `
 uniform float middle;
@@ -46,9 +50,9 @@ vec4 orb(vec3 base, vec3 n) {
   frost *= 0.86 + 0.14 * diffuse;
   frost = mix(frost, base * 0.78, rim * 0.75);
   frost += vec3(glint * 0.6);
-  return dark > 0.5
-    ? vec4(energy, mix(0.5, 1.0, max(rim, core)))
-    : vec4(frost, mix(0.78, 1.0, rim));
+  /* Opaque, since a body writes its depth: a clear one hid what is behind it
+     and showed the ground through itself, a notch where it met another. */
+  return dark > 0.5 ? vec4(energy, 1.0) : vec4(frost, 1.0);
 }
 `;
 const VERTEX = `
@@ -62,6 +66,7 @@ uniform float scale;
 uniform float unit;
 uniform float bloom;
 uniform float halo;
+uniform float most;
 
 varying vec4 vTint;
 varying float vShape;
@@ -79,10 +84,13 @@ void main() {
      where the ground is dark, and more for a glowing one; the body's pass
      is the note and no more. */
   vRoom = halo > 0.5 ? 1.0 + (bloom > 0.0 ? 0.9 : 0.0) + glow * 1.4 : 1.0;
-  /* As large as the note is, at the distance it is: nearer is larger. */
-  gl_PointSize = size * unit * scale / depth * vRoom;
+  /* As large as the note is, at the distance it is: nearer is larger. No
+     larger than the GPU draws a point, and a note that would be is drawn
+     whole and smaller, where cut to the largest point it lost its edge. */
+  float wanted = size * unit * scale / depth * vRoom;
+  gl_PointSize = min(wanted, most);
   vCenter = view.xyz;
-  vRadius = size * unit * 0.5;
+  vRadius = size * unit * 0.5 * gl_PointSize / max(wanted, 0.001);
   vFade = fade(depth);
   vTint = tint;
   vShape = shape;
@@ -174,28 +182,6 @@ void main() {
   gl_FragColor = vec4(mix(face, edge, line), alpha);
 }
 `;
-const LINE_VERTEX = `
-${FADE}
-attribute vec3 color;
-varying vec3 vColor;
-varying float vFade;
-
-void main() {
-  vec4 view = modelViewMatrix * vec4(position, 1.0);
-  gl_Position = projectionMatrix * view;
-  vColor = color;
-  vFade = fade(max(-view.z, 0.001));
-}
-`;
-const LINE_FRAGMENT = `
-uniform float opacity;
-varying vec3 vColor;
-varying float vFade;
-
-void main() {
-  gl_FragColor = vec4(vColor, opacity * vFade);
-}
-`;
 const SOLID_VERTEX = `
 attribute vec4 wash;
 varying vec3 vNormal;
@@ -292,7 +278,7 @@ const averaged = (values, neighbors, share) => {
     return out;
 };
 const channels = (color) => {
-    const [red = 128, green = 128, blue = 128] = color.match(/[\d.]+/g)?.map(Number) ?? [];
+    const [red, green, blue] = rgbOf(color);
     return [red / 255, green / 255, blue / 255];
 };
 const depthOf = (id) => {
@@ -303,9 +289,9 @@ const depthOf = (id) => {
     return ((hash >>> 0) / 4294967296 - 0.5) * 2;
 };
 export const threeDriver = (container, options = {}) => {
-    const still = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+    const still = () => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
     const renderer = new WebGLRenderer({ alpha: true, antialias: true });
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+    renderer.setPixelRatio(options.density ?? Math.min(Math.max((window.devicePixelRatio || 1) * 1.5, 2), 3));
     renderer.setClearColor(0x000000, 0);
     const canvas = renderer.domElement;
     canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
@@ -314,10 +300,10 @@ export const threeDriver = (container, options = {}) => {
     const camera = new PerspectiveCamera(FOV, 1, 0.1, REACH * 40);
     camera.position.set(0, 0, REACH * 3);
     const controls = new OrbitControls(camera, canvas);
-    controls.enableDamping = !still;
+    controls.enableDamping = !still();
     controls.dampingFactor = 0.08;
     controls.rotateSpeed = 0.6;
-    controls.autoRotate = !still && options.autoRotate !== false;
+    controls.autoRotate = !still() && options.autoRotate !== false;
     controls.autoRotateSpeed = 0.5;
     let ids = [];
     let index = new Map();
@@ -338,23 +324,31 @@ export const threeDriver = (container, options = {}) => {
         dark: { value: 1 },
         light: { value: new Vector3(-0.4, 0.8, 0.45).normalize() },
         middle: { value: 1 },
+        most: {
+            value: Number(renderer.getContext().getParameter(renderer.getContext().ALIASED_POINT_SIZE_RANGE)?.[1] ?? 256),
+        },
         radius: { value: 1 },
         scale: { value: 1 },
         steep: { value: 0 },
         unit: { value: 1 },
     };
-    const lines = (opacity) => new ShaderMaterial({
-        depthWrite: false,
-        fragmentShader: LINE_FRAGMENT,
-        transparent: true,
-        uniforms: {
-            middle: uniforms.middle,
-            opacity: { value: opacity },
-            radius: uniforms.radius,
-            steep: uniforms.steep,
-        },
-        vertexShader: LINE_VERTEX,
-    });
+    const lines = (opacity, width) => {
+        const material = new LineMaterial({
+            depthWrite: false,
+            linewidth: width,
+            opacity,
+            transparent: true,
+            vertexColors: true,
+        });
+        material.onBeforeCompile = (shader) => {
+            shader.uniforms.middle = uniforms.middle;
+            shader.uniforms.radius = uniforms.radius;
+            shader.uniforms.steep = uniforms.steep;
+            shader.vertexShader = `${FADE}\nvarying float vLinkFade;\n${shader.vertexShader.replace('vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );', 'vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );\nvLinkFade = fade(max(-(position.y < 0.5 ? start.z : end.z), 0.001));')}`;
+            shader.fragmentShader = `varying float vLinkFade;\n${shader.fragmentShader.replace('gl_FragColor = vec4( diffuseColor.rgb, alpha );', 'gl_FragColor = vec4( diffuseColor.rgb, alpha * vLinkFade );')}`;
+        };
+        return material;
+    };
     const points = new Points(new BufferGeometry(), new ShaderMaterial({
         fragmentShader: FRAGMENT,
         transparent: true,
@@ -389,15 +383,17 @@ export const threeDriver = (container, options = {}) => {
             geometry: framed(new BoxGeometry(1.5, 1.5, 1.5)),
             mesh: undefined,
             spots: [],
+            turns: [],
         },
         octahedron: {
             geometry: framed(new OctahedronGeometry(1.15)),
             mesh: undefined,
             spots: [],
+            turns: [],
         },
     };
-    const quiet = new LineSegments(new BufferGeometry(), lines(LINKS.dark.far));
-    const lit = new LineSegments(new BufferGeometry(), lines(0.9));
+    const quiet = new LineSegments2(new LineSegmentsGeometry(), lines(LINKS.dark.far, WIDTH.quiet));
+    const lit = new LineSegments2(new LineSegmentsGeometry(), lines(0.9, WIDTH.lit));
     quiet.frustumCulled = false;
     lit.frustumCulled = false;
     const solid = new Mesh(new BufferGeometry(), new ShaderMaterial({
@@ -494,10 +490,18 @@ export const threeDriver = (container, options = {}) => {
         const nearest = [];
         for (let step = 0; step < sample; step++) {
             const one = Math.floor((step * ids.length) / sample);
+            const [ox, oy, oz] = [
+                positions[one * 3],
+                positions[one * 3 + 1],
+                positions[one * 3 + 2],
+            ];
             let best = Number.POSITIVE_INFINITY;
             for (let other = 0; other < ids.length; other++) {
                 if (other !== one) {
-                    best = Math.min(best, at(one).distanceToSquared(at(other)));
+                    const far = (positions[other * 3] - ox) ** 2 +
+                        (positions[other * 3 + 1] - oy) ** 2 +
+                        (positions[other * 3 + 2] - oz) ** 2;
+                    best = Math.min(best, far);
                 }
             }
             nearest.push(Math.sqrt(best));
@@ -505,9 +509,10 @@ export const threeDriver = (container, options = {}) => {
         nearest.sort((one, other) => one - other);
         const reach = (nearest[Math.floor(nearest.length / 2)] ?? 1) * WASH.reach;
         const cells = new Map();
-        const key = (x, y, z) => `${Math.floor(x / reach)},${Math.floor(y / reach)},${Math.floor(z / reach)}`;
+        const SIDE = 1 << 16;
+        const key = (cx, cy, cz) => ((cx + SIDE / 2) * SIDE + (cy + SIDE / 2)) * SIDE + (cz + SIDE / 2);
         for (let spot = 0; spot < ids.length; spot++) {
-            const k = key(positions[spot * 3], positions[spot * 3 + 1], positions[spot * 3 + 2]);
+            const k = key(Math.floor(positions[spot * 3] / reach), Math.floor(positions[spot * 3 + 1] / reach), Math.floor(positions[spot * 3 + 2] / reach));
             const list = cells.get(k);
             if (list) {
                 list.push(spot);
@@ -532,7 +537,7 @@ export const threeDriver = (container, options = {}) => {
             for (let dx = -1; dx <= 1; dx++) {
                 for (let dy = -1; dy <= 1; dy++) {
                     for (let dz = -1; dz <= 1; dz++) {
-                        for (const spot of cells.get(`${cx + dx},${cy + dy},${cz + dz}`) ?? []) {
+                        for (const spot of cells.get(key(cx + dx, cy + dy, cz + dz)) ?? []) {
                             const far = (positions[spot * 3] - x) ** 2 +
                                 (positions[spot * 3 + 1] - y) ** 2 +
                                 (positions[spot * 3 + 2] - z) ** 2;
@@ -609,30 +614,7 @@ export const threeDriver = (container, options = {}) => {
         };
     };
     const held = gesturesHeld(container);
-    const arc = (from, to) => {
-        const one = index.get(from);
-        const other = index.get(to);
-        if (one === undefined || other === undefined) {
-            return undefined;
-        }
-        const a = at(one);
-        const b = at(other);
-        const middle = a.clone().add(b).multiplyScalar(0.5);
-        const center = points.geometry.boundingSphere?.center ?? controls.target;
-        const out = middle.clone().sub(center);
-        if (out.lengthSq() < 1e-9) {
-            out.copy(camera.up);
-        }
-        const peak = middle.add(out.normalize().multiplyScalar(a.distanceTo(b) * LIFT * 2));
-        const depth = peak.clone().applyMatrix4(camera.matrixWorldInverse).z;
-        if (depth > 0) {
-            return undefined;
-        }
-        peak.project(camera);
-        const { clientHeight: height, clientWidth: width } = container;
-        return { x: ((peak.x + 1) / 2) * width, y: ((1 - peak.y) / 2) * height };
-    };
-    const signals = signalsOver(container, (id) => nearOnScreen(id), arc);
+    const signals = signalsOver(container, (id) => nearOnScreen(id));
     const nearOnScreen = (id) => {
         const spot = index.get(id);
         if (spot === undefined) {
@@ -643,7 +625,7 @@ export const threeDriver = (container, options = {}) => {
             ? undefined
             : onScreen(id);
     };
-    const groups = groupsOver(container, nearOnScreen);
+    const groups = groupsOver(container, nearOnScreen, () => names.boxes());
     const names = namesOver(container, onScreen);
     const drawNames = () => {
         const pointed = hovered === undefined ? undefined : ids[hovered];
@@ -656,7 +638,7 @@ export const threeDriver = (container, options = {}) => {
     const glideTo = (to, distance, duration) => {
         const from = controls.target.clone();
         const fromDistance = camera.position.distanceTo(controls.target);
-        if (duration <= 0 || still) {
+        if (duration <= 0 || still()) {
             const way = camera.position.clone().sub(controls.target).normalize();
             controls.target.copy(to);
             camera.position.copy(to.clone().add(way.multiplyScalar(distance)));
@@ -677,11 +659,12 @@ export const threeDriver = (container, options = {}) => {
         }
         return { center, radius: Math.max(radius, 1) };
     };
-    const frame = (spots, duration) => {
+    const frame = (spots, duration, least = 0) => {
         if (spots.length === 0) {
             return;
         }
-        const { center, radius } = sphereOf(spots);
+        const { center, radius: reach } = sphereOf(spots);
+        const radius = Math.max(reach, least);
         const fov = ((camera.fov / 2) * Math.PI) / 180;
         const fits = radius / Math.tan(Math.min(fov, Math.atan(Math.tan(fov) * camera.aspect)));
         glideTo(center, fits * 1.02, duration);
@@ -694,24 +677,62 @@ export const threeDriver = (container, options = {}) => {
     let crowding = 1;
     let dark = true;
     const sizeOf = (size) => 1.6 + 1.35 * Math.max(size, 0);
+    let tints = new Float32Array();
+    let shapes = new Float32Array();
+    let glows = new Float32Array();
+    let grownBy = new Float32Array();
+    const sizeNote = (spot) => {
+        const pointed = spot === hovered;
+        drawnSizes[spot] = (sizes[spot] ?? 1) * Math.max(grownBy[spot] ?? 1, pointed ? 1.25 : 1);
+        if (!(glows[spot] === 1)) {
+            glows[spot] = pointed ? 0.6 : 0;
+        }
+    };
+    const changed = (name) => {
+        const attribute = points.geometry.getAttribute(name);
+        if (attribute) {
+            attribute.needsUpdate = true;
+        }
+    };
+    const attribute = (name, array, size) => {
+        const was = points.geometry.getAttribute(name);
+        if (was?.array === array) {
+            was.needsUpdate = true;
+        }
+        else {
+            points.geometry.setAttribute(name, new BufferAttribute(array, size));
+        }
+    };
+    let blended;
     const paint = () => {
         if (!looks) {
             return;
         }
-        const tints = new Float32Array(ids.length * 4);
-        const drawn = new Float32Array(ids.length);
-        const shapes = new Float32Array(ids.length);
-        const glows = new Float32Array(ids.length);
+        if (tints.length !== ids.length * 4) {
+            tints = new Float32Array(ids.length * 4);
+            drawnSizes = new Float32Array(ids.length);
+            shapes = new Float32Array(ids.length);
+            glows = new Float32Array(ids.length);
+            grownBy = new Float32Array(ids.length);
+        }
+        let tinted = false;
         selected = undefined;
         near = new Set();
         ids.forEach((id, spot) => {
             const look = looks.node(id);
             const [red, green, blue] = channels(look.color);
-            tints.set([red, green, blue, look.hidden ? 0 : 1], spot * 4);
-            drawn[spot] =
-                (sizes[spot] ?? 1) * (look.selected ? 1.5 : look.raised || spot === hovered ? 1.25 : 1);
+            const alpha = look.hidden ? 0 : 1;
+            if (tints[spot * 4] !== red ||
+                tints[spot * 4 + 1] !== green ||
+                tints[spot * 4 + 2] !== blue ||
+                tints[spot * 4 + 3] !== alpha) {
+                tints.set([red, green, blue, alpha], spot * 4);
+                tinted = true;
+            }
+            grownBy[spot] = look.selected ? 1.5 : look.raised ? 1.25 : 1;
+            glows[spot] = look.selected ? 1 : 0;
+            sizeNote(spot);
             shapes[spot] = SHAPES[look.shape ?? options.shape ?? 'circle'];
-            glows[spot] = look.selected ? 1 : spot === hovered ? 0.6 : 0;
             if (look.selected) {
                 selected = id;
             }
@@ -719,14 +740,14 @@ export const threeDriver = (container, options = {}) => {
                 near.add(id);
             }
         });
-        const geometry = points.geometry;
-        geometry.setAttribute('tint', new BufferAttribute(tints, 4));
-        noteTints = tints;
-        washSurface();
-        geometry.setAttribute('size', new BufferAttribute(drawn, 1));
-        geometry.setAttribute('shape', new BufferAttribute(shapes, 1));
-        geometry.setAttribute('glow', new BufferAttribute(glows, 1));
-        drawnSizes = drawn;
+        attribute('tint', tints, 4);
+        attribute('size', drawnSizes, 1);
+        attribute('shape', shapes, 1);
+        attribute('glow', glows, 1);
+        if (tinted || noteTints !== tints) {
+            noteTints = tints;
+            washSurface();
+        }
         meshShapes(shapes, tints);
         dark = !isLight(looks.ground);
         const solidUniforms = solid.material.uniforms;
@@ -736,15 +757,34 @@ export const threeDriver = (container, options = {}) => {
         uniforms.bloom.value = dark ? BLOOM.dark : BLOOM.light;
         uniforms.dark.value = dark ? 1 : 0;
         const blending = dark ? AdditiveBlending : NormalBlending;
-        halos.material.blending = blending;
-        shapeMaterial.blending = blending;
-        shapeMaterial.needsUpdate = true;
-        quiet.material.blending = blending;
-        lit.material.blending = blending;
-        halos.material.needsUpdate = true;
-        quiet.material.needsUpdate = true;
-        lit.material.needsUpdate = true;
-        paintLinks();
+        if (blending !== blended) {
+            blended = blending;
+            for (const material of [halos.material, shapeMaterial, quiet.material, lit.material]) {
+                material.blending = blending;
+                material.needsUpdate = true;
+            }
+        }
+        paintQuiet();
+        paintLit();
+        invalidate();
+    };
+    const point = (next) => {
+        const was = hovered;
+        hovered = next;
+        canvas.style.cursor = next === undefined ? '' : 'pointer';
+        if (!looks || drawnSizes.length !== ids.length) {
+            return;
+        }
+        for (const spot of [was, next]) {
+            if (spot !== undefined) {
+                sizeNote(spot);
+            }
+        }
+        changed('size');
+        changed('glow');
+        shapesPlaced = false;
+        paintLit();
+        invalidate();
     };
     let drawnSizes = new Float32Array();
     const meshShapes = (shapes, tints) => {
@@ -759,6 +799,10 @@ export const threeDriver = (container, options = {}) => {
                 }
             });
             solidShape.spots = spots;
+            solidShape.turns = spots.map((spot) => {
+                const twist = depthOf(ids[spot] ?? '');
+                return new Quaternion().setFromEuler(new Euler(0.45 + twist * 0.3, 0.6 + twist, 0.2 * twist));
+            });
             if (!solidShape.mesh || solidShape.mesh.count !== spots.length) {
                 if (solidShape.mesh) {
                     scene.remove(solidShape.mesh);
@@ -783,13 +827,19 @@ export const threeDriver = (container, options = {}) => {
                 mesh.geometry.setAttribute('tone', new InstancedBufferAttribute(tone, 4));
             }
         }
-        placeShapes();
+        shapesPlaced = false;
     };
-    const turned = new Quaternion();
+    let shapesPlaced = false;
+    let placedUnit = Number.NaN;
     const placed = new Matrix4();
     const where = new Vector3();
     const scaled = new Vector3();
     const placeShapes = () => {
+        if (shapesPlaced && placedUnit === uniforms.unit.value) {
+            return;
+        }
+        shapesPlaced = true;
+        placedUnit = uniforms.unit.value;
         for (const solidShape of [solids.cube, solids.octahedron]) {
             const mesh = solidShape.mesh;
             if (!mesh) {
@@ -797,8 +847,7 @@ export const threeDriver = (container, options = {}) => {
             }
             solidShape.spots.forEach((spot, at) => {
                 const size = (drawnSizes[spot] ?? 1) * uniforms.unit.value * 0.5;
-                const twist = depthOf(ids[spot] ?? '');
-                turned.setFromEuler(new Euler(0.45 + twist * 0.3, 0.6 + twist, 0.2 * twist));
+                const turned = solidShape.turns[at];
                 where.set(positions[spot * 3], positions[spot * 3 + 1], positions[spot * 3 + 2]);
                 scaled.setScalar(size);
                 mesh.setMatrixAt(at, placed.compose(where, turned, scaled));
@@ -806,56 +855,74 @@ export const threeDriver = (container, options = {}) => {
             mesh.instanceMatrix.needsUpdate = true;
         }
     };
-    const paintLinks = () => {
+    const fill = (line, ends, colors) => {
+        const place = new Float32Array(ends.length * 3);
+        ends.forEach((spot, step) => {
+            place.set(positions.subarray(spot * 3, spot * 3 + 3), step * 3);
+        });
+        line.geometry.dispose();
+        line.geometry = new LineSegmentsGeometry();
+        if (ends.length > 0) {
+            line.geometry.setPositions(place);
+            line.geometry.setColors(colors);
+        }
+        line.userData.ends = ends;
+    };
+    const paintQuiet = () => {
         if (!looks) {
             return;
         }
-        const on = hovered === undefined ? undefined : ids[hovered];
-        const quietEnds = [];
-        const quietTints = [];
-        const litEnds = [];
-        const litTints = [];
+        const ends = [];
+        const colors = [];
         for (const link of links) {
             const from = index.get(link.source);
             const to = index.get(link.target);
-            if (from === undefined || to === undefined) {
+            const look = looks.link(link.source, link.target);
+            if (from === undefined || to === undefined || look.hidden || look.raised) {
                 continue;
             }
+            const color = channels(look.color);
+            ends.push(from, to);
+            colors.push(...color, ...color);
+        }
+        fill(quiet, ends, colors);
+    };
+    const paintLit = () => {
+        if (!looks) {
+            return;
+        }
+        const on = hovered === undefined ? undefined : ids[hovered];
+        const ends = [];
+        const colors = [];
+        for (const link of links) {
+            const touches = on !== undefined && (link.source === on || link.target === on);
             const look = looks.link(link.source, link.target);
-            if (look.hidden) {
+            if (look.hidden || !(look.raised || touches)) {
+                continue;
+            }
+            const from = index.get(link.source);
+            const to = index.get(link.target);
+            if (from === undefined || to === undefined) {
                 continue;
             }
-            const touches = on !== undefined && (link.source === on || link.target === on);
-            const whole = look.raised || touches;
             const color = channels(touches ? looks.node(on).color : look.color);
-            const ends = whole ? litEnds : quietEnds;
-            const tints = whole ? litTints : quietTints;
             ends.push(from, to);
-            tints.push(...color, ...color);
+            colors.push(...color, ...color);
         }
-        const fill = (line, ends, tints) => {
-            const place = new Float32Array(ends.length * 3);
-            ends.forEach((spot, step) => {
-                place.set(positions.subarray(spot * 3, spot * 3 + 3), step * 3);
-            });
-            line.geometry.setAttribute('position', new BufferAttribute(place, 3));
-            line.geometry.setAttribute('color', new BufferAttribute(new Float32Array(tints), 3));
-            line.userData.ends = ends;
-        };
-        fill(quiet, quietEnds, quietTints);
-        fill(lit, litEnds, litTints);
+        fill(lit, ends, colors);
     };
     const followLinks = () => {
         for (const line of [quiet, lit]) {
             const ends = line.userData.ends;
-            const place = line.geometry.getAttribute('position');
+            const place = line.geometry.getAttribute('instanceStart');
             if (!ends || !place) {
                 continue;
             }
+            const array = place.data.array;
             ends.forEach((spot, step) => {
-                place.array.set(positions.subarray(spot * 3, spot * 3 + 3), step * 3);
+                array.set(positions.subarray(spot * 3, spot * 3 + 3), step * 3);
             });
-            place.needsUpdate = true;
+            place.data.needsUpdate = true;
         }
     };
     const load = (nodes, next, places) => {
@@ -866,9 +933,12 @@ export const threeDriver = (container, options = {}) => {
         sizes = nodes.map((node) => sizeOf(node.size));
         links = next.filter((link) => index.has(link.source) && index.has(link.target));
         positions = places;
+        morph = undefined;
         points.geometry.setAttribute('position', new BufferAttribute(positions, 3));
         points.geometry.computeBoundingSphere();
         hovered = undefined;
+        canvas.style.cursor = '';
+        shapesPlaced = false;
         paint();
         if (solid.visible) {
             tieSurface();
@@ -904,15 +974,21 @@ export const threeDriver = (container, options = {}) => {
             renderer.domElement.height / 2 / Math.tan(((camera.fov / 2) * Math.PI) / 180);
         const closeness = Math.min(Math.max(1 - distance / (radius * 3), 0), 1);
         const shade = LINKS[dark ? 'dark' : 'light'];
-        quiet.material.uniforms.opacity.value =
-            shade.far + (shade.close - shade.far) * closeness;
+        quiet.material.opacity = shade.far + (shade.close - shade.far) * closeness;
     };
+    let dirty = true;
+    const invalidate = () => {
+        dirty = true;
+    };
+    let visible = true;
     let pending = 0;
     const tick = (now) => {
-        if (stopped) {
+        pending = 0;
+        if (stopped || !visible || !container.isConnected) {
             return;
         }
         pending = requestAnimationFrame(tick);
+        const moving = glide !== undefined || morph !== undefined || layout !== undefined;
         if (glide) {
             const through = Math.min((now - glide.start) / glide.duration, 1);
             const eased = ease(through);
@@ -926,7 +1002,7 @@ export const threeDriver = (container, options = {}) => {
             }
         }
         if (morph) {
-            const through = still ? 1 : Math.min((now - morph.start) / MORPH, 1);
+            const through = still() ? 1 : Math.min((now - morph.start) / MORPH, 1);
             const eased = ease(through);
             for (let step = 0; step < positions.length; step++) {
                 positions[step] =
@@ -936,6 +1012,7 @@ export const threeDriver = (container, options = {}) => {
             ;
             points.geometry.getAttribute('position').needsUpdate = true;
             followLinks();
+            shapesPlaced = false;
             if (through >= 1) {
                 morph = undefined;
                 points.geometry.computeBoundingSphere();
@@ -953,6 +1030,7 @@ export const threeDriver = (container, options = {}) => {
             points.geometry.getAttribute('position').needsUpdate = true;
             points.geometry.computeBoundingSphere();
             followLinks();
+            shapesPlaced = false;
             if (layout.simulation.alpha() <= layout.simulation.alphaMin() || now > layout.limit) {
                 layout.done();
             }
@@ -961,26 +1039,47 @@ export const threeDriver = (container, options = {}) => {
             }
         }
         controls.autoRotate =
-            !still &&
+            !still() &&
                 options.autoRotate !== false &&
                 hovered === undefined &&
                 selected === undefined &&
                 now - handled > REST;
-        controls.update();
+        controls.enableDamping = !still();
+        const turned = controls.update();
+        if (!(moving || turned || dirty)) {
+            return;
+        }
+        dirty = false;
         cue();
         if (solids.cube.mesh || solids.octahedron.mesh) {
             placeShapes();
         }
         renderer.render(scene, camera);
-        groups.draw();
         drawNames();
+        groups.draw();
+    };
+    const wake = () => {
+        invalidate();
+        if (!pending && !stopped && visible && container.isConnected) {
+            pending = requestAnimationFrame(tick);
+        }
     };
+    const seen = typeof IntersectionObserver === 'function'
+        ? new IntersectionObserver((entries) => {
+            visible = entries.at(-1)?.isIntersecting ?? true;
+            if (visible) {
+                wake();
+            }
+        })
+        : undefined;
+    seen?.observe(container);
     const resize = () => {
         const width = Math.max(container.clientWidth, 1);
         const height = Math.max(container.clientHeight, 1);
         renderer.setSize(width, height, false);
         camera.aspect = width / height;
         camera.updateProjectionMatrix();
+        invalidate();
     };
     let resizing = 0;
     const sized = new ResizeObserver(() => {
@@ -994,42 +1093,85 @@ export const threeDriver = (container, options = {}) => {
         moved = true;
         handled = Number.POSITIVE_INFINITY;
         glide = undefined;
+        wake();
     });
     controls.addEventListener('end', () => {
         handled = performance.now();
     });
+    const frontOf = (ray) => {
+        const frame = shapeFrame;
+        if (!frame) {
+            return Number.POSITIVE_INFINITY;
+        }
+        const { depth, distance, height, width } = frame.field;
+        const by = frame.scale * scale;
+        const toBox = (x, y, z) => [
+            (x / scale - frame.middle.x) / frame.scale + width / 2,
+            -(y / scale - frame.middle.y) / frame.scale + height / 2,
+            (z / scale - frame.middle.z) / frame.scale + depth / 2,
+        ];
+        const [ox, oy, oz] = toBox(ray.origin.x, ray.origin.y, ray.origin.z);
+        const way = [ray.direction.x, -ray.direction.y, ray.direction.z];
+        let enter = 0;
+        let leave = Number.POSITIVE_INFINITY;
+        for (const [from, along, size] of [
+            [ox, way[0], width],
+            [oy, way[1], height],
+            [oz, way[2], depth],
+        ]) {
+            if (Math.abs(along) < 1e-9) {
+                if (from < 0 || from > size) {
+                    return Number.POSITIVE_INFINITY;
+                }
+                continue;
+            }
+            const one = (0 - from) / along;
+            const other = (size - from) / along;
+            enter = Math.max(enter, Math.min(one, other));
+            leave = Math.min(leave, Math.max(one, other));
+        }
+        const inset = frame.shell * 1.15;
+        const least = Math.max(width, height, depth) / 400;
+        for (let t = enter, step = 0; t <= leave && step < 128; step++) {
+            const away = distance(ox + way[0] * t, oy + way[1] * t, oz + way[2] * t) + inset;
+            if (away <= least) {
+                return t * by;
+            }
+            t += Math.max(away, least);
+        }
+        return Number.POSITIVE_INFINITY;
+    };
     const raycaster = new Raycaster();
     const pointer = new Vector2();
     let hovering = 0;
-    const hover = (event) => {
+    const noteAt = (clientX, clientY) => {
         const box = canvas.getBoundingClientRect();
-        pointer.set(((event.clientX - box.left) / box.width) * 2 - 1, -((event.clientY - box.top) / box.height) * 2 + 1);
+        pointer.set(((clientX - box.left) / box.width) * 2 - 1, -((clientY - box.top) / box.height) * 2 + 1);
+        raycaster.setFromCamera(pointer, camera);
+        raycaster.params.Points = { threshold: uniforms.unit.value * 2.4 };
+        const front = solid.visible ? frontOf(raycaster.ray) : Number.POSITIVE_INFINITY;
+        return raycaster.intersectObject(points, false).find((one) => {
+            const id = one.index === undefined ? undefined : ids[one.index];
+            return (id !== undefined &&
+                looks?.node(id).hidden !== true &&
+                one.distance < front + uniforms.unit.value * 3);
+        })?.index;
+    };
+    const hover = (event) => {
+        const { clientX, clientY } = event;
         cancelAnimationFrame(hovering);
         hovering = requestAnimationFrame(() => {
-            raycaster.setFromCamera(pointer, camera);
-            raycaster.params.Points = { threshold: uniforms.unit.value * 2.4 };
-            const front = solid.visible
-                ? (raycaster.intersectObject(solid, false)[0]?.distance ?? Number.POSITIVE_INFINITY)
-                : Number.POSITIVE_INFINITY;
-            const hit = raycaster.intersectObject(points, false).find((one) => {
-                const id = one.index === undefined ? undefined : ids[one.index];
-                return (id !== undefined &&
-                    looks?.node(id).hidden !== true &&
-                    one.distance < front + uniforms.unit.value * 3);
-            });
-            const next = hit?.index;
+            const next = noteAt(clientX, clientY);
             if (next !== hovered) {
-                hovered = next;
-                canvas.style.cursor = next === undefined ? '' : 'pointer';
-                paint();
+                point(next);
+                wake();
             }
         });
     };
     const leave = () => {
         if (hovered !== undefined) {
-            hovered = undefined;
-            canvas.style.cursor = '';
-            paint();
+            point(undefined);
+            wake();
         }
     };
     canvas.addEventListener('pointermove', hover);
@@ -1038,11 +1180,16 @@ export const threeDriver = (container, options = {}) => {
         center: (id, animate) => {
             const spot = index.get(id);
             if (spot !== undefined) {
+                moved = true;
                 glideTo(at(spot), camera.position.distanceTo(controls.target), animate ? STEP * 2 : 0);
+                wake();
             }
         },
         draw: ({ links: next, nodes }) => {
-            const reach = Math.max(1e-6, ...nodes.map((node) => Math.max(Math.abs(node.x), Math.abs(node.y), Math.abs(node.z ?? 0))));
+            let reach = 1e-6;
+            for (const node of nodes) {
+                reach = Math.max(reach, Math.abs(node.x), Math.abs(node.y), Math.abs(node.z ?? 0));
+            }
             scale = REACH / reach;
             const places = new Float32Array(nodes.length * 3);
             nodes.forEach((node, spot) => {
@@ -1052,28 +1199,34 @@ export const threeDriver = (container, options = {}) => {
             load(nodes, next, places);
             shapeSolid();
             fitAll(0);
+            wake();
         },
         fit: (fitted, animate) => {
+            moved = true;
+            wake();
             frame(fitted.flatMap((id) => {
                 const spot = index.get(id);
                 return spot === undefined ? [] : [spot];
-            }), animate ? STEP * 2 : 0);
+            }), animate ? STEP * 2 : 0, (points.geometry.boundingSphere?.radius ?? REACH) * 0.35);
         },
         gestures: (next) => {
             held.set(next);
             controls.enabled = next !== 'off';
             controls.touches.ONE = next === 'cooperative' ? null : TOUCH.ROTATE;
+            wake();
         },
         groups: (next) => {
             if (options.groupLabels !== false) {
                 groups.set(next.map((group) => ({ ...group, ids: group.ids.slice(0, SAMPLE) })));
             }
+            wake();
         },
         look: (next) => {
             looks = next;
             signals.look(next);
             groups.look(next);
             paint();
+            wake();
         },
         onPress: (press) => {
             let down;
@@ -1085,12 +1238,9 @@ export const threeDriver = (container, options = {}) => {
                 down = undefined;
                 if (was &&
                     Math.hypot(event.clientX - was.x, event.clientY - was.y) < 5 &&
-                    performance.now() - was.time < 500 &&
-                    hovered !== undefined) {
-                    const id = ids[hovered];
-                    if (id !== undefined) {
-                        press(id);
-                    }
+                    performance.now() - was.time < 500) {
+                    const spot = noteAt(event.clientX, event.clientY);
+                    press(spot === undefined ? undefined : ids[spot]);
                 }
             };
             canvas.addEventListener('pointerdown', start);
@@ -1108,7 +1258,9 @@ export const threeDriver = (container, options = {}) => {
             const side = new Vector3().crossVectors(turn, offset).normalize();
             offset.applyAxisAngle(side, (y / Math.max(height, 1)) * (Math.PI / 2));
             const to = controls.target.clone().add(offset);
-            if (!animate || still) {
+            moved = true;
+            invalidate();
+            if (!animate || still()) {
                 camera.position.copy(to);
                 return;
             }
@@ -1124,35 +1276,55 @@ export const threeDriver = (container, options = {}) => {
             requestAnimationFrame(step);
         },
         settle: (unplaced, placed) => {
+            if (morph) {
+                positions.set(morph.to);
+                morph = undefined;
+                points.geometry.getAttribute('position').needsUpdate = true;
+                points.geometry.computeBoundingSphere();
+            }
             const nodes = ids.map((id, spot) => {
                 const x = positions[spot * 3] / scale;
                 const y = positions[spot * 3 + 1] / scale;
                 const z = positions[spot * 3 + 2] / scale;
                 return unplaced.has(id) ? { id, x, y, z } : { fx: x, fy: y, fz: z, id, x, y, z };
             });
-            const simulation = forceSimulation(nodes, 3)
-                .force('link', forceLink(links.map((link) => ({ source: link.source, target: link.target })))
-                .id((node) => node.id)
-                .distance(1.6))
-                .force('charge', forceManyBody().strength(-1.2).theta(1.2))
-                .force('center', forceCenter(0, 0, 0))
-                .alphaDecay(0.03)
-                .stop();
             let done = false;
-            layout = {
-                done: () => {
-                    if (done) {
-                        return;
-                    }
+            void import('d3-force-3d')
+                .then(({ forceCenter, forceLink, forceManyBody, forceSimulation }) => {
+                if (done || stopped) {
+                    return;
+                }
+                const simulation = forceSimulation(nodes, 3)
+                    .force('link', forceLink(links.map((link) => ({ source: link.source, target: link.target })))
+                    .id((node) => node.id)
+                    .distance(1.6))
+                    .force('charge', forceManyBody().strength(-1.2).theta(1.2))
+                    .force('center', forceCenter(0, 0, 0))
+                    .alphaDecay(0.03)
+                    .stop();
+                layout = {
+                    done: () => {
+                        if (done) {
+                            return;
+                        }
+                        done = true;
+                        layout = undefined;
+                        fitAll(STEP * 2);
+                        placed(new Map(nodes.map((node) => [node.id, { x: node.x, y: node.y, z: node.z }])));
+                    },
+                    limit: performance.now() + (options.layoutLimit ?? 10000),
+                    nodes,
+                    simulation,
+                };
+                wake();
+            })
+                .catch((cause) => {
+                console.error(new Error('The three.js driver could not load d3-force-3d to lay out the notes. Install d3-force-3d alongside @fusion.dev/helix-graph.', { cause }));
+                if (!done && !stopped) {
                     done = true;
-                    layout = undefined;
-                    fitAll(STEP * 2);
                     placed(new Map(nodes.map((node) => [node.id, { x: node.x, y: node.y, z: node.z }])));
-                },
-                limit: performance.now() + (options.layoutLimit ?? 10000),
-                nodes,
-                simulation,
-            };
+                }
+            });
             return () => {
                 done = true;
                 layout = undefined;
@@ -1165,6 +1337,7 @@ export const threeDriver = (container, options = {}) => {
                 solidAt = Number.NaN;
             }
             uniforms.steep.value = surfaced && !frame ? 1 : 0;
+            wake();
         },
         signal: (from, to, colors, animate) => {
             signals.signal(from, to, colors, animate);
@@ -1175,6 +1348,7 @@ export const threeDriver = (container, options = {}) => {
             cancelAnimationFrame(hovering);
             cancelAnimationFrame(resizing);
             sized.disconnect();
+            seen?.disconnect();
             canvas.removeEventListener('pointermove', hover);
             canvas.removeEventListener('pointerleave', leave);
             controls.dispose();
@@ -1188,6 +1362,7 @@ export const threeDriver = (container, options = {}) => {
                 object.geometry.dispose();
                 object.material.dispose();
             }
+            renderer.forceContextLoss();
             renderer.dispose();
             canvas.remove();
             signals.stop();
@@ -1228,11 +1403,8 @@ export const threeDriver = (container, options = {}) => {
             for (const node of changes.addNodes) {
                 kept.set(node.id, { node, world: toWorld(node) });
             }
-            const removed = new Set(changes.removeLinks.map((link) => `${link.source}\u0000${link.target}`));
-            const next = [
-                ...links.filter((link) => !removed.has(`${link.source}\u0000${link.target}`)),
-                ...changes.addLinks,
-            ];
+            const removed = new Set(changes.removeLinks.map(linkKey));
+            const next = [...links.filter((link) => !removed.has(linkKey(link))), ...changes.addLinks];
             const entries = [...kept.values()];
             const from = new Float32Array(entries.length * 3);
             const to = new Float32Array(entries.length * 3);
@@ -1247,8 +1419,11 @@ export const threeDriver = (container, options = {}) => {
             if (shifted) {
                 fitAll(animate ? MORPH : 0);
             }
+            wake();
         },
         zoomBy: (direction, animate) => {
+            moved = true;
+            wake();
             const distance = camera.position.distanceTo(controls.target);
             glideTo(controls.target.clone(), direction > 0 ? distance / ZOOM : distance * ZOOM, animate ? STEP : 0);
         },