trid3d 0.1.1 → 0.2.0

package/trid/render/uvMapping.js

@@ -0,0 +1,225 @@
+/**
+ * Texture mapping: texture coordinates made from a mesh's shape, for
+ * meshes that don't have any (or to replace the ones they have).
+ *
+ * Every mode fits the image to the mesh's bounding box:
+ *
+ * - "planar":   the image is projected straight through the mesh along one axis
+ * - "box":      each face takes the image from the side of the box it faces most
+ * - "sphere":   wrapped around like a world map
+ * - "cylinder": wrapped around the sides like a label; the ends get a planar image
+ *
+ * A mapping is a mode name, or an object with options:
+ *
+ *   mapping: "box"
+ *   mapping: { type: "cylinder", axis: "x" }
+ *
+ * @typedef {"uv"|"planar"|"box"|"sphere"|"cylinder"} MappingType
+ * @typedef {MappingType | { type: MappingType, axis?: "x"|"y"|"z" }} Mapping
+ */
+
+const TAU = Math.PI * 2;
+
+/** Mapping modes accepted by `computeUVs` and `material.mapping`. */
+export const MAPPINGS = ["uv", "planar", "box", "sphere", "cylinder"];
+
+/**
+ * Texture coordinates for a mesh's faces, made from its shape.
+ * The mesh isn't changed. Every face corner gets its own entry in `uvs`.
+ *
+ * @param {{ vertices:{x:number,y:number,z:number}[], faces?:number[][] }} mesh
+ * @param {Mapping} mapping
+ * @returns {{ uvs:{u:number,v:number}[], faceUVs:number[][] }}
+ * @throws {Error} For an unknown mapping
+ */
+export function computeUVs(mesh, mapping) {
+  const { type, axis } = mappingOf(mapping);
+  const faces = mesh.faces ?? [];
+  const uvs = [], faceUVs = [];
+  if (type === "uv") {
+    return { uvs: mesh.uvs ?? [], faceUVs: mesh.faceUVs ?? [] };
+  }
+
+  // Sphere and cylinder wrap around Y; other axes are turned to Y first.
+  // Cyclic swaps are rotations, so the image isn't mirrored.
+  const turn = axis === "x" ? (p) => ({ x: p.z, y: p.x, z: p.y })
+    : axis === "z" ? (p) => ({ x: p.y, y: p.z, z: p.x })
+    : (p) => p;
+  const wraps = type === "sphere" || type === "cylinder";
+  const verts = wraps ? mesh.vertices.map(turn) : mesh.vertices;
+  const box = bounds(verts);
+  const center = { x: (box.min.x + box.max.x) / 2, y: (box.min.y + box.max.y) / 2, z: (box.min.z + box.max.z) / 2 };
+  const size = { x: box.max.x - box.min.x || 1, y: box.max.y - box.min.y || 1, z: box.max.z - box.min.z || 1 };
+
+  // A flat image seen from outside along +side of an axis ("y" with sign 1: from above)
+  const flat = (p, ax, sign) => {
+    const nx = (p.x - box.min.x) / size.x, ny = (p.y - box.min.y) / size.y, nz = (p.z - box.min.z) / size.z;
+    if (ax === "x") return { u: sign > 0 ? nz : 1 - nz, v: ny };
+    if (ax === "y") return { u: nx, v: sign > 0 ? nz : 1 - nz };
+    return { u: sign > 0 ? 1 - nx : nx, v: ny };
+  };
+
+  for (const f of faces) {
+    const p = f.map((i) => verts[i]);
+    let ts;
+    if (type === "planar") {
+      // From the front: along the axis, seen from its negative side
+      const ax = axis ?? "z";
+      ts = p.map((q) => flat(q, ax, -1));
+    } else if (type === "box") {
+      const n = faceNormal(p);
+      const ax = dominant(n);
+      ts = p.map((q) => flat(q, ax, Math.sign(n[ax]) || 1));
+    } else {
+      const n = faceNormal(p);
+      if (type === "cylinder" && Math.abs(n.y) > 0.7) {
+        // An end cap: planar from above or below
+        ts = p.map((q) => flat(q, "y", Math.sign(n.y)));
+      } else {
+        ts = p.map((q) => {
+          const d = { x: q.x - center.x, y: q.y - center.y, z: q.z - center.z };
+          const around = Math.hypot(d.x, d.z);
+          const u = around < 1e-9 ? NaN : (((Math.atan2(d.z, d.x) / TAU) % 1) + 1) % 1;
+          const v = type === "sphere"
+            ? 0.5 + Math.atan2(d.y, around) / Math.PI
+            : (q.y - box.min.y) / size.y;
+          return { u, v };
+        });
+        fixSeam(ts);
+      }
+    }
+    faceUVs.push(ts.map((t) => uvs.push(t) - 1));
+  }
+  return { uvs, faceUVs };
+}
+
+/**
+ * Replaces a mesh's texture coordinates with ones made from its shape,
+ * in place. Handy for OBJ files without any, or before exporting.
+ *
+ * @param {Object} mesh
+ * @param {Mapping} mapping
+ * @returns The same mesh
+ */
+export function mapUVs(mesh, mapping) {
+  const { uvs, faceUVs } = computeUVs(mesh, mapping);
+  mesh.uvs = uvs;
+  mesh.faceUVs = faceUVs;
+  mesh.dirty = true;
+  return mesh;
+}
+
+/** The mapping as `{ type, axis }`, checked. */
+export function mappingOf(mapping) {
+  const m = typeof mapping === "string" ? { type: mapping } : { ...(mapping ?? {}) };
+  m.type ??= "uv";
+  if (!MAPPINGS.includes(m.type)) throw new Error(`Unknown texture mapping: "${m.type}"`);
+  if (m.axis != null && !["x", "y", "z"].includes(m.axis)) throw new Error(`Unknown mapping axis: "${m.axis}"`);
+  return m;
+}
+
+/** A short string naming a mapping, for caches ("" for the mesh's own coordinates). */
+export function mappingKey(mapping) {
+  if (mapping == null) return "";
+  const { type, axis } = mappingOf(mapping);
+  return type === "uv" ? "" : type + (axis ? ":" + axis : "");
+}
+
+const cache = new WeakMap(); // mesh → Map(key → { counts, vertices, faces, result })
+
+/**
+ * Texture coordinates a renderer should use for a mesh: its own, or
+ * computed for `mapping` and cached until the mesh changes.
+ *
+ * @returns {{ uvs:{u:number,v:number}[]|undefined, faceUVs:(number[]|null)[]|undefined }}
+ */
+export function uvsFor(mesh, mapping) {
+  const key = mappingKey(mapping);
+  if (!key) return { uvs: mesh.uvs, faceUVs: mesh.faceUVs };
+  let byKey = cache.get(mesh);
+  if (!byKey) cache.set(mesh, (byKey = new Map()));
+  const counts = `${mesh.vertices.length}/${mesh.faces?.length ?? 0}`;
+  let c = byKey.get(key);
+  if (!c || mesh.dirty || c.counts !== counts || c.vertices !== mesh.vertices || c.faces !== mesh.faces) {
+    c = { counts, vertices: mesh.vertices, faces: mesh.faces, result: computeUVs(mesh, mapping) };
+    byKey.set(key, c);
+  }
+  return c.result;
+}
+
+/**
+ * The 2D transform a material's `textureRepeat`, `textureOffset` and
+ * `textureRotation` describe, as [a, b, c, d, e, f]:
+ * u' = a·u + c·v + e, v' = b·u + d·v + f. Null when it changes nothing.
+ *
+ * Rotation turns the image around its center, then repeat scales it
+ * (2 = the image twice across), then offset moves it.
+ */
+export function uvTransform(mat) {
+  const r = mat.textureRepeat ?? 1, o = mat.textureOffset, a = mat.textureRotation ?? 0;
+  const ru = typeof r === "number" ? r : r.u ?? 1, rv = typeof r === "number" ? r : r.v ?? 1;
+  const ou = o?.u ?? 0, ov = o?.v ?? 0;
+  if (ru === 1 && rv === 1 && !ou && !ov && !a) return null;
+  const c = Math.cos(a), s = Math.sin(a);
+  // Rotate around (0.5, 0.5): R·(t - 0.5) + 0.5, then scale and move
+  return [
+    ru * c, rv * s,
+    -ru * s, rv * c,
+    ru * (0.5 - 0.5 * c + 0.5 * s) + ou,
+    rv * (0.5 - 0.5 * s - 0.5 * c) + ov,
+  ];
+}
+
+/** Applies a `uvTransform` to one texture coordinate. */
+export function applyUVTransform(m, t) {
+  if (!m || !t) return t;
+  return { u: m[0] * t.u + m[2] * t.v + m[4], v: m[1] * t.u + m[3] * t.v + m[5] };
+}
+
+/**
+ * Corners that wrap past u = 1 get 1 added, so a face crossing the
+ * seam doesn't stretch the whole image across itself. Corners on the
+ * axis (u = NaN, like a sphere's poles) take the face's middle u.
+ */
+function fixSeam(ts) {
+  const known = ts.filter((t) => !Number.isNaN(t.u));
+  if (!known.length) {
+    for (const t of ts) t.u = 0.5;
+    return;
+  }
+  const us = known.map((t) => t.u);
+  if (Math.max(...us) - Math.min(...us) > 0.5) {
+    for (const t of known) if (t.u < 0.5) t.u += 1;
+  }
+  const mid = known.reduce((a, t) => a + t.u, 0) / known.length;
+  for (const t of ts) if (Number.isNaN(t.u)) t.u = mid;
+}
+
+/** Outward normal of a clockwise face (not normalized). */
+function faceNormal(p) {
+  let x = 0, y = 0, z = 0;
+  for (let i = 0; i < p.length; i++) {
+    const a = p[i], b = p[(i + 1) % p.length];
+    x += (a.y - b.y) * (a.z + b.z);
+    y += (a.z - b.z) * (a.x + b.x);
+    z += (a.x - b.x) * (a.y + b.y);
+  }
+  return { x, y, z };
+}
+
+/** The axis a vector points along most. */
+function dominant(n) {
+  const ax = Math.abs(n.x), ay = Math.abs(n.y), az = Math.abs(n.z);
+  return ay >= ax && ay >= az ? "y" : ax >= az ? "x" : "z";
+}
+
+function bounds(verts) {
+  const min = { x: Infinity, y: Infinity, z: Infinity }, max = { x: -Infinity, y: -Infinity, z: -Infinity };
+  for (const v of verts) {
+    if (v.x < min.x) min.x = v.x; if (v.x > max.x) max.x = v.x;
+    if (v.y < min.y) min.y = v.y; if (v.y > max.y) max.y = v.y;
+    if (v.z < min.z) min.z = v.z; if (v.z > max.z) max.z = v.z;
+  }
+  if (!verts.length) return { min: { x: 0, y: 0, z: 0 }, max: { x: 0, y: 0, z: 0 } };
+  return { min, max };
+}

