trid3d 0.1.1 → 0.3.0

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