3draft 26.11.2005 → 26.11.4010

package/dist/csg.js

@@ -0,0 +1,330 @@
+// Boolean operations on closed solids: union, subtract (a - b) and intersect.
+// A BSP tree per solid (after Evan Wallace's csg.js): polygons are cut by the planes of the other solid
+// and the pieces inside or outside are kept, so every result face stays planar and convex, which is what
+// the rest of the engine assumes. The result is welded and its T-junctions are closed, so it is a closed
+// solid again and can go into the next boolean. Faces keep the color and material of the face they came from;
+// a face cut into a solid by the other one takes the color of the cutting face.
+import { sub, dot, cross, len } from './vec.js';
+import { faceNormal, bounds } from './mesh.js';
+import { validate } from './check.js';
+let CSG_EPS = 1e-6; // set per operation, relative to the size of the two solids
+const unit = (v) => {
+    const l = len(v) || 1;
+    return [v[0] / l, v[1] / l, v[2] / l];
+};
+const polysOf = (mesh) => mesh.faces.flatMap((f) => {
+    const pts = f.v.map((k) => mesh.positions[k]);
+    const n = unit(faceNormal(pts));
+    return len(faceNormal(pts)) < 1e-12 ? [] : [{ pts, n, w: dot(n, pts[0]), color: f.color, mat: f.mat }];
+});
+const flip = (p) => ({ ...p, pts: [...p.pts].reverse(), n: [-p.n[0], -p.n[1], -p.n[2]], w: -p.w });
+/** Cuts `p` by the plane into the four buckets. */
+const splitPoly = (plane, p, cf, cb, front, back) => {
+    const COPLANAR = 0;
+    const FRONT = 1;
+    const BACK = 2;
+    const SPANNING = 3;
+    let type = 0;
+    const types = p.pts.map((q) => {
+        const t = dot(plane.n, q) - plane.w;
+        const k = t < -CSG_EPS ? BACK : t > CSG_EPS ? FRONT : COPLANAR;
+        type |= k;
+        return k;
+    });
+    if (type === COPLANAR)
+        (dot(plane.n, p.n) > 0 ? cf : cb).push(p);
+    else if (type === FRONT)
+        front.push(p);
+    else if (type === BACK)
+        back.push(p);
+    else if (type === SPANNING) {
+        const f = [];
+        const b = [];
+        for (let i = 0; i < p.pts.length; i++) {
+            const j = (i + 1) % p.pts.length;
+            const ti = types[i];
+            const tj = types[j];
+            const vi = p.pts[i];
+            const vj = p.pts[j];
+            if (ti !== BACK)
+                f.push(vi);
+            if (ti !== FRONT)
+                b.push(vi);
+            if ((ti | tj) === SPANNING) {
+                const t = (plane.w - dot(plane.n, vi)) / dot(plane.n, sub(vj, vi));
+                const v = [vi[0] + (vj[0] - vi[0]) * t, vi[1] + (vj[1] - vi[1]) * t, vi[2] + (vj[2] - vi[2]) * t];
+                f.push(v);
+                b.push(v);
+            }
+        }
+        if (f.length >= 3)
+            front.push({ ...p, pts: f });
+        if (b.length >= 3)
+            back.push({ ...p, pts: b });
+    }
+};
+const build = (node, polys) => {
+    if (!polys.length)
+        return;
+    if (!node.plane)
+        node.plane = { n: polys[0].n, w: polys[0].w };
+    const front = [];
+    const back = [];
+    for (const p of polys)
+        splitPoly(node.plane, p, node.polys, node.polys, front, back);
+    if (front.length)
+        build((node.front ??= { plane: null, front: null, back: null, polys: [] }), front);
+    if (back.length)
+        build((node.back ??= { plane: null, front: null, back: null, polys: [] }), back);
+};
+const tree = (polys) => {
+    const node = { plane: null, front: null, back: null, polys: [] };
+    build(node, polys);
+    return node;
+};
+const invert = (node) => {
+    node.polys = node.polys.map(flip);
+    if (node.plane)
+        node.plane = { n: [-node.plane.n[0], -node.plane.n[1], -node.plane.n[2]], w: -node.plane.w };
+    invert0(node);
+};
+const invert0 = (node) => {
+    if (node.front)
+        invert(node.front);
+    if (node.back)
+        invert(node.back);
+    [node.front, node.back] = [node.back, node.front];
+};
+/** The parts of `polys` that are outside the solid of `node`. */
+const clipPolys = (node, polys) => {
+    if (!node.plane)
+        return [...polys];
+    let front = [];
+    let back = [];
+    for (const p of polys)
+        splitPoly(node.plane, p, front, back, front, back);
+    front = node.front ? clipPolys(node.front, front) : front;
+    back = node.back ? clipPolys(node.back, back) : [];
+    return [...front, ...back];
+};
+const clipTo = (node, other) => {
+    node.polys = clipPolys(other, node.polys);
+    if (node.front)
+        clipTo(node.front, other);
+    if (node.back)
+        clipTo(node.back, other);
+};
+const all = (node) => [...node.polys, ...(node.front ? all(node.front) : []), ...(node.back ? all(node.back) : [])];
+/** Polygons to a welded mesh: shared vertices, no sliver faces, T-junctions closed. */
+const toMesh = (polys, scale) => {
+    const cell = scale * 1e-5;
+    const ids = new Map();
+    const positions = [];
+    const weld = (p) => {
+        // look in the neighbouring cells too, so a point on a cell border still finds its twin
+        const base = p.map((c) => Math.round(c / cell));
+        for (let dx = -1; dx <= 1; dx++)
+            for (let dy = -1; dy <= 1; dy++)
+                for (let dz = -1; dz <= 1; dz++) {
+                    const hit = ids.get(`${base[0] + dx},${base[1] + dy},${base[2] + dz}`);
+                    if (hit !== undefined && len(sub(positions[hit], p)) <= cell * 1.5)
+                        return hit;
+                }
+        ids.set(base.join(','), positions.length);
+        positions.push(p);
+        return positions.length - 1;
+    };
+    let faces = polys.flatMap((p) => {
+        const v = [];
+        for (const q of p.pts) {
+            const k = weld(q);
+            if (v[v.length - 1] !== k)
+                v.push(k);
+        }
+        if (v.length > 1 && v[0] === v[v.length - 1])
+            v.pop();
+        if (v.length < 3)
+            return [];
+        // slivers stay for now: their vertices still give the neighbours' edges something to join to (see below)
+        return [{ v, color: p.color, mat: p.mat }];
+    });
+    // T-junctions: a vertex lying on the edge of a neighbouring face gets inserted into that edge
+    const used = new Set(faces.flatMap((f) => f.v));
+    const verts = [...used];
+    if (verts.length * faces.length < 6e7) {
+        const tol = scale * 1e-5 * 3;
+        faces = faces.map((f) => {
+            const out = [];
+            for (let i = 0; i < f.v.length; i++) {
+                const a = f.v[i];
+                const b = f.v[(i + 1) % f.v.length];
+                out.push(a);
+                const pa = positions[a];
+                const pb = positions[b];
+                const d = sub(pb, pa);
+                const dl = len(d);
+                if (dl < tol * 4)
+                    continue;
+                const on = [];
+                for (const k of verts) {
+                    if (k === a || k === b || f.v.includes(k))
+                        continue; // never twice in one face
+                    const pk = positions[k];
+                    const t = dot(sub(pk, pa), d) / (dl * dl);
+                    if (t <= 0 || t >= 1)
+                        continue;
+                    if (len(cross(sub(pk, pa), d)) / dl <= tol)
+                        on.push({ t, k });
+                }
+                on.sort((x, y) => x.t - y.t);
+                for (const { k } of on)
+                    out.push(k);
+            }
+            return { ...f, v: out };
+        });
+    }
+    // Now the slivers can go: a face with no area (its corners are in a line, the neighbours already have the extra vertices)
+    // closes up around it. Dropping one before the T-junctions are done would leave a hole (an open edge) behind.
+    const flat = 1e-9 * scale * scale;
+    faces = faces.filter((f) => len(faceNormal(f.v.map((k) => positions[k]))) >= flat);
+    return { positions, faces };
+};
+const closedSolid = (name, m) => {
+    const v = validate(m);
+    if (!v.closed)
+        throw new Error(`boolean needs closed solids: ${name} has ${v.openEdges} open edge(s)`);
+    if (v.inside_out)
+        throw new Error(`boolean needs outward faces: ${name} is inside out`);
+};
+const subMesh = (mesh, idx) => {
+    const map = new Map();
+    const positions = [];
+    const faces = idx.map((i) => {
+        const f = mesh.faces[i];
+        return { ...f, v: f.v.map((k) => (map.has(k) ? map.get(k) : (map.set(k, positions.length), positions.push(mesh.positions[k]), positions.length - 1))) };
+    });
+    return { ...mesh, positions, faces };
+};
+/** Splits a mesh into connected parts and says which of them are closed solids (the health check). */
+export const health = (mesh) => {
+    const n = mesh.faces.length;
+    const root = Array.from({ length: n }, (_, i) => i);
+    const find = (i) => (root[i] === i ? i : (root[i] = find(root[i])));
+    const seen = new Map();
+    mesh.faces.forEach((f, i) => f.v.forEach((v, k) => {
+        const w = f.v[(k + 1) % f.v.length];
+        const key = v < w ? `${v},${w}` : `${w},${v}`;
+        const j = seen.get(key);
+        if (j === undefined)
+            seen.set(key, i);
+        else
+            root[find(i)] = find(j);
+    }));
+    const groups = new Map();
+    for (let i = 0; i < n; i++)
+        groups.set(find(i), [...(groups.get(find(i)) ?? []), i]);
+    const parts = [...groups.values()].map((faces) => {
+        const v = validate(subMesh(mesh, faces));
+        return { faces, closed: v.closed, insideOut: v.inside_out, openEdges: v.openEdges };
+    });
+    const usable = parts.filter((p) => p.closed && !p.insideOut);
+    const usableFaces = usable.reduce((t, p) => t + p.faces.length, 0);
+    return { parts, usableFaces, skippedFaces: n - usableFaces, hasSolid: usable.length > 0, allSolid: usable.length === parts.length && parts.length > 0 };
+};
+const append = (base, extra) => {
+    const o = base.positions.length;
+    return { ...base, positions: [...base.positions, ...extra.positions], faces: [...base.faces, ...extra.faces.map((f) => ({ ...f, v: f.v.map((k) => k + o) }))] };
+};
+/**
+ * Boolean of two closed solids (outward CCW faces): 'union', 'subtract' (a minus b) or 'intersect'.
+ * Throws with a reason when an input is open or inside out. With `strict: false` the parts that are not closed solids are
+ * left out of the calculation instead (see `health`): a union keeps them as they are, a subtract keeps those of `a`,
+ * an intersect drops them; it throws only when `a` has no closed part at all.
+ */
+export const boolean = (a, b, op, { strict = true } = {}) => {
+    if (strict) {
+        closedSolid('a', a);
+        closedSolid('b', b);
+        return run(a, b, op);
+    }
+    const ha = health(a);
+    const hb = health(b);
+    if (!ha.hasSolid)
+        throw new Error('boolean: the model has no closed part (nothing to calculate with)');
+    if (!hb.hasSolid)
+        throw new Error('boolean: the second model has no closed part');
+    const pick = (m, h, closed) => subMesh(m, h.parts.filter((p) => (p.closed && !p.insideOut) === closed).flatMap((p) => p.faces).sort((x, y) => x - y));
+    let out = run(pick(a, ha, true), pick(b, hb, true), op);
+    if (ha.skippedFaces)
+        out = append(out, pick(a, ha, false));
+    if (op === 'union' && hb.skippedFaces)
+        out = append(out, pick(b, hb, false));
+    return out;
+};
+// A result is sound when it is a closed, outward solid with consistent winding (and the inputs were).
+const sound = (m) => {
+    if (!m.faces.length)
+        return true; // nothing is a fine result (disjoint intersect)
+    const v = validate(m);
+    return v.closed && !v.inside_out && !v.notes.some((n) => /wound inconsistently/.test(n));
+};
+const shiftBy = (m, d) => ({ ...m, positions: m.positions.map((p) => [p[0] + d[0], p[1] + d[1], p[2] + d[2]]) });
+/**
+ * BSP booleans hit numerical trouble when faces are (nearly) coincident or a cut passes within a hair of a vertex; the
+ * result then comes out with a crack or a flipped face. A solid must stay a solid, so a result that is not sound is
+ * thrown away and the operation is repeated with the second operand moved by a tiny amount (a few tries, growing).
+ * When no try gives a sound solid it throws, so the caller keeps the original.
+ */
+const run = (a, b, op) => {
+    const first = run0(a, b, op);
+    if (sound(first) || !sound(a) || !sound(b))
+        return first;
+    const size = Math.max(bounds(a).radius, bounds(b).radius, 1e-9);
+    for (let k = 1; k <= 12; k++) {
+        const mag = size * 1e-4 * k;
+        const d = [Math.sin(k * 12.9898) * mag, Math.sin(k * 78.233) * mag, Math.sin(k * 37.719) * mag];
+        const r = run0(a, shiftBy(b, d), op);
+        if (sound(r))
+            return r;
+    }
+    throw new Error('boolean: the result would not be a closed solid (numerical trouble); the operands were left alone');
+};
+const run0 = (a, b, op) => {
+    const sa = bounds(a);
+    const sb = bounds(b);
+    const scale = Math.max(sa.radius, sb.radius, 1e-9) * 2 + len(sub(sa.center, sb.center));
+    CSG_EPS = scale * 1e-9 * 1000;
+    const A = tree(polysOf(a));
+    const B = tree(polysOf(b));
+    if (op === 'union') {
+        clipTo(A, B);
+        clipTo(B, A);
+        invert(B);
+        clipTo(B, A);
+        invert(B);
+        build(A, all(B));
+    }
+    else if (op === 'subtract') {
+        invert(A);
+        clipTo(A, B);
+        clipTo(B, A);
+        invert(B);
+        clipTo(B, A);
+        invert(B);
+        build(A, all(B));
+        invert(A);
+    }
+    else {
+        invert(A);
+        clipTo(B, A);
+        invert(B);
+        clipTo(A, B);
+        clipTo(B, A);
+        build(A, all(B));
+        invert(A);
+    }
+    return toMesh(all(A), scale);
+};
+export const union = (a, b) => boolean(a, b, 'union');
+export const subtract = (a, b) => boolean(a, b, 'subtract');
+export const intersect = (a, b) => boolean(a, b, 'intersect');

