trid3d 0.1.1 → 0.3.0

package/trid/math/rotation.js

@@ -0,0 +1,152 @@
+import { rotateXYZ } from "./transform.js";
+
+/**
+ * Rotation matrices and move / rotate / scale operations on an object's
+ * transform ({ pos, rot, scale }, applied scale → rotate X, Y, Z → move).
+ *
+ * Matrices are 3×3, row-major (`m[row][col]`), applied as M · v. They're
+ * built from `rotateXYZ` itself, so they always match what the renderers draw.
+ *
+ * @typedef {[[number,number,number],[number,number,number],[number,number,number]]} Mat3
+ * @typedef {{x:number, y:number, z:number}} Vec3
+ * @typedef {{ pos:Vec3, rot:Vec3, scale:Vec3 }} Transform
+ *
+ * @typedef {{ mode:"move", delta:Vec3 }
+ *   | { mode:"rotate", axis:Vec3, angle:number, center:Vec3 }
+ *   | { mode:"scale", axis:Vec3|null, factor:number, center:Vec3 }} TransformOp
+ *   An operation in world space. Rotate: a right-handed turn of `angle`
+ *   radians around the unit `axis`, about `center`. Scale: `factor` about
+ *   `center`, uniform when `axis` is null, otherwise along that unit axis.
+ */
+
+const dot = (a, b) => a.x * b.x + a.y * b.y + a.z * b.z;
+const add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y, z: a.z + b.z });
+const sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y, z: a.z - b.z });
+const mul = (a, k) => ({ x: a.x * k, y: a.y * k, z: a.z * k });
+
+/**
+ * The matrix `rotateXYZ(p, rot)` applies.
+ *
+ * @param {Vec3} rot - Angles in radians (X, then Y, then Z)
+ * @returns {Mat3}
+ */
+export function matFromEuler(rot) {
+  const cx = rotateXYZ({ x: 1, y: 0, z: 0 }, rot);
+  const cy = rotateXYZ({ x: 0, y: 1, z: 0 }, rot);
+  const cz = rotateXYZ({ x: 0, y: 0, z: 1 }, rot);
+  return [
+    [cx.x, cy.x, cz.x],
+    [cx.y, cy.y, cz.y],
+    [cx.z, cy.z, cz.z],
+  ];
+}
+
+/**
+ * Angles for `rotateXYZ` (an object's `rot`) from a rotation matrix: the
+ * inverse of `matFromEuler`. Looking straight along Y (gimbal lock), X and
+ * Z turn the same way, so the whole turn goes into Z.
+ *
+ * @param {Mat3} m - A rotation matrix
+ * @returns {Vec3} Angles in radians
+ */
+export function eulerFromMat(m) {
+  // rotateXYZ's matrix is Rz·Ry·Rx: m[2][0] = sin(y), m[2][1] = cos(y)·sin(x), m[1][0] = sin(z)·cos(y)
+  const sy = Math.max(-1, Math.min(1, m[2][0]));
+  const y = Math.asin(sy);
+  if (Math.abs(sy) < 0.99999) {
+    return { x: Math.atan2(m[2][1], m[2][2]), y, z: Math.atan2(m[1][0], m[0][0]) };
+  }
+  return { x: 0, y, z: Math.atan2(-m[0][1], m[1][1]) };
+}
+
+/**
+ * A right-handed turn of `angle` radians around a unit `axis` (Rodrigues).
+ *
+ * @param {Vec3} axis - Unit vector
+ * @param {number} angle - Radians
+ * @returns {Mat3}
+ */
+export function matFromAxisAngle(axis, angle) {
+  const { x, y, z } = axis, c = Math.cos(angle), s = Math.sin(angle), t = 1 - c;
+  return [
+    [t * x * x + c, t * x * y - s * z, t * x * z + s * y],
+    [t * x * y + s * z, t * y * y + c, t * y * z - s * x],
+    [t * x * z - s * y, t * y * z + s * x, t * z * z + c],
+  ];
+}
+
+/**
+ * Matrix product a · b (b is applied first).
+ *
+ * @param {Mat3} a
+ * @param {Mat3} b
+ * @returns {Mat3}
+ */
+export function mulMat(a, b) {
+  return [0, 1, 2].map((i) => [0, 1, 2].map((j) => a[i][0] * b[0][j] + a[i][1] * b[1][j] + a[i][2] * b[2][j]));
+}
+
+/**
+ * Matrix times vector, m · v.
+ *
+ * @param {Mat3} m
+ * @param {Vec3} v
+ * @returns {Vec3}
+ */
+export function mulVec(m, v) {
+  return {
+    x: m[0][0] * v.x + m[0][1] * v.y + m[0][2] * v.z,
+    y: m[1][0] * v.x + m[1][1] * v.y + m[1][2] * v.z,
+    z: m[2][0] * v.x + m[2][1] * v.y + m[2][2] * v.z,
+  };
+}
+
+/**
+ * Applies a world-space operation to a transform and returns the new one
+ * (the input isn't changed). `TransformGizmo` reports these.
+ *
+ * - move: adds `delta` to `pos`
+ * - rotate: turns the object around `center`: its position orbits and its
+ *   orientation turns, both by the same rotation
+ * - scale: scales about `center`. Stretching a rotated object along a world
+ *   axis can't be stored as `scale` (it would shear), so it stretches the
+ *   object's own axis that points most along it
+ *
+ * @example
+ * Object.assign(obj, applyTransformOp(obj, { mode: "rotate", axis: { x: 0, y: 1, z: 0 }, angle: Math.PI / 2, center: { x: 0, y: 0, z: 0 } }));
+ *
+ * @param {Transform} t - The transform before the operation
+ * @param {TransformOp} op
+ * @returns {Transform}
+ */
+export function applyTransformOp(t, op) {
+  switch (op.mode) {
+    case "move":
+      return { pos: add(t.pos, op.delta), rot: { ...t.rot }, scale: { ...t.scale } };
+    case "rotate": {
+      const r = matFromAxisAngle(op.axis, op.angle);
+      return {
+        pos: add(op.center, mulVec(r, sub(t.pos, op.center))),
+        rot: eulerFromMat(mulMat(r, matFromEuler(t.rot))),
+        scale: { ...t.scale },
+      };
+    }
+    case "scale": {
+      const f = op.factor;
+      if (!op.axis) {
+        return { pos: add(op.center, mul(sub(t.pos, op.center), f)), rot: { ...t.rot }, scale: mul(t.scale, f) };
+      }
+      const a = op.axis;
+      const pos = add(t.pos, mul(a, (f - 1) * dot(sub(t.pos, op.center), a)));
+      // The object's own axis most aligned with the stretch (columns of its rotation)
+      const m = matFromEuler(t.rot);
+      const along = [0, 1, 2].map((j) => Math.abs(m[0][j] * a.x + m[1][j] * a.y + m[2][j] * a.z));
+      const j = along.indexOf(Math.max(...along));
+      const scale = { ...t.scale };
+      scale["xyz"[j]] *= f;
+      return { pos, rot: { ...t.rot }, scale };
+    }
+    default:
+      throw new Error("applyTransformOp: unknown mode " + op?.mode);
+  }
+}

