@fusion.dev/helix-graph 0.122.0 → 0.124.0

package/dist/three/three-driver.js

@@ -1,7 +1,9 @@
 import { forceCenter, forceLink, forceManyBody, forceSimulation, } from 'd3-force-3d';
-import { AdditiveBlending, BufferAttribute, BufferGeometry, LineSegments, NormalBlending, PerspectiveCamera, Points, Raycaster, Scene, ShaderMaterial, TOUCH, Vector2, Vector3, WebGLRenderer, } from 'three';
+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 { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { mergeVertices } from 'three/addons/utils/BufferGeometryUtils.js';
 import { ease, gesturesHeld, groupsOver, isLight, namesOver, signalsOver, } from '../overlay/overlay.js';
+import { surfaceOf } from './surface.js';
 const SHAPES = { circle: 0, diamond: 2, ring: 0, square: 1 };
 const REACH = 100;
 const STEP = 250;
@@ -10,6 +12,10 @@ const ZOOM = 1.5;
 const SAMPLE = 96;
 const LINKS = { dark: { close: 0.3, far: 0.05 }, light: { close: 0.55, far: 0.12 } };
 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 FOV = 40;
 const FADE = `
 uniform float middle;
@@ -22,6 +28,29 @@ float fade(float depth) {
   return mix(gentle, sharp, steep);
 }
 `;
+const ORB = `
+uniform vec3 light;
+uniform float dark;
+
+vec4 orb(vec3 base, vec3 n) {
+  float diffuse = max(dot(n, light), 0.0);
+  float rim = pow(1.0 - clamp(n.z, 0.0, 1.0), 2.2);
+  float core = pow(clamp(n.z, 0.0, 1.0), 5.0);
+  float glint = pow(max(dot(n, normalize(light + vec3(0.0, 0.0, 1.0))), 0.0), 140.0);
+  vec3 energy = base * (0.08 + 0.2 * diffuse);
+  energy += base * core * 0.5;
+  energy += mix(base, vec3(1.0), 0.6) * pow(clamp(n.z, 0.0, 1.0), 40.0) * 0.55;
+  energy += mix(base, vec3(1.0), 0.25) * rim * 1.2;
+  energy += vec3(glint * 0.55);
+  vec3 frost = mix(base, vec3(1.0), 0.45 * pow(clamp(n.z, 0.0, 1.0), 1.5));
+  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));
+}
+`;
 const VERTEX = `
 ${FADE}
 attribute float size;
@@ -31,18 +60,29 @@ attribute float glow;
 
 uniform float scale;
 uniform float unit;
+uniform float bloom;
+uniform float halo;
 
 varying vec4 vTint;
 varying float vShape;
 varying float vGlow;
 varying float vFade;
+varying float vRoom;
+varying vec3 vCenter;
+varying float vRadius;
 
 void main() {
   vec4 view = modelViewMatrix * vec4(position, 1.0);
   gl_Position = projectionMatrix * view;
   float depth = max(-view.z, 0.001);
+  /* The halo's pass has room around the note for it, which every note has
+     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 * (1.0 + glow * 1.4);
+  gl_PointSize = size * unit * scale / depth * vRoom;
+  vCenter = view.xyz;
+  vRadius = size * unit * 0.5;
   vFade = fade(depth);
   vTint = tint;
   vShape = shape;
@@ -50,24 +90,88 @@ void main() {
 }
 `;
 const FRAGMENT = `
+uniform mat4 projectionMatrix;
+${ORB}
+varying vec4 vTint;
+varying float vShape;
+varying float vFade;
+varying vec3 vCenter;
+varying float vRadius;
+
+void main() {
+  if (vShape > 0.5) discard;
+  vec2 q = (gl_PointCoord * 2.0 - 1.0) * vec2(1.0, -1.0);
+  float d2 = dot(q, q);
+  if (d2 > 1.0) discard;
+  vec3 n = vec3(q, sqrt(1.0 - d2));
+  vec4 clip = projectionMatrix * vec4(vCenter + n * vRadius, 1.0);
+  gl_FragDepth = clip.z / clip.w * 0.5 + 0.5;
+  /* Antialiased in the last few percent only, so the glowing rim runs to the edge. */
+  float edge = 1.0 - smoothstep(0.965, 1.0, sqrt(d2));
+  vec4 lit = orb(vTint.rgb, n);
+  float alpha = edge * lit.a * vTint.a * vFade;
+  if (alpha < 0.01) discard;
+  gl_FragColor = vec4(lit.rgb, alpha);
+}
+`;
+const HALO_FRAGMENT = `
+uniform float bloom;
 varying vec4 vTint;
 varying float vShape;
 varying float vGlow;
 varying float vFade;
+varying float vRoom;
 
 void main() {
-  vec2 p = gl_PointCoord * 2.0 - 1.0;
-  /* The note's body inside the sprite; the rest is room for its glow. */
-  float body = 1.0 / (1.0 + vGlow * 1.4);
-  float reach = vShape > 1.5 ? (abs(p.x) + abs(p.y)) * 0.78 : vShape > 0.5 ? max(abs(p.x), abs(p.y)) * 1.08 : length(p);
-  float d = reach / body;
-  float inside = 1.0 - smoothstep(0.86, 1.0, d);
-  /* Lit from the middle out, so a note reads as round. */
-  vec3 color = vTint.rgb * mix(1.15, 0.8, clamp(d, 0.0, 1.0));
-  float halo = vGlow * (1.0 - smoothstep(1.0, 1.0 / body, d)) * 0.55;
-  float alpha = (inside + halo * (1.0 - inside)) * vTint.a * vFade;
+  vec2 q = (gl_PointCoord * 2.0 - 1.0) * vRoom;
+  float d = vShape > 1.5 ? (abs(q.x) + abs(q.y)) * 0.78 : vShape > 0.5 ? max(abs(q.x), abs(q.y)) * 1.08 : length(q);
+  /* From just inside the body's edge, under its antialiasing, so no seam of
+     dark ground shows between the body and its halo. */
+  if (d < 0.965) discard;
+  float past = clamp((d - 0.965) / max(vRoom - 0.965, 0.001), 0.0, 1.0);
+  float alpha = (bloom + vGlow * 0.6) * pow(1.0 - past, 2.4) * vTint.a * vFade;
   if (alpha < 0.01) discard;
-  gl_FragColor = vec4(color, alpha);
+  gl_FragColor = vec4(vTint.rgb, alpha);
+}
+`;
+const SHAPE_VERTEX = `
+${FADE}
+attribute vec4 tone;
+attribute vec4 frame;
+varying vec3 vNormal;
+varying vec4 vTone;
+varying vec4 vFrame;
+varying float vFade;
+
+void main() {
+  vec4 view = viewMatrix * modelMatrix * instanceMatrix * vec4(position, 1.0);
+  gl_Position = projectionMatrix * view;
+  vNormal = normalize(normalMatrix * mat3(instanceMatrix) * normal);
+  vTone = tone;
+  vFrame = frame;
+  vFade = fade(max(-view.z, 0.001));
+}
+`;
+const SHAPE_FRAGMENT = `
+uniform float dark;
+varying vec3 vNormal;
+varying vec4 vTone;
+varying vec4 vFrame;
+varying float vFade;
+
+void main() {
+  float e = min(min(vFrame.x, vFrame.y), min(vFrame.z, vFrame.w));
+  float w = fwidth(e);
+  /* The edge as a line about a pixel and a half wide, whatever the size. */
+  float line = 1.0 - smoothstep(w * 0.6, w * 2.2, e);
+  float inner = exp(-e * 12.0);
+  float facing = abs(normalize(vNormal).z);
+  vec3 edge = dark > 0.5 ? mix(vTone.rgb, vec3(1.0), 0.35) : vTone.rgb * 0.8;
+  vec3 face = vTone.rgb * (dark > 0.5 ? 0.3 + 0.7 * inner : 1.0);
+  float faceAlpha = (dark > 0.5 ? 0.1 : 0.16) + 0.3 * inner + 0.12 * (1.0 - facing);
+  float alpha = mix(faceAlpha, 1.0, line) * vTone.a * vFade;
+  if (alpha < 0.01) discard;
+  gl_FragColor = vec4(mix(face, edge, line), alpha);
 }
 `;
 const LINE_VERTEX = `
@@ -92,6 +196,65 @@ void main() {
   gl_FragColor = vec4(vColor, opacity * vFade);
 }
 `;
+const SOLID_VERTEX = `
+attribute vec4 wash;
+varying vec3 vNormal;
+varying vec3 vView;
+varying vec4 vWash;
+
+void main() {
+  vec4 view = modelViewMatrix * vec4(position, 1.0);
+  gl_Position = projectionMatrix * view;
+  vNormal = normalize(normalMatrix * normal);
+  vView = normalize(-view.xyz);
+  vWash = wash;
+}
+`;
+const SOLID_FRAGMENT = `
+uniform vec3 ground;
+uniform vec3 ink;
+uniform float strength;
+varying vec3 vNormal;
+varying vec3 vView;
+varying vec4 vWash;
+
+void main() {
+  /* **Each region washed in its notes' color**, as a translucent stain on
+     the ground's color, and lit: a breath of ink where light from above and
+     to the left falls, and the region's own color glowing at the edge
+     turning away. Felt more than seen: the notes on it are what is drawn. */
+  vec3 normal = normalize(vNormal);
+  vec3 view = normalize(vView);
+  if (dot(normal, view) < 0.0) normal = -normal;
+  float edge = 1.0 - dot(normal, view);
+  float lit = max(dot(normal, normalize(vec3(-0.4, 0.8, 0.45))), 0.0);
+  float washed = strength * vWash.a;
+  vec3 base = mix(ground, vWash.rgb, washed);
+  vec3 shaded = mix(base, ink, 0.1 * pow(edge, 2.0) + 0.17 * lit * lit);
+  vec3 rim = mix(shaded, vWash.rgb, washed * 1.6 * pow(edge, 3.0));
+  gl_FragColor = vec4(rim, 1.0);
+}
+`;
+const framed = (geometry) => {
+    const uv = geometry.getAttribute('uv');
+    const count = geometry.getAttribute('position').count;
+    const frame = new Float32Array(count * 4);
+    if (geometry.getIndex() && uv) {
+        for (let at = 0; at < count; at++) {
+            const u = uv.getX(at);
+            const v = uv.getY(at);
+            frame.set([u, 1 - u, v, 1 - v], at * 4);
+        }
+    }
+    else {
+        for (let at = 0; at < count; at++) {
+            const corner = at % 3;
+            frame.set([corner === 0 ? 1 : 0, corner === 1 ? 1 : 0, corner === 2 ? 1 : 0, 1], at * 4);
+        }
+    }
+    geometry.setAttribute('frame', new BufferAttribute(frame, 4));
+    return geometry;
+};
 const channels = (color) => {
     const [red = 128, green = 128, blue = 128] = color.match(/[\d.]+/g)?.map(Number) ?? [];
     return [red / 255, green / 255, blue / 255];
@@ -135,6 +298,9 @@ export const threeDriver = (container, options = {}) => {
     let scale = 1;
     let positions = new Float32Array();
     const uniforms = {
+        bloom: { value: BLOOM.dark },
+        dark: { value: 1 },
+        light: { value: new Vector3(-0.4, 0.8, 0.45).normalize() },
         middle: { value: 1 },
         radius: { value: 1 },
         scale: { value: 1 },
@@ -154,18 +320,222 @@ export const threeDriver = (container, options = {}) => {
         vertexShader: LINE_VERTEX,
     });
     const points = new Points(new BufferGeometry(), new ShaderMaterial({
-        depthWrite: false,
         fragmentShader: FRAGMENT,
         transparent: true,
-        uniforms,
+        uniforms: { ...uniforms, halo: { value: 0 } },
         vertexShader: VERTEX,
     }));
     points.frustumCulled = false;
+    const halos = new Points(points.geometry, new ShaderMaterial({
+        depthWrite: false,
+        fragmentShader: HALO_FRAGMENT,
+        transparent: true,
+        uniforms: { ...uniforms, halo: { value: 1 } },
+        vertexShader: VERTEX,
+    }));
+    halos.frustumCulled = false;
+    halos.renderOrder = 1;
+    const shapeMaterial = new ShaderMaterial({
+        depthWrite: false,
+        fragmentShader: SHAPE_FRAGMENT,
+        side: DoubleSide,
+        transparent: true,
+        uniforms: {
+            dark: uniforms.dark,
+            middle: uniforms.middle,
+            radius: uniforms.radius,
+            steep: uniforms.steep,
+        },
+        vertexShader: SHAPE_VERTEX,
+    });
+    const solids = {
+        cube: {
+            geometry: framed(new BoxGeometry(1.5, 1.5, 1.5)),
+            mesh: undefined,
+            spots: [],
+        },
+        octahedron: {
+            geometry: framed(new OctahedronGeometry(1.15)),
+            mesh: undefined,
+            spots: [],
+        },
+    };
     const quiet = new LineSegments(new BufferGeometry(), lines(LINKS.dark.far));
     const lit = new LineSegments(new BufferGeometry(), lines(0.9));
     quiet.frustumCulled = false;
     lit.frustumCulled = false;
-    scene.add(quiet, lit, points);
+    const solid = new Mesh(new BufferGeometry(), new ShaderMaterial({
+        fragmentShader: SOLID_FRAGMENT,
+        polygonOffset: true,
+        polygonOffsetFactor: 2,
+        polygonOffsetUnits: 2,
+        side: DoubleSide,
+        uniforms: {
+            ground: { value: [0, 0, 0] },
+            ink: { value: [1, 1, 1] },
+            strength: { value: WASH.dark },
+        },
+        vertexShader: SOLID_VERTEX,
+    }));
+    solid.renderOrder = -1;
+    solid.visible = false;
+    solid.frustumCulled = false;
+    scene.add(solid, quiet, lit, points, halos);
+    let shapeFrame;
+    let surfaced = false;
+    let solidAt = Number.NaN;
+    const shapeSolid = () => {
+        const frame = shapeFrame;
+        if (!frame || !surfaced || frame.field.depth <= 0) {
+            solid.visible = false;
+            return;
+        }
+        if (solidAt === scale) {
+            solid.visible = true;
+            return;
+        }
+        solidAt = scale;
+        const { field } = frame;
+        const inset = frame.shell * 1.15;
+        let geometry = new BufferGeometry();
+        if (field.mesh) {
+            geometry.setAttribute('position', new BufferAttribute(field.mesh.corners.slice(), 3));
+            geometry.setIndex(new BufferAttribute(field.mesh.triangles, 1));
+            geometry = mergeVertices(geometry);
+            const place = geometry.getAttribute('position');
+            const step = Math.max(field.width, field.height, field.depth) / 64;
+            for (let at = 0; at < place.count; at++) {
+                const x = place.getX(at);
+                const y = place.getY(at);
+                const z = place.getZ(at);
+                const gx = field.distance(x + step, y, z) - field.distance(x - step, y, z);
+                const gy = field.distance(x, y + step, z) - field.distance(x, y - step, z);
+                const gz = field.distance(x, y, z + step) - field.distance(x, y, z - step);
+                const length = Math.hypot(gx, gy, gz) || 1;
+                place.setXYZ(at, x - (gx / length) * inset, y - (gy / length) * inset, z - (gz / length) * inset);
+            }
+        }
+        else {
+            const { corners, triangles } = surfaceOf(field, { at: -inset });
+            geometry.setAttribute('position', new BufferAttribute(corners, 3));
+            geometry.setIndex(new BufferAttribute(triangles, 1));
+        }
+        const place = geometry.getAttribute('position');
+        const { depth, height, width } = field;
+        for (let at = 0; at < place.count; at++) {
+            place.setXYZ(at, (frame.middle.x + (place.getX(at) - width / 2) * frame.scale) * scale, (frame.middle.y - (place.getY(at) - height / 2) * frame.scale) * scale, (frame.middle.z + (place.getZ(at) - depth / 2) * frame.scale) * scale);
+        }
+        geometry.computeVertexNormals();
+        solid.geometry.dispose();
+        solid.geometry = geometry;
+        solid.visible = true;
+        tieSurface();
+    };
+    let washFrom = new Int32Array();
+    let washWeight = new Float32Array();
+    let noteTints = new Float32Array();
+    const tieSurface = () => {
+        const place = solid.geometry.getAttribute('position');
+        if (!solid.visible || !place || ids.length === 0) {
+            washFrom = new Int32Array();
+            return;
+        }
+        const sample = Math.min(ids.length, 200);
+        const nearest = [];
+        for (let step = 0; step < sample; step++) {
+            const one = Math.floor((step * ids.length) / sample);
+            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)));
+                }
+            }
+            nearest.push(Math.sqrt(best));
+        }
+        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)}`;
+        for (let spot = 0; spot < ids.length; spot++) {
+            const k = key(positions[spot * 3], positions[spot * 3 + 1], positions[spot * 3 + 2]);
+            const list = cells.get(k);
+            if (list) {
+                list.push(spot);
+            }
+            else {
+                cells.set(k, [spot]);
+            }
+        }
+        washFrom = new Int32Array(place.count * WASH.notes).fill(-1);
+        washWeight = new Float32Array(place.count * WASH.notes);
+        const best = new Float32Array(WASH.notes);
+        const which = new Int32Array(WASH.notes);
+        for (let corner = 0; corner < place.count; corner++) {
+            const x = place.getX(corner);
+            const y = place.getY(corner);
+            const z = place.getZ(corner);
+            best.fill(Number.POSITIVE_INFINITY);
+            which.fill(-1);
+            const cx = Math.floor(x / reach);
+            const cy = Math.floor(y / reach);
+            const cz = Math.floor(z / reach);
+            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}`) ?? []) {
+                            const far = (positions[spot * 3] - x) ** 2 +
+                                (positions[spot * 3 + 1] - y) ** 2 +
+                                (positions[spot * 3 + 2] - z) ** 2;
+                            if (far < best[WASH.notes - 1]) {
+                                let slot = WASH.notes - 1;
+                                while (slot > 0 && best[slot - 1] > far) {
+                                    best[slot] = best[slot - 1];
+                                    which[slot] = which[slot - 1];
+                                    slot -= 1;
+                                }
+                                best[slot] = far;
+                                which[slot] = spot;
+                            }
+                        }
+                    }
+                }
+            }
+            for (let slot = 0; slot < WASH.notes; slot++) {
+                washFrom[corner * WASH.notes + slot] = which[slot];
+                const far = Math.sqrt(best[slot]) / reach;
+                washWeight[corner * WASH.notes + slot] = far < 1 ? (1 - far * far) ** 2 : 0;
+            }
+        }
+        washSurface();
+    };
+    const washSurface = () => {
+        const place = solid.geometry.getAttribute('position');
+        if (!place || washFrom.length !== place.count * WASH.notes || noteTints.length === 0) {
+            return;
+        }
+        const wash = new Float32Array(place.count * 4);
+        for (let corner = 0; corner < place.count; corner++) {
+            let red = 0;
+            let green = 0;
+            let blue = 0;
+            let total = 0;
+            for (let slot = 0; slot < WASH.notes; slot++) {
+                const spot = washFrom[corner * WASH.notes + slot];
+                const weight = washWeight[corner * WASH.notes + slot] * (noteTints[spot * 4 + 3] ?? 0);
+                if (spot < 0 || weight <= 0) {
+                    continue;
+                }
+                red += noteTints[spot * 4] * weight;
+                green += noteTints[spot * 4 + 1] * weight;
+                blue += noteTints[spot * 4 + 2] * weight;
+                total += weight;
+            }
+            if (total > 0) {
+                wash.set([red / total, green / total, blue / total, Math.min(total / WASH.full, 1)], corner * 4);
+            }
+        }
+        solid.geometry.setAttribute('wash', new BufferAttribute(wash, 4));
+    };
     const at = (spot) => new Vector3(positions[spot * 3], positions[spot * 3 + 1], positions[spot * 3 + 2]);
     const onScreen = (id) => {
         const spot = index.get(id);
@@ -189,14 +559,39 @@ export const threeDriver = (container, options = {}) => {
         };
     };
     const held = gesturesHeld(container);
