@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/threevolume/VolumeIsoSurface.js

@@ -0,0 +1,177 @@
+import { IsoAlgorithm } from "./volumeEnums.js";
+import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
+import { edgeTable, triTable } from "three/addons/objects/MarchingCubes.js";
+// src/charts/threevolume/VolumeIsoSurface.ts
+var CORNERS = [
+	[
+		0,
+		0,
+		0
+	],
+	[
+		1,
+		0,
+		0
+	],
+	[
+		1,
+		1,
+		0
+	],
+	[
+		0,
+		1,
+		0
+	],
+	[
+		0,
+		0,
+		1
+	],
+	[
+		1,
+		0,
+		1
+	],
+	[
+		1,
+		1,
+		1
+	],
+	[
+		0,
+		1,
+		1
+	]
+];
+var EDGES = [
+	[0, 1],
+	[1, 2],
+	[3, 2],
+	[0, 3],
+	[4, 5],
+	[5, 6],
+	[7, 6],
+	[4, 7],
+	[0, 4],
+	[1, 5],
+	[2, 6],
+	[3, 7]
+];
+/** Extracts a level set from a `VolumeGrid` as a smooth-shaded `BufferGeometry`. */
+var VolumeIsoSurface = class {
+	static geometry(grid, level, algorithm = IsoAlgorithm.MarchingCubes) {
+		const points = algorithm === IsoAlgorithm.SurfaceNets ? this.nets(grid, level) : this.cubes(grid, level);
+		return this.shade(grid, points);
+	}
+	/** Lorensen–Cline marching cubes: one triangle fan per sign-changing cell. Returns grid coordinates. */
+	static cubes(grid, level) {
+		const out = [];
+		const edge = [];
+		const { nx, ny, nz } = grid;
+		for (let k = 0; k < nz - 1; k++) for (let j = 0; j < ny - 1; j++) for (let i = 0; i < nx - 1; i++) {
+			const corner = CORNERS.map(([a, b, c]) => grid.at(i + a, j + b, k + c));
+			let code = 0;
+			corner.forEach((value, bit) => {
+				if (value < level) code |= 1 << bit;
+			});
+			const bits = edgeTable[code];
+			if (!bits) continue;
+			EDGES.forEach(([a, b], e) => {
+				if (!(bits & 1 << e)) return;
+				const t = (level - corner[a]) / (corner[b] - corner[a] || 1);
+				const [ax, ay, az] = CORNERS[a], [bx, by, bz] = CORNERS[b];
+				edge[e] = [
+					i + ax + (bx - ax) * t,
+					j + ay + (by - ay) * t,
+					k + az + (bz - az) * t
+				];
+			});
+			for (let t = code << 4; triTable[t] !== -1; t += 3) out.push(...edge[triTable[t]], ...edge[triTable[t + 1]], ...edge[triTable[t + 2]]);
+		}
+		return out;
+	}
+	/** Naive surface nets: one vertex per sign-changing cell, one quad per crossed grid edge. Returns grid coordinates. */
+	static nets(grid, level) {
+		const { nx, ny, nz } = grid;
+		const vertex = /* @__PURE__ */ new Map();
+		const key = (i, j, k) => i + j * nx + k * nx * ny;
+		for (let k = 0; k < nz - 1; k++) for (let j = 0; j < ny - 1; j++) for (let i = 0; i < nx - 1; i++) {
+			const corner = CORNERS.map(([a, b, c]) => grid.at(i + a, j + b, k + c));
+			let x = 0, y = 0, z = 0, hits = 0;
+			for (const [a, b] of EDGES) {
+				if (corner[a] < level === corner[b] < level) continue;
+				const t = (level - corner[a]) / (corner[b] - corner[a] || 1);
+				x += CORNERS[a][0] + (CORNERS[b][0] - CORNERS[a][0]) * t;
+				y += CORNERS[a][1] + (CORNERS[b][1] - CORNERS[a][1]) * t;
+				z += CORNERS[a][2] + (CORNERS[b][2] - CORNERS[a][2]) * t;
+				hits++;
+			}
+			if (hits) vertex.set(key(i, j, k), [
+				i + x / hits,
+				j + y / hits,
+				k + z / hits
+			]);
+		}
+		const out = [];
+		const quad = (cells, flip) => {
+			const [a, b, c, d] = cells.map((cell) => vertex.get(cell));
+			if (!a || !b || !c || !d) return;
+			out.push(...flip ? [
+				...a,
+				...c,
+				...b,
+				...b,
+				...c,
+				...d
+			] : [
+				...a,
+				...b,
+				...c,
+				...b,
+				...d,
+				...c
+			]);
+		};
+		for (let k = 1; k < nz - 1; k++) for (let j = 1; j < ny - 1; j++) for (let i = 1; i < nx - 1; i++) {
+			const here = grid.at(i, j, k) < level;
+			if (here !== grid.at(i + 1, j, k) < level) quad([
+				key(i, j - 1, k - 1),
+				key(i, j, k - 1),
+				key(i, j - 1, k),
+				key(i, j, k)
+			], here);
+			if (here !== grid.at(i, j + 1, k) < level) quad([
+				key(i - 1, j, k - 1),
+				key(i - 1, j, k),
+				key(i, j, k - 1),
+				key(i, j, k)
+			], here);
+			if (here !== grid.at(i, j, k + 1) < level) quad([
+				key(i - 1, j - 1, k),
+				key(i, j - 1, k),
+				key(i - 1, j, k),
+				key(i, j, k)
+			], here);
+		}
+		return out;
+	}
+	/** Turns grid coordinates into world positions, with normals taken from the field gradient so facets vanish. */
+	static shade(grid, points) {
+		const positions = new Float32Array(points.length), normals = new Float32Array(points.length);
+		const normal = new Vector3();
+		for (let p = 0; p < points.length; p += 3) {
+			const x = points[p], y = points[p + 1], z = points[p + 2];
+			positions[p] = grid.worldAxis(0, x);
+			positions[p + 1] = grid.worldAxis(1, y);
+			positions[p + 2] = grid.worldAxis(2, z);
+			normal.set(grid.lerp(x - 1, y, z) - grid.lerp(x + 1, y, z), grid.lerp(x, y - 1, z) - grid.lerp(x, y + 1, z), grid.lerp(x, y, z - 1) - grid.lerp(x, y, z + 1)).normalize();
+			normal.toArray(normals, p);
+		}
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+		geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
+		return geometry;
+	}
+};
+export { VolumeIsoSurface };

