@fusion.dev/helix-graph 0.123.0 → 0.124.0

package/README.md

@@ -75,11 +75,15 @@ socket.addEventListener('message', ({ data }) => {
 ```
 
 **`frame.signal(from, to, { tone })` shows something passing between two
-notes**: a message, a request, a payment. It is drawn as a pulse of light
-traveling from one to the other, turning from the first note's color to the
-second's, or in the tone's color where it has one, over the graph and without
-redrawing it, so a busy feed costs a dot each. A reader who asks for less motion
-sees the link lit for a moment instead.
+notes**: a message, a request, a payment. It is drawn as a comet traveling
+from one to the other along a gently bowed path, its tail tapering and turning
+from the first note's color to the second's, or in the tone's color where it
+has one. A small ring spreads from the note it leaves, and the note it reaches
+brightens and ripples. A reply on the same link bows the other way, so the two
+do not run over each other, and in three dimensions the path arcs over the
+shape. It is drawn over the graph without redrawing it, so a busy feed costs a
+few strokes each. A reader who asks for less motion sees the path lit for a
+moment instead.
 
 ```js
 frame.signal('Checkout', 'Payments', { tone: 'success' })
@@ -108,7 +112,15 @@ frame.nodes = [
 ```
 
 `sigmaDriver(sigma, { material, shape, emphasis })` sets what a note is drawn as
-where it does not say. The selected note keeps its own color and is told apart by
+where it does not say. A note without a material is matte, lit across so it
+reads as round. In three dimensions every note is a solid: a circle is a
+sphere, worked out for each pixel and written at its depth, so notes meet the
+shape and each other as solids do; a square is a cube and a diamond an
+octahedron. On a dark ground a sphere is an orb of energy, a dark glassy body
+with a glowing rim and a hot point at its middle, and on a light ground frosted
+glass; a cube or an octahedron is a hologram, faint faces with fine edges of
+light. Each catches a glint from a light fixed in the scene, so the glint moves
+as the reader turns the graph. The selected note keeps its own color and is told apart by
 a ring and a glow in that color.
 
 **A note without a `size` is as large as it is connected**, so hubs read at a
@@ -220,6 +232,7 @@ makes one from what a page has, and a field is a stencil itself:
 | `inflate(field, { depth, roundness })` | A solid puffed out of a flat field, as a cushion is, cut through where the flat shape has a hole |
 | `sphere`, `torus`, `box` | Solids measured exactly from their formulas |
 | `onSphere(field, { radius, thickness })` | A flat map wrapped round a ball, as a world map is round a globe |
+| `surfaceOf(field, { at, cells })` | The surface of a solid as triangles, to draw or to save as a model |
 
 ```js
 const stencil = { ...(await shapeFromModel('/models/brain.glb')), place: 'surface' }
@@ -254,12 +267,16 @@ connectGraph(frame, threeDriver(box), {
 
 - **A solid stencil draws the notes in the solid**: all through it, or, with
   `place: 'surface'`, in a thin shell just inside its edge, which is how a
-  solid reads as the thing it is shaped like. Each group takes one piece of
-  the surface, measured across it, so a group on a knot is a stretch of its
-  tube, and each hub's notes a patch around it.
-- **On a surface, the shape itself is drawn** in the ground's color just
-  inside the notes, so what is behind it is hidden, and the pointer finds
-  only the notes in front.
+  solid reads as the thing it is shaped like. **Each group is given a piece
+  of the shape of its own**, as many places as it has notes, and each hub a
+  piece of its group's, so no group is cut in two: on a knot, a group is a
+  stretch of its tube, and on a brain, a region of it.
+- **On a surface, the shape itself is drawn** just inside the notes, so what
+  is behind it is hidden and the pointer finds only the notes in front.
+  **Each region is washed in its notes' color**, a translucent stain that
+  fades into the next region's, and glows in that color at the edge turning
+  away. It is lit faintly from above, and a model's own surface is drawn,
+  with every fold the field's cells are too coarse to hold.
 - **Without a stencil, a layout runs in three dimensions** with d3-force-3d.
 - **Dragging turns the graph, and the wheel and a pinch bring it nearer.** It
   turns slowly by itself while nobody is handling it, and never for a reader
@@ -284,7 +301,7 @@ connectGraph(frame, threeDriver(box), {
 | `@fusion.dev/helix-graph/sigma` | `sigmaDriver(sigma, options)` |
 | `@fusion.dev/helix-graph/cosmos` | `cosmosDriver(graph, box, options)` |
 | `@fusion.dev/helix-graph/three` | `threeDriver(box, options)` |
-| `@fusion.dev/helix-graph/shapes` | `shapeFromModel`, `shapeFromTriangles`, `shapeFromSvg`, `shapeFromImage`, `shapeFromPath`, `shapeFromInside`, `inflate`, `sphere`, `torus`, `box`, `onSphere`, and the `ShapeField` type |
+| `@fusion.dev/helix-graph/shapes` | `shapeFromModel`, `shapeFromTriangles`, `shapeFromSvg`, `shapeFromImage`, `shapeFromPath`, `shapeFromInside`, `inflate`, `sphere`, `torus`, `box`, `onSphere`, `surfaceOf`, and the `ShapeField` type |
 
 **Sigma, cosmos.gl, three.js and d3-force-3d are optional peers, and graphology is the page's.** Each
 driver types its renderer by the calls it makes on it, so a page brings

package/dist/connect-graph/arrange.d.ts

@@ -4,6 +4,16 @@ export interface ArrangedNode {
     group?: string | undefined;
     id: string;
 }
+/**
+ * The hub each note hangs from, and how connected each note is: a note
+ * hangs from its most connected neighbor in its group, where that neighbor
+ * is more connected than it is, and the note at the end of the chain is the
+ * hub. A note nothing is more connected than is its own hub.
+ */
+export declare const hubsOf: (nodes: readonly ArrangedNode[], links: readonly SeedLink[]) => {
+    hubOf: (id: string) => string;
+    rank: (id: string) => number;
+};
 /**
  * Places for every note from the graph's structure alone, with no layout to
  * wait for: **each group around a circle, or a sphere in a solid, each hub in its group, and each

package/dist/connect-graph/arrange.js

@@ -30,7 +30,7 @@ const plus = (one, other) => ({
     y: one.y + other.y,
     ...(one.z === undefined && other.z === undefined ? {} : { z: (one.z ?? 0) + (other.z ?? 0) }),
 });
-export const arrangeByGroup = (nodes, links, { solid = false } = {}) => {
+export const hubsOf = (nodes, links) => {
     const groupOf = new Map(nodes.map((node) => [node.id, node.group ?? '']));
     const degree = new Map();
     const neighbors = new Map();
@@ -75,6 +75,11 @@ export const arrangeByGroup = (nodes, links, { solid = false } = {}) => {
         }
         return at;
     };
+    return { hubOf, rank };
+};
+export const arrangeByGroup = (nodes, links, { solid = false } = {}) => {
+    const groupOf = new Map(nodes.map((node) => [node.id, node.group ?? '']));
+    const { hubOf, rank } = hubsOf(nodes, links);
     const groups = new Map();
     for (const { id } of nodes) {
         const group = groupOf.get(id);

package/dist/connect-graph/connect-graph.js

@@ -1,9 +1,14 @@
 import { HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, isRtl, watchTheme, } from '@fusion.dev/helix-core';
-import { arrangeByGroup } from './arrange.js';
+import { arrangeByGroup, hubsOf } from './arrange.js';
 import { diffGraph, isEmpty, linkKey, } from './diff.js';
 import { graphColorsFrom, looksOf, toneColor, } from './looks.js';
 import { seedPositions } from './seed.js';
 import { fieldOf, fitInStencil } from './stencil.js';
+const clustersOf = (nodes, links) => {
+    const groupOf = new Map(nodes.map((node) => [node.id, node.group ?? '']));
+    const { hubOf } = hubsOf(nodes, links);
+    return (id) => [groupOf.get(id) ?? '', hubOf(id)];
+};
 const viewportOf = (frame) => {
     const box = (frame.shadowRoot?.querySelector('[part="viewport"]') ?? frame).getBoundingClientRect();
     return { height: box.height, width: box.width };
@@ -98,7 +103,7 @@ export const connectGraph = (frame, driver, options = {}) => {
         const fit = options.stencil && ids.size > 0 && unplaced.size === ids.size
             ? fitInStencil(arrangeByGroup(nodes, [...nextLinks.values()], {
                 solid: fieldOf(options.stencil).depth > 0,
-            }), options.stencil)
+            }), options.stencil, { clustersOf: clustersOf(nodes, [...nextLinks.values()]) })
             : undefined;
         const shaped = fit?.positions;
         if (fit?.frame) {

package/dist/connect-graph/shape-field.d.ts

@@ -14,6 +14,16 @@ export interface ShapeField {
     distance(x: number, y: number, z?: number): number;
     /** How tall the box is. Its y points down, as an SVG's does. */
     readonly height: number;
+    /**
+     * The surface the field was read from, where it was read from one, in the
+     * box's units: corners three numbers each, and triangles three corners
+     * each. A renderer draws it in place of a surface it would make from the
+     * field, since it holds every detail the field's cells are too coarse for.
+     */
+    readonly mesh?: {
+        corners: Float32Array;
+        triangles: Uint32Array;
+    } | undefined;
     /** How wide the box is. */
     readonly width: number;
 }

package/dist/connect-graph/stencil.d.ts

@@ -67,7 +67,14 @@ export interface StencilFrame {
     shell: number;
 }
 /** `fitToStencil`, saying where it put the stencil's box as well, where it fitted the places at all. */
-export declare const fitInStencil: (positions: ReadonlyMap<string, GraphPoint>, stencil: GraphStencil) => {
+export declare const fitInStencil: (positions: ReadonlyMap<string, GraphPoint>, stencil: GraphStencil, { clustersOf, }?: {
+    /**
+     * The clusters a note is in, broadest first, such as its group and then
+     * its hub. Each cluster is given a piece of a solid of its own, as many
+     * places as it has notes, so no cluster is cut in two.
+     */
+    clustersOf?: ((id: string) => readonly string[]) | undefined;
+}) => {
     frame?: StencilFrame | undefined;
     positions: Map<string, GraphPoint>;
 };

package/dist/connect-graph/stencil.js

@@ -95,7 +95,7 @@ const nested = (items, keys) => {
     return out;
 };
 export const fitToStencil = (positions, stencil) => fitInStencil(positions, stencil).positions;
-export const fitInStencil = (positions, stencil) => {
+export const fitInStencil = (positions, stencil, { clustersOf, } = {}) => {
     const notes = [...positions].map(([id, at]) => ({ at, id }));
     if (notes.length === 0) {
         return { positions: new Map() };
@@ -175,7 +175,8 @@ export const fitInStencil = (positions, stencil) => {
             const ordered = [...places].sort((one, other) => (targets[one][axis] ?? 0) - (targets[other][axis] ?? 0));
             return [ordered.slice(0, first), ordered.slice(first)];
         };
-        const halve = (ours, theirs) => {
+        const keysOf = new Map(notes.map((note) => [note.id, clustersOf?.(note.id) ?? []]));
+        const halve = (ours, theirs, level = 0) => {
             if (ours.length === 1) {
                 fitted.set(ours[0].id, targets[theirs[0]]);
                 return;
@@ -183,12 +184,58 @@ export const fitInStencil = (positions, stencil) => {
             if (ours.length === 0) {
                 return;
             }
+            const clusters = new Map();
+            for (const note of ours) {
+                const key = keysOf.get(note.id)?.[level];
+                if (key !== undefined) {
+                    const list = clusters.get(key);
+                    if (list) {
+                        list.push(note);
+                    }
+                    else {
+                        clusters.set(key, [note]);
+                    }
+                }
+            }
+            if (clusters.size === 1) {
+                halve(ours, theirs, level + 1);
+                return;
+            }
+            if (clusters.size > 1 &&
+                [...clusters.values()].reduce((sum, list) => sum + list.length, 0) === ours.length) {
+                const middles = [...clusters.values()].map((list) => ({
+                    list,
+                    middle: {
+                        x: list.reduce((sum, note) => sum + note.at.x, 0) / list.length,
+                        y: list.reduce((sum, note) => sum + note.at.y, 0) / list.length,
+                        z: list.reduce((sum, note) => sum + (note.at.z ?? 0), 0) / list.length,
+                    },
+                }));
+                const axis = widest(middles.map((one) => one.middle));
+                middles.sort((one, other) => one.middle[axis] - other.middle[axis]);
+                let cut = 1;
+                let count = 0;
+                let best = Number.POSITIVE_INFINITY;
+                let first = 0;
+                for (let at = 0; at < middles.length - 1; at++) {
+                    count += middles[at].list.length;
+                    if (Math.abs(count - ours.length / 2) < best) {
+                        best = Math.abs(count - ours.length / 2);
+                        cut = at + 1;
+                        first = count;
+                    }
+                }
+                const [near, rest] = halveTargets(theirs, first);
+                halve(middles.slice(0, cut).flatMap((one) => one.list), near, level);
+                halve(middles.slice(cut).flatMap((one) => one.list), rest, level);
+                return;
+            }
             const mine = widest(ours.map((note) => note.at));
             ours.sort((one, other) => (one.at[mine] ?? 0) - (other.at[mine] ?? 0));
             const half = Math.floor(ours.length / 2);
             const [near, rest] = halveTargets(theirs, half);
-            halve(ours.slice(0, half), near);
-            halve(ours.slice(half), rest);
+            halve(ours.slice(0, half), near, level);
+            halve(ours.slice(half), rest, level);
         };
         halve([...notes], targets.map((_, at) => at));
         return { frame: { field, middle, scale, shell: thickness }, positions: fitted };

package/dist/overlay/overlay.d.ts

@@ -7,6 +7,11 @@ export type OnScreen = (id: string) => {
     x: number;
     y: number;
 } | undefined;
+/** A point and how to bend toward it: the control point of a curve on screen. */
+export type Bend = (from: string, to: string) => {
+    x: number;
+    y: number;
+} | undefined;
 /** Whether an `rgb()` color is light, which a light ink says the ground is dark. */
 export declare const isLight: (color: string) => boolean;
 /** Eases in and out, so a signal leaves and arrives gently. */
@@ -24,7 +29,7 @@ export interface Box {
  * over ten thousand notes draw ten dots. It draws only while something is in
  * flight, and takes no pointer, so a press reaches the note under it.
  */
-export declare const signalsOver: (container: HTMLElement, onScreen: OnScreen) => {
+export declare const signalsOver: (container: HTMLElement, onScreen: OnScreen, bend?: Bend) => {
     look: (looks: GraphLooks) => void;
     signal: (from: string, to: string, colors: {
         from: string;

package/dist/overlay/overlay.js

@@ -2,68 +2,111 @@ import { mixRgb } from '../connect-graph/looks.js';
 const SPEED = 340;
 const QUICKEST = 450;
 const SLOWEST = 1400;
-const ARRIVAL = 380;
+const ARRIVAL = 520;
 const FLYING = 400;
 const withAlpha = (color, alpha) => {
     const [red = 128, green = 128, blue = 128] = color.match(/[\d.]+/g)?.map(Number) ?? [];
     return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 };
-const TAIL = 110;
-const pulse = (context, leaves, arrives, from, to, along, through, glowing) => {
-    const strength = glowing ? 1.3 : 1;
+const TAIL = 120;
+const PIECES = 14;
+const BOW = 0.16;
+const BOW_MOST = 90;
+const SPARK = 0.22;
+const on = (a, c, b, t) => {
+    const u = 1 - t;
+    return {
+        x: u * u * a.x + 2 * u * t * c.x + t * t * b.x,
+        y: u * u * a.y + 2 * u * t * c.y + t * t * b.y,
+    };
+};
+const bowed = (from, to) => {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const length = Math.hypot(dx, dy) || 1;
+    const bow = Math.min(length * BOW, BOW_MOST) * 2;
+    return {
+        x: (from.x + to.x) / 2 - (dy / length) * bow,
+        y: (from.y + to.y) / 2 + (dx / length) * bow,
+    };
+};
+const bounded = (from, to, toward) => {
+    const middle = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+    const far = Math.hypot(toward.x - middle.x, toward.y - middle.y);
+    const most = Math.max(Math.hypot(to.x - from.x, to.y - from.y) * 0.9, 12);
+    if (far <= most) {
+        return toward;
+    }
+    return {
+        x: middle.x + ((toward.x - middle.x) * most) / far,
+        y: middle.y + ((toward.y - middle.y) * most) / far,
+    };
+};
+const trace = (context, a, c, b) => {
+    context.beginPath();
+    context.moveTo(a.x, a.y);
+    context.quadraticCurveTo(c.x, c.y, b.x, b.y);
+};
+const comet = (context, leaves, arrives, from, bend, to, along, through, glowing) => {
+    const strength = glowing ? 1.25 : 1;
+    const length = Math.hypot(bend.x - from.x, bend.y - from.y) + Math.hypot(to.x - bend.x, to.y - bend.y) || 1;
     const color = mixRgb(leaves, arrives, along);
-    const length = Math.hypot(to.x - from.x, to.y - from.y) || 1;
-    const head = { x: from.x + (to.x - from.x) * along, y: from.y + (to.y - from.y) * along };
-    const behind = Math.max(along - TAIL / length, 0);
-    const tail = { x: from.x + (to.x - from.x) * behind, y: from.y + (to.y - from.y) * behind };
     context.lineCap = 'round';
-    context.globalAlpha = 0.14 * Math.sin(Math.PI * through);
     const line = context.createLinearGradient(from.x, from.y, to.x, to.y);
-    line.addColorStop(0, leaves);
-    line.addColorStop(1, arrives);
+    line.addColorStop(0, withAlpha(leaves, 0.16 * Math.sin(Math.PI * through)));
+    line.addColorStop(1, withAlpha(arrives, 0.16 * Math.sin(Math.PI * through)));
     context.strokeStyle = line;
     context.lineWidth = 1;
-    context.beginPath();
-    context.moveTo(from.x, from.y);
-    context.lineTo(to.x, to.y);
-    context.stroke();
-    const fade = context.createLinearGradient(tail.x, tail.y, head.x, head.y);
-    const back = mixRgb(leaves, arrives, behind);
-    fade.addColorStop(0, withAlpha(back, 0));
-    fade.addColorStop(0.6, withAlpha(mixRgb(back, color, 0.6), 0.25));
-    fade.addColorStop(1, withAlpha(color, 0.95));
-    context.strokeStyle = fade;
-    context.shadowColor = color;
-    context.shadowBlur = 8;
-    context.globalAlpha = Math.min(0.35 * strength, 1);
-    context.lineWidth = 3.5;
-    context.beginPath();
-    context.moveTo(tail.x, tail.y);
-    context.lineTo(head.x, head.y);
-    context.stroke();
-    context.shadowBlur = 0;
-    context.globalAlpha = 1;
-    context.lineWidth = 1.4 * strength;
+    trace(context, from, bend, to);
     context.stroke();
-    const reach = 5 * strength;
-    const light = context.createRadialGradient(head.x, head.y, 0, head.x, head.y, reach);
-    light.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
-    light.addColorStop(0.4, withAlpha(color, 0.75));
+    const reach = Math.min(TAIL / length, along);
+    context.lineCap = 'butt';
+    let behind = on(from, bend, to, along - reach);
+    for (let piece = 1; piece <= PIECES; piece++) {
+        const share = piece / PIECES;
+        const t = along - reach * (1 - share);
+        const ahead = on(from, bend, to, t);
+        context.strokeStyle = withAlpha(mixRgb(leaves, arrives, t), (glowing ? 0.85 : 1) * share * share);
+        context.lineWidth = (0.4 + 2.2 * share) * strength;
+        context.beginPath();
+        context.moveTo(behind.x, behind.y);
+        context.lineTo(ahead.x, ahead.y);
+        context.stroke();
+        behind = ahead;
+    }
+    const head = on(from, bend, to, along);
+    const bloom = 9 * strength;
+    const light = context.createRadialGradient(head.x, head.y, 0, head.x, head.y, bloom);
+    light.addColorStop(0, glowing ? 'rgba(255, 255, 255, 0.95)' : withAlpha(color, 1));
+    light.addColorStop(0.18, glowing ? withAlpha(mixRgb(color, 'rgb(255, 255, 255)', 0.5), 0.9) : withAlpha(color, 0.85));
+    light.addColorStop(0.45, withAlpha(color, 0.35));
     light.addColorStop(1, withAlpha(color, 0));
     context.fillStyle = light;
     context.beginPath();
-    context.arc(head.x, head.y, reach, 0, Math.PI * 2);
+    context.arc(head.x, head.y, bloom, 0, Math.PI * 2);
     context.fill();
 };
+const spark = (context, color, at, gone) => {
+    context.strokeStyle = withAlpha(color, 0.6 * (1 - gone) ** 2);
+    context.lineWidth = 1.2;
+    context.beginPath();
+    context.arc(at.x, at.y, at.radius + 2 + 8 * ease(gone), 0, Math.PI * 2);
+    context.stroke();
+};
 const arrive = (context, color, at, gone) => {
-    const reach = at.radius + 6;
+    const reach = at.radius + 7;
     const glow = context.createRadialGradient(at.x, at.y, at.radius * 0.4, at.x, at.y, reach);
-    glow.addColorStop(0, withAlpha(color, 0.5 * (1 - gone) ** 2));
+    glow.addColorStop(0, withAlpha(color, 0.55 * (1 - gone) ** 2));
     glow.addColorStop(1, withAlpha(color, 0));
     context.fillStyle = glow;
     context.beginPath();
     context.arc(at.x, at.y, reach, 0, Math.PI * 2);
     context.fill();
+    context.strokeStyle = withAlpha(color, 0.7 * (1 - gone) ** 1.5);
+    context.lineWidth = 1.5 * (1 - gone) + 0.5;
+    context.beginPath();
+    context.arc(at.x, at.y, at.radius + 3 + 16 * ease(gone), 0, Math.PI * 2);
+    context.stroke();
 };
 export const isLight = (color) => {
     const [red = 0, green = 0, blue = 0] = color.match(/[\d.]+/g)?.map(Number) ?? [];
@@ -91,7 +134,7 @@ const nameGroups = (context, groups, looks, at) => {
                 points.push(point);
             }
         }
-        if (count < 2) {
+        if (count < Math.max(2, group.ids.length * 0.3)) {
             continue;
         }
         x /= count;
@@ -159,7 +202,7 @@ const fresh = (canvas, container) => {
     context.clearRect(0, 0, width, height);
     return context;
 };
-export const signalsOver = (container, onScreen) => {
+export const signalsOver = (container, onScreen, bend) => {
     let overlay;
     let flights = [];
     let flying = 0;
@@ -178,16 +221,20 @@ export const signalsOver = (container, onScreen) => {
             if (!from || !to) {
                 return false;
             }
-            flight.crossing ??= Math.min(Math.max((Math.hypot(to.x - from.x, to.y - from.y) / SPEED) * 1000, QUICKEST), SLOWEST);
+            flight.crossing ??= Math.min(Math.max(((Math.hypot(to.x - from.x, to.y - from.y) * 1.08) / SPEED) * 1000, QUICKEST), SLOWEST);
             const crossing = flight.crossing;
             const gone = (now - flight.started) / crossing;
             if (gone >= 1 + ARRIVAL / crossing) {
                 return false;
             }
+            const toward = bounded(from, to, bend?.(flight.from, flight.to) ?? bowed(from, to));
             context.save();
             if (gone < 1) {
                 if (flight.animate) {
-                    pulse(context, flight.leaves, flight.arrives, from, to, ease(gone), gone, glowing);
+                    comet(context, flight.leaves, flight.arrives, from, toward, to, ease(gone), gone, glowing);
+                    if (gone < SPARK) {
+                        spark(context, flight.leaves, from, gone / SPARK);
+                    }
                 }
                 else {
                     const line = context.createLinearGradient(from.x, from.y, to.x, to.y);
@@ -196,9 +243,7 @@ export const signalsOver = (container, onScreen) => {
                     context.globalAlpha = 1 - gone;
                     context.strokeStyle = line;
                     context.lineWidth = 2;
-                    context.beginPath();
-                    context.moveTo(from.x, from.y);
-                    context.lineTo(to.x, to.y);
+                    trace(context, from, toward, to);
                     context.stroke();
                 }
             }

package/dist/shapes/index.d.ts

@@ -1,4 +1,5 @@
 export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, type ShapeField, } from '../connect-graph/shape-field.js';
+export { surfaceOf } from '../three/surface.js';
 export { type ImageOptions, shapeFromImage, shapeFromSvg } from './flat.js';
 export { shapeFromModel } from './model.js';
 export { box, onSphere, sphere, torus } from './solids.js';

package/dist/shapes/index.js

@@ -1,4 +1,5 @@
 export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, } from '../connect-graph/shape-field.js';
+export { surfaceOf } from '../three/surface.js';
 export { shapeFromImage, shapeFromSvg } from './flat.js';
 export { shapeFromModel } from './model.js';
 export { box, onSphere, sphere, torus } from './solids.js';

package/dist/shapes/triangles.js

@@ -70,9 +70,23 @@ export const shapeFromTriangles = (positions, index, { resolution = SOLID } = {}
             }
         }
     }
-    return fieldFromCells(cells, [nx, ny, nz], cell, {
+    const meshCorners = new Float32Array(corners * 3);
+    for (let at = 0; at < corners; at++) {
+        meshCorners[at * 3] = positions[at * 3] - origin[0];
+        meshCorners[at * 3 + 1] = high[1] + cell - positions[at * 3 + 1];
+        meshCorners[at * 3 + 2] = positions[at * 3 + 2] - origin[2];
+    }
+    const meshTriangles = index
+        ? Uint32Array.from({ length: triangles * 3 }, (_, at) => index[at])
+        : Uint32Array.from({ length: triangles * 3 }, (_, at) => at);
+    const field = fieldFromCells(cells, [nx, ny, nz], cell, {
         depth: nz * cell,
         height: ny * cell,
         width: nx * cell,
     });
+    return {
+        ...field,
+        distance: field.distance,
+        mesh: { corners: meshCorners, triangles: meshTriangles },
+    };
 };

package/dist/sigma/node-program.js

@@ -110,6 +110,11 @@ void main(void) {
     color = mix(color, vec3(1.0), rim * 0.14);
     alpha = 0.86;
   } else {
+    /* Flat, which unset is: matte, with a gentle fall of light across it so
+       a note reads as round, brighter toward its middle the larger it is
+       drawn, and a fine rim a shade darker so notes that touch stay two. */
+    color *= mix(0.82, 1.1, lit);
+    color = mix(color, min(color * 1.25, vec3(1.0)), (1.0 - smoothstep(0.0, 0.8, length(p - vec2(-0.25, 0.3)))) * 0.35 * drawn);
     color = mix(color, color * 0.72, rim * 0.6);
   }
 

package/dist/three/surface.d.ts

@@ -7,7 +7,12 @@ import type { ShapeField } from '../connect-graph/shape-field.js';
  * each edge it crosses. Smooth enough to hide what is behind a shape, and
  * made in a moment.
  */
-export declare const surfaceOf: (field: ShapeField, at?: number) => {
+export declare const surfaceOf: (field: ShapeField, { at, cells, }?: {
+    /** The distance the surface is drawn at: below zero inside the shape. 0 by default. */
+    at?: number | undefined;
+    /** How many cells the field is read in along its longest side. 72 by default. */
+    cells?: number | undefined;
+}) => {
     corners: Float32Array;
     triangles: Uint32Array;
 };

package/dist/three/surface.js

@@ -1,7 +1,7 @@
 const CELLS = 72;
-export const surfaceOf = (field, at = 0) => {
+export const surfaceOf = (field, { at = 0, cells = CELLS, } = {}) => {
     const { depth, height, width } = field;
-    const cell = Math.max(width, height, depth) / CELLS;
+    const cell = Math.max(width, height, depth) / cells;
     const nx = Math.ceil(width / cell) + 3;
     const ny = Math.ceil(height / cell) + 3;
     const nz = Math.ceil(depth / cell) + 3;

package/dist/three/three-driver.js

@@ -1,6 +1,7 @@
 import { forceCenter, forceLink, forceManyBody, forceSimulation, } from 'd3-force-3d';
-import { AdditiveBlending, BufferAttribute, BufferGeometry, DoubleSide, LineSegments, Mesh, 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 };
@@ -11,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;
@@ -23,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;
@@ -32,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;
@@ -51,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 = `
@@ -94,29 +197,64 @@ void main() {
 }
 `;
 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() {
-  /* The ground's color, a breath of ink at the edge turning away, so the
-     shape is felt and not seen: the notes on it are what is drawn. */
-  float edge = 1.0 - abs(dot(normalize(vNormal), normalize(vView)));
-  gl_FragColor = vec4(mix(ground, ink, 0.16 * pow(edge, 2.0)), 1.0);
+  /* **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];
@@ -160,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 },
@@ -179,13 +320,46 @@ 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;
@@ -196,13 +370,17 @@ export const threeDriver = (container, options = {}) => {
         polygonOffsetFactor: 2,
         polygonOffsetUnits: 2,
         side: DoubleSide,
-        uniforms: { ground: { value: [0, 0, 0] }, ink: { value: [1, 1, 1] } },
+        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);
+    scene.add(solid, quiet, lit, points, halos);
     let shapeFrame;
     let surfaced = false;
     let solidAt = Number.NaN;
@@ -217,21 +395,146 @@ export const threeDriver = (container, options = {}) => {
             return;
         }
         solidAt = scale;
-        const { corners, triangles } = surfaceOf(frame.field, -frame.shell * 0.6);
-        const { depth, height, width } = frame.field;
-        for (let at = 0; at < corners.length; at += 3) {
-            corners[at] = (frame.middle.x + (corners[at] - width / 2) * frame.scale) * scale;
-            corners[at + 1] =
-                (frame.middle.y - (corners[at + 1] - height / 2) * frame.scale) * scale;
-            corners[at + 2] =
-                (frame.middle.z + (corners[at + 2] - depth / 2) * frame.scale) * 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 = new BufferGeometry();
-        solid.geometry.setAttribute('position', new BufferAttribute(corners, 3));
-        solid.geometry.setIndex(new BufferAttribute(triangles, 1));
-        solid.geometry.computeVertexNormals();
+        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) => {
@@ -256,7 +559,30 @@ 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) {
@@ -345,22 +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;
@@ -425,6 +820,9 @@ export const threeDriver = (container, options = {}) => {
         points.geometry.computeBoundingSphere();
         hovered = undefined;
         paint();
+        if (solid.visible) {
+            tieSurface();
+        }
     };
     const toWorld = (node) => [
         node.x * scale,
@@ -434,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,
@@ -518,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();
@@ -725,6 +1128,12 @@ export const threeDriver = (container, options = {}) => {
             canvas.removeEventListener('pointermove', hover);
             canvas.removeEventListener('pointerleave', leave);
             controls.dispose();
+            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();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-graph",
   "description": "Connects the Helix Graph frame to a graph renderer: Sigma.js, cosmos.gl, three.js, or a driver of your own.",
-  "version": "0.123.0",
+  "version": "0.124.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,12 +47,12 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.123.0"
+    "@fusion.dev/helix-core": "0.124.0"
   },
   "devDependencies": {
     "@cosmos.gl/graph": "^3.4.2",
-    "@fusion.dev/helix-headless": "0.123.0",
-    "@fusion.dev/helix-testing": "0.123.0",
+    "@fusion.dev/helix-headless": "0.124.0",
+    "@fusion.dev/helix-testing": "0.124.0",
     "@types/bun": "^1.3.0",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",