-    const signals = signalsOver(container, onScreen);
+    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 nearOnScreen = (id) => {
         const spot = index.get(id);
         if (spot === undefined) {
             return undefined;
         }
         const depth = -at(spot).applyMatrix4(camera.matrixWorldInverse).z;
-        return uniforms.steep.value > 0 && depth > uniforms.middle.value ? undefined : onScreen(id);
+        return (uniforms.steep.value > 0 || solid.visible) && depth > uniforms.middle.value
+            ? undefined
+            : onScreen(id);
     };
     const groups = groupsOver(container, nearOnScreen);
     const names = namesOver(container, onScreen);
@@ -276,19 +671,91 @@ export const threeDriver = (container, options = {}) => {
         });
         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;
+        meshShapes(shapes, tints);
         dark = !isLight(looks.ground);
+        const solidUniforms = solid.material.uniforms;
+        solidUniforms.ground.value = channels(looks.ground);
+        solidUniforms.ink.value = channels(looks.ink);
+        solid.material.uniforms.strength.value = dark ? WASH.dark : WASH.light;
+        uniforms.bloom.value = dark ? BLOOM.dark : BLOOM.light;
+        uniforms.dark.value = dark ? 1 : 0;
         const blending = dark ? AdditiveBlending : NormalBlending;
