3draft 26.11.3001 → 26.11.5001

package/dist/gpu.js

@@ -3,10 +3,10 @@
 // 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 { makeCamera } from './camera.js';
 import { surfaceOf } from './material.js';
-const FLOATS = 13; // position(3) normal(3) color(3) material(4: metal, rough, alpha, emit)
+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.
@@ -29,26 +29,60 @@ 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) => {
+    const cosC = Math.cos((crease * 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 (dot(unit[i], unit[j]) < cosC)
+                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) : 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 k of [0, j, j + 1]) {
+                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,16 +105,20 @@ 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, 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
 };
 @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 {
@@ -90,6 +128,7 @@ struct VOut {
   o.c = i.col;
   o.w = i.pos;
   o.m = i.mat;
+  o.s = i.soft;
   return o;
 }
 
@@ -109,29 +148,91 @@ 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;
 }
 
+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));
+}
+fn toSrgb(c : vec3<f32>) -> vec3<f32> {
+  return select(1.055 * pow(c, vec3<f32>(1.0 / 2.4)) - 0.055, c * 12.92, c <= vec3<f32>(0.0031308));
+}
+// ACES filmic curve (Narkowicz fit): highlights roll off softly instead of clipping
+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);
+}
+
+// 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 * 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 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);
+  let fres = f0 + (vec3<f32>(1.0) - f0) * pow(1.0 - max(dot(n, v), 0.0), 5.0) * (1.0 - rough);
+  let env = mix(toLinear(u.ground.rgb) * 1.2, toLinear(u.sky.rgb) * 1.5, smoothstep(-0.25 - rough * 0.5, 0.25 + rough * 0.5, r.y));
+  var lit = albedo * (hemi + vec3<f32>(diff)) * (1.0 - metal)
+          + albedo * env * metal * (1.0 - 0.6 * rough)
+          + 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 * i.m.w * u.fx.z;
+  return vec4<f32>(toSrgb(aces(lit * u.fx.y)), i.m.z);
+}
+
 @fragment fn fs(i : VOut, @builtin(front_facing) front : bool) -> @location(0) vec4<f32> {
   var n = normalize(i.n);
   if (!front) { n = -n; }
   let l = normalize(u.light.xyz);
   let v = normalize(u.eye.xyz - i.w);
+  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);
-  lit = mix(lit, i.c * 1.15, i.m.w);
+          + 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 = 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);
 }
 `;
@@ -142,14 +243,18 @@ struct IIn {
  * 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)
@@ -157,6 +262,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: [
@@ -164,6 +275,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 = {
@@ -171,24 +283,46 @@ 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' })),
     };
-    const make = (entry, buffers) => device.createRenderPipeline({
-        layout: 'auto',
+    // 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: pipelineLayout,
         vertex: { module, entryPoint: entry, buffers },
-        fragment: { module, entryPoint: 'fs', targets: [{ format }] },
+        fragment: {
+            module,
+            entryPoint: 'fs',
+            targets: [
+                glass
+                    ? {
+                        format,
+                        blend: {
+                            color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                        },
+                    }
+                    : { format },
+            ],
+        },
         primitive: { topology: 'triangle-list', cullMode: 'none' },
-        depthStencil: { format: 'depth24plus', depthWriteEnabled: true, depthCompare: 'less' },
-        // the fragment alpha becomes coverage: a half transparent face covers half of the samples (one pass, no sorting)
-        multisample: sampleCount > 1 ? { count: sampleCount, alphaToCoverageEnabled: true } : { count: sampleCount },
+        // see-through faces (alpha < 1) are blended over what is behind them: they test depth but do not write it
+        depthStencil: { format: 'depth24plus', depthWriteEnabled: !glass, depthCompare: 'less' },
+        multisample: { count: sampleCount },
     });
     const pipeline = make('vs', [meshLayout]);
+    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: 144, 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 uniforms = device.createBuffer({ size: 192, 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 vertexCount = 0;
     let protoMesh = null;
     let protoBuffer = null;
@@ -199,6 +333,12 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
     let instCount = 0;
     let vertexBuffer = null;
     let capacity = 0;
+    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
+    let glassSource = new Float32Array(0);
+    let glassCount = 0;
+    let glassEye = '';
     let px = 0;
     let depth = null;
     let color = null;
@@ -213,13 +353,32 @@ 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 } = {}, readback = false) => {
+    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 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 verts = buildVertices(mesh, palette);
+        const crease = smooth === true ? 40 : smooth || 0;
+        if (mesh !== uploaded || palette !== uploadedPalette || crease !== uploadedSmooth) {
+            uploadedSmooth = crease;
+            const 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 = [];
+            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]);
+            }
+            glassSource = all;
+            glassEye = '';
+            const verts = Float32Array.from(solid);
             if (verts.byteLength > capacity) {
                 vertexBuffer?.destroy();
                 capacity = Math.max(verts.byteLength, 4096);
@@ -253,13 +412,37 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
         }
         if (!instances)
             instCount = 0;
-        const u = new Float32Array(36);
+        const eyeKey = cam.eye.join(',');
+        if (glassTris.length && eyeKey !== glassEye) {
+            glassEye = eyeKey;
+            const [ex, ey, ez] = cam.eye;
+            const far = (t) => (t.c[0] - ex) ** 2 + (t.c[1] - ey) ** 2 + (t.c[2] - ez) ** 2;
+            const sorted = [...glassTris].sort((a, b) => far(b) - far(a)); // far first
+            const out = new Float32Array(sorted.length * 3 * FLOATS);
+            sorted.forEach((t, k) => out.set(glassSource.subarray(t.at, t.at + 3 * FLOATS), k * 3 * FLOATS));
+            if (out.byteLength > glassCapacity) {
+                glassBuffer?.destroy();
+                glassCapacity = Math.max(out.byteLength, 4096);
+                glassBuffer = device.createBuffer({ size: glassCapacity, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST });
+            }
+            device.queue.writeBuffer(glassBuffer, 0, out);
+            glassCount = sorted.length * 3;
+        }
+        if (!glassTris.length)
+            glassCount = 0;
+        // 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([...(norm(L.direction)), 0], 16);
+        u.set([...(S ? rig(0.7, -0.5, 0.6) : norm(L.direction)), 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, 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);
         device.queue.writeBuffer(uniforms, 0, u);
         const encoder = device.createCommandEncoder();
         const offscreen = readback
@@ -291,6 +474,13 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
             pass.setVertexBuffer(1, instBuffer);
             pass.draw(protoCount, instCount);
         }
+        if (glassCount) {
+            // after everything solid (and the instances): see-through faces, far to near
+            pass.setPipeline(glassPipeline);
+            pass.setBindGroup(0, bind);
+            pass.setVertexBuffer(0, glassBuffer);
+            pass.draw(glassCount);
+        }
         pass.end();
         if (!offscreen) {
             device.queue.submit([encoder.finish()]);
@@ -328,6 +518,7 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
     const pixels = (mesh, view, options) => draw(mesh, view, options, true);
     const destroy = () => {
         vertexBuffer?.destroy();
+        glassBuffer?.destroy();
         protoBuffer?.destroy();
         instBuffer?.destroy();
         depth?.destroy();

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 export declare const name: "3draft";
-export declare const version = "26.11.3001";
+export declare const version = "26.11.5001";
 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 } from './csg.js';
-export type { BooleanOp } from './csg.js';
+export { boolean, union, subtract, intersect, health } from './csg.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';
@@ -14,7 +14,7 @@ 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, buildInstances, defaultLight, defaultMaterial } from './gpu.js';
+export { createGpu, viewProjection, buildVertices, cornerNormals, buildInstances, defaultLight, defaultMaterial } from './gpu.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,3 +31,5 @@ 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 type { Wire } from './wire.js';

package/dist/index.js

@@ -4,16 +4,16 @@
 // 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.3001';
+export const version = '26.11.5001';
 export { box, extrude, merge, rotate, bounds, faceNormal, faceCenter } from './mesh.js';
 export { validate } from './check.js';
-export { boolean, union, subtract, intersect } from './csg.js';
+export { boolean, union, subtract, intersect, health } from './csg.js';
 export { extrudeFace, moveVertices } from './edit.js';
 export { VIEW_ORDER, makeCamera, orbit, project, ray } from './camera.js';
 export { pick, crosshair } from './pick.js';
 export { standOn } from './place.js';
 export { paintOrder } from './order.js';
-export { createGpu, viewProjection, buildVertices, buildInstances, defaultLight, defaultMaterial } from './gpu.js';
+export { createGpu, viewProjection, buildVertices, cornerNormals, buildInstances, defaultLight, defaultMaterial } from './gpu.js';
 export { renderView, renderViews, renderSheet } from './svg.js';
 export { surfaceOf, DEFAULTS as MATERIAL_DEFAULTS } from './material.js';
 export { displayVersion } from './version.js';
@@ -30,3 +30,4 @@ export const info = () => ({
     ],
 });
 export { initKernel } from './kernel.js';
+export { insertVertex, cutFace, moveVertex, fillLoop, addLine, findLoop, nearestSurface, wireFromSegments, moveVertexSet } from './wire.js';

package/dist/material.d.ts

@@ -6,10 +6,12 @@ export interface Material {
     metal?: number;
     /** 0 = mirror-like, 1 = matte; widens the highlight. */
     rough?: number;
-    /** 1 = solid, 0 = invisible. Drawn with alpha-to-coverage: one pass, no sorting. */
+    /** 1 = solid, 0 = invisible. Blended over what is behind it (WebGPU: a second pass, far to near). */
     alpha?: number;
-    /** 0..1: how much the color glows on its own, unlit. */
+    /** 0..5: how much the color glows on its own, unlit. Up to 1 it fades from lit to flat colour; above 1 (WebGPU `tonemap`) it is a light source: that many times brighter. */
     emit?: number;
+    /** 0..1: soft, skin-like light. The light wraps round the form and a warm, scattered band shows where light turns to shade. */
+    soft?: number;
 }
 export type Palette = Record<string, Material>;
 /** What a face is made of, all numbers filled in. */
@@ -19,13 +21,16 @@ export interface Surface {
     rough: number;
     alpha: number;
     emit: number;
+    soft: number;
 }
+export declare const EMIT_MAX = 5;
 export declare const FALLBACK_COLOR = "#c8c8c8";
 export declare const DEFAULTS: {
     readonly metal: 0;
     readonly rough: 0.7;
     readonly alpha: 1;
     readonly emit: 0;
+    readonly soft: 0;
 };
 /** The surface of a face: its palette entry when it names one, else just its color with default properties. */
 export declare const surfaceOf: (face: Pick<Face, "color" | "mat">, palette?: Palette) => Surface;

package/dist/material.js

@@ -1,17 +1,19 @@
 // Materials are data. A palette is a plain object { name: Material }; a face points at an entry by name
 // (`face.mat`) and keeps its own `color` as a fallback, so a mesh still looks right without the palette.
 // One shader draws all of them; the numbers below are the only knobs.
-const clamp01 = (n, fallback) => (typeof n === 'number' && Number.isFinite(n) ? Math.max(0, Math.min(1, n)) : fallback);
+const clamp = (n, fallback, max = 1) => (typeof n === 'number' && Number.isFinite(n) ? Math.max(0, Math.min(max, n)) : fallback);
+export const EMIT_MAX = 5;
 export const FALLBACK_COLOR = '#c8c8c8';
-export const DEFAULTS = { metal: 0, rough: 0.7, alpha: 1, emit: 0 };
+export const DEFAULTS = { metal: 0, rough: 0.7, alpha: 1, emit: 0, soft: 0 };
 /** The surface of a face: its palette entry when it names one, else just its color with default properties. */
 export const surfaceOf = (face, palette) => {
     const m = face.mat !== undefined ? palette?.[face.mat] : undefined;
     return {
         color: m?.color ?? face.color ?? FALLBACK_COLOR,
-        metal: clamp01(m?.metal, DEFAULTS.metal),
-        rough: clamp01(m?.rough, DEFAULTS.rough),
-        alpha: clamp01(m?.alpha, DEFAULTS.alpha),
-        emit: clamp01(m?.emit, DEFAULTS.emit),
+        metal: clamp(m?.metal, DEFAULTS.metal),
+        rough: clamp(m?.rough, DEFAULTS.rough),
+        alpha: clamp(m?.alpha, DEFAULTS.alpha),
+        emit: clamp(m?.emit, DEFAULTS.emit, EMIT_MAX),
+        soft: clamp(m?.soft, DEFAULTS.soft),
     };
 };

package/dist/wire.d.ts

@@ -0,0 +1,57 @@
+import type { Mesh, Vec3, Face } from './types.js';
+/** Lines drawn on / off a mesh: pairs of vertex indices. */
+export type Wire = [number, number][];
+/**
+ * Puts a vertex at `point`, which lies on face `face`. On an existing vertex it returns that one; on an edge it is
+ * added to both faces that share the edge (no crack); inside the face it splits the face into triangles around it.
+ * { mesh, index }
+ */
+export declare const insertVertex: (mesh: Mesh, face: number, point: Vec3) => {
+    mesh: Mesh;
+    index: number;
+};
+/**
+ * Cuts the face that holds vertices `a` and `b` (not next to each other) along the line a-b: two convex faces.
+ * `cut` is false when no face holds both, or they are already neighbours on every face.
+ */
+export declare const cutFace: (mesh: Mesh, a: number, b: number) => {
+    mesh: Mesh;
+    cut: boolean;
+};
+/** Moves vertex `i` to `to`. Polygons that use it become triangles, so every face stays planar. */
+export declare const moveVertex: (mesh: Mesh, i: number, to: Vec3) => Mesh;
+/**
+ * A face from a closed loop of vertices. It is wound to point away from `awayFrom` (default: the middle of the
+ * mesh), which is what a patch closing a gap in a surface wants; 4 or more vertices become a fan of triangles.
+ */
+export declare const fillLoop: (mesh: Mesh, loop: number[], face?: Partial<Face>, awayFrom?: Vec3) => Mesh;
+/** Adds the line a-b (not twice, not a point). */
+export declare const addLine: (wire: Wire, a: number, b: number) => Wire;
+/**
+ * The shortest closed loop of lines through line [a, b], at most `max` vertices: [a, ..., b], or null.
+ * Close it with fillLoop.
+ */
+export declare const findLoop: (wire: Wire, [a, b]: [number, number], max?: number) => number[] | null;
+/**
+ * The surface point of the mesh nearest to `p`, if it is within `tolerance`: { face, point } (point lies on the face),
+ * otherwise null. For placing a point that was drawn near a surface on the surface.
+ */
+export declare const nearestSurface: (mesh: Mesh, p: Vec3, tolerance: number) => {
+    face: number;
+    point: Vec3;
+} | null;
+/**
+ * Turns line segments (pairs of points) into wire on the mesh: each end becomes a vertex (an existing one within
+ * `tolerance`, a new one on the surface when it is near it, otherwise a free point in the air), each segment a line,
+ * and two ends on one face cut that face. Returns the new mesh and wire.
+ */
+export declare const wireFromSegments: (mesh: Mesh, wire: Wire, segments: [Vec3, Vec3][], tolerance: number) => {
+    mesh: Mesh;
+    wire: Wire;
+};
+/**
+ * Moves several vertices at once: `moves` is [[index, newPosition], ...]. A polygon whose vertices all moved by the
+ * same step (a face dragged as a whole) stays as it is; any other polygon that uses a moved vertex becomes triangles,
+ * so every face stays planar.
+ */
+export declare const moveVertexSet: (mesh: Mesh, moves: [number, Vec3][]) => Mesh;