trid3d 0.2.0 → 0.3.0

package/trid/render/canvasRenderer.js

@@ -1,8 +1,10 @@
-import { localToWorld, worldToCamera, cameraToScreen, clipNear, rotateXYZ, DEFAULT_NEAR } from "../math/transform.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 };
@@ -44,6 +46,8 @@ 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")
@@ -86,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;
   }
@@ -102,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) => materialsOf(o))) {
-      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;
     }
 
@@ -120,12 +128,12 @@ 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 = 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;
@@ -145,6 +153,13 @@ export class CanvasRenderer {
 
       const sourceFaces = obj.mesh.faces ?? [];
       const base = obj.mesh.vertices.length;
+      // 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) => {
@@ -154,18 +169,16 @@ export class CanvasRenderer {
         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);
       };
       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);
       };
-      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) => {
@@ -220,7 +233,7 @@ export class CanvasRenderer {
         // 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;
+        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);
@@ -244,7 +257,7 @@ export class CanvasRenderer {
               items.push({
                 depth: c.z,
                 poly: [screen[0], screen[k], screen[k + 1]],
-                texture: { src: L.tex, uvs: [ts[0], ts[k], ts[k + 1]], pixelated: !!L.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,
@@ -263,7 +276,7 @@ export class CanvasRenderer {
               .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 };
 
@@ -380,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;
   }
 
   /**
@@ -493,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;
 
@@ -519,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;
@@ -553,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.
@@ -136,10 +137,13 @@ 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;

package/trid/render/meshUtils.js

@@ -0,0 +1,257 @@
+import { localToWorld, rotateXYZ } from "../math/transform.js";
+import { transformPoint, normalMatrix, transformNormal, determinantMat4 } from "../math/matrix.js";
+import { forEachPlaced, worldMatrix } from "../sceneGraph.js";
+
+/** Deep copy of one mesh field: arrays and plain objects are copied, the rest kept. */
+const copy = (x) => (Array.isArray(x) ? x.map(copy) : x && typeof x === "object" ? { ...x } : x);
+
+/** A transform with every part filled in. */
+const fullTransform = ({ pos, rot, scale } = {}) => ({
+  pos: { x: 0, y: 0, z: 0, ...pos },
+  rot: { x: 0, y: 0, z: 0, ...rot },
+  scale: { x: 1, y: 1, z: 1, ...scale },
+});
+
+/** A copy of a mesh with a world matrix baked in (normals turned, faces flipped for mirrors). */
+function bake(mesh, world) {
+  const out = cloneMesh(mesh);
+  for (const v of out.vertices) Object.assign(v, transformPoint(world, v));
+  if (out.normals) {
+    const nm = normalMatrix(world);
+    out.normals = out.normals.map((n) => transformNormal(nm, n));
+  }
+  if (determinantMat4(world) < 0 && out.faces) {
+    const flip = (list) => list?.map((f) => (f ? [...f].reverse() : f));
+    out.faces = flip(out.faces);
+    if (out.faceUVs) out.faceUVs = flip(out.faceUVs);
+    if (out.faceNormals) out.faceNormals = flip(out.faceNormals);
+  }
+  return out;
+}
+
+/**
+ * Deep copy of a mesh: vertices, edges, faces, texture coordinates, normals
+ * and materials. Change the copy without touching the original (or the other
+ * objects that share it).
+ *
+ * @template M
+ * @param {M} mesh
+ * @returns {M} A new mesh
+ */
+export function cloneMesh(mesh) {
+  const out = {};
+  for (const k of Object.keys(mesh)) if (k !== "dirty") out[k] = copy(mesh[k]);
+  return out;
+}
+
+/**
+ * Bakes a transform into a mesh's vertices, in place: scale, then rotate
+ * (X, then Y, then Z), then move, the same order objects use. Its own normals
+ * turn with it, and a mirroring scale (an odd number of negative factors)
+ * reverses the faces so they still face outward.
+ *
+ * Pass a scene object to bake its `pos`, `rot` and `scale` (then reset them
+ * on the object, or it's transformed twice).
+ *
+ * @example
+ * // A handle standing on the side of a mug
+ * transformMesh(handle, { pos: { x: 0.3, y: 0, z: 0 }, rot: { x: 0, y: 0, z: Math.PI / 2 } });
+ *
+ * @template M
+ * @param {M} mesh - Mesh to change
+ * @param {{ pos?:{x:number,y:number,z:number}, rot?:{x:number,y:number,z:number}, scale?:{x:number,y:number,z:number} }} transform
+ *   Parts left out don't change anything
+ * @returns {M} The same mesh
+ */
+export function transformMesh(mesh, transform) {
+  const t = fullTransform(transform);
+  for (const v of mesh.vertices) Object.assign(v, localToWorld(v, t));
+
+  // Normals: divide by the scale (keeps them perpendicular to stretched faces), turn, then normalize
+  if (mesh.normals) {
+    const s = t.scale;
+    mesh.normals = mesh.normals.map((n) => {
+      const r = rotateXYZ({ x: n.x / (s.x || 1), y: n.y / (s.y || 1), z: n.z / (s.z || 1) }, t.rot);
+      const len = Math.hypot(r.x, r.y, r.z) || 1;
+      return { x: r.x / len, y: r.y / len, z: r.z / len };
+    });
+  }
+
+  // A mirror turns clockwise faces counter-clockwise: reverse them (and their corner lists)
+  if (t.scale.x * t.scale.y * t.scale.z < 0 && mesh.faces) {
+    const flip = (list) => list?.map((f) => (f ? [...f].reverse() : f));
+    mesh.faces = flip(mesh.faces);
+    if (mesh.faceUVs) mesh.faceUVs = flip(mesh.faceUVs);
+    if (mesh.faceNormals) mesh.faceNormals = flip(mesh.faceNormals);
+  }
+
+  mesh.dirty = true;
+  return mesh;
+}
+
+/**
+ * Moves every vertex to `fn(vertex, index)`, in place: noise on a rock,
+ * waves on a plane, a bend or a twist.
+ *
+ * The mesh's own normals (from an OBJ file) no longer fit the new shape, so
+ * they're removed and the renderers compute new ones.
+ *
+ * @example
+ * // A lumpy rock
+ * displaceMesh(makeShape("sphere"), (v) => {
+ *   const k = 1 + 0.3 * (fbm3(v.x * 3, v.y * 3, v.z * 3) - 0.5);
+ *   return { x: v.x * k, y: v.y * k, z: v.z * k };
+ * });
+ *
+ * @template M
+ * @param {M} mesh - Mesh to change
+ * @param {(v:{x:number,y:number,z:number}, index:number) => {x:number,y:number,z:number}} fn - New position of a vertex
+ * @returns {M} The same mesh
+ */
+export function displaceMesh(mesh, fn) {
+  mesh.vertices.forEach((v, i) => {
+    const p = fn({ x: v.x, y: v.y, z: v.z }, i);
+    v.x = p.x;
+    v.y = p.y;
+    v.z = p.z;
+  });
+  delete mesh.normals;
+  delete mesh.faceNormals;
+  mesh.dirty = true;
+  return mesh;
+}
+
+/**
+ * Joins meshes into one: one object to draw instead of many, or one mesh to
+ * export. Faces, edges, texture coordinates, normals and materials are kept,
+ * with their indices shifted.
+ *
+ * An object (`{ mesh, pos, rot, scale }`, added to a scene or not) in the
+ * list is merged where it stands, with its transform baked in (its mesh
+ * isn't changed). A group is merged with all its children, placed by the
+ * group's own transform (not its parents').
+ *
+ * With `materialPerMesh`, the faces of the i-th mesh use material i, so an
+ * object with `material: [blade, guard, grip]` paints each part its own way.
+ * Otherwise each mesh's `faceMaterials` are kept; material names (from OBJ
+ * files) are joined into one list when every mesh with materials has them.
+ *
+ * The meshes are copied, never changed.
+ *
+ * @example
+ * const sword = mergeMeshes([blade, guard, grip], { materialPerMesh: true });
+ * scene.add({ mesh: sword, material: [{ fill: "#ccd" }, { fill: "#c90" }, { fill: "#642" }] });
+ *
+ * @param {Object[]} items - Meshes, or scene objects with a `mesh`
+ * @param {Object} [opts]
+ * @param {boolean} [opts.materialPerMesh=false] - Faces of the i-th mesh use material i
+ * @returns {import("../index.d.ts").Mesh} A new mesh
+ */
+export function mergeMeshes(items, { materialPerMesh = false } = {}) {
+  // Meshes as they are; objects and groups baked where they stand, one entry per item
+  const meshes = items.map((it) => {
+    if (it.vertices) return it;
+    const parts = [];
+    forEachPlaced([it], () => null, (obj, world) => {
+      if (obj.mesh) parts.push(bake(obj.mesh, world));
+    });
+    return parts.length === 1 ? parts[0] : mergeMeshes(parts);
+  });
+  const some = (k) => meshes.some((m) => m[k]);
+
+  const out = { vertices: [], faces: [] };
+  const hasEdges = some("edges");
+  const hasUVs = some("faceUVs") && some("uvs");
+  const hasNormals = some("faceNormals") && some("normals");
+  const hasMats = materialPerMesh || some("faceMaterials");
+  const withMats = meshes.filter((m) => m.faceMaterials);
+  const names = !materialPerMesh && withMats.length > 0 && withMats.every((m) => m.materialNames) ? [] : null;
+  if (hasEdges) out.edges = [];
+  if (hasUVs) Object.assign(out, { uvs: [], faceUVs: [] });
+  if (hasNormals) Object.assign(out, { normals: [], faceNormals: [] });
+  if (hasMats) out.faceMaterials = [];
+
+  meshes.forEach((m, mi) => {
+    const vo = out.vertices.length, uo = out.uvs?.length ?? 0, no = out.normals?.length ?? 0;
+    const shift = (list, o) => list.map((i) => i + o);
+    out.vertices.push(...m.vertices.map((v) => ({ x: v.x, y: v.y, z: v.z })));
+    // A mesh without edges keeps showing its face outlines next to meshes that have some
+    if (hasEdges) out.edges.push(...(m.edges ?? m.faces ?? []).map((e) => shift(e, vo)));
+    if (hasUVs) out.uvs.push(...(m.uvs ?? []).map((t) => ({ u: t.u, v: t.v })));
+    if (hasNormals) out.normals.push(...(m.normals ?? []).map((n) => ({ x: n.x, y: n.y, z: n.z })));
+
+    // Material names: this mesh's index k → the index of its name in the joined list
+    const remap = names && m.materialNames
+      ? m.materialNames.map((n) => (names.includes(n) ? names.indexOf(n) : names.push(n) - 1))
+      : null;
+
+    (m.faces ?? []).forEach((f, fi) => {
+      out.faces.push(shift(f, vo));
+      if (hasUVs) {
+        const fu = m.uvs && m.faceUVs?.[fi];
+        out.faceUVs.push(fu ? shift(fu, uo) : null);
+      }
+      if (hasNormals) {
+        const fn = m.normals && m.faceNormals?.[fi];
+        out.faceNormals.push(fn ? shift(fn, no) : null);
+      }
+      if (hasMats) {
+        const k = m.faceMaterials?.[fi] ?? 0;
+        out.faceMaterials.push(materialPerMesh ? mi : remap ? (remap[k] ?? 0) : k);
+      }
+    });
+  });
+
+  if (names) out.materialNames = names;
+  return out;
+}
+
+/**
+ * The box around one or more meshes: `min` and `max` corners, plus its
+ * `center` and `size`. Scene objects (and a whole Scene) are measured where
+ * they stand, with their transform.
+ *
+ * @example
+ * const { center, size } = meshBounds(scene);
+ * orbit.target = center;
+ * orbit.distance = Math.max(size.x, size.y, size.z) * 2;
+ *
+ * @param {Object|Object[]} input - A mesh, a scene object, a list of them, or a Scene
+ * @returns {{ min:{x:number,y:number,z:number}, max:{x:number,y:number,z:number},
+ *   center:{x:number,y:number,z:number}, size:{x:number,y:number,z:number} } | null}
+ *   null when there are no vertices
+ */
+export function meshBounds(input) {
+  const items = Array.isArray(input) ? input : Array.isArray(input?.objects) ? input.objects : [input];
+  const min = { x: Infinity, y: Infinity, z: Infinity };
+  const max = { x: -Infinity, y: -Infinity, z: -Infinity };
+  let any = false;
+  // Plain meshes as they are; objects (and their children) where they're drawn
+  const placed = [];
+  const objects = [];
+  for (const it of items) {
+    if (it?.vertices) placed.push({ mesh: it, world: null });
+    else if (it) objects.push(it);
+  }
+  forEachPlaced(objects, (root) => (root.parent ? worldMatrix(root.parent) : null), (obj, world) => {
+    if (obj.mesh?.vertices) placed.push({ mesh: obj.mesh, world });
+  });
+  for (const { mesh, world } of placed) {
+    for (const v of mesh.vertices) {
+      const p = world ? transformPoint(world, v) : v;
+      any = true;
+      if (p.x < min.x) min.x = p.x;
+      if (p.y < min.y) min.y = p.y;
+      if (p.z < min.z) min.z = p.z;
+      if (p.x > max.x) max.x = p.x;
+      if (p.y > max.y) max.y = p.y;
+      if (p.z > max.z) max.z = p.z;
+    }
+  }
+  if (!any) return null;
+  return {
+    min, max,
+    center: { x: (min.x + max.x) / 2, y: (min.y + max.y) / 2, z: (min.z + max.z) / 2 },
+    size: { x: max.x - min.x, y: max.y - min.y, z: max.z - min.z },
+  };
+}

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;
+}