-        points.material.blending = blending;
+        halos.material.blending = blending;
+        shapeMaterial.blending = blending;
+        shapeMaterial.needsUpdate = true;
         quiet.material.blending = blending;
         lit.material.blending = blending;
-        points.material.needsUpdate = true;
+        halos.material.needsUpdate = true;
         quiet.material.needsUpdate = true;
         lit.material.needsUpdate = true;
         paintLinks();
     };
+    let drawnSizes = new Float32Array();
+    const meshShapes = (shapes, tints) => {
+        for (const [code, solidShape] of [
+            [SHAPES.square, solids.cube],
+            [SHAPES.diamond, solids.octahedron],
+        ]) {
+            const spots = [];
+            shapes.forEach((shape, spot) => {
+                if (shape === code) {
+                    spots.push(spot);
+                }
+            });
+            solidShape.spots = spots;
+            if (!solidShape.mesh || solidShape.mesh.count !== spots.length) {
+                if (solidShape.mesh) {
+                    scene.remove(solidShape.mesh);
+                    solidShape.mesh.dispose();
+                }
+                solidShape.mesh =
+                    spots.length > 0
+                        ? new InstancedMesh(solidShape.geometry, shapeMaterial, spots.length)
+                        : undefined;
+                if (solidShape.mesh) {
+                    solidShape.mesh.frustumCulled = false;
+                    scene.add(solidShape.mesh);
+                }
+            }
+            const mesh = solidShape.mesh;
+            if (mesh) {
+                const tone = new Float32Array(spots.length * 4);
+                spots.forEach((spot, at) => {
+                    tone.set(tints.subarray(spot * 4, spot * 4 + 4), at * 4);
+                });
+                mesh.geometry = solidShape.geometry;
+                mesh.geometry.setAttribute('tone', new InstancedBufferAttribute(tone, 4));
+            }
+        }
+        placeShapes();
+    };
+    const turned = new Quaternion();
+    const placed = new Matrix4();
+    const where = new Vector3();
+    const scaled = new Vector3();
+    const placeShapes = () => {
+        for (const solidShape of [solids.cube, solids.octahedron]) {
+            const mesh = solidShape.mesh;
+            if (!mesh) {
+                continue;
+            }
+            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));
+                where.set(positions[spot * 3], positions[spot * 3 + 1], positions[spot * 3 + 2]);
+                scaled.setScalar(size);
+                mesh.setMatrixAt(at, placed.compose(where, turned, scaled));
+            });
+            mesh.instanceMatrix.needsUpdate = true;
+        }
+    };
     const paintLinks = () => {
         if (!looks) {
             return;
@@ -353,6 +820,9 @@ export const threeDriver = (container, options = {}) => {
         points.geometry.computeBoundingSphere();
         hovered = undefined;
         paint();
+        if (solid.visible) {
+            tieSurface();
+        }
     };
     const toWorld = (node) => [
         node.x * scale,
@@ -362,6 +832,8 @@ export const threeDriver = (container, options = {}) => {
     let morph;
     let layout;
     const cue = () => {
+        camera.updateMatrixWorld();
+        uniforms.light.value.copy(LIGHT).transformDirection(camera.matrixWorldInverse);
         const distance = camera.position.distanceTo(controls.target);
         const { center, radius } = points.geometry.boundingSphere ?? {
             center: controls.target,
@@ -446,6 +918,9 @@ export const threeDriver = (container, options = {}) => {
                 now - handled > REST;
         controls.update();
         cue();
+        if (solids.cube.mesh || solids.octahedron.mesh) {
+            placeShapes();
+        }
         renderer.render(scene, camera);
         groups.draw();
         drawNames();
@@ -483,9 +958,14 @@ export const threeDriver = (container, options = {}) => {
         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;
+                return (id !== undefined &&
+                    looks?.node(id).hidden !== true &&
+                    one.distance < front + uniforms.unit.value * 3);
             });
             const next = hit?.index;
             if (next !== hovered) {
@@ -520,6 +1000,7 @@ export const threeDriver = (container, options = {}) => {
             });
             moved = false;
             load(nodes, next, places);
+            shapeSolid();
             fitAll(0);
         },
         fit: (fitted, animate) => {
@@ -627,8 +1108,13 @@ export const threeDriver = (container, options = {}) => {
                 layout = undefined;
             };
         },
-        shape: (place) => {
-            uniforms.steep.value = place === 'surface' ? 1 : 0;
+        shape: (place, frame) => {
+            surfaced = place === 'surface';
+            if (frame !== shapeFrame) {
+                shapeFrame = frame;
+                solidAt = Number.NaN;
+            }
+            uniforms.steep.value = surfaced && !frame ? 1 : 0;
         },
         signal: (from, to, colors, animate) => {
             signals.signal(from, to, colors, animate);
@@ -642,7 +1128,13 @@ export const threeDriver = (container, options = {}) => {
             canvas.removeEventListener('pointermove', hover);
             canvas.removeEventListener('pointerleave', leave);
             controls.dispose();
-            for (const object of [points, quiet, lit]) {
+            for (const solidShape of [solids.cube, solids.octahedron]) {
+                solidShape.mesh?.dispose();
+                solidShape.geometry.dispose();
+            }
+            shapeMaterial.dispose();
+            halos.material.dispose();
+            for (const object of [points, quiet, lit, solid]) {
                 object.geometry.dispose();
                 object.material.dispose();
             }