package/trid/render/canvasRenderer.js

@@ -1,11 +1,28 @@
-import { localToWorld, worldToCamera, cameraToScreen, clipNear, rotateXYZ, DEFAULT_NEAR } from "../math/transform.js";
-import { clear, drawInstance, edgeSegments } from "./draw.js";
+import { worldToCamera, cameraToScreen, clipNear, DEFAULT_NEAR } from "../math/transform.js";
+import { transformPoint, normalMatrix, transformNormal, determinantMat4 } from "../math/matrix.js";
+import { worldObjects } from "../sceneGraph.js";
+import { clear, drawInstance, edgeSegments, wireEdges } from "./draw.js";
 import { parseColor } from "./color.js";
 import { newell, cornerNormals, creaseOf } from "./normals.js";
-import { textureReady, textureSize, textureIsLive } from "../loaders/texture.js";
+import { textureReady, textureSize, textureIsLive, textureVersion } from "../loaders/texture.js";
+import { uvsFor, uvTransform, applyUVTransform } from "./uvMapping.js";
 
 export { newell };
 
+/**
+ * An object's materials as a list (`material` can be one material or a
+ * list of them, picked per face by `mesh.faceMaterials`). Null when the
+ * object is a wireframe.
+ *
+ * @returns {Material[]|null}
+ */
+export function materialsOf(obj) {
+  const m = obj.material;
+  if (!m) return null;
+  if (!Array.isArray(m)) return [m];
+  return m.length && m[0] ? m : null;
+}
+
 /** Direction light comes from when the scene doesn't set one: above, left, in front. */
 export const DEFAULT_LIGHT = { x: -0.5, y: 1, z: -0.8 };
 