package/dist/gpu.d.ts

@@ -1,3 +1,4 @@
+import type { Palette } from './material.js';
 import type { Axes, Camera, Fit, Mesh, Vec3, ViewName, ViewSpec } from './types.js';
 type Handle = any;
 export interface GpuLight {
@@ -21,12 +22,23 @@ export interface GpuRenderOptions {
     background?: Vec3;
     light?: GpuLight;
     material?: GpuMaterial;
+    /** Named materials the faces point at (`face.mat`); pass a new object when an entry changes. */
+    palette?: Palette;
     dpr?: number;
     /** Many copies of one prototype mesh (modelled around the origin), drawn after `mesh`. */
     instances?: {
         mesh: Mesh;
         data: Float32Array;
     };
+    /**
+     * Filmic look: lighting in linear colour, HDR light and emission, Fresnel on the edges, ACES tone mapping.
+     * `true` for the defaults or { exposure = 1, emit = 2 } (emit: brightness of one unit of material `emit`, which goes up to 5).
+     * Off by default (the plain flat look).
+     */
+    tonemap?: boolean | {
+        exposure?: number;
+        emit?: number;
+    };
 }
 /** One copy of a prototype: its position, orthonormal frame and color. */
 export interface Instance {
@@ -52,8 +64,8 @@ export interface Gpu {
  * like camera.project(): the same pixels, plus a depth between near and far.
  */
 export declare const viewProjection: (cam: Camera, near?: number, far?: number) => Float32Array;
-/** Triangle list for the GPU: flat face normals and face colors. Float32Array, 9 floats per vertex. */
-export declare const buildVertices: (mesh: Mesh) => Float32Array;
+/** Triangle list for the GPU: flat face normals, face colors and materials. Float32Array, 13 floats per vertex. */
+export declare const buildVertices: (mesh: Mesh, palette?: Palette) => Float32Array;
 /**
  * Per-instance data for drawInstances: one entry { at, axes: [ex, ey, ez], color } per copy of a
  * prototype mesh (modelled around the origin). Float32Array, 15 floats per instance.

package/dist/gpu.js

@@ -5,7 +5,8 @@
 import { dot, norm } from './vec.js';
 import { faceNormal } from './mesh.js';
 import { makeCamera } from './camera.js';
-const FLOATS = 9; // position(3) normal(3) color(3)
+import { surfaceOf } from './material.js';
+const FLOATS = 13; // position(3) normal(3) color(3) material(4: metal, rough, alpha, emit)
 /**
  * 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.
@@ -28,8 +29,8 @@ 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 and face colors. Float32Array, 9 floats per vertex. */
-export const buildVertices = (mesh) => {
+/** Triangle list for the GPU: flat face normals, face colors and materials. Float32Array, 13 floats per vertex. */
+export const buildVertices = (mesh, palette) => {
     let tris = 0;
     for (const f of mesh.faces)
         tris += Math.max(0, f.v.length - 2);
@@ -38,10 +39,12 @@ export const buildVertices = (mesh) => {
     for (const face of mesh.faces) {
         const pts = face.v.map((k) => mesh.positions[k]);
         const n = norm(faceNormal(pts));
-        const c = rgb(face.color);
+        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], o);
+                out.set([...p, ...n, ...c, ...mat], o);
                 o += FLOATS;
             }
         }
@@ -68,15 +71,17 @@ 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
 };
 @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> };
+struct VIn { @location(0) pos : vec3<f32>, @location(1) nrm : vec3<f32>, @location(2) col : vec3<f32>, @location(8) mat : vec4<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
 };
 
 @vertex fn vs(i : VIn) -> VOut {
@@ -85,6 +90,7 @@ struct VOut {
   o.n = i.nrm;
   o.c = i.col;
   o.w = i.pos;
+  o.m = i.mat;
   return o;
 }
 
@@ -103,20 +109,67 @@ struct IIn {
   o.n = normalize(i.ex) * i.nrm.x + normalize(i.ey) * i.nrm.y + normalize(i.ez) * i.nrm.z;
   o.c = i.col;
   o.w = w;
+  o.m = vec4<f32>(0.0, 0.7, 1.0, 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));
+}
+
+// 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 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 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 * 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 spec = pow(max(dot(n, h), 0.0), u.mat.w) * u.mat.z * step(0.0, dot(n, l));
-  let lit = i.c * (hemi + vec3<f32>(diff)) + vec3<f32>(spec);
-  return vec4<f32>(clamp(lit, vec3<f32>(0.0), vec3<f32>(1.0)), 1.0);
+  // 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));
+  // 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, 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);
 }
 `;
 /**
@@ -147,6 +200,7 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
             { shaderLocation: 0, offset: 0, format: 'float32x3' },
             { shaderLocation: 1, offset: 12, format: 'float32x3' },
             { shaderLocation: 2, offset: 24, format: 'float32x3' },
+            { shaderLocation: 8, offset: 36, format: 'float32x4' },
         ],
     };
     const instanceLayout = {
@@ -154,22 +208,39 @@ 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({
+    const make = (entry, buffers, glass = false) => device.createRenderPipeline({
         layout: 'auto',
         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' },
+        // 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 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 } }] });
     // 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 vertexCount = 0;
     let protoMesh = null;
     let protoBuffer = null;
@@ -180,6 +251,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;
@@ -194,13 +271,30 @@ 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 = {}, 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 } = {}, 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) {
-            const verts = buildVertices(mesh);
+        if (mesh !== uploaded || palette !== uploadedPalette) {
+            const all = buildVertices(mesh, palette);
+            // 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);
@@ -210,6 +304,7 @@ export const createGpu = async (canvas, { sampleCount = 4 } = {}) => {
                 device.queue.writeBuffer(vertexBuffer, 0, verts);
             vertexCount = verts.length / FLOATS;
             uploaded = mesh;
+            uploadedPalette = palette;
         }
         if (instances?.mesh && instances.mesh !== protoMesh) {
             const v = buildVertices(instances.mesh);
@@ -233,13 +328,32 @@ 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;
+        const u = new Float32Array(40);
         u.set(viewProjection(cam), 0);
         u.set([...(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, 0], 36);
         device.queue.writeBuffer(uniforms, 0, u);
         const encoder = device.createCommandEncoder();
         const offscreen = readback
@@ -271,6 +385,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()]);
@@ -308,6 +429,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();