trid3d 0.2.0 → 0.3.1

package/trid/render/proceduralTextures.js

@@ -0,0 +1,211 @@
+import { fbm2, noise2 } from "../math/noise.js";
+import { updateTexture } from "../loaders/texture.js";
+
+/**
+ * Procedural textures: patterns painted in code, from a style, two colors
+ * and a seed. Every style tiles with no seam (the noise repeats and every
+ * count is a whole number), so they wrap around spheres, lathes and
+ * repeated textures cleanly. Like a canvas painted once, they're uploaded
+ * once.
+ *
+ *   scene.add({ mesh: makeShape("cube"), material: { texture: makeTexture("wood") } });
+ */
+
+/** The built-in styles of `makeTexture`. */
+export const TEXTURE_STYLES = ["noise", "marble", "wood", "bricks", "checker", "bark", "spots", "stripes", "solid"];
+
+/** Default colors for each style: [first, second]. */
+const DEFAULT_COLORS = {
+  noise: ["#3a3f4b", "#c9ced6"],
+  marble: ["#e9e6df", "#5d5a55"],
+  wood: ["#8a5a33", "#5a3820"],
+  bricks: ["#9c4a35", "#cfc8bb"],
+  checker: ["#f5f0e6", "#E9806E"],
+  bark: ["#4a3426", "#2a1d15"],
+  spots: ["#e8c88f", "#5a3d22"],
+  stripes: ["#f2efe8", "#4a6fa5"],
+  solid: ["#c0c0c0", "#c0c0c0"],
+};
+
+const clamp01 = (t) => Math.min(1, Math.max(0, t));
+const smooth = (a, b, t) => {
+  const x = clamp01((t - a) / (b - a));
+  return x * x * (3 - 2 * x);
+};
+const even = (n) => Math.max(2, Math.round(n / 2) * 2);
+const frac = (x) => x - Math.floor(x);
+
+/**
+ * For a style, a function of (u, v) in [0, 1) giving `[t, light]`: how much
+ * of the second color to use (0..1), and a brightness to multiply by.
+ */
+function styleFn(style, s, seed) {
+  // Noise with `period` p repeats every p units: sampled at u * (a multiple of p), it tiles
+  const f = (x, y, octaves, period, k = 0) => fbm2(x, y, { octaves, period, seed: seed + k });
+  switch (style) {
+    case "solid":
+      return () => [0, 1];
+    case "noise":
+      return (u, v) => [smooth(0.25, 0.75, f(u * s, v * s, 5, s)), 1];
+    case "marble":
+      return (u, v) => {
+        const turb = f(u * s, v * s, 6, s);
+        const t = 0.5 + 0.5 * Math.sin(((u + v) * s + turb * 2.5) * Math.PI * 2);
+        return [Math.pow(t, 6), 1];
+      };
+    case "wood":
+      return (u, v) => {
+        const warp = f(u * s, v * s, 4, s) * 3;
+        const ring = frac(u * s * 2 + warp);
+        // Fine grain along the boards (64 and 4 are both multiples of the period 4)
+        return [smooth(0.55, 0.95, ring), 0.9 + 0.1 * f(u * 64, v * 4, 2, 4, 7)];
+      };
+    case "bricks": {
+      const rows = even(s * 2), cols = s;
+      return (u, v) => {
+        const row = Math.floor(v * rows);
+        const x = u * cols + (row % 2) * 0.5;
+        const fx = frac(x), fy = v * rows - row;
+        if (Math.min(fx, 1 - fx) < 0.04 || Math.min(fy, 1 - fy) < 0.08) return [1, 1]; // mortar
+        // Each brick its own shade (bricks cut by the edge are the same brick on the other side)
+        const brick = ((Math.floor(x) % cols) + cols) % cols;
+        const tint = 0.85 + 0.3 * noise2(brick, row, { seed });
+        return [0.15 * f(u * 32, v * 32, 3, 32), tint];
+      };
+    }
+    case "checker": {
+      const c = even(s);
+      return (u, v) => [(Math.floor(u * c) + Math.floor(v * c)) % 2, 1];
+    }
+    case "bark":
+      return (u, v) => {
+        const ridges = Math.abs(f(u * s * 3, v * s, 5, s) * 2 - 1);
+        return [smooth(0.05, 0.4, ridges), 0.8 + 0.4 * ridges];
+      };
+    case "spots":
+      return (u, v) => [smooth(0.55, 0.62, f(u * s, v * s, 4, s)), 1];
+    case "stripes":
+      return (u, v) => [smooth(0.45, 0.55, 0.5 + 0.5 * Math.sin((v * s + f(u * 4, v * 4, 3, 4) * 0.4) * Math.PI * 2)), 1];
+    default:
+      throw new Error(`makeTexture: unknown style "${style}" (one of ${TEXTURE_STYLES.join(", ")}, or a function)`);
+  }
+}
+
+/** [r, g, b, a] (0..255, a 0..1) from "#rgb", "#rrggbb", "#rrggbbaa", "rgb(...)" / "rgba(...)" or an array. */
+export function colorBytes(color) {
+  if (Array.isArray(color)) return [color[0] ?? 0, color[1] ?? 0, color[2] ?? 0, color[3] ?? 1];
+  const s = String(color).trim();
+  if (s[0] === "#") {
+    let h = s.slice(1);
+    if (h.length === 3 || h.length === 4) h = h.replace(/./g, "$&$&");
+    const v = (i) => parseInt(h.slice(i, i + 2), 16);
+    return [v(0), v(2), v(4), h.length === 8 ? v(6) / 255 : 1];
+  }
+  const nums = s.match(/-?[\d.]+%?/g);
+  if (/^rgba?\(/i.test(s) && nums && nums.length >= 3) {
+    const ch = (x) => (x.endsWith("%") ? (parseFloat(x) * 255) / 100 : +x);
+    const a = nums[3] === undefined ? 1 : nums[3].endsWith("%") ? parseFloat(nums[3]) / 100 : +nums[3];
+    return [ch(nums[0]), ch(nums[1]), ch(nums[2]), a];
+  }
+  // Named CSS colors need the browser to read them
+  if (typeof document !== "undefined") {
+    const ctx = document.createElement("canvas").getContext("2d");
+    if (ctx) {
+      ctx.fillStyle = "#000";
+      ctx.fillStyle = s;
+      if (ctx.fillStyle !== s) return colorBytes(ctx.fillStyle);
+    }
+  }
+  throw new Error(`Can't read the color "${color}"`);
+}
+
+/**
+ * The pixels of a procedural texture, without a canvas (for workers, or to
+ * process them further). Same options as `makeTexture`.
+ *
+ * @param {string|((u:number, v:number) => number)} style - A style name, or `(u, v) => t`
+ * @param {Object} [opts] - See `makeTexture`
+ * @returns {{ width:number, height:number, data:Uint8ClampedArray }} RGBA rows, top row first
+ */
+export function texturePixels(style = "noise", opts = {}) {
+  const {
+    size = 256,
+    colors = typeof style === "string" ? DEFAULT_COLORS[style] ?? DEFAULT_COLORS.noise : ["#000000", "#ffffff"],
+    scale = 4,
+    seed = 0,
+    grain = 0,
+  } = opts;
+  const width = Math.max(1, Math.floor(size)), height = width;
+  const s = Math.max(1, Math.round(scale));
+  const a = colorBytes(colors[0]), b = colorBytes(colors[1] ?? colors[0]);
+  const fn = typeof style === "function" ? (u, v) => [clamp01(style(u, v)), 1] : styleFn(style, s, seed);
+  const data = new Uint8ClampedArray(width * height * 4);
+
+  for (let y = 0; y < height; y++) {
+    // Image rows go down, texture v goes up
+    const v = 1 - (y + 0.5) / height;
+    for (let x = 0; x < width; x++) {
+      const u = (x + 0.5) / width;
+      const [t, light] = fn(u, v);
+      const g = grain > 0 ? 1 + (fbm2(u * 128, v * 128, { octaves: 2, period: 128, seed: seed + 99 }) - 0.5) * grain : 1;
+      const k = (y * width + x) * 4;
+      for (let c = 0; c < 3; c++) data[k + c] = (a[c] + (b[c] - a[c]) * t) * light * g;
+      data[k + 3] = (a[3] + (b[3] - a[3]) * t) * 255;
+    }
+  }
+  return { width, height, data };
+}
+
+/**
+ * Paints a procedural texture on a canvas: wood, marble, bricks... Every
+ * style tiles with no seam. Pass the result as a material's `texture`.
+ *
+ * | Style | Looks like | `scale` is |
+ * | --- | --- | --- |
+ * | `"noise"` | Soft clouds | Blobs across |
+ * | `"marble"` | Veined stone | Veins across |
+ * | `"wood"` | Boards with rings and grain (rings run along v) | Rings across, ×2 |
+ * | `"bricks"` | A brick wall, each brick its own shade | Bricks across (rows: 2× as many) |
+ * | `"checker"` | A checkerboard | Squares across (made even) |
+ * | `"bark"` | Rough ridges running along v | Ridges across, ×3 |
+ * | `"spots"` | Blotches, like a giraffe | Spots across |
+ * | `"stripes"` | Wavy stripes across v | Stripes |
+ * | `"solid"` | Just the first color (with `grain`: a rough surface) | — |
+ *
+ * `style` can also be your own function `(u, v) => t`: 0 gives the first
+ * color, 1 the second. It should repeat for u and v in [0, 1) to tile.
+ *
+ * Repainting into the same canvas (`opts.canvas`) calls `updateTexture` for you.
+ *
+ * @example
+ * const floor = makeTexture("wood", { colors: ["#a87447", "#6b4426"], scale: 3, grain: 0.15 });
+ * scene.add({ mesh: makeShape("plane"), material: { texture: floor, textureRepeat: 4 } });
+ *
+ * @param {string|((u:number, v:number) => number)} [style="noise"] - One of `TEXTURE_STYLES`, or a function
+ * @param {Object} [opts]
+ * @param {number} [opts.size=256] - Width and height in pixels (a power of two is best for WebGL 1)
+ * @param {(string|number[])[]} [opts.colors] - [first, second]: hex, rgb() / rgba(), CSS names or [r, g, b, a?]
+ *   (default: a pair that suits the style)
+ * @param {number} [opts.scale=4] - How many times the pattern repeats across (a whole number)
+ * @param {number} [opts.seed=0] - Another whole number gives another texture of the same style
+ * @param {number} [opts.grain=0] - Fine speckles on top, 0 to 1
+ * @param {HTMLCanvasElement|OffscreenCanvas} [opts.canvas] - Paint into this canvas instead of a new one
+ * @returns {HTMLCanvasElement|OffscreenCanvas} The canvas
+ */
+export function makeTexture(style = "noise", opts = {}) {
+  const { width, height, data } = texturePixels(style, opts);
+  let canvas = opts.canvas;
+  if (!canvas) {
+    if (typeof document !== "undefined") canvas = document.createElement("canvas");
+    else if (typeof OffscreenCanvas !== "undefined") canvas = new OffscreenCanvas(width, height);
+    else throw new Error("makeTexture needs a browser (or a worker with OffscreenCanvas); use texturePixels instead");
+  }
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  const img = ctx.createImageData(width, height);
+  img.data.set(data);
+  ctx.putImageData(img, 0, 0);
+  if (opts.canvas) updateTexture(canvas);
+  return canvas;
+}

package/trid/render/shapes.js

@@ -364,67 +364,134 @@ export function triangulate(pts) {
  * centered on the origin: blades, axes, keys, stars, letters, floor plans.
  * The outline may go either way round and may be concave (no holes).
  *
+ * Options:
+ * - `bevel`: cuts the edges between the sides and the front / back by this
+ *   much, so they catch the light (and a blade gets a thin edge). Up to half
+ *   the depth.
+ * - `bevelSegments`: 1 is a flat chamfer, more makes a rounded edge.
+ * - `taper`: size of the back compared to the front (1 = same, 0.5 = half
+ *   as big), scaled around the middle of the outline's bounding box.
+ *
  * Texture coordinates: the front and back map the outline's bounding box,
- * the sides wrap u along the outline and v across the depth. Edges are the
- * front and back outlines plus a line at each corner.
+ * the sides wrap u along the outline and v from front to back. Edges are
+ * the outline at each step plus a line along each corner.
  *
  * @example
  * const star = Array.from({ length: 10 }, (_, i) => {
  *   const a = (i / 10) * Math.PI * 2, r = i % 2 ? 0.2 : 0.5;
  *   return { x: Math.cos(a) * r, y: Math.sin(a) * r };
  * });
- * scene.add({ mesh: extrude(star, 0.15), material: { fill: "#fc5" } });
+ * scene.add({ mesh: extrude(star, 0.15, { bevel: 0.03, bevelSegments: 3 }), material: { fill: "#fc5", smooth: true } });
  *
  * @param {{x:number, y:number}[]} outline - The flat shape (3 points or more)
  * @param {number} [depth=0.2] - Thickness along Z
+ * @param {Object} [opts]
+ * @param {number} [opts.bevel=0] - How much the edges are cut (clamped to half the depth)
+ * @param {number} [opts.bevelSegments=1] - Steps around a bevel (1 = flat chamfer)
+ * @param {number} [opts.taper=1] - Size of the back compared to the front
  * @returns {import("../index.d.ts").Mesh}
  */
-export function extrude(outline, depth = 0.2) {
+export function extrude(outline, depth = 0.2, { bevel = 0, bevelSegments = 1, taper = 1 } = {}) {
   const pts = signedArea(outline) < 0 ? [...outline].reverse() : outline;
   const n = pts.length;
+  const half = depth / 2;
+  const b = Math.max(0, Math.min(bevel, half));
+  const steps = Math.max(1, Math.floor(bevelSegments));
+
+  const xs = pts.map((p) => p.x), ys = pts.map((p) => p.y);
+  const x0 = Math.min(...xs), y0 = Math.min(...ys);
+  const w = Math.max(...xs) - x0 || 1, h = Math.max(...ys) - y0 || 1;
+  const cx = x0 + w / 2, cy = y0 + h / 2;
+
+  // The profile from front (-z) to back (+z): how far each ring is pulled in, and its z.
+  // A bevel is a quarter circle (or a chamfer) at each end.
+  const profile = [];
+  if (b > 0) {
+    for (let i = 0; i <= steps; i++) {
+      const a = (i / steps) * (Math.PI / 2);
+      profile.push({ inset: steps === 1 ? b * (1 - i) : b * (1 - Math.sin(a)), z: -half + (steps === 1 ? b * i : b * (1 - Math.cos(a))) });
+    }
+    // Skip the straight middle when the bevels meet
+    const backStart = b < half - 1e-9 ? 0 : 1;
+    for (let i = backStart; i <= steps; i++) {
+      const a = (i / steps) * (Math.PI / 2);
+      profile.push({ inset: steps === 1 ? b * i : b * (1 - Math.cos(a)), z: half - (steps === 1 ? b * (1 - i) : b * (1 - Math.sin(a))) });
+    }
+  } else {
+    profile.push({ inset: 0, z: -half }, { inset: 0, z: half });
+  }
+
+  // Inward direction at each corner (the outline is counter-clockwise, so inside is on the left)
+  const inward = pts.map((p, i) => {
+    const prev = pts[(i + n - 1) % n], next = pts[(i + 1) % n];
+    const n1 = leftNormal(prev, p), n2 = leftNormal(p, next);
+    let mx = n1.x + n2.x, my = n1.y + n2.y;
+    const ml = Math.hypot(mx, my) || 1;
+    mx /= ml; my /= ml;
+    // Miter: longer at sharp corners, but capped so they don't spike
+    const k = Math.min(3, 1 / Math.max(0.2, mx * n1.x + my * n1.y));
+    return { x: mx * k, y: my * k };
+  });
+
   const vertices = [];
   const faces = [];
   const uvs = [];
   const faceUVs = [];
   const uv = (u, v) => uvs.push({ u, v }) - 1;
-
-  // 0..n-1 at the front (-z), n..2n-1 at the back (+z)
-  for (const p of pts) vertices.push({ x: p.x, y: p.y, z: -depth / 2 });
-  for (const p of pts) vertices.push({ x: p.x, y: p.y, z: depth / 2 });
-
-  const xs = pts.map((p) => p.x), ys = pts.map((p) => p.y);
-  const x0 = Math.min(...xs), y0 = Math.min(...ys);
-  const w = Math.max(...xs) - x0 || 1, h = Math.max(...ys) - y0 || 1;
-  const capUV = (i) => uv((pts[i].x - x0) / w, (pts[i].y - y0) / h);
+  // Ring r is vertices r*n .. r*n+n-1
+  for (const { inset, z } of profile) {
+    const t = depth > 0 ? (z + half) / depth : 0;
+    const k = 1 + (taper - 1) * t;
+    for (let i = 0; i < n; i++) {
+      const x = pts[i].x + inward[i].x * inset, y = pts[i].y + inward[i].y * inset;
+      vertices.push({ x: cx + (x - cx) * k, y: cy + (y - cy) * k, z });
+    }
+  }
+  const last = (profile.length - 1) * n;
 
   // Caps: counter-clockwise outlines look clockwise from the back (+z), so the
   // back cap keeps that order and the front cap (seen from -z) is reversed
-  for (const [a, b, c] of triangulate(pts)) {
-    faces.push([n + a, n + b, n + c]);
-    faceUVs.push([capUV(a), capUV(b), capUV(c)]);
-    faces.push([c, b, a]);
-    faceUVs.push([capUV(c), capUV(b), capUV(a)]);
+  const capUV = (i) => uv((pts[i].x - x0) / w, (pts[i].y - y0) / h);
+  for (const [a, c1, c2] of triangulate(profile[0].inset > 0 ? vertices.slice(0, n) : pts)) {
+    faces.push([last + a, last + c1, last + c2]);
+    faceUVs.push([capUV(a), capUV(c1), capUV(c2)]);
+    faces.push([c2, c1, a]);
+    faceUVs.push([capUV(c2), capUV(c1), capUV(a)]);
   }
 
-  // Sides, u by length along the outline
+  // Sides between each pair of rings, u by length along the outline, v by length along the profile
   const len = [0];
   for (let i = 0; i < n; i++) len.push(len[i] + Math.hypot(pts[(i + 1) % n].x - pts[i].x, pts[(i + 1) % n].y - pts[i].y));
   const total = len[n] || 1;
-  for (let i = 0; i < n; i++) {
-    const j = (i + 1) % n;
-    const ua = len[i] / total, ub = len[i + 1] / total;
-    faces.push([n + j, n + i, i, j]);
-    faceUVs.push([uv(ub, 1), uv(ua, 1), uv(ua, 0), uv(ub, 0)]);
+  const along = [0];
+  for (let r = 1; r < profile.length; r++) {
+    along.push(along[r - 1] + Math.hypot(profile[r].inset - profile[r - 1].inset, profile[r].z - profile[r - 1].z));
+  }
+  const vTotal = along[along.length - 1] || 1;
+  for (let r = 0; r < profile.length - 1; r++) {
+    const f0 = r * n, f1 = (r + 1) * n;
+    const va = along[r] / vTotal, vb = along[r + 1] / vTotal;
+    for (let i = 0; i < n; i++) {
+      const j = (i + 1) % n;
+      const ua = len[i] / total, ub = len[i + 1] / total;
+      faces.push([f1 + j, f1 + i, f0 + i, f0 + j]);
+      faceUVs.push([uv(ub, vb), uv(ua, vb), uv(ua, va), uv(ub, va)]);
+    }
   }
 
   const edges = [
-    pts.map((_, i) => i),
-    pts.map((_, i) => n + i),
-    ...pts.map((_, i) => [i, n + i]),
+    ...profile.map((_, r) => pts.map((_, i) => r * n + i)),
+    ...pts.flatMap((_, i) => profile.slice(1).map((_, r) => [r * n + i, (r + 1) * n + i])),
   ];
   return { vertices, edges, faces, uvs, faceUVs };
 }
 
+/** Unit normal on the left of the edge a → b (inside, for a counter-clockwise outline). */
+function leftNormal(a, b) {
+  const dx = b.x - a.x, dy = b.y - a.y, l = Math.hypot(dx, dy) || 1;
+  return { x: -dy / l, y: dx / l };
+}
+
 /**
  * Scales a mesh along the X, Y, and Z axes.
  *
@@ -452,6 +519,7 @@ export function scaleMesh(mesh, sx = 1, sy = 1, sz = 1) {
     v.y *= sy;
     v.z *= sz;
   }
+  mesh.dirty = true; // so the WebGL renderer uploads the new positions
   return mesh;
 }
 

package/trid/render/webglRenderer.js

@@ -1,28 +1,28 @@
 import { DEFAULT_FOV, DEFAULT_NEAR } from "../math/transform.js";
+import { normalMatrix, determinantMat4 } from "../math/matrix.js";
+import { worldObjects } from "../sceneGraph.js";
 import { clear, edgeSegments, wireEdges } from "./draw.js";
 import { parseColor } from "./color.js";
 import { DEFAULT_LIGHT, DEFAULT_AMBIENT, materialsOf } from "./canvasRenderer.js";
 import { uvsFor, uvTransform, mappingKey } from "./uvMapping.js";
 import { newell, cornerNormals, creaseOf } from "./normals.js";
 import { SURFACE_GLSL, buildEffects, effectsKey } from "./effects.js";
-import { textureReady, textureSize, textureIsLive } from "../loaders/texture.js";
+import { textureReady, textureSize, textureIsLive, textureVersion } from "../loaders/texture.js";
 
 /** Farthest distance drawn by the WebGL renderer, unless the camera sets `far`. */
 export const DEFAULT_FAR = 1000;
 
-// Trid's transform pipeline, written in GLSL. It matches localToWorld,
-// worldToCamera and project() exactly, so tools and picking line up.
+// Trid's transform pipeline, written in GLSL. It matches the objects' world
+// matrices, worldToCamera and project() exactly, so tools and picking line up.
 const COMMON = `
-uniform vec3 uPos, uRot, uScale;
+uniform mat4 uModel; // the object's world matrix (its parents' transforms included)
 uniform vec3 uCamPos;
 uniform vec2 uCamRot; // yaw, pitch
 uniform float uF, uAspect, uNear, uFar;
 
 vec3 rotX(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(p.x, p.y * c - p.z * s, p.y * s + p.z * c); }
 vec3 rotY(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(p.x * c - p.z * s, p.y, p.x * s + p.z * c); }
-vec3 rotZ(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(p.x * c - p.y * s, p.x * s + p.y * c, p.z); }
-vec3 rotXYZ(vec3 p) { return rotZ(rotY(rotX(p, uRot.x), uRot.y), uRot.z); }
-vec3 toWorld(vec3 v) { return rotXYZ(v * uScale) + uPos; }
+vec3 toWorld(vec3 v) { return (uModel * vec4(v, 1.0)).xyz; }
 vec3 toCamera(vec3 p) { return rotX(rotY(p - uCamPos, uCamRot.x), uCamRot.y); }
 vec4 toClip(vec3 p) {
   float a = (uFar + uNear) / (uFar - uNear);
@@ -40,9 +40,10 @@ varying vec3 vWorld;
 varying vec3 vLocal;
 varying vec2 vUV;
 uniform mat3 uUVTransform; // textureRepeat, textureOffset, textureRotation
+uniform mat3 uNormalMatrix; // keeps normals right on stretched and mirrored objects
 ${COMMON}
 void main() {
-  vNormal = rotXYZ(aNormal / uScale); // inverse scale keeps normals right on stretched objects
+  vNormal = uNormalMatrix * aNormal;
   vLocal = aPos;
   vUV = (uUVTransform * vec3(aUV, 1.0)).xy;
   vWorld = toWorld(aPos);
@@ -108,7 +109,7 @@ ${fx.calls}
   return { source, uniforms: fx.uniforms };
 }
 
-const FACE_UNIFORMS = ["uUVTransform", "uLight", "uAmbient", "uShade", "uTime", "uBackground", "uCamWorld", "uTexture", "uUseTexture"];
+const FACE_UNIFORMS = ["uUVTransform", "uNormalMatrix", "uLight", "uAmbient", "uShade", "uTime", "uBackground", "uCamWorld", "uTexture", "uUseTexture"];
 
 // Each line segment is a thin rectangle facing the screen, `uWidth` pixels wide
 const LINE_VS = `
@@ -144,7 +145,7 @@ void main() {
 }
 `;
 
-const UNIFORMS = ["uPos", "uRot", "uScale", "uCamPos", "uCamRot", "uF", "uAspect", "uNear", "uFar", "uColor"];
+const UNIFORMS = ["uModel", "uCamPos", "uCamRot", "uF", "uAspect", "uNear", "uFar", "uColor"];
 
 /**
  * Draws a scene with WebGL, on the graphics card.
@@ -160,6 +161,12 @@ const UNIFORMS = ["uPos", "uRot", "uScale", "uCamPos", "uCamRot", "uF", "uAspect
  *
  * Meshes are sent to the graphics card once and reused. After changing
  * a mesh's vertices, edges or faces in place, set `mesh.dirty = true`.
+ * Textures are sent once too (videos every frame): after redrawing a canvas,
+ * call `updateTexture(canvas)`.
+ *
+ * Meshes and textures that haven't been drawn for `releaseAfter` frames
+ * are freed from the graphics card, so replacing them (`obj.mesh = newMesh`)
+ * doesn't fill its memory. They're sent again if they come back.
  *
  * @example
  * const scene = new Scene(canvas, { renderer: new WebGLRenderer() });
@@ -178,9 +185,13 @@ export class WebGLRenderer {
   /**
    * @param {Object} [opts]
    * @param {boolean} [opts.antialias=true] - Smooth edges
+   * @param {number} [opts.releaseAfter=300] - Free meshes and textures not drawn for this many frames
+   *   (about 5 s at 60 fps). `Infinity` keeps everything until `dispose()`
    * @throws {Error} If WebGL isn't available (check `WebGLRenderer.isSupported()` first)
    */
-  constructor({ antialias = true } = {}) {
+  constructor({ antialias = true, releaseAfter = 300 } = {}) {
+    /** Frames a mesh or texture can go undrawn before it's freed (Infinity: never). */
+    this.releaseAfter = releaseAfter;
     /** The hidden canvas WebGL draws on. */
     this.canvas = document.createElement("canvas");
     this._options = { antialias, alpha: true, premultipliedAlpha: true, depth: true };
@@ -210,6 +221,9 @@ export class WebGLRenderer {
     this._buffers = new Set();
     this._textures = new WeakMap(); // image / canvas / video → GL texture
     this._glTextures = new Set();
+    // Last frame each mesh / texture source was drawn, to free the ones no longer used
+    this._meshUse = new Map();
+    this._textureUse = new Map();
     this._warned = new WeakSet();
     this._frame = 0;
 
@@ -266,13 +280,17 @@ export class WebGLRenderer {
 
     // Opaque things first; see-through ones after, without writing depth
     const opaque = [], clear2 = [];
-    for (const obj of scene.objects) {
+    // Every object with a mesh, groups' children included, with its world matrix
+    const drawn = worldObjects(scene).filter((o) => o.mesh);
+    for (const obj of drawn) {
       const geo = this._geometry(obj.mesh);
       const lineColor = this._color(ctx, obj.color ?? scene.color);
       const lineWidth = obj.lineWidth ?? scene.lineWidth;
       const mats = materialsOf(obj);
 
       if (mats) {
+        // Normals turn with the object; a mirrored one has its faces' winding reversed
+        const place = { normals: normalMatrix(obj.world), mirrored: determinantMat4(obj.world) < 0 };
         // One draw per group of faces sharing a material (mesh.faceMaterials)
         const groups = geo.groups.map((g) => {
           const k = g.index >= 0 && g.index < mats.length && mats[g.index] ? g.index : 0;
@@ -280,7 +298,7 @@ export class WebGLRenderer {
         });
         for (const g of groups) {
           const fill = this._color(ctx, g.mat.fill ?? (g.mat.texture ? "#ffffff" : scene.color));
-          (fill[3] < 1 ? clear2 : opaque).push({ kind: "face", obj, geo, color: fill, mat: g.mat, first: g.first, count: g.count });
+          (fill[3] < 1 ? clear2 : opaque).push({ kind: "face", obj, geo, color: fill, mat: g.mat, first: g.first, count: g.count, place });
         }
         const lines = (buf) => (lineColor[3] < 1 ? clear2 : opaque).push({ kind: "line", obj, buf, color: lineColor, width: lineWidth });
         if (groups.every((g) => g.mat.wireframe)) lines(this._lineBuffer(geo, "outlines", () => outlinePairs(geo.faceList ?? [])));
@@ -300,7 +318,49 @@ export class WebGLRenderer {
     ctx.drawImage(this.canvas, 0, 0);
 
     // Meshes marked as changed have been sent again
-    for (const obj of scene.objects) if (obj.mesh.dirty) obj.mesh.dirty = false;
+    for (const obj of drawn) if (obj.mesh.dirty) obj.mesh.dirty = false;
+
+    if (this._frame % 60 === 0) this._sweep();
+  }
+
+  /**
+   * What the renderer keeps on the graphics card right now.
+   *
+   * @returns {{ meshes:number, buffers:number, textures:number }}
+   */
+  get memory() {
+    return { meshes: this._meshUse.size, buffers: this._buffers.size, textures: this._glTextures.size };
+  }
+
+  /**
+   * Frees a mesh's buffers or a texture's image on the graphics card now,
+   * instead of waiting for `releaseAfter`. If it's drawn again, it's sent again.
+   *
+   * @param {Object} item - A mesh, or a texture source (image, canvas, video)
+   */
+  release(item) {
+    if (!item || this._disposed) return;
+    const geo = this._meshes.get(item);
+    if (geo) {
+      for (const b of buffersOf(geo)) this._free(b);
+      this._meshes.delete(item);
+    }
+    this._meshUse.delete(item);
+    const t = this._textures.get(item);
+    if (t) {
+      this.gl.deleteTexture(t.tex);
+      this._glTextures.delete(t.tex);
+      this._textures.delete(item);
+    }
+    this._textureUse.delete(item);
+  }
+
+  /** Frees what hasn't been drawn for `releaseAfter` frames. */
+  _sweep() {
+    if (!(this.releaseAfter < Infinity)) return;
+    const oldest = this._frame - this.releaseAfter;
+    for (const [item, frame] of this._meshUse) if (frame < oldest) this.release(item);
+    for (const [item, frame] of this._textureUse) if (frame < oldest) this.release(item);
   }
 
   /** Frees the graphics card memory. The renderer can't be used afterwards. */
@@ -312,6 +372,8 @@ export class WebGLRenderer {
     for (const t of this._glTextures) gl.deleteTexture(t);
     this._glTextures.clear();
     this._buffers.clear();
+    this._meshUse.clear();
+    this._textureUse.clear();
     for (const p of new Set(this._faces.values())) gl.deleteProgram(p.program);
     gl.deleteProgram(this._line.program);
     gl.getExtension("WEBGL_lose_context")?.loseContext();
@@ -330,10 +392,7 @@ export class WebGLRenderer {
 
     gl.useProgram(prog.program);
     const u = prog.uniforms;
-    const { pos, rot, scale } = d.obj;
-    gl.uniform3f(u.uPos, pos.x, pos.y, pos.z);
-    gl.uniform3f(u.uRot, rot.x, rot.y, rot.z);
-    gl.uniform3f(u.uScale, scale.x, scale.y, scale.z);
+    gl.uniformMatrix4fv(u.uModel, false, d.obj.world);
     gl.uniform3fv(u.uCamPos, view.camPos);
     gl.uniform2fv(u.uCamRot, view.camRot);
     gl.uniform1f(u.uF, view.f);
@@ -348,6 +407,8 @@ export class WebGLRenderer {
     if (isFace) {
       const m = uvTransform(d.mat) ?? [1, 0, 0, 1, 0, 0];
       gl.uniformMatrix3fv(u.uUVTransform, false, [m[0], m[1], 0, m[2], m[3], 0, m[4], m[5], 1]);
+      gl.uniformMatrix3fv(u.uNormalMatrix, false, d.place.normals);
+      gl.frontFace(d.place.mirrored ? gl.CCW : gl.CW);
       gl.uniform3fv(u.uLight, light);
       gl.uniform1f(u.uAmbient, ambient);
       gl.uniform1f(u.uShade, d.mat.shade === false ? 0 : 1);
@@ -364,7 +425,7 @@ export class WebGLRenderer {
       if (a.aNormal >= 0) gl.vertexAttribPointer(a.aNormal, 3, gl.FLOAT, false, 32, 12);
       if (a.aUV >= 0) gl.vertexAttribPointer(a.aUV, 2, gl.FLOAT, false, 32, 24);
       const tex = d.mat.texture
-        ? this._texture(d.mat.texture, !!d.mat.pixelated, d.obj.mesh, !!uvsFor(d.obj.mesh, d.mat.mapping).faceUVs)
+        ? this._texture(d.mat.texture, d.mat, d.obj.mesh, !!uvsFor(d.obj.mesh, d.mat.mapping).faceUVs)
         : null;
       gl.activeTexture(gl.TEXTURE0);
       gl.bindTexture(gl.TEXTURE_2D, tex);
@@ -417,8 +478,9 @@ export class WebGLRenderer {
    * (canvases and videos: every frame). Null while it isn't ready,
    * or if the mesh has no texture coordinates.
    */
-  _texture(src, pixelated, mesh, hasUVs) {
+  _texture(src, mat, mesh, hasUVs) {
     const gl = this.gl;
+    const pixelated = !!mat.pixelated;
     if (!textureReady(src)) return null;
     if (!hasUVs) {
       if (!this._warned.has(mesh)) {
@@ -429,24 +491,29 @@ export class WebGLRenderer {
     }
 
     let t = this._textures.get(src);
-    const live = textureIsLive(src);
-    if (!t || live || t.failed) {
+    const live = textureIsLive(src, mat);
+    const version = textureVersion(src);
+    this._textureUse.set(src, this._frame);
+    // Sent once, then again after updateTexture(src), or every frame when live
+    if (!t || live || t.version !== version || t.failed) {
       if (t?.failed) return null;
       let { w, h } = textureSize(src);
       if (!t) {
-        t = { tex: gl.createTexture(), frame: -1 };
+        t = { tex: gl.createTexture(), frame: -1, version: -1 };
         this._textures.set(src, t);
         this._glTextures.add(t.tex);
       }
       if (t.frame !== this._frame) {
+        const changed = t.version !== version;
         t.frame = this._frame;
+        t.version = version;
         gl.bindTexture(gl.TEXTURE_2D, t.tex);
         // Bigger than the graphics card allows: upload a smaller copy
         let pixels = src;
         const max = gl.getParameter(gl.MAX_TEXTURE_SIZE);
         if (w > max || h > max) {
           const k = max / Math.max(w, h);
-          if (!t.small || live) t.small = shrink(src, Math.floor(w * k), Math.floor(h * k), t.small);
+          if (!t.small || live || changed) t.small = shrink(src, Math.floor(w * k), Math.floor(h * k), t.small);
           if (!t.warned) {
             t.warned = true;
             console.warn(`Trid: a ${w} × ${h} texture is bigger than this graphics card allows (${max}), so it's drawn at ${t.small.width} × ${t.small.height}`);
@@ -496,14 +563,13 @@ export class WebGLRenderer {
 
   /** Graphics card buffers for a mesh, built once and rebuilt when it changes. */
   _geometry(mesh) {
+    this._meshUse.set(mesh, this._frame);
     let geo = this._meshes.get(mesh);
     const stale = !geo || mesh.dirty || geo.vertices !== mesh.vertices || geo.faceList !== mesh.faces
       || geo.edgeList !== mesh.edges || geo.faceMats !== mesh.faceMaterials || geo.counts !== countsOf(mesh);
     if (!stale) return geo;
 
-    if (geo) {
-      for (const b of [...geo.lines.values(), ...geo.faceBuffers.values(), ...geo.groupOutlines.values()]) this._free(b);
-    }
+    if (geo) for (const b of buffersOf(geo)) this._free(b);
     const faces = mesh.faces ?? [];
 
     // Faces grouped by material index, in the order the face buffers store them
@@ -631,6 +697,11 @@ export class WebGLRenderer {
   }
 }
 
+/** Every graphics card buffer of a mesh's geometry. */
+function buffersOf(geo) {
+  return [...geo.lines.values(), ...geo.faceBuffers.values(), ...geo.groupOutlines.values()];
+}
+
 /** A short string that changes when a mesh's arrays grow or shrink. */
 function countsOf(mesh) {
   return `${mesh.vertices.length}/${mesh.edges?.length ?? 0}/${mesh.faces?.length ?? 0}`;