package/trid/render/webglRenderer.js

@@ -1,7 +1,8 @@
 import { DEFAULT_FOV, DEFAULT_NEAR } from "../math/transform.js";
-import { clear, edgeSegments } from "./draw.js";
+import { clear, edgeSegments, wireEdges } from "./draw.js";
 import { parseColor } from "./color.js";
-import { DEFAULT_LIGHT, DEFAULT_AMBIENT } from "./canvasRenderer.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";
@@ -38,11 +39,12 @@ varying vec3 vNormal;
 varying vec3 vWorld;
 varying vec3 vLocal;
 varying vec2 vUV;
+uniform mat3 uUVTransform; // textureRepeat, textureOffset, textureRotation
 ${COMMON}
 void main() {
   vNormal = rotXYZ(aNormal / uScale); // inverse scale keeps normals right on stretched objects
   vLocal = aPos;
-  vUV = aUV;
+  vUV = (uUVTransform * vec3(aUV, 1.0)).xy;
   vWorld = toWorld(aPos);
   gl_Position = toClip(toCamera(vWorld));
 }
@@ -106,7 +108,7 @@ ${fx.calls}
   return { source, uniforms: fx.uniforms };
 }
 
-const FACE_UNIFORMS = ["uLight", "uAmbient", "uShade", "uTime", "uBackground", "uCamWorld", "uTexture", "uUseTexture"];
+const FACE_UNIFORMS = ["uUVTransform", "uLight", "uAmbient", "uShade", "uTime", "uBackground", "uCamWorld", "uTexture", "uUseTexture"];
 
 // Each line segment is a thin rectangle facing the screen, `uWidth` pixels wide
 const LINE_VS = `
@@ -268,16 +270,26 @@ export class WebGLRenderer {
       const geo = this._geometry(obj.mesh);
       const lineColor = this._color(ctx, obj.color ?? scene.color);
       const lineWidth = obj.lineWidth ?? scene.lineWidth;
-      const mat = obj.material;
-
-      if (mat) {
-        const fill = this._color(ctx, mat.fill ?? (mat.texture ? "#ffffff" : scene.color));
-        (fill[3] < 1 ? clear2 : opaque).push({ kind: "face", obj, geo, color: fill, mat });
-        if (mat.wireframe) {
-          (lineColor[3] < 1 ? clear2 : opaque).push({ kind: "line", obj, buf: geo.outlines, color: lineColor, width: lineWidth });
+      const mats = materialsOf(obj);
+
+      if (mats) {
+        // 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;
+          return { ...g, mat: mats[k] };
+        });
+        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 });
         }
+        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 ?? [])));
+        else for (const g of groups) if (g.mat.wireframe) lines(this._outlineBuffer(geo, obj.mesh, g));
       } else {
-        (lineColor[3] < 1 ? clear2 : opaque).push({ kind: "line", obj, buf: geo.edges, color: lineColor, width: lineWidth });
+        (lineColor[3] < 1 ? clear2 : opaque).push({
+          kind: "line", obj, color: lineColor, width: lineWidth,
+          buf: this._lineBuffer(geo, "edges", () => edgeSegments(wireEdges(obj.mesh))),
+        });
       }
     }
 
@@ -310,8 +322,11 @@ export class WebGLRenderer {
     const isFace = d.kind === "face";
     const effects = isFace ? d.mat.effects ?? [] : null;
     const prog = isFace ? this._faceProgram(effects) : this._line;
-    const buf = isFace ? this._faceBuffer(d.geo, d.obj.mesh, d.mat.shade === false ? null : creaseOf(d.mat.smooth)) : d.buf;
-    if (!buf.count) return;
+    const buf = isFace
+      ? this._faceBuffer(d.geo, d.obj.mesh, d.mat.shade === false ? null : creaseOf(d.mat.smooth), d.mat.mapping)
+      : d.buf;
+    const first = d.first ?? 0, count = d.count ?? buf.count;
+    if (!count) return;
 
     gl.useProgram(prog.program);
     const u = prog.uniforms;
@@ -331,6 +346,8 @@ export class WebGLRenderer {
     const a = prog.attributes;
 
     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.uniform3fv(u.uLight, light);
       gl.uniform1f(u.uAmbient, ambient);
       gl.uniform1f(u.uShade, d.mat.shade === false ? 0 : 1);
@@ -346,7 +363,9 @@ export class WebGLRenderer {
       gl.vertexAttribPointer(a.aPos, 3, gl.FLOAT, false, 32, 0);
       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) : null;
+      const tex = d.mat.texture
+        ? this._texture(d.mat.texture, !!d.mat.pixelated, d.obj.mesh, !!uvsFor(d.obj.mesh, d.mat.mapping).faceUVs)
+        : null;
       gl.activeTexture(gl.TEXTURE0);
       gl.bindTexture(gl.TEXTURE_2D, tex);
       gl.uniform1i(u.uTexture, 0);
@@ -363,7 +382,7 @@ export class WebGLRenderer {
     }
     const locs = Object.values(a).filter((loc) => loc >= 0);
     for (const loc of locs) gl.enableVertexAttribArray(loc);
-    gl.drawArrays(gl.TRIANGLES, 0, buf.count);
+    gl.drawArrays(gl.TRIANGLES, first, count);
     for (const loc of locs) gl.disableVertexAttribArray(loc);
   }
 
@@ -398,13 +417,13 @@ 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) {
+  _texture(src, pixelated, mesh, hasUVs) {
     const gl = this.gl;
     if (!textureReady(src)) return null;
-    if (!mesh.faceUVs) {
+    if (!hasUVs) {
       if (!this._warned.has(mesh)) {
         this._warned.add(mesh);
-        console.warn("Trid: this mesh has no texture coordinates (uvs / faceUVs), so its texture isn't drawn");
+        console.warn("Trid: this mesh has no texture coordinates (uvs / faceUVs), so its texture isn't drawn. Set material.mapping to make some.");
       }
       return null;
     }
@@ -413,7 +432,7 @@ export class WebGLRenderer {
     const live = textureIsLive(src);
     if (!t || live || t.failed) {
       if (t?.failed) return null;
-      const { w, h } = textureSize(src);
+      let { w, h } = textureSize(src);
       if (!t) {
         t = { tex: gl.createTexture(), frame: -1 };
         this._textures.set(src, t);
@@ -422,9 +441,23 @@ export class WebGLRenderer {
       if (t.frame !== this._frame) {
         t.frame = this._frame;
         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.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}`);