package/dist/charts/threevolume/VolumeRaycastChart.js

@@ -0,0 +1,197 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { RaycastMode, VolumeCut } from "./volumeEnums.js";
+import { VolumeGridChart } from "./VolumeGridChart.js";
+import { BoxGeometry, ClampToEdgeWrapping, Data3DTexture, DataTexture, LinearFilter, Mesh, RGBAFormat, RedFormat, ShaderMaterial, UnsignedByteType, Vector3 } from "three";
+// src/charts/threevolume/VolumeRaycastChart.ts
+var VERTEX = `
+varying vec3 vPoint;
+void main() {
+  vPoint = position;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}`;
+var FRAGMENT = `
+precision highp float;
+precision highp sampler3D;
+varying vec3 vPoint;
+uniform sampler3D uVolume;
+uniform sampler2D uRamp;
+uniform vec3 uLow, uHigh, uHalf, uEye;
+uniform int uMode, uSamples;
+uniform float uFade;
+
+float density(vec3 p) { return texture(uVolume, p / (2.0 * uHalf) + 0.5).r; }
+vec3 gradient(vec3 p, float h) {
+  return vec3(density(p + vec3(h, 0, 0)) - density(p - vec3(h, 0, 0)), density(p + vec3(0, h, 0)) - density(p - vec3(0, h, 0)), density(p + vec3(0, 0, h)) - density(p - vec3(0, 0, h)));
+}
+void main() {
+  vec3 direction = normalize(vPoint - uEye);
+  vec3 a = (uLow - uEye) / direction, b = (uHigh - uEye) / direction;
+  vec3 near = min(a, b), far = max(a, b);
+  float enter = max(max(max(near.x, near.y), near.z), 0.0), leave = min(min(far.x, far.y), far.z);
+  if (leave <= enter) discard;
+  float step = 2.0 * sqrt(3.0) / float(uSamples);
+  float jitter = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);
+  vec4 sum = vec4(0.0);
+  float peak = 0.0, total = 0.0;
+  int hits = 0;
+  for (float t = enter + step * jitter; t < leave; t += step) {
+    vec3 p = uEye + direction * t;
+    float value = density(p);
+    if (uMode == 1) { peak = max(peak, value); continue; }
+    if (uMode == 2) { total += value; hits++; continue; }
+    if (uMode == 3) {
+      if (value < 0.42) continue;
+      vec3 n = normalize(-gradient(p, 0.02));
+      float light = 0.45 + 0.55 * max(dot(n, normalize(vec3(0.5, 0.8, 0.6))), 0.0) + 0.25 * max(dot(n, -direction), 0.0);
+      sum = vec4(texture(uRamp, vec2(value, 0.5)).rgb * light, 1.0);
+      break;
+    }
+    vec4 tint = texture(uRamp, vec2(value, 0.5));
+    float alpha = 1.0 - pow(1.0 - tint.a, step * 90.0);
+    sum.rgb += (1.0 - sum.a) * tint.rgb * alpha;
+    sum.a += (1.0 - sum.a) * alpha;
+    if (sum.a > 0.98) break;
+  }
+  if (uMode == 1) { vec4 tint = texture(uRamp, vec2(peak, 0.5)); sum = vec4(tint.rgb, smoothstep(0.03, 0.2, peak)); }
+  if (uMode == 2) { float mean = hits > 0 ? 3.0 * total / float(hits) : 0.0; vec4 tint = texture(uRamp, vec2(mean, 0.5)); sum = vec4(tint.rgb, smoothstep(0.02, 0.2, mean)); }
+  gl_FragColor = vec4(sum.rgb / max(sum.a, 1e-4), sum.a * uFade);
+  #include <colorspace_fragment>
+}`;
+/** GPU ray-marched volume: the true volume render, for dense scans and simulations where every voxel contributes. */
+var VolumeRaycastChart = class extends VolumeGridChart {
+	static meta = {
+		id: "volume-raycast",
+		name: "Volume render",
+		family: ChartFamily.Volumetric,
+		dimension: Dimension.Three,
+		shape: DataShape.Volume,
+		description: "Ray-marches a 3D texture on the GPU in composite, maximum-intensity, mean or surface mode.",
+		tags: [
+			"ray marching",
+			"mip",
+			"direct volume rendering",
+			"ct",
+			"transfer function"
+		],
+		sample: (seed) => SampleData.volume(seed, 48),
+		variants: {
+			mode: Object.values(RaycastMode),
+			cut: Object.values(VolumeCut)
+		}
+	};
+	texture = null;
+	ramp = null;
+	defaults() {
+		return {
+			mode: RaycastMode.Composite,
+			cut: VolumeCut.None,
+			samples: 220
+		};
+	}
+	opacity(unit) {
+		const { mode } = this.options;
+		if (mode === RaycastMode.Surface) return unit < .42 ? 0 : 1;
+		if (mode === RaycastMode.Composite) return unit ** 2.6 * .55;
+		return mode === RaycastMode.Mean ? unit * .7 : unit;
+	}
+	upload(grid, ctx) {
+		this.texture?.dispose();
+		this.ramp?.dispose();
+		const bytes = new Uint8Array(grid.values.length);
+		grid.values.forEach((value, i) => {
+			bytes[i] = Math.round(grid.unit(value) * 255);
+		});
+		const texture = this.texture = new Data3DTexture(bytes, grid.nx, grid.ny, grid.nz);
+		texture.format = RedFormat;
+		texture.type = UnsignedByteType;
+		texture.minFilter = texture.magFilter = LinearFilter;
+		texture.wrapS = texture.wrapT = texture.wrapR = ClampToEdgeWrapping;
+		texture.unpackAlignment = 1;
+		texture.needsUpdate = true;
+		const tone = this.sequential(ctx, .12);
+		const pixels = /* @__PURE__ */ new Uint8Array(1024);
+		for (let i = 0; i < 256; i++) {
+			const color = tone(i / 255);
+			pixels.set([
+				color.r * 255,
+				color.g * 255,
+				color.b * 255,
+				this.opacity(i / 255) * 255
+			], i * 4);
+		}
+		const ramp = this.ramp = new DataTexture(pixels, 256, 1, RGBAFormat, UnsignedByteType);
+		ramp.minFilter = ramp.magFilter = LinearFilter;
+		ramp.needsUpdate = true;
+	}
+	/** Bounds kept after the cut, in world coordinates. */
+	bounds(half) {
+		const { cut } = this.options;
+		const high = new Vector3(...half);
+		if (cut === VolumeCut.HalfX) high.x = 0;
+		if (cut === VolumeCut.HalfZ) high.z = 0;
+		if (cut === VolumeCut.Octant) high.set(0, high.y, 0);
+		return [high.clone().set(-half[0], -half[1], -half[2]), high];
+	}
+	/** Small plot of the transfer function on the back wall: value along x, opacity up. */
+	transfer(ctx) {
+		const lines = [];
+		for (let i = 0; i < 48; i++) {
+			const at = (s) => [
+				.42 + s / 48 * .5,
+				.56 + this.opacity(s / 48) * .36,
+				-.992
+			];
+			lines.push(...at(i), ...at(i + 1));
+		}
+		ctx.root.add(this.segments(ctx, lines, ctx.theme.inkMuted));
+	}
+	build(ctx) {
+		const { mode, samples } = this.options;
+		const grid = this.grid;
+		this.volumeStage(ctx, grid);
+		this.transfer(ctx);
+		if (grid.nx < 2 || grid.ny < 2 || grid.nz < 2) return;
+		this.upload(grid, ctx);
+		const [low, high] = this.bounds(grid.half);
+		const size = high.clone().sub(low);
+		const box = new BoxGeometry(size.x, size.y, size.z).translate((low.x + high.x) / 2, (low.y + high.y) / 2, (low.z + high.z) / 2);
+		const uniforms = {
+			uVolume: { value: this.texture },
+			uRamp: { value: this.ramp },
+			uLow: { value: low },
+			uHigh: { value: high },
+			uHalf: { value: new Vector3(...grid.half) },
+			uEye: { value: new Vector3(0, 0, 5) },
+			uMode: { value: Object.values(RaycastMode).indexOf(mode) },
+			uSamples: { value: samples },
+			uFade: { value: 1 }
+		};
+		const material = new ShaderMaterial({
+			vertexShader: VERTEX,
+			fragmentShader: FRAGMENT,
+			uniforms,
+			transparent: true,
+			depthWrite: false
+		});
+		const mesh = new Mesh(box, material);
+		mesh.onBeforeRender = (_, __, camera) => {
+			uniforms.uEye.value.setFromMatrixPosition(camera.matrixWorld);
+			mesh.worldToLocal(uniforms.uEye.value);
+		};
+		ctx.root.add(mesh);
+		ctx.reveal((progress) => {
+			uniforms.uFade.value = progress;
+		});
+		ctx.pick(mesh, () => ({
+			title: "Volume",
+			rows: [["Mode", mode], ["Range", `${grid.min.toFixed(2)} to ${grid.max.toFixed(2)}`]]
+		}));
+	}
+	teardown() {
+		this.texture?.dispose();
+		this.ramp?.dispose();
+		super.teardown();
+	}
+};
+export { VolumeRaycastChart };

