3draft 26.11.4010 → 26.11.11010

package/dist/gpu.js

@@ -3,15 +3,149 @@
 // the cross marks and the framing all stay valid. The pure helpers (viewProjection,
 // buildVertices) need no GPU and are unit tested; createGpu() needs a browser.
 import { dot, norm } from './vec.js';
-import { faceNormal } from './mesh.js';
+import { bounds, faceNormal } from './mesh.js';
+import { triangulate } from './triangulate.js';
 import { makeCamera } from './camera.js';
 import { surfaceOf } from './material.js';
-const FLOATS = 13; // position(3) normal(3) color(3) material(4: metal, rough, alpha, emit)
+/** 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;
@@ -29,26 +178,67 @@ const rgb = (color) => {
         return [0.78, 0.78, 0.78];
     return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16) / 255);
 };
-/** Triangle list for the GPU: flat face normals, face colors and materials. Float32Array, 13 floats per vertex. */
-export const buildVertices = (mesh, palette) => {
+/**
+ * Smooth shading: a normal for every corner of every face. The faces that meet at a point (welded by position, so a
+ * 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, 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;
+    const key = (p) => `${Math.round(p[0] / q)},${Math.round(p[1] / q)},${Math.round(p[2] / q)}`;
+    const at = new Map();
+    mesh.faces.forEach((f, i) => f.v.forEach((k) => {
+        const id = key(mesh.positions[k]);
+        const list = at.get(id) ?? [];
+        if (list[list.length - 1] !== i)
+            list.push(i);
+        at.set(id, list);
+    }));
+    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 (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];
+        }
+        return Math.hypot(...sum) > 0 ? norm(sum) : unit[i];
+    }));
+};
+/**
+ * Triangle list for the GPU: face normals (flat, or smoothed with `smooth` degrees), face colors and materials.
+ * Float32Array, 14 floats per vertex.
+ */
+export const buildVertices = (mesh, palette, { smooth = 0 } = {}) => {
     let tris = 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, mesh.faces.map((f) => surfaceOf(f, palette).soft)) : null;
     let o = 0;
-    for (const face of mesh.faces) {
+    mesh.faces.forEach((face, fi) => {
         const pts = face.v.map((k) => mesh.positions[k]);
-        const n = norm(faceNormal(pts));
+        const flat = norm(faceNormal(pts));
         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 p of [pts[0], pts[j], pts[j + 1]]) {
-                out.set([...p, ...n, ...c, ...mat], o);
+        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;
             }
         }
-    }
+    });
     return out;
 };
 const INSTANCE_FLOATS = 15; // at(3) ex(3) ey(3) ez(3) color(3)
@@ -71,17 +261,23 @@ struct U {
   ground : vec4<f32>,
   eye : vec4<f32>,
   mat : vec4<f32>,     // ambient, diffuse, specular, shininess
-  fx : vec4<f32>,      // filmic (0 or 1), exposure, emission gain
+  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;
 
-struct VIn { @location(0) pos : vec3<f32>, @location(1) nrm : vec3<f32>, @location(2) col : vec3<f32>, @location(8) mat : vec4<f32> };
+struct VIn { @location(0) pos : vec3<f32>, @location(1) nrm : vec3<f32>, @location(2) col : vec3<f32>, @location(8) mat : vec4<f32>, @location(9) soft : f32 };
 struct VOut {
   @builtin(position) p : vec4<f32>,
   @location(0) n : vec3<f32>,
   @location(1) c : vec3<f32>,
   @location(2) w : vec3<f32>,
   @location(3) m : vec4<f32>,   // metal, rough, alpha, emit
+  @location(4) s : f32,         // soft
 };
 
 @vertex fn vs(i : VIn) -> VOut {
@@ -91,6 +287,7 @@ struct VOut {
   o.c = i.col;
   o.w = i.pos;
   o.m = i.mat;
+  o.s = i.soft;
   return o;
 }
 
@@ -110,8 +307,61 @@ struct IIn {
   o.c = i.col;
   o.w = w;
   o.m = vec4<f32>(0.0, 0.7, 1.0, 0.0);
+  o.s = 0.0;
+  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));
@@ -124,16 +374,57 @@ fn aces(x : vec3<f32>) -> vec3<f32> {
   return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), vec3<f32>(0.0), vec3<f32>(1.0));
 }
 
