3draft 26.11.5001 → 26.11.11010

package/dist/gpu.js

@@ -4,14 +4,148 @@
 // buildVertices) need no GPU and are unit tested; createGpu() needs a browser.
 import { dot, norm } from './vec.js';
 import { bounds, faceNormal } from './mesh.js';
+import { triangulate } from './triangulate.js';
 import { makeCamera } from './camera.js';
 import { surfaceOf } from './material.js';
+/** Floats of one mark segment: a (xyz), b (xyz), colour (rgba), width in CSS pixels, one spare. */
+export const MARK_FLOATS = 12;
+const colorOf = (css) => {
+    const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec((css ?? '#0b7285').trim());
+    const h = m ? (m[1].length === 3 ? [...m[1]].map((c) => c + c).join('') : m[1]) : '0b7285';
+    return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
+};
+/** One instance per segment of every polyline of every mark (a zero-length segment is a round point). */
+export const buildMarks = (marks) => {
+    let n = 0;
+    for (const m of marks)
+        for (const l of m.lines)
+            n += Math.max(1, l.length - 1);
+    const out = new Float32Array(n * MARK_FLOATS);
+    let o = 0;
+    for (const m of marks) {
+        const [r, g, b] = colorOf(m.color);
+        for (const l of m.lines) {
+            const segs = l.length > 1 ? l.length - 1 : 1;
+            for (let i = 0; i < segs; i++) {
+                const a = l[i];
+                const c = l[Math.min(i + 1, l.length - 1)];
+                out.set([a[0], a[1], a[2], c[0], c[1], c[2], r, g, b, m.opacity ?? 1, m.width ?? 2], o);
+                o += MARK_FLOATS;
+            }
+        }
+    }
+    return out;
+};
+/** Line-list endpoints (x y z, x y z) of every edge of every face, each pair of vertices once. */
+export const buildEdges = (mesh) => {
+    const seen = new Set();
+    const n = mesh.positions.length;
+    const out = [];
+    for (const f of mesh.faces)
+        f.v.forEach((a, i) => {
+            const b = f.v[(i + 1) % f.v.length];
+            const k = a < b ? a * n + b : b * n + a;
+            if (seen.has(k))
+                return;
+            seen.add(k);
+            out.push(...mesh.positions[a], ...mesh.positions[b]);
+        });
+    return new Float32Array(out);
+};
+const EDGE_LIMIT = 300000; // faces: a bigger scene (a galaxy of super-stars) is drawn without edge lines
+const partEdges = new WeakMap();
+/** The edge lines of a scene: of its parts (kept while a part stays the same Mesh) or of the whole mesh. Empty when the scene is huge. */
+export const sceneEdges = (mesh, parts) => {
+    if (parts && parts.length) {
+        if (parts.reduce((n, m) => n + m.faces.length, 0) > EDGE_LIMIT)
+            return new Float32Array(0);
+        const built = parts.map((m) => {
+            let e = partEdges.get(m);
+            if (!e)
+                partEdges.set(m, (e = buildEdges(m)));
+            return e;
+        });
+        const all = new Float32Array(built.reduce((n, e) => n + e.length, 0));
+        let at = 0;
+        for (const e of built)
+            (all.set(e, at), (at += e.length));
+        return all;
+    }
+    return mesh.faces.length > EDGE_LIMIT ? new Float32Array(0) : buildEdges(mesh);
+};
+/** Floats of one glow light: position (3), reach (1), colour times intensity (3), spare (1). */
+export const LIGHT_FLOATS = 8;
+export const MAX_LIGHTS = 16;
+const emitters = new WeakMap();
+/** Every emitting face of a mesh: centre (3), area times emit (1), colour (3), area (1). */
+const emittersOf = (mesh, palette) => {
+    const hit = emitters.get(mesh);
+    if (hit && hit.palette === palette)
+        return hit.data;
+    const rows = [];
+    for (const face of mesh.faces) {
+        const s = surfaceOf(face, palette);
+        if (s.emit < 0.05)
+            continue;
+        const pts = face.v.map((k) => mesh.positions[k]);
+        const area = Math.hypot(...(faceNormal(pts))) || 0;
+        if (!area)
+            continue;
+        const c = [0, 1, 2].map((k) => pts.reduce((a, p) => a + p[k], 0) / pts.length);
+        const [r, g, b] = colorOf(s.color);
+        rows.push(...c, area * s.emit, r, g, b, area);
+    }
+    const data = new Float32Array(rows);
+    emitters.set(mesh, { palette, data });
+    return data;
+};
+/**
+ * Glow: the emitting faces of a scene act as local light sources. Faces close to each other (one cell of a grid) merge into
+ * one light at their weighted centre; the brightest MAX_LIGHTS stay. Each light has a reach that grows with the emitting area.
+ * Float32Array, LIGHT_FLOATS per light.
+ */
+export const sceneLights = (mesh, parts, palette) => {
+    const list = (parts && parts.length ? parts : [mesh]).map((m) => emittersOf(m, palette)).filter((e) => e.length);
+    if (!list.length)
+        return new Float32Array(0);
+    const lo = [Infinity, Infinity, Infinity];
+    const hi = [-Infinity, -Infinity, -Infinity];
+    for (const e of list)
+        for (let i = 0; i < e.length; i += 8)
+            for (let k = 0; k < 3; k++)
+                (lo[k] = Math.min(lo[k], e[i + k]), (hi[k] = Math.max(hi[k], e[i + k])));
+    const cell = Math.max((Math.max(hi[0] - lo[0], hi[1] - lo[1], hi[2] - lo[2]) / 6) || 1, 1e-3);
+    const cells = new Map();
+    for (const e of list) {
+        for (let i = 0; i < e.length; i += 8) {
+            const key = [0, 1, 2].map((k) => Math.floor((e[i + k] - lo[k]) / cell)).join(',');
+            const c = cells.get(key) ?? { p: 0, x: 0, y: 0, z: 0, r: 0, g: 0, b: 0, a: 0 };
+            const w = e[i + 3];
+            c.p += w;
+            c.x += e[i] * w;
+            c.y += e[i + 1] * w;
+            c.z += e[i + 2] * w;
+            c.r += e[i + 4] * w;
+            c.g += e[i + 5] * w;
+            c.b += e[i + 6] * w;
+            c.a += e[i + 7];
+            cells.set(key, c);
+        }
+    }
+    const top = [...cells.values()].sort((a, b) => b.p - a.p).slice(0, MAX_LIGHTS);
+    const out = new Float32Array(top.length * LIGHT_FLOATS);
+    top.forEach((c, i) => {
+        const reach = Math.max(2.5 * Math.sqrt(c.p), 0.05); // a 1 m x 1 m lamp at emit 1 reaches 2.5 m
+        out.set([c.x / c.p, c.y / c.p, c.z / c.p, reach, c.r / c.p, c.g / c.p, c.b / c.p, 0], i * LIGHT_FLOATS);
+    });
+    return out;
+};
 const FLOATS = 14; // position(3) normal(3) color(3) material(4: metal, rough, alpha, emit) soft(1)
 /**
  * Column-major 4x4 matrix (for WebGPU, z in 0..1) that maps world points exactly
  * like camera.project(): the same pixels, plus a depth between near and far.
  */