package/dist/charts/threevolume/VolumeScene.js

@@ -0,0 +1,136 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { scaleLinear } from "d3";
+import { BufferGeometry, DataTexture, DoubleSide, Float32BufferAttribute, LineBasicMaterial, LineSegments, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry, RGBAFormat, ShadowMaterial, UnsignedByteType } from "three";
+// src/charts/threevolume/VolumeScene.ts
+var GRID_STEPS = 4;
+var clamp01 = (value) => Math.max(0, Math.min(1, value));
+/** Shared stage for this module: recessive floor and back walls, axis labels, colour lookup tables and staggered instancing. */
+var VolumeScene = class extends Chart3D {
+	static spot = null;
+	/** Soft-edged disc for `PointsMaterial.alphaMap`. */
+	static get roundSprite() {
+		if (this.spot) return this.spot;
+		const size = 32, pixels = /* @__PURE__ */ new Uint8Array(4096);
+		for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) {
+			const edge = Math.hypot(x + .5 - size / 2, y + .5 - size / 2) / (size / 2);
+			pixels.set([
+				255,
+				255,
+				255,
+				Math.round(255 * clamp01((1 - edge) * 4))
+			], (x + y * size) * 4);
+		}
+		const texture = new DataTexture(pixels, size, size, RGBAFormat, UnsignedByteType);
+		texture.needsUpdate = true;
+		return this.spot = texture;
+	}
+	/** Floor, two back walls and tick labels. Everything stays within ±1. */
+	stage(ctx, axes = {}) {
+		const lines = [];
+		const at = (i) => -1 + 2 * i / GRID_STEPS;
+		for (let i = 0; i <= GRID_STEPS; i++) {
+			const v = at(i);
+			lines.push(v, -1, -1, v, -1, 1, -1, -1, v, 1, -1, v);
+			lines.push(v, -1, -1, v, 1, -1, -1, v, -1, 1, v, -1);
+			lines.push(-1, -1, v, -1, 1, v, -1, v, -1, -1, v, 1);
+		}
+		ctx.root.add(this.segments(ctx, lines, ctx.theme.grid));
+		const floor = new Mesh(new PlaneGeometry(2, 2), new ShadowMaterial({ opacity: .16 }));
+		floor.rotation.x = -Math.PI / 2;
+		floor.position.y = -.999;
+		floor.receiveShadow = true;
+		ctx.root.add(floor);
+		const place = (axis, spot, end) => {
+			if (axis?.name) ctx.label(axis.name, end, "secondary", 11);
+			if (!axis?.domain) return;
+			const scale = scaleLinear(axis.domain, axis.range ?? [-1, 1]);
+			for (const tick of scale.ticks(3)) ctx.label(String(tick), spot(scale(tick)), "muted", 10);
+		};
+		place(axes.x, (v) => [
+			v,
+			-1.06,
+			1.12
+		], [
+			0,
+			-1.12,
+			1.34
+		]);
+		place(axes.y, (v) => [
+			-1.1,
+			v,
+			1.1
+		], [
+			-1.24,
+			.98,
+			1.1
+		]);
+		place(axes.z, (v) => [
+			1.12,
+			-1.06,
+			v
+		], [
+			1.34,
+			-1.12,
+			0
+		]);
+	}
+	segments(ctx, positions, color, opacity = 1) {
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+		return new LineSegments(geometry, new LineBasicMaterial({
+			color: ctx.color(color),
+			transparent: opacity < 1,
+			opacity
+		}));
+	}
+	/** Lit surface material, double-sided so cut-open meshes stay solid. */
+	surface(params = {}) {
+		return new MeshStandardMaterial({
+			roughness: .55,
+			metalness: .02,
+			side: DoubleSide,
+			...params
+		});
+	}
+	/** Sequential lookup: `t` in 0..1 maps above `low` so the smallest values stay visible on the surface. */
+	sequential(ctx, low = .22) {
+		const table = Array.from({ length: 256 }, (_, i) => ctx.color(ctx.palette.sequential(low + (1 - low) * (i / 255))));
+		return (t) => table[Math.round(clamp01(Number.isFinite(t) ? t : 0) * 255)];
+	}
+	/** Diverging lookup: `t` in -1..1 with neutral at zero. */
+	diverging(ctx) {
+		const table = Array.from({ length: 256 }, (_, i) => ctx.color(ctx.palette.diverging(i / 255 * 2 - 1)));
+		return (t) => table[Math.round((Math.max(-1, Math.min(1, Number.isFinite(t) ? t : 0)) + 1) * 127.5)];
+	}
+	/**
+	* Writes every instance through `place` and animates them in. `order` (0..1) staggers the entrance;
+	* bounds are dropped so instances scaled to zero at the start are not culled.
+	*/
+	populate(ctx, mesh, place, order) {
+		const dummy = new Object3D();
+		mesh.frustumCulled = false;
+		ctx.reveal((progress) => {
+			for (let i = 0; i < mesh.count; i++) {
+				dummy.position.set(0, 0, 0);
+				dummy.rotation.set(0, 0, 0);
+				dummy.scale.set(1, 1, 1);
+				place(i, dummy);
+				dummy.scale.multiplyScalar(clamp01(progress * 1.6 - (order?.(i) ?? 0) * .6));
+				dummy.updateMatrix();
+				mesh.setMatrixAt(i, dummy.matrix);
+			}
+			mesh.instanceMatrix.needsUpdate = true;
+			if (progress === 1) mesh.computeBoundingSphere();
+		}, 1.1);
+	}
+	/** Grows an object out of the middle of the stage. */
+	emerge(ctx, object) {
+		ctx.reveal((progress) => object.scale.setScalar(Math.max(.001, progress)), 1);
+	}
+	/** Lets indexed strands draw themselves on. */
+	drawOn(ctx, geometry, duration = 1.6) {
+		const total = geometry.index?.count ?? geometry.getAttribute("position").count;
+		ctx.reveal((progress) => geometry.setDrawRange(0, Math.floor(total * progress / 3) * 3), duration);
+	}
+};
+export { VolumeScene };