+// Direct light, shared by both looks: x diffuse, y highlight, z scattered light (soft materials).
+// Studio: the key light is u.light (placed by the camera), plus a softer fill and a rim light that only edges the shape.
+fn lights(n : vec3<f32>, v : vec3<f32>, shin : f32, soft : f32) -> vec3<f32> {
+  let key = normalize(u.light.xyz);
+  let ndl = dot(n, key);
+  // soft: the light wraps round the form, and a warm band of scattered light sits where light turns to shade
+  var diff = max((ndl + soft) / (1.0 + soft), 0.0);
+  let h = normalize(key + v);
+  var spec = pow(max(dot(n, h), 0.0), shin) * step(0.0, ndl);
+  let scat = soft * exp(-ndl * ndl * 5.0);
+  if (u.fx.w > 0.5) {
+    diff = diff * 0.85; // three lights add up: the key takes a little less
+    let fl = normalize(u.fill.xyz);
+    diff = diff + max((dot(n, fl) + soft) / (1.0 + soft), 0.0) * u.fill.w;
+    let rl = normalize(u.rim.xyz);
+    let edge = pow(1.0 - max(dot(n, v), 0.0), 2.5);
+    diff = diff + max(dot(n, rl), 0.0) * edge * u.rim.w * 2.0;
+    let rh = normalize(rl + v);
+    spec = spec + pow(max(dot(n, rh), 0.0), shin) * step(0.0, dot(n, rl)) * u.rim.w * 0.6 * edge;
+  }
+  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;
   let rough = i.m.y;
   let albedo = toLinear(i.c);
-  let hemi = mix(toLinear(u.ground.rgb), toLinear(u.sky.rgb), n.y * 0.5 + 0.5) * u.mat.x;
-  let diff = max(dot(n, l), 0.0) * u.mat.y * 1.6;
-  let h = normalize(l + v);
+  let hemi = mix(toLinear(u.ground.rgb), toLinear(u.sky.rgb), n.y * 0.5 + 0.5) * u.mat.x * select(1.0, 0.7, u.fx.w > 0.5);
   let shin = mix(u.mat.w * 7.0, u.mat.w * 0.15, rough);
-  let spec = pow(max(dot(n, h), 0.0), shin) * mix(u.mat.z, 1.0, metal) * mix(1.0, 0.35, rough) * step(0.0, dot(n, l)) * 2.5;
+  let lt = lights(n, v, shin, i.s);
+  let diff = lt.x * u.mat.y * 1.6;
+  let spec = lt.y * mix(u.mat.z, 1.0, metal) * mix(1.0, 0.35, rough) * 2.5;
   let r = reflect(-v, n);
   // Schlick: edges mirror more, metal keeps its tint
   let f0 = mix(vec3<f32>(0.04), albedo, metal);
@@ -144,6 +435,8 @@ fn filmic(i : VOut, n : vec3<f32>, l : vec3<f32>, v : vec3<f32>) -> vec4<f32> {
           + env * fres * (1.0 - rough) * 0.5
           + 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);
 }
@@ -153,21 +446,29 @@ 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;
-  let hemi = mix(u.ground.rgb, u.sky.rgb, n.y * 0.5 + 0.5) * u.mat.x;
-  let diff = max(dot(n, l), 0.0) * u.mat.y;
-  let h = normalize(l + v);
+  let hemi = mix(u.ground.rgb, u.sky.rgb, n.y * 0.5 + 0.5) * u.mat.x * select(1.0, 0.7, u.fx.w > 0.5);
   // roughness widens the highlight; metal makes it strong and tinted by the color
   let shin = mix(u.mat.w * 7.0, u.mat.w * 0.15, rough);
-  let spec = pow(max(dot(n, h), 0.0), shin) * mix(u.mat.z, 1.0, metal) * mix(1.0, 0.35, rough) * step(0.0, dot(n, l));
+  let lt = lights(n, v, shin, i.s);
+  let diff = lt.x * u.mat.y;
+  let spec = lt.y * mix(u.mat.z, 1.0, metal) * mix(1.0, 0.35, rough);
   // metal mirrors the sky above and the ground below, blurred by roughness
   let r = reflect(-v, n);
   let env = mix(u.ground.rgb * 1.2, u.sky.rgb * 1.5, smoothstep(-0.25 - rough * 0.5, 0.25 + rough * 0.5, r.y));
   var lit = i.c * (hemi + vec3<f32>(diff)) * (1.0 - metal)
           + i.c * env * metal * (1.0 - 0.6 * rough)
-          + vec3<f32>(spec) * mix(vec3<f32>(1.0), i.c, metal);
+          + 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);
 }
@@ -179,14 +480,18 @@ fn filmic(i : VOut, n : vec3<f32>, l : vec3<f32>, v : vec3<f32>) -> vec4<f32> {
  * prototype mesh, data from buildInstances; drawn after the mesh), background [r,g,b] 0..1,
  * light { direction, sky, ground }, material { ambient, diffuse, specular, shininess }, dpr.
  */