@@ -16,6 +33,10 @@ export const DEFAULT_AMBIENT = 0.25;
  * Material: how an object's faces look. Objects without one are drawn
  * as wireframes using their `color` and `lineWidth`.
  *
+ * An object's `material` can also be a list: each face then uses the
+ * entry `mesh.faceMaterials[face]` points at (the first one by default).
+ * Built-in cubes and boxes number their sides 0 to 5.
+ *
  * @typedef {Object} Material
  * @property {string} [fill] - Face color, any CSS color (default: the scene's color)
  * @property {boolean} [shade=true] - Darken faces that turn away from the light
@@ -25,7 +46,14 @@ export const DEFAULT_AMBIENT = 0.25;
  *   shapes look round. `true` keeps edges sharper than 60° hard; a number sets that angle.
  * @property {CanvasImageSource} [texture] - Image drawn on the faces (needs texture coordinates:
  *   built-in shapes and OBJ files with `vt` have them). `fill` tints it (default white).
+ * @property {boolean} [liveTexture] - Read the texture again every frame (default: only for videos).
+ *   For a canvas redrawn every frame; for one redrawn now and then, call `updateTexture(canvas)` instead
  * @property {boolean} [pixelated=false] - Keep texture pixels sharp instead of smoothing them
+ * @property {import("./uvMapping.js").Mapping} [mapping="uv"] - Where texture coordinates come
+ *   from: the mesh's own ("uv"), or made from its shape ("planar", "box", "sphere", "cylinder")
+ * @property {number|{u:number,v:number}} [textureRepeat=1] - How many times the image repeats across
+ * @property {{u:number,v:number}} [textureOffset] - Moves the image (1 = its whole width or height)
+ * @property {number} [textureRotation=0] - Turns the image around its center, in radians
  * @property {Object[]} [effects] - Effects applied in order, like `[toon(), rim()]`.
  *   See trid/render/effects.js. The canvas renderer runs them once per face.
  */
@@ -62,7 +90,7 @@ export class CanvasRenderer {
     this._splits = new WeakMap();
     this._colors = new Map();
     this._start = performance.now();
-    this._patterns = new Map(); // texture source → canvas pattern
+    this._patterns = new WeakMap(); // texture source → canvas pattern (freed with the source)
     this._warned = new WeakSet();
     this._frame = 0;
   }
@@ -78,11 +106,15 @@ export class CanvasRenderer {
     clear(ctx, w, h, scene.background);
     this._frame++;
 
+    // Every object with a mesh, groups' children included, with its world matrix
+    const drawn = worldObjects(scene).filter((o) => o.mesh);
+
     // Wireframes only: nothing to sort
-    if (!scene.objects.some((o) => o.material)) {
-      for (const obj of scene.objects) {
-        drawInstance(ctx, obj, camera, w, h, obj.color ?? scene.color, obj.lineWidth ?? scene.lineWidth);
+    if (!drawn.some((o) => materialsOf(o))) {
+      for (const obj of drawn) {
+        drawInstance(ctx, obj, camera, w, h, obj.color ?? scene.color, obj.lineWidth ?? scene.lineWidth, obj.world);
       }
+      for (const obj of drawn) if (obj.mesh.dirty) obj.mesh.dirty = false;
       return;
     }
 
@@ -96,18 +128,18 @@ export class CanvasRenderer {
     const time = (performance.now() - this._start) / 1000;
     const background = this._rgba(ctx, scene.background);
 
-    for (const obj of scene.objects) {
+    for (const obj of drawn) {
+      const mats = materialsOf(obj);
       // Split big faces (cached per mesh); extra vertices are midpoints of existing ones
-      const split = obj.material && this.maxFaceSize ? this._split(obj.mesh) : null;
+      const split = mats && this.maxFaceSize ? this._split(obj.mesh) : null;
       const verts = split ? withMidpoints(obj.mesh.vertices, split.mids) : obj.mesh.vertices;
-      const world = verts.map((v) => localToWorld(v, obj));
+      const world = verts.map((v) => transformPoint(obj.world, v));
       const cam = world.map((p) => worldToCamera(p, camera));
       const color = obj.color ?? scene.color;
       const lineWidth = obj.lineWidth ?? scene.lineWidth;
-      const mat = obj.material;
 
-      if (!mat) {
-        for (const [i, j] of edgeSegments(obj.mesh.edges)) {
+      if (!mats) {
+        for (const [i, j] of edgeSegments(wireEdges(obj.mesh))) {
           const seg = clipNear(cam[i], cam[j], near);
           if (!seg) continue;
           items.push({
@@ -119,68 +151,90 @@ export class CanvasRenderer {
         continue;
       }
 
-      const fill = mat.fill ?? (mat.texture ? "#ffffff" : scene.color);
-      const shade = mat.shade !== false;
-      const outline = mat.wireframe ? color : null;
-
-      // Smooth shading: a normal per face corner (split faces get midpoints' normals by averaging)
-      const crease = shade ? creaseOf(mat.smooth) : null;
-      const corners = crease ? cornerNormals(obj.mesh, crease) : null;
       const sourceFaces = obj.mesh.faces ?? [];
       const base = obj.mesh.vertices.length;
-      const normalAt = (F, i) => {
+      // Normals turn with the object (stretched and mirrored ones too); a mirror reverses face winding
+      const nm = normalMatrix(obj.world);
+      const flip = determinantMat4(obj.world) < 0 ? -1 : 1;
+      const flatNormal = (face) => {
+        const n = normalize(newell(face.map((i) => world[i])));
+        return { x: n.x * flip, y: n.y * flip, z: n.z * flip };
+      };
+
+      // Smooth shading: a normal per face corner (split faces get midpoints' normals by averaging)
+      const normalAt = (corners, F, i) => {
         if (i < base) return corners[F][sourceFaces[F].indexOf(i)];
         const [a, b] = split.mids[i - base];
-        const na = normalAt(F, a), nb = normalAt(F, b);
+        const na = normalAt(corners, F, a), nb = normalAt(corners, F, b);
         return normalize({ x: na.x + nb.x, y: na.y + nb.y, z: na.z + nb.z });
       };
       const lightAt = (n, back) => {
-        // Same steps as the vertices: undo the scale, then rotate (keeps normals right on stretched objects)
-        const r = normalize(rotateXYZ({ x: n.x / obj.scale.x, y: n.y / obj.scale.y, z: n.z / obj.scale.z }, obj.rot));
+        const r = transformNormal(nm, n);
         const d = (back ? -1 : 1) * (r.x * light.x + r.y * light.y + r.z * light.z);
         return ambient + (1 - ambient) * Math.max(0, d);
       };
-
-      // Textures: each triangle is filled with the image, mapped by its corners' texture coordinates
-      const meshUVs = obj.mesh.uvs, faceUVs = obj.mesh.faceUVs;
-      let tex = null;
-      if (mat.texture && textureReady(mat.texture)) {
-        if (faceUVs && meshUVs) tex = mat.texture;
-        else if (!this._warned.has(obj.mesh)) {
-          this._warned.add(obj.mesh);
-          console.warn("Trid: this mesh has no texture coordinates (uvs / faceUVs), so its texture isn't drawn");
-        }
-      }
-      const uvAt = (F, i) => {
-        const t = faceUVs?.[F];
-        if (!t || !meshUVs) return null;
-        if (i < base) return meshUVs[t[sourceFaces[F].indexOf(i)]];
-        const [a, b] = split.mids[i - base];
-        const ta = uvAt(F, a), tb = uvAt(F, b);
-        return ta && tb ? { u: (ta.u + tb.u) / 2, v: (ta.v + tb.v) / 2 } : null;
-      };
       const flatLight = (face, back) => {
-        const nw = normalize(newell(face.map((i) => world[i])));
+        const nw = flatNormal(face);
         const d = (back ? -1 : 1) * (nw.x * light.x + nw.y * light.y + nw.z * light.z);
         return ambient + (1 - ambient) * Math.max(0, d);
       };
-
-      // Effects run once per face, at its center (see trid/render/effects.js)
-      const effects = mat.effects?.length ? mat.effects : null;
-      const toWorldNormal = (n) =>
-        normalize(rotateXYZ({ x: n.x / obj.scale.x, y: n.y / obj.scale.y, z: n.z / obj.scale.z }, obj.rot));
+      const toWorldNormal = (n) => transformNormal(nm, n);
+
+      // Everything a material needs, worked out once per object and frame
+      const prepare = (mat) => {
+        const shade = mat.shade !== false;
+        const crease = shade ? creaseOf(mat.smooth) : null;
+        // Texture coordinates: the mesh's own, or made from its shape (mat.mapping)
+        const { uvs: meshUVs, faceUVs } = uvsFor(obj.mesh, mat.mapping);
+        const xf = uvTransform(mat);
+        const rawUV = (F, i) => {
+          const t = faceUVs?.[F];
+          if (!t || !meshUVs) return null;
+          if (i < base) return meshUVs[t[sourceFaces[F].indexOf(i)]];
+          const [a, b] = split.mids[i - base];
+          const ta = rawUV(F, a), tb = rawUV(F, b);
+          return ta && tb ? { u: (ta.u + tb.u) / 2, v: (ta.v + tb.v) / 2 } : null;
+        };
+        let tex = null;
+        if (mat.texture && textureReady(mat.texture)) {
+          if (faceUVs && meshUVs) tex = mat.texture;
+          else if (!this._warned.has(obj.mesh)) {
+            this._warned.add(obj.mesh);
+            console.warn("Trid: this mesh has no texture coordinates (uvs / faceUVs), so its texture isn't drawn. Set material.mapping to make some.");
+          }
+        }
+        return {
+          mat, shade, tex,
+          fill: mat.fill ?? (mat.texture ? "#ffffff" : scene.color),
+          outline: mat.wireframe ? color : null,
+          corners: crease ? cornerNormals(obj.mesh, crease) : null,
+          effects: mat.effects?.length ? mat.effects : null,
+          uvAt: (F, i) => applyUVTransform(xf, rawUV(F, i)),
+        };
+      };
+      // Which material each face uses (mesh.faceMaterials), prepared when first needed
+      const looks = new Array(mats.length);
+      const faceMats = obj.mesh.faceMaterials;
+      const lookOf = (F) => {
+        let k = faceMats?.[F] ?? 0;
+        if (!(k >= 0 && k < mats.length && mats[k])) k = 0;
+        return (looks[k] ??= prepare(mats[k]));
+      };
 
       const faces = split ? split.faces : sourceFaces;
       for (let f = 0; f < faces.length; f++) {
         const face = faces[f];
         if (face.length < 3) continue;
+        const F = split ? split.origins[f] : f; // the mesh face this one comes from
+        const L = lookOf(F);
+        const { fill, shade, outline, corners } = L;
         const pts = face.map((i) => cam[i]);
 
         // Seen from behind? (camera sits at the origin of camera space)
         const n = newell(pts);
         const c = centroid(pts);
-        const back = n.x * c.x + n.y * c.y + n.z * c.z >= 0;
-        if (back && !mat.doubleSided) continue;
+        const back = (n.x * c.x + n.y * c.y + n.z * c.z >= 0) !== (flip < 0);
+        if (back && !L.mat.doubleSided) continue;
 
         const clipped = clipPolygon(pts, near);
         if (clipped.length < 3) continue;
@@ -188,13 +242,13 @@ export class CanvasRenderer {
         // Which edges are real outlines (split faces have extra inner edges); null = all
         const edges = split && clipped === pts ? split.masks[f] : null;
 
-        if (tex && clipped === pts) {
-          const F = split ? split.origins[f] : f;
-          const ts = face.map((i) => uvAt(F, i));
+        // Textures: each triangle is filled with the image, mapped by its corners' texture coordinates
+        if (L.tex && clipped === pts) {
+          const ts = face.map((i) => L.uvAt(F, i));
           if (ts.every(Boolean)) {
             let lit;
             if (!shade) lit = face.map(() => 1);
-            else if (corners) lit = face.map((i) => lightAt(normalAt(F, i), back));
+            else if (corners) lit = face.map((i) => lightAt(normalAt(corners, F, i), back));
             else lit = face.map(() => flatLight(face, back));
             const screen = pts.map(toScreen);
             const n = face.length;
@@ -203,7 +257,7 @@ export class CanvasRenderer {
               items.push({
                 depth: c.z,
                 poly: [screen[0], screen[k], screen[k + 1]],
-                texture: { src: tex, uvs: [ts[0], ts[k], ts[k + 1]], pixelated: !!mat.pixelated, tint: fill },
+                texture: { src: L.tex, uvs: [ts[0], ts[k], ts[k + 1]], pixelated: !!L.mat.pixelated, live: textureIsLive(L.tex, L.mat), tint: fill },
                 lit: [lit[0], lit[k], lit[k + 1]],
                 outline, lineWidth,
                 edges: n === 3 ? edges : fan,
@@ -213,16 +267,16 @@ export class CanvasRenderer {
           }
         }
 
-        if (effects) {
+        // Effects run once per face, at its center (see trid/render/effects.js)
+        if (L.effects) {
           // Normal: the face's own, or the average of its corners when smooth
           let nw;
           if (corners) {
-            const F = split ? split.origins[f] : f;
-            const sum = face.map((i) => toWorldNormal(normalAt(F, i)))
+            const sum = face.map((i) => toWorldNormal(normalAt(corners, F, i)))
               .reduce((a, b) => ({ x: a.x + b.x, y: a.y + b.y, z: a.z + b.z }), { x: 0, y: 0, z: 0 });
             nw = normalize(sum);
           } else {
-            nw = normalize(newell(face.map((i) => world[i])));
+            nw = flatNormal(face);
           }
           if (back) nw = { x: -nw.x, y: -nw.y, z: -nw.z };
 
@@ -230,16 +284,16 @@ export class CanvasRenderer {
           const toCam = { x: camPos.x - position.x, y: camPos.y - position.y, z: camPos.z - position.z };
           const diffuse = Math.max(0, nw.x * light.x + nw.y * light.y + nw.z * light.z);
           const lit = shade ? ambient + (1 - ambient) * diffuse : 1;
-          const base = this._rgba(ctx, fill);
+          const rgba = this._rgba(ctx, fill);
           const s = {
-            base, normal: nw, position, local: centroid(face.map((i) => verts[i])),
+            base: rgba, normal: nw, position, local: centroid(face.map((i) => verts[i])),
             view: normalize(toCam), lightDir: light, diffuse, light: lit, ambient,
-            uv: centerUV(face.map((i) => uvAt(split ? split.origins[f] : f, i))),
+            uv: centerUV(face.map((i) => L.uvAt(F, i))),
             depth: Math.hypot(toCam.x, toCam.y, toCam.z), time, background,
             rgba: (v) => (typeof v === "string" ? this._rgba(ctx, v) : Array.isArray(v) ? v : [v.x, v.y, v.z, 1]),
           };
-          let col = [base[0] * lit, base[1] * lit, base[2] * lit, base[3]];
-          for (const e of effects) if (e.canvas) col = e.canvas(col, s, e.uniforms ?? {});
+          let col = [rgba[0] * lit, rgba[1] * lit, rgba[2] * lit, rgba[3]];
+          for (const e of L.effects) if (e.canvas) col = e.canvas(col, s, e.uniforms ?? {});
           const k = col.map((x) => Math.min(1, Math.max(0, x)));
           items.push({
             depth: c.z,
@@ -251,8 +305,7 @@ export class CanvasRenderer {
         }
 
         if (corners) {
-          const F = split ? split.origins[f] : f;
-          const lit = face.map((i) => lightAt(normalAt(F, i), back));
+          const lit = face.map((i) => lightAt(normalAt(corners, F, i), back));
           if (clipped === pts) {
             // One gradient per triangle: brightness changes linearly across a triangle
             const screen = pts.map(toScreen);
@@ -276,14 +329,7 @@ export class CanvasRenderer {
           continue;
         }
 
-        let brightness = 1;
-        if (shade) {
-          const nw = normalize(newell(face.map((i) => world[i])));
-          const s = back ? -1 : 1;
-          const d = s * (nw.x * light.x + nw.y * light.y + nw.z * light.z);
-          brightness = ambient + (1 - ambient) * Math.max(0, d);
-        }
-
+        const brightness = shade ? flatLight(face, back) : 1;
         items.push({
           depth: c.z,
           poly: clipped.map(toScreen),
@@ -347,7 +393,7 @@ export class CanvasRenderer {
     }
 
     // Meshes marked as changed have been redrawn from their new data
-    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;
   }
 
   /**
@@ -460,7 +506,7 @@ export class CanvasRenderer {
    * triangle's corners, tinted by the fill color, then darkened by the light.
    */
   _drawTextured(ctx, it) {
-    const { src, uvs, pixelated, tint } = it.texture;
+    const { src, uvs, pixelated, live, tint } = it.texture;
     const { w: W, h: H } = textureSize(src);
     const [p0, p1, p2] = it.poly;
 
@@ -486,7 +532,7 @@ export class CanvasRenderer {
       const dx1 = p1.x - p0.x, dy1 = p1.y - p0.y, dx2 = p2.x - p0.x, dy2 = p2.y - p0.y;
       const a = (dx1 * dv2 - dx2 * dv1) / det, b = (dy1 * dv2 - dy2 * dv1) / det;
       const c = (dx2 * du1 - dx1 * du2) / det, d = (dy2 * du1 - dy1 * du2) / det;
-      const pattern = this._pattern(ctx, src);
+      const pattern = this._pattern(ctx, src, live);
       pattern.setTransform(new DOMMatrix([a, b, c, d, p0.x - a * U[0] - c * V[0], p0.y - b * U[0] - d * V[0]]));
       ctx.imageSmoothingEnabled = !pixelated;
       ctx.fillStyle = pattern;
@@ -520,11 +566,15 @@ export class CanvasRenderer {
     ctx.fill();
   }
 
-  /** A repeating pattern for a texture (made again each frame for canvases and videos). */
-  _pattern(ctx, src) {
+  /**
+   * A repeating pattern for a texture. A pattern is a copy of the image, so
+   * it's made again after `updateTexture`, and every frame for live ones.
+   */
+  _pattern(ctx, src, live) {
     let p = this._patterns.get(src);
-    if (!p || (textureIsLive(src) && p.frame !== this._frame)) {
-      p = { pattern: ctx.createPattern(src, "repeat"), frame: this._frame };
+    const version = textureVersion(src);
+    if (!p || p.version !== version || (live && p.frame !== this._frame)) {
+      p = { pattern: ctx.createPattern(src, "repeat"), frame: this._frame, version };
       this._patterns.set(src, p);
     }
     return p.pattern;

package/trid/render/draw.js

@@ -1,4 +1,5 @@
 import { localToWorld, worldToCamera, cameraToScreen, clipNear, DEFAULT_NEAR } from "../math/transform.js";
+import { transformPoint } from "../math/matrix.js";
 
 /**
  * Clears the entire canvas with a solid background color.
@@ -59,11 +60,11 @@ export function line(ctx, p1, p2, color, width = 4) {
  * - An edge with 3+ indices is a closed loop: the last index
  *   connects back to the first
  *
- * @param {number[][]} edges - Edge definitions using vertex indices
+ * @param {number[][]} [edges] - Edge definitions using vertex indices (none: no segments)
  * @returns {Generator<[number, number]>} Index pairs to connect
  */
 export function* edgeSegments(edges) {
-  for (const e of edges) {
+  for (const e of edges ?? []) {
     const closed = e.length > 2;
     const count = closed ? e.length : e.length - 1;
     for (let i = 0; i < count; i++) {
@@ -72,6 +73,17 @@ export function* edgeSegments(edges) {
   }
 }
 
+/**
+ * The lines to draw for a mesh shown as a wireframe: its `edges`, or the
+ * outline of each face when it has no `edges` (a face-only mesh).
+ *
+ * @param {{ edges?: number[][], faces?: number[][] }} mesh
+ * @returns {number[][]} Edge definitions (faces are closed loops)
+ */
+export function wireEdges(mesh) {
+  return mesh.edges ?? mesh.faces ?? [];
+}
+
 /**
  * Draws a wireframe object by connecting projected vertices
  * using index-based edge definitions.
@@ -115,7 +127,7 @@ export function drawWireframe(ctx, points2, edges, color, width = 4) {
  *
  * @param {CanvasRenderingContext2D} ctx - Canvas 2D context
  * @param {{
- *   mesh:{ vertices:{x:number,y:number,z:number}[], edges:number[][] },
+ *   mesh:{ vertices:{x:number,y:number,z:number}[], edges?:number[][], faces?:number[][] },
  *   pos:{x:number,y:number,z:number},
  *   rot:{x:number,y:number,z:number},
  *   scale:{x:number,y:number,z:number}
@@ -125,16 +137,19 @@ export function drawWireframe(ctx, points2, edges, color, width = 4) {
  * @param {number} h - Canvas height
  * @param {string} color - Wireframe color
  * @param {number} lineWidth - Wireframe width
+ * @param {number[]} [world] - World matrix to place it with (e.g. `obj.world` inside a group).
+ *   Default: the instance's own pos / rot / scale
  */
-export function drawInstance(ctx, inst, camera, w, h, color, lineWidth = 3) {
+export function drawInstance(ctx, inst, camera, w, h, color, lineWidth = 3, world) {
   const near = camera.near ?? DEFAULT_NEAR;
-  const ptsCam = inst.mesh.vertices.map(v => worldToCamera(localToWorld(v, inst), camera));
+  const toWorld = world ? (v) => transformPoint(world, v) : (v) => localToWorld(v, inst);
+  const ptsCam = inst.mesh.vertices.map((v) => worldToCamera(toWorld(v), camera));
 
   ctx.lineWidth = lineWidth;
   ctx.strokeStyle = color;
 
   ctx.beginPath();
-  for (const [i, j] of edgeSegments(inst.mesh.edges)) {
+  for (const [i, j] of edgeSegments(wireEdges(inst.mesh))) {
     const seg = clipNear(ptsCam[i], ptsCam[j], near);
     if (!seg) continue;
     const a = cameraToScreen(seg[0], camera, w, h);