package/dist/charts/threevolume/VolumeSheet.js

@@ -0,0 +1,39 @@
+import { BufferGeometry, Color, Float32BufferAttribute } from "three";
+// src/charts/threevolume/VolumeSheet.ts
+/** Regular grid of vertices with per-vertex colour and alpha: a slice, a wall projection or a relief map. */
+var VolumeSheet = class {
+	/** `vertex` receives u and v in 0..1 and fills `out`. */
+	static grid(columns, rows, vertex) {
+		const count = (columns + 1) * (rows + 1);
+		const position = new Float32Array(count * 3), color = new Float32Array(count * 4), index = [];
+		const out = {
+			x: 0,
+			y: 0,
+			z: 0,
+			color: new Color(),
+			alpha: 1
+		};
+		for (let r = 0, p = 0; r <= rows; r++) for (let c = 0; c <= columns; c++, p++) {
+			vertex(c / columns, r / rows, out);
+			position.set([
+				out.x,
+				out.y,
+				out.z
+			], p * 3);
+			color.set([
+				out.color.r,
+				out.color.g,
+				out.color.b,
+				out.alpha
+			], p * 4);
+			if (r < rows && c < columns) index.push(p, p + 1, p + columns + 1, p + 1, p + columns + 2, p + columns + 1);
+		}
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new Float32BufferAttribute(position, 3));
+		geometry.setAttribute("color", new Float32BufferAttribute(color, 4));
+		geometry.setIndex(index);
+		geometry.computeVertexNormals();
+		return geometry;
+	}
+};
+export { VolumeSheet };