+          }
+          pixels = t.small;
+          w = t.small.width;
+          h = t.small.height;
+        }
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); // images go top-down, v goes up
         try {
-          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
         } catch (err) {
           // Usually an image from another site without permission (CORS)
           console.warn("Trid: can't use this image as a texture: " + err.message);
@@ -465,59 +498,87 @@ export class WebGLRenderer {
   _geometry(mesh) {
     let geo = this._meshes.get(mesh);
     const stale = !geo || mesh.dirty || geo.vertices !== mesh.vertices || geo.faceList !== mesh.faces
-      || geo.edgeList !== mesh.edges || geo.counts !== countsOf(mesh);
+      || geo.edgeList !== mesh.edges || geo.faceMats !== mesh.faceMaterials || geo.counts !== countsOf(mesh);
     if (!stale) return geo;
 
     if (geo) {
-      for (const b of [geo.outlines, geo.edges, ...geo.faceBuffers.values()]) this._free(b);
+      for (const b of [...geo.lines.values(), ...geo.faceBuffers.values(), ...geo.groupOutlines.values()]) this._free(b);
     }
-    const v = mesh.vertices;
     const faces = mesh.faces ?? [];
 
-    // Outlines of the faces, each edge once
-    const outline = new Set();
-    const outlinePairs = [];
-    for (const f of faces) {
-      for (let k = 0; k < f.length; k++) {
-        const a = f[k], b = f[(k + 1) % f.length];
-        const key = a < b ? a + "," + b : b + "," + a;
-        if (!outline.has(key)) {
-          outline.add(key);
-          outlinePairs.push([a, b]);
-        }
-      }
+    // Faces grouped by material index, in the order the face buffers store them
+    const byIndex = new Map();
+    faces.forEach((f, fi) => {
+      if (f.length < 3) return;
+      const k = mesh.faceMaterials?.[fi] ?? 0;
+      if (!byIndex.has(k)) byIndex.set(k, []);
+      byIndex.get(k).push(fi);
+    });
+    const groups = [];
+    let first = 0;
+    for (const k of [...byIndex.keys()].sort((a, b) => a - b)) {
+      const list = byIndex.get(k);
+      const count = list.reduce((n, fi) => n + (faces[fi].length - 2) * 3, 0);
+      groups.push({ index: k, faces: list, first, count });
+      first += count;
     }
 
     geo = {
       vertices: mesh.vertices,
       faceList: mesh.faces,
       edgeList: mesh.edges,
+      faceMats: mesh.faceMaterials,
       counts: countsOf(mesh),
-      faceBuffers: new Map(), // one per shading mode, built when first needed
-      outlines: this._upload(lineData(v, outlinePairs), 8),
-      edges: this._upload(lineData(v, edgeSegments(mesh.edges ?? [])), 8),
+      groups,
+      groupOutlines: new Map(), // outlines of one group, when only some materials have `wireframe`
+      faceBuffers: new Map(), // one per shading mode and mapping, built when first needed
+      lines: new Map(), // "outlines" and "edges", built when first drawn (they're big on big models)
     };
     this._meshes.set(mesh, geo);
     return geo;
   }
 
+  /** A line buffer of the mesh, built the first time it's drawn. */
+  _lineBuffer(geo, name, pairs) {
+    let buf = geo.lines.get(name);
+    if (!buf) {
+      buf = this._upload(lineData(geo.vertices, pairs()), 8);
+      geo.lines.set(name, buf);
+    }
+    return buf;
+  }
+
+  /** Outlines of one group of faces (see `_geometry`), built when first needed. */
+  _outlineBuffer(geo, mesh, group) {
+    let buf = geo.groupOutlines.get(group.index);
+    if (!buf) {
+      const faces = mesh.faces ?? [];
+      buf = this._upload(lineData(mesh.vertices, outlinePairs(group.faces.map((fi) => faces[fi]))), 8);
+      geo.groupOutlines.set(group.index, buf);
+    }
+    return buf;
+  }
+
   /**
-   * Triangles of a mesh's faces, each corner with its own position and
-   * normal. Flat shading uses the face's normal at every corner; smooth
-   * shading uses the corner normals.
+   * Triangles of a mesh's faces, each corner with its own position,
+   * normal and texture coordinate, grouped by material (`geo.groups`).
+   * Flat shading uses the face's normal at every corner; smooth shading
+   * uses the corner normals. `mapping` picks the texture coordinates.
    */
-  _faceBuffer(geo, mesh, crease) {
-    const key = crease ?? "flat";
+  _faceBuffer(geo, mesh, crease, mapping) {
+    const key = (crease ?? "flat") + "|" + mappingKey(mapping);
     let buf = geo.faceBuffers.get(key);
     if (buf) return buf;
 
     const v = mesh.vertices;
     const faces = mesh.faces ?? [];
     const corners = crease ? cornerNormals(mesh, crease) : null;
-    const uvs = mesh.uvs, faceUVs = mesh.faceUVs;
-    const tri = [];
-    faces.forEach((f, fi) => {
-      if (f.length < 3) return;
+    const { uvs, faceUVs } = uvsFor(mesh, mapping);
+    const total = geo.groups.reduce((n, g) => n + g.count, 0);
+    const tri = new Float32Array(total * 8);
+    let o = 0;
+    for (const fi of geo.groups.flatMap((g) => g.faces)) {
+      const f = faces[fi];
       let ns;
       if (corners) {
         ns = corners[fi];
@@ -532,10 +593,12 @@ export class WebGLRenderer {
         for (const c of [0, k, k + 1]) {
           const p = v[f[c]], n = ns[c];
           const t = ts ? uvs[ts[c]] : null;
-          tri.push(p.x, p.y, p.z, n.x, n.y, n.z, t ? t.u : 0, t ? t.v : 0);
+          tri[o++] = p.x; tri[o++] = p.y; tri[o++] = p.z;
+          tri[o++] = n.x; tri[o++] = n.y; tri[o++] = n.z;
+          tri[o++] = t ? t.u : 0; tri[o++] = t ? t.v : 0;
         }
       }
-    });
+    }
 
     buf = this._upload(tri, 8);
     geo.faceBuffers.set(key, buf);
@@ -546,7 +609,7 @@ export class WebGLRenderer {
     const gl = this.gl;
     const buffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, data instanceof Float32Array ? data : new Float32Array(data), gl.STATIC_DRAW);
     this._buffers.add(buffer);
     return { buffer, count: data.length / floatsPerVertex };
   }
@@ -573,13 +636,44 @@ function countsOf(mesh) {
   return `${mesh.vertices.length}/${mesh.edges?.length ?? 0}/${mesh.faces?.length ?? 0}`;
 }
 
+/** A smaller copy of an image, drawn on a canvas (reused when given one). */
+function shrink(src, w, h, canvas = document.createElement("canvas")) {
+  canvas.width = w;
+  canvas.height = h;
+  canvas.getContext("2d").drawImage(src, 0, 0, w, h);
+  return canvas;
+}
+
+/** Each edge of the faces once, as [a, b] pairs. */
+function outlinePairs(faces) {
+  const seen = new Set();
+  const pairs = [];
+  for (const f of faces) {
+    for (let k = 0; k < f.length; k++) {
+      const a = f[k], b = f[(k + 1) % f.length];
+      const key = a < b ? a * 4294967296 + b : b * 4294967296 + a; // one number per edge
+      if (!seen.has(key)) {
+        seen.add(key);
+        pairs.push([a, b]);
+      }
+    }
+  }
+  return pairs;
+}
+
 /** Six corners (two triangles) per segment: A, B, then which corner. */
-function lineData(v, pairs) {
-  const out = [];
+function lineData(v, segments) {
+  const pairs = Array.isArray(segments) ? segments : [...segments]; // edgeSegments is a generator
+  const out = new Float32Array(pairs.length * 48);
   const corners = [[0, -1], [1, -1], [1, 1], [0, -1], [1, 1], [0, 1]];
+  let o = 0;
   for (const [i, j] of pairs) {
     const a = v[i], b = v[j];
-    for (const [cx, cy] of corners) out.push(a.x, a.y, a.z, b.x, b.y, b.z, cx, cy);
+    for (const [cx, cy] of corners) {
+      out[o++] = a.x; out[o++] = a.y; out[o++] = a.z;
+      out[o++] = b.x; out[o++] = b.y; out[o++] = b.z;
+      out[o++] = cx; out[o++] = cy;
+    }
   }
   return out;
 }

package/trid/scene.js

@@ -1,6 +1,7 @@
 import { CanvasRenderer, DEFAULT_LIGHT, DEFAULT_AMBIENT } from "./render/canvasRenderer.js";
 import { loop } from "./render/loop.js";
 import { ToolManager } from "./tools/manager.js";
+import { screenshot, record } from "./export/capture.js";
 
 /**
  * Holds a canvas, a camera and a list of objects, and draws them.
@@ -150,6 +151,28 @@ export class Scene {
     this._stop = null;
   }
 
+  /**
+   * Draws a new frame and returns it as an image file (PNG by default).
+   * The page's canvas doesn't change. Save it with `download`.
+   *
+   * @param {import("./export/capture.js").ScreenshotOptions} [opts]
+   * @returns {Promise<Blob>}
+   */
+  screenshot(opts) {
+    return screenshot(this, opts);
+  }
+
+  /**
+   * Starts recording the canvas as a video. Call `stop()` on the result,
+   * or pass `duration`, then save `await recording.done` with `download`.
+   *
+   * @param {import("./export/capture.js").RecordOptions} [opts]
+   * @returns {import("./export/capture.js").Recording}
+   */
+  record(opts) {
+    return record(this, opts);
+  }
+
   /**
    * Stops the loop, removes every tool (and its event listeners) and
    * frees the renderer's resources. Use it when the scene is no longer needed.

package/trid/tools/hoverHighlight.js

@@ -54,7 +54,8 @@ export class HoverHighlight {
       obj.color = this.color;
       // Swap in a copy, so other objects sharing the material don't change
       this._savedMaterial = obj.material;
-      if (obj.material) obj.material = { ...obj.material, fill: this.color };
+      if (Array.isArray(obj.material)) obj.material = obj.material.map((m) => m && { ...m, fill: this.color });
+      else if (obj.material) obj.material = { ...obj.material, fill: this.color };
     }
 
     this.onChange?.(obj);

package/trid/tools/orbitCamera.js

@@ -13,6 +13,9 @@ const MAX_PITCH = Math.PI / 2 - 0.01;
  * The tool drives `scene.camera` (x, y, z, yaw, pitch). Its own
  * `target`, `distance`, `yaw` and `pitch` can be changed at any time.
  * Don't use it together with another tool that moves the camera.
+ *
+ * With `autoRotate: true` the camera also turns around the target on its
+ * own, pausing while the user drags.
  */
 export class OrbitCamera {
   /**
@@ -28,6 +31,9 @@ export class OrbitCamera {
    * @param {boolean} [opts.rotate=true] - Allow orbiting
    * @param {boolean} [opts.pan=true] - Allow panning
    * @param {boolean} [opts.zoom=true] - Allow zooming
+   * @param {boolean} [opts.autoRotate=false] - Turn around the target on its own (paused while dragging)
+   * @param {number} [opts.autoRotateSpeed=0.5] - Auto-rotate speed in radians per second (negative: other way)
+   * @param {number} [opts.autoRotateDelay=0] - Seconds to wait after a drag before auto-rotating again
    */
   constructor({
     target = { x: 0, y: 0, z: 0 },
@@ -41,6 +47,9 @@ export class OrbitCamera {
     rotate = true,
     pan = true,
     zoom = true,
+    autoRotate = false,
+    autoRotateSpeed = 0.5,
+    autoRotateDelay = 0,
   } = {}) {
     this.target = target;
     this.distance = distance;
@@ -53,9 +62,13 @@ export class OrbitCamera {
     this.rotate = rotate;
     this.pan = pan;
     this.zoom = zoom;
+    this.autoRotate = autoRotate;
+    this.autoRotateSpeed = autoRotateSpeed;
+    this.autoRotateDelay = autoRotateDelay;
 
     this.blockContextMenu = true;
     this._mode = null;
+    this._idle = 0; // seconds since the last drag ended
   }
 
   attach(scene) {
@@ -117,6 +130,7 @@ export class OrbitCamera {
 
   pointerUp() {
     this._mode = null;
+    this._idle = 0;
   }
 
   wheel(e, scene) {
@@ -127,6 +141,10 @@ export class OrbitCamera {
   }
 
   update(dt, scene) {
+    if (this.autoRotate && !this._mode) {
+      this._idle += dt;
+      if (this._idle >= this.autoRotateDelay) this.yaw += this.autoRotateSpeed * dt;
+    }
     this.apply(scene.camera);
   }
 }