-export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
+export const createGpu = async (canvas, { sampleCount = 4, onError } = {}) => {
     if (!globalThis.navigator?.gpu)
         throw new Error('WebGPU is not available in this browser');
     const adapter = await navigator.gpu.requestAdapter();
     if (!adapter)
         throw new Error('No WebGPU adapter found');
     const device = await adapter.requestDevice();
-    device.addEventListener('uncapturederror', (e) => console.error('WebGPU:', e.error?.message ?? e));
+    device.addEventListener('uncapturederror', (e) => {
+        const message = String(e.error?.message ?? e);
+        console.error('WebGPU:', message);
+        onError?.(message);
+    });
     device.lost.then((info) => console.error('WebGPU device lost:', info.reason, info.message));
     const context = canvas.getContext('webgpu');
     if (!context)
@@ -194,6 +499,12 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
     const format = navigator.gpu.getPreferredCanvasFormat();
     context.configure({ device, format, alphaMode: 'opaque', });
     const module = device.createShaderModule({ code: SHADER });
+    // shader compile errors are reported to onError too (the browser only logs them to the console)
+    module.getCompilationInfo?.().then((info) => {
+        for (const m of info.messages ?? [])
+            if (m.type === 'error')
+                onError?.(`shader line ${m.lineNum}: ${m.message}`);
+    });
     const meshLayout = {
         arrayStride: FLOATS * 4,
         attributes: [
@@ -201,6 +512,7 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
             { shaderLocation: 1, offset: 12, format: 'float32x3' },
             { shaderLocation: 2, offset: 24, format: 'float32x3' },
             { shaderLocation: 8, offset: 36, format: 'float32x4' },
+            { shaderLocation: 9, offset: 52, format: 'float32' },
         ],
     };
     const instanceLayout = {
@@ -208,8 +520,14 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
         stepMode: 'instance',
         attributes: [3, 4, 5, 6, 7].map((loc, k) => ({ shaderLocation: loc, offset: k * 12, format: 'float32x3' })),
     };
+    // ONE explicit layout for every pipeline: with 'auto' each pipeline gets its own, and a bind group made for one is refused by the others
+    const bindLayout = device.createBindGroupLayout({
+        // visibility 1 | 2 = GPUShaderStage.VERTEX | FRAGMENT
+        entries: [{ binding: 0, visibility: 1 | 2, buffer: { type: 'uniform' } }],
+    });
+    const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindLayout] });
     const make = (entry, buffers, glass = false) => device.createRenderPipeline({
-        layout: 'auto',
+        layout: pipelineLayout,
         vertex: { module, entryPoint: entry, buffers },
         fragment: {
             module,
@@ -235,12 +553,55 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
     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: 160, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
-    const bind = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [{ binding: 0, resource: { buffer: uniforms } }] });
-    const instBind = device.createBindGroup({ layout: instPipeline.getBindGroupLayout(0), entries: [{ binding: 0, resource: { buffer: uniforms } }] });
+    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;
@@ -251,6 +612,15 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
     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
@@ -271,30 +641,55 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
         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 } = {}, 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 };
         const cam = makeCamera(view, mesh, size, fit);
         targets(Math.max(1, Math.round(size * dpr)));
-        if (mesh !== uploaded || palette !== uploadedPalette) {
-            const all = buildVertices(mesh, palette);
+        const crease = smooth === true ? 40 : smooth || 0;
+        if (mesh !== uploaded || palette !== uploadedPalette || crease !== uploadedSmooth) {
+            uploadedSmooth = 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);
@@ -306,6 +701,22 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
             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();
@@ -346,15 +757,36 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
         }
         if (!glassTris.length)
             glassCount = 0;
-        const u = new Float32Array(40);
-        u.set(viewProjection(cam), 0);
-        u.set([...(norm(L.direction)), 0], 16);
+        // 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(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);
         u.set([M.ambient, M.diffuse, M.specular, M.shininess], 32);
-        u.set([filmic ? 1 : 0, filmic ? filmic.exposure : 1, filmic ? filmic.emit : 0, 0], 36);
+        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 })
@@ -385,6 +817,12 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
             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);
@@ -392,6 +830,12 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
             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()]);
@@ -430,6 +874,7 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
     const destroy = () => {
         vertexBuffer?.destroy();
         glassBuffer?.destroy();
+        markBuffer?.destroy();
         protoBuffer?.destroy();
         instBuffer?.destroy();
         depth?.destroy();