package/dist/charts/threevolume/VolumeSlicesChart.js

@@ -0,0 +1,134 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { SliceAnchor, SliceLayout } from "./volumeEnums.js";
+import { VolumeGridChart } from "./VolumeGridChart.js";
+import { VolumeSheet } from "./VolumeSheet.js";
+import { Mesh, Vector3 } from "three";
+// src/charts/threevolume/VolumeSlicesChart.ts
+var AXES = [
+	new Vector3(1, 0, 0),
+	new Vector3(0, 1, 0),
+	new Vector3(0, 0, 1)
+];
+/** Heatmap planes through a volume: for reading exact values inside it, as radiologists read scan slices. */
+var VolumeSlicesChart = class extends VolumeGridChart {
+	static meta = {
+		id: "volume-slices",
+		name: "Volume slices",
+		family: ChartFamily.Volumetric,
+		dimension: Dimension.Three,
+		shape: DataShape.Volume,
+		description: "Cuts planes through a scalar volume and colours each one by the value it passes through.",
+		tags: [
+			"slice",
+			"section",
+			"tomography",
+			"heatmap",
+			"mpr"
+		],
+		sample: (seed) => SampleData.volume(seed, 28),
+		variants: {
+			layout: Object.values(SliceLayout),
+			count: [
+				1,
+				3,
+				6
+			],
+			anchor: Object.values(SliceAnchor),
+			relief: [false, true]
+		},
+		valid: (values) => {
+			if (values.layout === SliceLayout.Orthogonal && values.count === 6) return false;
+			return values.anchor === SliceAnchor.Center || values.count === 1;
+		}
+	};
+	defaults() {
+		return {
+			layout: SliceLayout.Orthogonal,
+			count: 1,
+			anchor: SliceAnchor.Center,
+			relief: false,
+			resolution: 56
+		};
+	}
+	planes(grid) {
+		const { layout, count, anchor } = this.options;
+		const n = Math.max(1, Math.floor(count));
+		const peak = grid.peak();
+		const centre = anchor === SliceAnchor.Peak ? new Vector3(grid.worldAxis(0, peak[0]), grid.worldAxis(1, peak[1]), grid.worldAxis(2, peak[2])) : new Vector3();
+		const spread = (i) => n === 1 ? null : (i + .5) / n * 2 - 1;
+		const along = (axis, i) => {
+			const origin = new Vector3();
+			origin.setComponent(axis, spread(i) === null ? centre.getComponent(axis) : spread(i) * grid.half[axis]);
+			const [a, b] = [
+				0,
+				1,
+				2
+			].filter((other) => other !== axis);
+			return {
+				origin,
+				u: AXES[a].clone().multiplyScalar(grid.half[a]),
+				v: AXES[b].clone().multiplyScalar(grid.half[b]),
+				normal: AXES[axis].clone()
+			};
+		};
+		const each = Array.from({ length: n }, (_, i) => i);
+		if (layout === SliceLayout.Orthogonal) return [
+			0,
+			1,
+			2
+		].flatMap((axis) => each.map((i) => along(axis, i)));
+		if (layout === SliceLayout.StackX) return each.map((i) => along(0, i));
+		if (layout === SliceLayout.StackY) return each.map((i) => along(1, i));
+		if (layout === SliceLayout.StackZ) return each.map((i) => along(2, i));
+		const normal = new Vector3(1, 1, 1).normalize(), reach = Math.hypot(...grid.half);
+		const u = new Vector3(1, 0, -1).normalize().multiplyScalar(reach), v = new Vector3(-1, 2, -1).normalize().multiplyScalar(reach);
+		return each.map((i) => ({
+			origin: normal.clone().multiplyScalar(spread(i) === null ? centre.dot(normal) : spread(i) * reach * .62),
+			u,
+			v,
+			normal
+		}));
+	}
+	build(ctx) {
+		const { relief, resolution, layout } = this.options;
+		const grid = this.grid;
+		this.volumeStage(ctx, grid);
+		if (grid.empty) return;
+		const tone = this.sequential(ctx, 0);
+		const polar = grid.min < 0 && grid.max > 0;
+		const split = this.diverging(ctx);
+		const bound = Math.max(Math.abs(grid.min), Math.abs(grid.max));
+		const planes = this.planes(grid);
+		const stacked = planes.length > 3 || layout === SliceLayout.Oblique;
+		const lift = relief ? .22 : 0;
+		const point = new Vector3();
+		for (const plane of planes) {
+			const geometry = VolumeSheet.grid(resolution, resolution, (s, t, out) => {
+				point.copy(plane.origin).addScaledVector(plane.u, s * 2 - 1).addScaledVector(plane.v, t * 2 - 1);
+				const value = grid.sample(point.x, point.y, point.z);
+				const unit = value === null ? 0 : grid.unit(value);
+				point.addScaledVector(plane.normal, unit * lift);
+				out.x = point.x;
+				out.y = point.y;
+				out.z = point.z;
+				out.color.copy(polar ? split((value ?? 0) / bound) : tone(unit));
+				out.alpha = value === null ? 0 : stacked ? Math.min(1, .04 + unit * 1.5) : .25 + unit * 1.5;
+			});
+			const mesh = new Mesh(geometry, this.surface({
+				vertexColors: true,
+				transparent: true,
+				depthWrite: !stacked,
+				roughness: .9
+			}));
+			mesh.castShadow = !stacked;
+			ctx.pick(mesh, () => ({
+				title: "Slice",
+				rows: [["Offset", +plane.origin.dot(plane.normal).toFixed(3)]]
+			}));
+			ctx.reveal((progress) => mesh.scale.set(1, 1, 1).setScalar(.6 + .4 * progress), .8);
+			ctx.root.add(mesh);
+		}
+	}
+};
+export { VolumeSlicesChart };