-export const viewProjection = (cam, near = 0.03, far = 1000) => {
+export const viewProjection = (cam, near = 0.03, far = 1e9) => {
     const kk = cam.k / (cam.size / 2);
     const row = (v, s) => [v[0] * s, v[1] * s, v[2] * s, -dot(v, cam.eye) * s];
     const a = cam.ortho ? 1 / (far - near) : far / (far - near);
@@ -22,6 +156,21 @@ export const viewProjection = (cam, near = 0.03, far = 1000) => {
     rows.forEach((r, i) => r.forEach((v, j) => (m[j * 4 + i] = v)));
     return m;
 };
+/**
+ * Near plane for a scene seen from `cam`: the usual 0.03, unless everything is very far (a galaxy seen from outside, the
+ * nearest point thousands of units away), where a near plane that close would leave no depth precision at all.
+ */
+export const nearPlane = (cam, mesh) => {
+    const [ex, ey, ez] = cam.eye;
+    const [fx, fy, fz] = cam.f;
+    let nearest = Infinity;
+    for (const p of mesh.positions) {
+        const d = (p[0] - ex) * fx + (p[1] - ey) * fy + (p[2] - ez) * fz;
+        if (d > 1e-6 && d < nearest)
+            nearest = d;
+    }
+    return nearest > 1000 ? nearest * 0.25 : 0.03;
+};
 const rgb = (color) => {
     const h = String(color ?? '').replace('#', '');
     const full = h.length === 3 ? [...h].map((c) => c + c).join('') : h;
@@ -34,8 +183,13 @@ const rgb = (color) => {
  * crack in the indices does not break it) are averaged, weighted by area, but only those within `crease` degrees of
  * this face: a 90 degree box corner stays sharp, a faceted fuselage becomes round.
  */
-export const cornerNormals = (mesh, crease) => {
-    const cosC = Math.cos((crease * Math.PI) / 180);
+export const cornerNormals = (mesh, crease, soft) => {
+    // the material's soft decides how far its edges may be smoothed: 0 keeps every edge hard, from 0.5 up the whole crease angle is allowed;
+    // between two faces the harder one rules
+    const cosAt = (i, j) => {
+        const k = soft ? Math.min(1, 2 * Math.min(soft[i], soft[j])) : 1;
+        return Math.cos((crease * k * Math.PI) / 180);
+    };
     const area = mesh.faces.map((f) => faceNormal(f.v.map((k) => mesh.positions[k]))); // length = area
     const unit = area.map((n) => (Math.hypot(...n) > 0 ? norm(n) : [0, 1, 0]));
     const q = (bounds(mesh).radius || 1) * 1e-6;
@@ -51,7 +205,9 @@ export const cornerNormals = (mesh, crease) => {
     return mesh.faces.map((f, i) => f.v.map((k) => {
         const sum = [0, 0, 0];
         for (const j of at.get(key(mesh.positions[k])) ?? []) {
-            if (dot(unit[i], unit[j]) < cosC)
+            if (i !== j && (soft ? Math.min(soft[i], soft[j]) <= 0 : false))
+                continue;
+            if (dot(unit[i], unit[j]) < cosAt(i, j) - 1e-12)
                 continue;
             for (let c = 0; c < 3; c++)
                 sum[c] += area[j][c];
@@ -68,7 +224,7 @@ export const buildVertices = (mesh, palette, { smooth = 0 } = {}) => {
     for (const f of mesh.faces)
         tris += Math.max(0, f.v.length - 2);
     const out = new Float32Array(tris * 3 * FLOATS);
-    const corners = smooth > 0 ? cornerNormals(mesh, smooth) : null;
+    const corners = smooth > 0 ? cornerNormals(mesh, smooth, mesh.faces.map((f) => surfaceOf(f, palette).soft)) : null;
     let o = 0;
     mesh.faces.forEach((face, fi) => {
         const pts = face.v.map((k) => mesh.positions[k]);
@@ -76,8 +232,8 @@ export const buildVertices = (mesh, palette, { smooth = 0 } = {}) => {
         const s = surfaceOf(face, palette);
         const c = rgb(s.color);
         const mat = [s.metal, s.rough, s.alpha, s.emit];
-        for (let j = 1; j < pts.length - 1; j++) {
-            for (const k of [0, j, j + 1]) {
+        for (const tri of triangulate(pts)) {
+            for (const k of tri) {
                 out.set([...pts[k], ...(corners ? corners[fi][k] : flat), ...c, ...mat, s.soft], o);
                 o += FLOATS;
             }
@@ -108,6 +264,9 @@ struct U {
   fx : vec4<f32>,      // filmic (0 or 1), exposure, emission gain, studio (0 or 1)
   fill : vec4<f32>,    // studio: xyz direction towards the fill light, w intensity
   rim : vec4<f32>,     // studio: xyz direction towards the rim light, w intensity
+  res : vec4<f32>,     // marks: canvas pixels (x, y), device pixels per CSS pixel (z); w: number of glow lights
+  lpos : array<vec4<f32>, 16>, // glow lights: xyz position, w reach
+  lcol : array<vec4<f32>, 16>, // rgb colour times intensity
 };
 @group(0) @binding(0) var<uniform> u : U;
 
@@ -152,6 +311,58 @@ struct IIn {
   return o;
 }
 
+// the edge lines: 1 pixel, nudged a hair towards the eye so they win against the faces they lie on
+@vertex fn vsl(@location(0) pos : vec3<f32>) -> @builtin(position) vec4<f32> {
+  var p = u.vp * vec4<f32>(pos, 1.0);
+  p.z = p.z - 0.0002 * p.w;
+  return p;
+}
+@fragment fn fsl() -> @location(0) vec4<f32> {
+  // dark lines on the lit picture; with no light the picture is dark, so the lines turn light
+  let g = select(0.0, 0.85, u.light.w > 0.5);
+  return vec4<f32>(g, g, g, select(0.4, 0.55, u.light.w > 0.5));
+}
+
+// the marks: thick round-capped segments, expanded to screen-space quads, drawn over everything (no depth test)
+struct MOut { @builtin(position) p : vec4<f32>, @location(0) q : vec2<f32>, @location(1) c : vec4<f32>, @location(2) h : vec3<f32> };
+@vertex fn vsm(@builtin(vertex_index) vi : u32, @location(0) a : vec3<f32>, @location(1) b : vec3<f32>, @location(2) col : vec4<f32>, @location(3) wd : f32) -> MOut {
+  var o : MOut;
+  var ca = u.vp * vec4<f32>(a, 1.0);
+  var cb = u.vp * vec4<f32>(b, 1.0);
+  let e = 0.001;
+  o.p = vec4<f32>(2.0, 2.0, 2.0, 1.0);
+  if (ca.w < e && cb.w < e) { return o; }
+  if (ca.w < e) { ca = mix(ca, cb, (e - ca.w) / (cb.w - ca.w)); }
+  if (cb.w < e) { cb = mix(cb, ca, (e - cb.w) / (ca.w - cb.w)); }
+  let half = vec2<f32>(u.res.x, u.res.y) * 0.5;
+  let pa = ca.xy / ca.w * half;
+  let pb = cb.xy / cb.w * half;
+  let len = length(pb - pa);
+  var d = vec2<f32>(1.0, 0.0);
+  if (len > 0.0001) { d = (pb - pa) / len; }
+  let hw = wd * u.res.z * 0.5;
+  let n = vec2<f32>(-d.y, d.x);
+  let cx = array<f32, 6>(0.0, 1.0, 0.0, 1.0, 1.0, 0.0);
+  let cy = array<f32, 6>(-1.0, -1.0, 1.0, -1.0, 1.0, 1.0);
+  let t = cx[vi];
+  let s = cy[vi];
+  let ext = hw + 1.0;
+  let along = mix(-ext, len + ext, t);
+  let across = s * ext;
+  let pos = pa + d * along + n * across;
+  o.p = vec4<f32>(pos / half, 0.0, 1.0);
+  o.q = vec2<f32>(along, across);
+  o.c = col;
+  o.h = vec3<f32>(len, hw, 0.0);
+  return o;
+}
+@fragment fn fsm(i : MOut) -> @location(0) vec4<f32> {
+  let dx = max(max(-i.q.x, i.q.x - i.h.x), 0.0);
+  let dist = length(vec2<f32>(dx, i.q.y));
+  let cov = clamp(i.h.y + 0.5 - dist, 0.0, 1.0);
+  return vec4<f32>(i.c.rgb, i.c.a * cov);
+}
+
 fn toLinear(c : vec3<f32>) -> vec3<f32> {
   return select(pow((c + 0.055) / 1.055, vec3<f32>(2.4)), c / 12.92, c <= vec3<f32>(0.04045));
 }
@@ -186,6 +397,24 @@ fn lights(n : vec3<f32>, v : vec3<f32>, shin : f32, soft : f32) -> vec3<f32> {
   return vec3<f32>(diff, spec, scat);
 }
 
+// Glow: every emitting cluster is a local light with a smooth falloff to zero at its reach, a little wrap so shade edges soften
+fn glowAt(p : vec3<f32>, n : vec3<f32>) -> vec3<f32> {
+  var sum = vec3<f32>(0.0);
+  let cnt = u32(u.res.w);
+  for (var k = 0u; k < cnt; k = k + 1u) {
+    let d = u.lpos[k].xyz - p;
+    let dist = max(length(d), 0.001);
+    let reach = u.lpos[k].w;
+    let x = dist / reach;
+    var win = clamp(1.0 - x * x * x * x, 0.0, 1.0);
+    win = win * win;
+    let s = dist / (reach * 0.25);
+    let wrap = max((dot(n, d / dist) + 0.3) / 1.3, 0.0);
+    sum = sum + u.lcol[k].rgb * (win / (1.0 + s * s)) * wrap * 1.6;
+  }
+  return sum;
+}
+
 // The filmic path: the same light model, but in linear colour with HDR light and emission, then tone mapped.
 fn filmic(i : VOut, n : vec3<f32>, l : vec3<f32>, v : vec3<f32>) -> vec4<f32> {
   let metal = i.m.x;
@@ -207,6 +436,7 @@ fn filmic(i : VOut, n : vec3<f32>, l : vec3<f32>, v : vec3<f32>) -> vec4<f32> {
           + vec3<f32>(spec) * mix(vec3<f32>(1.0), albedo, metal);
   // emission adds light, so a lamp can go above 1.0 and still keep its colour after tone mapping
   lit = lit + albedo * vec3<f32>(1.0, 0.38, 0.26) * lt.z * 0.5 * (1.0 - metal); // soft: the warm scattered band
+  lit = lit + albedo * toLinear(vec3<f32>(1.0)) * glowAt(i.w, n) * (1.0 - metal);
   lit = lit + albedo * i.m.w * u.fx.z;
   return vec4<f32>(toSrgb(aces(lit * u.fx.y)), i.m.z);
 }
@@ -216,6 +446,12 @@ fn filmic(i : VOut, n : vec3<f32>, l : vec3<f32>, v : vec3<f32>) -> vec4<f32> {
   if (!front) { n = -n; }
   let l = normalize(u.light.xyz);
   let v = normalize(u.eye.xyz - i.w);
+  if (u.light.w > 0.5) {
+    // unlit: no light in the scene, only what glows
+    let g = glowAt(i.w, n) * (1.0 - i.m.x);
+    if (u.fx.x > 0.5) { return vec4<f32>(toSrgb(aces((toLinear(i.c) * (i.m.w * u.fx.z + g)) * u.fx.y)), i.m.z); }
+    return vec4<f32>(clamp(i.c * (min(i.m.w, 1.0) + g), vec3<f32>(0.0), vec3<f32>(1.0)), i.m.z);
+  }
   if (u.fx.x > 0.5) { return filmic(i, n, l, v); }
   let metal = i.m.x;
   let rough = i.m.y;
@@ -232,6 +468,7 @@ fn filmic(i : VOut, n : vec3<f32>, l : vec3<f32>, v : vec3<f32>) -> vec4<f32> {
           + i.c * env * metal * (1.0 - 0.6 * rough)
           + vec3<f32>(spec) * mix(vec3<f32>(1.0), i.c, metal)
           + i.c * vec3<f32>(1.0, 0.38, 0.26) * lt.z * 0.25 * (1.0 - metal);
+  lit = lit + i.c * glowAt(i.w, n) * (1.0 - metal);
   lit = mix(lit, i.c * 1.15, min(i.m.w, 1.0)); // the plain look: emit 0..1 fades to flat colour, more does not add
   return vec4<f32>(clamp(lit, vec3<f32>(0.0), vec3<f32>(1.0)), i.m.z);
 }
@@ -316,13 +553,55 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
     const glassPipeline = make('vs', [meshLayout], true);
     // the instanced pipeline reads position and normal only from the prototype (locations 0, 1)
     const instPipeline = make('vsi', [{ ...meshLayout, attributes: meshLayout.attributes.slice(0, 2) }, instanceLayout]);
-    const uniforms = device.createBuffer({ size: 192, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    const linePipeline = device.createRenderPipeline({
+        layout: pipelineLayout,
+        vertex: { module, entryPoint: 'vsl', buffers: [{ arrayStride: 12, attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x3' }] }] },
+        fragment: {
+            module,
+            entryPoint: 'fsl',
+            targets: [{ format, blend: { color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' }, alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' } } }],
+        },
+        primitive: { topology: 'line-list' },
+        depthStencil: { format: 'depth24plus', depthWriteEnabled: false, depthCompare: 'less-equal' },
+        multisample: { count: sampleCount },
+    });
+    const markPipeline = device.createRenderPipeline({
+        layout: pipelineLayout,
+        vertex: {
+            module,
+            entryPoint: 'vsm',
+            buffers: [
+                {
+                    arrayStride: MARK_FLOATS * 4,
+                    stepMode: 'instance',
+                    attributes: [
+                        { shaderLocation: 0, offset: 0, format: 'float32x3' },
+                        { shaderLocation: 1, offset: 12, format: 'float32x3' },
+                        { shaderLocation: 2, offset: 24, format: 'float32x4' },
+                        { shaderLocation: 3, offset: 40, format: 'float32' },
+                    ],
+                },
+            ],
+        },
+        fragment: {
+            module,
+            entryPoint: 'fsm',
+            targets: [{ format, blend: { color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' }, alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' } } }],
+        },
+        primitive: { topology: 'triangle-list', cullMode: 'none' },
+        depthStencil: { format: 'depth24plus', depthWriteEnabled: false, depthCompare: 'always' },
+        multisample: { count: sampleCount },
+    });
+    const uniforms = device.createBuffer({ size: 720, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
     const bind = device.createBindGroup({ layout: bindLayout, entries: [{ binding: 0, resource: { buffer: uniforms } }] });
     const instBind = device.createBindGroup({ layout: bindLayout, entries: [{ binding: 0, resource: { buffer: uniforms } }] });
     // Geometry that did not change since the last frame is not rebuilt or uploaded again.
     let uploaded = null; // the mesh now in vertexBuffer
     let uploadedPalette; // and the palette it was built with
     let uploadedSmooth = 0; // and the smoothing
+    let partCache = new WeakMap(); // vertices per part mesh (see `parts`)
+    let partPalette;
+    let partSmooth = 0;
     let vertexCount = 0;
     let protoMesh = null;
     let protoBuffer = null;
@@ -333,6 +612,15 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
     let instCount = 0;
     let vertexBuffer = null;
     let capacity = 0;
+    let markBuffer = null;
+    let markCapacity = 0;
+    let markCount = 0;
+    let edgeBuffer = null;
+    let edgeCapacity = 0;
+    let edgeCount = 0; // vertices (two per line)
+    let edgeMesh = null;
+    let edgeParts;
+    let edgeOn = false;
     let glassBuffer = null; // the see-through triangles, sorted far to near for the eye
     let glassCapacity = 0;
     let glassTris = []; // centroid and offset (in floats) in glassSource
@@ -353,7 +641,7 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
         depth = device.createTexture({ size: [n, n], format: 'depth24plus', sampleCount, usage: GPUTextureUsage.RENDER_ATTACHMENT });
         color = sampleCount > 1 ? device.createTexture({ size: [n, n], format, sampleCount, usage: GPUTextureUsage.RENDER_ATTACHMENT }) : null;
     };
-    const draw = (mesh, view, { size = 400, fit, background = [0.98, 0.98, 0.97], light = {}, material = {}, palette, dpr = globalThis.devicePixelRatio || 1, instances, tonemap = false, smooth = false, studio = false } = {}, readback = false) => {
+    const draw = (mesh, view, { size = 400, fit, background = [0.98, 0.98, 0.97], light = {}, material = {}, palette, dpr = globalThis.devicePixelRatio || 1, instances, parts, tonemap = false, smooth = false, studio = false, edges = false, marks, unlit = false, glow = false } = {}, readback = false) => {
         const L = { ...defaultLight, ...light };
         const filmic = tonemap ? { exposure: 1, emit: 2, ...(tonemap === true ? {} : tonemap) } : null;
         const M = { ...defaultMaterial, ...material };
@@ -362,23 +650,46 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
         const crease = smooth === true ? 40 : smooth || 0;
         if (mesh !== uploaded || palette !== uploadedPalette || crease !== uploadedSmooth) {
             uploadedSmooth = crease;
-            const all = buildVertices(mesh, palette, { smooth: crease });
+            let all;
+            if (parts && parts.length) {
+                if (palette !== partPalette || crease !== partSmooth) {
+                    partCache = new WeakMap();
+                    partPalette = palette;
+                    partSmooth = crease;
+                }
+                const built = parts.map((m) => {
+                    let v = partCache.get(m);
+                    if (!v)
+                        partCache.set(m, (v = buildVertices(m, palette, { smooth: crease })));
+                    return v;
+                });
+                all = new Float32Array(built.reduce((n, v) => n + v.length, 0));
+                let at = 0;
+                for (const v of built) {
+                    all.set(v, at);
+                    at += v.length;
+                }
+            }
+            else
+                all = buildVertices(mesh, palette, { smooth: crease });
             // split: solid triangles are drawn first; triangles with alpha < 1 are kept apart and blended afterwards
             const tri = 3 * FLOATS;
-            const solid = [];
+            const solid = new Float32Array(all.length);
+            let solidLen = 0;
             glassTris = [];
             for (let o = 0; o < all.length; o += tri) {
                 if (all[o + 11] < 1) {
                     const c = [0, 1, 2].map((k) => (all[o + k] + all[o + FLOATS + k] + all[o + 2 * FLOATS + k]) / 3);
                     glassTris.push({ c, at: o });
                 }
-                else
-                    for (let k = 0; k < tri; k++)
-                        solid.push(all[o + k]);
+                else {
+                    solid.set(all.subarray(o, o + tri), solidLen);
+                    solidLen += tri;
+                }
             }
             glassSource = all;
             glassEye = '';
-            const verts = Float32Array.from(solid);
+            const verts = solid.subarray(0, solidLen);
             if (verts.byteLength > capacity) {
                 vertexBuffer?.destroy();
                 capacity = Math.max(verts.byteLength, 4096);
@@ -390,6 +701,22 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
             uploaded = mesh;
             uploadedPalette = palette;
         }
+        if (!edges)
+            edgeCount = 0;
+        else if (mesh !== edgeMesh || parts !== edgeParts || !edgeOn) {
+            const e = sceneEdges(mesh, parts);
+            if (e.byteLength > edgeCapacity) {
+                edgeBuffer?.destroy();
+                edgeCapacity = Math.max(e.byteLength, 4096);
+                edgeBuffer = device.createBuffer({ size: edgeCapacity, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST });
+            }
+            if (e.byteLength)
+                device.queue.writeBuffer(edgeBuffer, 0, e);
+            edgeCount = e.length / 3;
+            edgeMesh = mesh;
+            edgeParts = parts;
+        }
+        edgeOn = edges;
         if (instances?.mesh && instances.mesh !== protoMesh) {
             const v = buildVertices(instances.mesh);
             protoBuffer?.destroy();
@@ -433,9 +760,9 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
         // studio rig, relative to the camera: key upper left in front, fill from the right, rim from behind and above
         const rig = (f, r, up) => norm([0, 1, 2].map((k) => -cam.f[k] * f + cam.r[k] * r + cam.u[k] * up));
         const S = studio ? { fill: 0.4, rim: 1, ...(studio === true ? {} : studio) } : null;
-        const u = new Float32Array(48);
-        u.set(viewProjection(cam), 0);
-        u.set([...(S ? rig(0.7, -0.5, 0.6) : norm(L.direction)), 0], 16);
+        const u = new Float32Array(52 + MAX_LIGHTS * 8);
+        u.set(viewProjection(cam, nearPlane(cam, mesh)), 0);
+        u.set([...(S ? rig(0.7, -0.5, 0.6) : norm(L.direction)), unlit ? 1 : 0], 16);
         u.set([...L.sky, 0], 20);
         u.set([...L.ground, 0], 24);
         u.set([...cam.eye, 0], 28);
@@ -443,7 +770,23 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
         u.set([filmic ? 1 : 0, filmic ? filmic.exposure : 1, filmic ? filmic.emit : 0, S ? 1 : 0], 36);
         u.set([...rig(0.6, 0.8, 0.1), S ? S.fill : 0], 40);
         u.set([...rig(-0.8, 0.3, 0.5), S ? S.rim : 0], 44);
+        const lights = glow ? sceneLights(mesh, parts, palette) : new Float32Array(0);
+        u.set([px, px, px / size, lights.length / LIGHT_FLOATS], 48);
+        for (let k = 0; k < lights.length / LIGHT_FLOATS; k++) {
+            u.set(lights.subarray(k * LIGHT_FLOATS, k * LIGHT_FLOATS + 4), 52 + k * 4);
+            u.set([...lights.subarray(k * LIGHT_FLOATS + 4, k * LIGHT_FLOATS + 7), 0], 52 + MAX_LIGHTS * 4 + k * 4);
+        }
         device.queue.writeBuffer(uniforms, 0, u);
+        const markData = marks?.length ? buildMarks(marks) : null;
+        markCount = markData ? markData.length / MARK_FLOATS : 0;
+        if (markData && markData.byteLength) {
+            if (markData.byteLength > markCapacity) {
+                markBuffer?.destroy();
+                markCapacity = Math.ceil(markData.byteLength * 1.5);
+                markBuffer = device.createBuffer({ size: markCapacity, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST });
+            }
+            device.queue.writeBuffer(markBuffer, 0, markData);
+        }
         const encoder = device.createCommandEncoder();
         const offscreen = readback
             ? device.createTexture({ size: [px, px], format, usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC })
@@ -474,6 +817,12 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
             pass.setVertexBuffer(1, instBuffer);
             pass.draw(protoCount, instCount);
         }
+        if (edgeCount) {
+            pass.setPipeline(linePipeline);
+            pass.setBindGroup(0, bind);
+            pass.setVertexBuffer(0, edgeBuffer);
+            pass.draw(edgeCount);
+        }
         if (glassCount) {
             // after everything solid (and the instances): see-through faces, far to near
             pass.setPipeline(glassPipeline);
@@ -481,6 +830,12 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
             pass.setVertexBuffer(0, glassBuffer);
             pass.draw(glassCount);
         }
+        if (markCount) {
+            pass.setPipeline(markPipeline);
+            pass.setBindGroup(0, bind);
+            pass.setVertexBuffer(0, markBuffer);
+            pass.draw(6, markCount);
+        }
         pass.end();
         if (!offscreen) {
             device.queue.submit([encoder.finish()]);
@@ -519,6 +874,7 @@ export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
     const destroy = () => {
         vertexBuffer?.destroy();
         glassBuffer?.destroy();
+        markBuffer?.destroy();
         protoBuffer?.destroy();
         instBuffer?.destroy();
         depth?.destroy();

package/dist/index.d.ts

@@ -1,20 +1,25 @@
 export declare const name: "3draft";
-export declare const version = "26.11.5001";
+export declare const version = "26.11.11010";
 export type { Vec3, Face, Mesh, Axes, ViewName, ViewSpec, Fit, Camera, Hit, Mark } from './types.js';
 export { box, extrude, merge, rotate, bounds, faceNormal, faceCenter } from './mesh.js';
 export type { BoxOptions } from './mesh.js';
 export { validate } from './check.js';
-export { boolean, union, subtract, intersect, health } from './csg.js';
+export { boolean, union, subtract, intersect, health, splitParts } from './csg.js';
+export { saw, planeThroughLine, planeThroughTriangle, sectionSegments } from './saw.js';
+export type { CutPlane, Sawn } from './saw.js';
 export type { BooleanOp, Health, Part } from './csg.js';
 export type { Validation } from './check.js';
 export { extrudeFace, moveVertices } from './edit.js';
 export { VIEW_ORDER, makeCamera, orbit, project, ray } from './camera.js';
 export { pick, crosshair } from './pick.js';
+export { instantiate, lodLevel } from './instances.js';
+export type { Prototype, Placement } from './instances.js';
 export { standOn } from './place.js';
 export type { StandOptions, Frame } from './place.js';
 export { paintOrder } from './order.js';
 export type { PaintItem } from './order.js';
 export { createGpu, viewProjection, buildVertices, cornerNormals, buildInstances, defaultLight, defaultMaterial } from './gpu.js';
+export { createGl } from './gl.js';
 export type { Gpu, GpuLight, GpuMaterial, GpuRenderOptions, Instance, Pixels } from './gpu.js';
 export { renderView, renderViews, renderSheet } from './svg.js';
 export type { RenderOptions } from './svg.js';
@@ -31,5 +36,8 @@ export interface Info {
 export declare const info: () => Info;
 export { initKernel } from './kernel.js';
 export type { Kernel } from './kernel.js';
-export { insertVertex, cutFace, moveVertex, fillLoop, addLine, findLoop, nearestSurface, wireFromSegments, moveVertexSet } from './wire.js';
+export { insertVertex, cutFace, moveVertex, fillLoop, addLine, findLoop, nearestSurface, wireFromSegments, moveVertexSet, reshape, outlineOf } from './wire.js';
+export { triangulate } from './triangulate.js';
+export { buildEdges, buildMarks, MARK_FLOATS, sceneEdges } from './gpu.js';
+export type { Tri } from './triangulate.js';
 export type { Wire } from './wire.js';

package/dist/index.js

@@ -4,16 +4,19 @@
 // a target cross that lies on the surface under the cursor. No textures, no
 // shading yet.
 export const name = '3draft';
-export const version = '26.11.5001';
+export const version = '26.11.11010';
 export { box, extrude, merge, rotate, bounds, faceNormal, faceCenter } from './mesh.js';
 export { validate } from './check.js';
-export { boolean, union, subtract, intersect, health } from './csg.js';
+export { boolean, union, subtract, intersect, health, splitParts } from './csg.js';
+export { saw, planeThroughLine, planeThroughTriangle, sectionSegments } from './saw.js';
 export { extrudeFace, moveVertices } from './edit.js';
 export { VIEW_ORDER, makeCamera, orbit, project, ray } from './camera.js';
 export { pick, crosshair } from './pick.js';
+export { instantiate, lodLevel } from './instances.js';
 export { standOn } from './place.js';
 export { paintOrder } from './order.js';
 export { createGpu, viewProjection, buildVertices, cornerNormals, buildInstances, defaultLight, defaultMaterial } from './gpu.js';
+export { createGl } from './gl.js';
 export { renderView, renderViews, renderSheet } from './svg.js';
 export { surfaceOf, DEFAULTS as MATERIAL_DEFAULTS } from './material.js';
 export { displayVersion } from './version.js';
@@ -30,4 +33,6 @@ export const info = () => ({
     ],
 });
 export { initKernel } from './kernel.js';
-export { insertVertex, cutFace, moveVertex, fillLoop, addLine, findLoop, nearestSurface, wireFromSegments, moveVertexSet } from './wire.js';
+export { insertVertex, cutFace, moveVertex, fillLoop, addLine, findLoop, nearestSurface, wireFromSegments, moveVertexSet, reshape, outlineOf } from './wire.js';
+export { triangulate } from './triangulate.js';
+export { buildEdges, buildMarks, MARK_FLOATS, sceneEdges } from './gpu.js';

package/dist/instances.d.ts

@@ -0,0 +1,19 @@
+import type { Mesh, Vec3 } from './types.js';
+export interface Prototype {
+    lods: Mesh[];
+}
+export interface Placement {
+    at: Vec3;
+    /** Size of the instance; a record scales each slot on its own ('*' is the default), e.g. a star core and its halo. */
+    scale: number | Record<string, number>;
+    /** Slot -> palette name. */
+    mats?: Record<string, string>;
+    /** Turn of the instance about its own centre: [tilt about x, turn about y] in radians (a galaxy disc seen from any side). */
+    rot?: [number, number];
+    /** Colour of every face (a tint on top of the material). */
+    color?: string;
+}
+/** A copy of the prototype mesh, scaled, moved and given its materials. Slots must not share vertices when scaled apart. */
+export declare const instantiate: (proto: Mesh, p: Placement) => Mesh;
+/** Which level of detail to draw for something that is `px` pixels across (its radius); `limits` are the pixel sizes where the next finer level starts. */
+export declare const lodLevel: (px: number, levels: number, limits?: readonly number[]) => number;