trid3d 0.1.1 → 0.3.0

package/trid/index.js

@@ -11,12 +11,14 @@
 
 // Scene
 export { Scene } from "./scene.js";
+export { worldObjects, worldMatrix, worldPosition, ancestors, forEachPlaced } from "./sceneGraph.js";
 
 // Shapes and meshes
-export { makeShape, scaleMesh } from "./render/shapes.js";
+export { makeShape, scaleMesh, lathe, extrude, triangulate } from "./render/shapes.js";
+export { cloneMesh, transformMesh, displaceMesh, mergeMeshes, meshBounds } from "./render/meshUtils.js";
 
 // Renderers
-export { CanvasRenderer, DEFAULT_LIGHT, DEFAULT_AMBIENT } from "./render/canvasRenderer.js";
+export { CanvasRenderer, DEFAULT_LIGHT, DEFAULT_AMBIENT, materialsOf } from "./render/canvasRenderer.js";
 export { WebGLRenderer, DEFAULT_FAR } from "./render/webglRenderer.js";
 
 // Effects
@@ -25,21 +27,34 @@ export {
   buildEffects, effectsKey, uniformType, SURFACE_GLSL,
 } from "./render/effects.js";
 
+// Procedural textures
+export { makeTexture, texturePixels, colorBytes, TEXTURE_STYLES } from "./render/proceduralTextures.js";
+
+// Texture mapping
+export { computeUVs, mapUVs, uvsFor, uvTransform, applyUVTransform, mappingOf, mappingKey, MAPPINGS } from "./render/uvMapping.js";
+
 // Normals (smooth shading)
 export { cornerNormals, creaseOf, newell, DEFAULT_CREASE } from "./render/normals.js";
 
 // Loading files
-export { parseOBJ, loadOBJ, readOBJFile, pickOBJFile, fitMesh } from "./loaders/obj.js";
-export { loadTexture, textureReady, textureSize, textureIsLive } from "./loaders/texture.js";
+export { parseOBJ, loadOBJ, loadMaterials, readOBJFile, pickOBJFile, fitMesh } from "./loaders/obj.js";
+export { parseMTL } from "./loaders/mtl.js";
+export { loadTexture, textureReady, textureSize, textureIsLive, updateTexture, textureVersion } from "./loaders/texture.js";
+
+// Exporting
+export { exportOBJ } from "./export/obj.js";
+export { exportMTL, objMaterials, exportModel, textureToBlob } from "./export/mtl.js";
+export { screenshot, record, download } from "./export/capture.js";
 
 // Tools
 export {
   OrbitCamera, FlyCamera, DragObject, HoverHighlight, FpsMeter, ObjUploader,
-  ToolManager, pick, screenBounds, worldPerPixel,
+  ViewGizmo, TransformGizmo,
+  ToolManager, pick, pickHit, screenBounds, worldPerPixel,
 } from "./tools/index.js";
 
 // Drawing and the frame loop
-export { clear, point, line, drawWireframe, drawInstance, edgeSegments } from "./render/draw.js";
+export { clear, point, line, drawWireframe, drawInstance, edgeSegments, wireEdges } from "./render/draw.js";
 export { loop } from "./render/loop.js";
 export { parseColor } from "./render/color.js";
 
@@ -51,3 +66,11 @@ export {
   DEFAULT_FOV, DEFAULT_NEAR,
 } from "./math/transform.js";
 export { project, screen } from "./math/projection.js";
+export { matFromEuler, eulerFromMat, matFromAxisAngle, mulMat, mulVec, applyTransformOp } from "./math/rotation.js";
+export {
+  identityMat4, mat4FromTransform, mulMat4, invertMat4, determinantMat4,
+  transformPoint, transformDirection, normalMatrix, transformNormal, transformOpToLocal,
+} from "./math/matrix.js";
+
+// Random numbers and noise
+export { rng, noise2, noise3, fbm2, fbm3 } from "./math/noise.js";

package/trid/loaders/mtl.js

@@ -0,0 +1,63 @@
+/**
+ * MTL loading: the material file an OBJ file names with `mtllib`.
+ *
+ * Reads each `newmtl` block's diffuse color (`Kd`), see-through (`d`, or
+ * `Tr` = 1 - d) and diffuse texture (`map_Kd`, options like `-s 1 1 1`
+ * skipped). Everything else is ignored.
+ */
+
+/**
+ * @typedef {Object} MtlMaterial
+ * @property {string} name
+ * @property {string} [fill] - "#rrggbb" from `Kd` (or "rgba(...)" when see-through)
+ * @property {number} [opacity] - From `d` / `Tr`, 0 to 1
+ * @property {string} [textureFile] - The texture's file name (`map_Kd`), relative to the .mtl file
+ */
+
+/**
+ * Parses the text of an MTL file.
+ *
+ * @param {string} text
+ * @returns {Object<string, MtlMaterial>} Materials by name
+ */
+export function parseMTL(text) {
+  const materials = {};
+  let m = null;
+  for (const raw of text.split(/\r?\n/)) {
+    const line = raw.trim();
+    if (line === "" || line[0] === "#") continue;
+    const [key, ...rest] = line.split(/\s+/);
+    const k = key.toLowerCase();
+    if (k === "newmtl") {
+      const name = rest.join(" ");
+      m = materials[name] = { name };
+    } else if (!m) {
+      continue;
+    } else if (k === "kd") {
+      const [r, g, b] = rest.map(Number);
+      const hex = (x) => Math.round(Math.min(1, Math.max(0, x || 0)) * 255).toString(16).padStart(2, "0");
+      m.fill = `#${hex(r)}${hex(g ?? r)}${hex(b ?? r)}`;
+    } else if (k === "d") {
+      m.opacity = Math.min(1, Math.max(0, Number(rest[0])));
+    } else if (k === "tr") {
+      m.opacity = Math.min(1, Math.max(0, 1 - Number(rest[0])));
+    } else if (k === "map_kd") {
+      // Skip options ("-s 1 1 1", "-bm 0.5", "-clamp on"...): the file name is what's left
+      const words = [...rest];
+      const takes = { "-s": 3, "-o": 3, "-t": 3, "-mm": 2, "-bm": 1, "-blendu": 1, "-blendv": 1, "-clamp": 1, "-texres": 1, "-imfchan": 1, "-boost": 1, "-cc": 1 };
+      while (words.length && words[0][0] === "-") {
+        const opt = words.shift().toLowerCase();
+        words.splice(0, takes[opt] ?? 1);
+      }
+      if (words.length) m.textureFile = words.join(" ");
+    }
+  }
+  // See-through fills as rgba, so materials can use them directly
+  for (const mat of Object.values(materials)) {
+    if (mat.fill && mat.opacity !== undefined && mat.opacity < 1) {
+      const [r, g, b] = [1, 3, 5].map((i) => parseInt(mat.fill.slice(i, i + 2), 16));
+      mat.fill = `rgba(${r}, ${g}, ${b}, ${mat.opacity})`;
+    }
+  }
+  return materials;
+}

package/trid/loaders/obj.js

@@ -1,9 +1,13 @@
+import { parseMTL } from "./mtl.js";
+import { loadTexture } from "./texture.js";
+
 /**
  * Wavefront OBJ loading.
  *
  * Reads vertex positions (`v`), texture coordinates (`vt`), normals
- * (`vn`), faces (`f`) and polylines (`l`). Everything else (materials,
- * groups) is ignored for now.
+ * (`vn`), faces (`f`), polylines (`l`), material names (`usemtl`) and the
+ * material file's name (`mtllib`). `loadOBJ(url, { materials: true })` also
+ * reads that .mtl file and its textures. Groups (`g`, `o`) are ignored.
  *
  * OBJ files are right-handed with +Z toward the viewer. Trid is
  * left-handed with the camera looking down +Z, so Z is flipped on
@@ -21,10 +25,18 @@
  * @property {{u:number,v:number}[]} [uvs] - Texture coordinates from the file (`vt`), if any
  * @property {(number[]|null)[]} [faceUVs] - For each face, the texture coordinate index of
  *   each corner (null when the file gives none for that face). Used by textures.
+ * @property {string[]} [materialNames] - Material names from `usemtl` lines, in the order they first appear
+ * @property {number[]} [faceMaterials] - For each face, its index in `materialNames`. Give the
+ *   object a list of materials in the same order to color or texture each part.
+ * @property {string} [mtllib] - The .mtl file the OBJ names (`mtllib`), if any
+ * @property {Object[]} [materials] - With `loadOBJ(url, { materials: true })`: one Trid material per
+ *   entry of `materialNames`, from the .mtl file (fill, texture). Use it as the object's `material`
  *
  * @typedef {Object} ObjOptions
  * @property {number} [fit] - If set, center the model on the origin and scale it
  *   so its largest side is this long. Handy because OBJ files come in any size.
+ * @property {boolean} [materials=false] - `loadOBJ` only: also load the .mtl file and its
+ *   textures, into `mesh.materials`
  */
 
 /**
@@ -43,6 +55,10 @@ export function parseOBJ(text, { fit } = {}) {
   const faceNormals = []; // per face: normal index of each corner, or null
   const uvs = [];
   const faceUVs = []; // per face: texture coordinate index of each corner, or null
+  const materialNames = [];
+  const faceMaterials = []; // per face: index in materialNames
+  let material = 0;
+  let mtllib;
 
   const src = text.split(/\r?\n/);
 
@@ -60,6 +76,12 @@ export function parseOBJ(text, { fit } = {}) {
       uvs.push({ u: +(parts[1] ?? 0), v: +(parts[2] ?? 0) });
     } else if (kind === "vn") {
       normals.push({ x: +(parts[1] ?? 0), y: +(parts[2] ?? 0), z: -(parts[3] ?? 0) });
+    } else if (kind === "mtllib") {
+      mtllib ??= parts.slice(1).join(" ");
+    } else if (kind === "usemtl") {
+      const name = parts.slice(1).join(" ");
+      material = materialNames.indexOf(name);
+      if (material < 0) material = materialNames.push(name) - 1;
     } else if (kind === "f" || kind === "l") {
       // "7", "7/1", "7//3", "7/1/3" all point at vertex 7. Negative = counted from the end.
       const ids = parts.slice(1).map((p) => {
@@ -72,6 +94,7 @@ export function parseOBJ(text, { fit } = {}) {
       });
       if (kind === "f" && ids.length >= 3) {
         faces.push(ids.reverse()); // flipping Z flips the winding
+        faceMaterials.push(material);
         // "7//3" and "7/1/3": the third number is the corner's normal
         const ns = parts.slice(1).map((p) => {
           const s = p.split("/")[2];
@@ -127,6 +150,12 @@ export function parseOBJ(text, { fit } = {}) {
     mesh.uvs = uvs;
     mesh.faceUVs = faceUVs;
   }
+  // Material names (a list of materials on the object then colors each part)
+  if (materialNames.length > 0) {
+    mesh.materialNames = materialNames;
+    mesh.faceMaterials = faceMaterials;
+  }
+  if (mtllib) mesh.mtllib = mtllib;
   if (fit != null) fitMesh(mesh, fit);
   return mesh;
 }
@@ -171,10 +200,49 @@ export function fitMesh(mesh, size = 1) {
  * @param {ObjOptions} [opts]
  * @returns {Promise<ObjMesh>}
  */
-export async function loadOBJ(url, opts) {
+export async function loadOBJ(url, opts = {}) {
   const res = await fetch(url);
   if (!res.ok) throw new Error(`Could not load ${url} (${res.status})`);
-  return parseOBJ(await res.text(), opts);
+  const mesh = parseOBJ(await res.text(), opts);
+  if (opts.materials) mesh.materials = await loadMaterials(mesh, new URL(url, location.href));
+  return mesh;
+}
+
+/**
+ * The materials of a loaded OBJ, from its .mtl file: one per name in
+ * `mesh.materialNames`, with the texture images loaded. Missing files only
+ * give a warning (the part keeps a plain fill).
+ *
+ * @param {ObjMesh} mesh - Parsed with `parseOBJ`
+ * @param {URL|string} base - Where the OBJ file is (file names are relative to it)
+ * @returns {Promise<Object[]>}
+ */
+export async function loadMaterials(mesh, base) {
+  const names = mesh.materialNames ?? [];
+  if (!mesh.mtllib) return names.map((name) => ({ name, fill: "#cccccc" }));
+  let lib = {};
+  const mtlURL = new URL(mesh.mtllib, base);
+  try {
+    const res = await fetch(mtlURL);
+    if (!res.ok) throw new Error(`${res.status}`);
+    lib = parseMTL(await res.text());
+  } catch (err) {
+    console.warn(`Trid: couldn't load the material file ${mtlURL} (${err.message})`);
+  }
+  return Promise.all(names.map(async (name) => {
+    const m = lib[name] ?? {};
+    const material = { name, fill: m.fill ?? (m.textureFile ? "#ffffff" : "#cccccc") };
+    if (m.textureFile) {
+      const file = new URL(m.textureFile.replace(/\\/g, "/"), mtlURL);
+      try {
+        material.texture = await loadTexture(file.href);
+        material.fill = "#ffffff"; // MTL's Kd under a texture is usually a tint nobody meant
+      } catch (err) {
+        console.warn(`Trid: couldn't load the texture ${file} (${err.message})`);
+      }
+    }
+    return material;
+  }));
 }
 
 /**

package/trid/loaders/texture.js

@@ -3,9 +3,15 @@
  *
  * A material's `texture` can be anything the canvas can draw:
  * an `<img>`, a `<canvas>`, a `<video>` or an `ImageBitmap`.
- * Canvases and videos are read again every frame, so they can change.
+ *
+ * Videos are read again every frame. Everything else, canvases included,
+ * is read once: after redrawing a canvas, call `updateTexture(canvas)`, or
+ * give its material `liveTexture: true` to read it every frame.
  */
 
+/** How many times each source was updated with `updateTexture` (0 when never). */
+const versions = new WeakMap();
+
 /**
  * Loads an image to use as a texture.
  *
@@ -48,9 +54,44 @@ export function textureSize(src) {
   };
 }
 
-/** Whether a source can change over time (canvas, video), so it's read every frame. */
-export function textureIsLive(src) {
-  return (typeof HTMLCanvasElement !== "undefined" && src instanceof HTMLCanvasElement)
-    || (typeof HTMLVideoElement !== "undefined" && src instanceof HTMLVideoElement)
-    || (typeof OffscreenCanvas !== "undefined" && src instanceof OffscreenCanvas);
+/**
+ * Whether a texture is read again every frame: videos, and any source whose
+ * material has `liveTexture: true`. `liveTexture: false` freezes a video.
+ *
+ * @param {CanvasImageSource} src
+ * @param {{ liveTexture?: boolean }} [material] - The material using it
+ * @returns {boolean}
+ */
+export function textureIsLive(src, material) {
+  return material?.liveTexture ?? (typeof HTMLVideoElement !== "undefined" && src instanceof HTMLVideoElement);
+}
+
+/**
+ * Tells the renderers a texture source changed: call it after drawing on a
+ * canvas used as a texture. It's read again (once) on the next frame, by
+ * every renderer and every material using it.
+ *
+ * Canvases are read only once otherwise, which keeps them fast and sharp
+ * (they get mipmaps). For a canvas redrawn every frame, set
+ * `liveTexture: true` on its material instead.
+ *
+ * @example
+ * paintClouds(canvas, seed);
+ * updateTexture(canvas);
+ *
+ * @param {CanvasImageSource} src - The canvas (or image) that changed
+ */
+export function updateTexture(src) {
+  if (src && typeof src === "object") versions.set(src, (versions.get(src) ?? 0) + 1);
+}
+
+/**
+ * How many times `updateTexture` was called for a source (0 when never).
+ * Renderers compare it with the version they read last.
+ *
+ * @param {CanvasImageSource} src
+ * @returns {number}
+ */
+export function textureVersion(src) {
+  return versions.get(src) ?? 0;
 }

package/trid/math/matrix.js

@@ -0,0 +1,200 @@
+import { matFromEuler } from "./rotation.js";
+
+/**
+ * 4×4 transform matrices, for objects inside groups: an object's world
+ * matrix is its parent's world matrix times its own.
+ *
+ * A matrix is an array of 16 numbers in column-major order (the order
+ * WebGL uses): `m[col * 4 + row]`, translation in `m[12..14]`. They're
+ * built with `matFromEuler`, so they match `localToWorld` exactly.
+ *
+ * @typedef {number[]} Mat4
+ * @typedef {{x:number, y:number, z:number}} Vec3
+ */
+
+/** @returns {Mat4} The identity matrix (changes nothing). */
+export function identityMat4() {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+}
+
+/**
+ * The matrix of a transform: scale, then rotate (X, then Y, then Z), then
+ * move. Parts left out change nothing.
+ *
+ * @param {{ pos?:Vec3, rot?:Vec3, scale?:Vec3 }} t - A transform, or a scene object
+ * @returns {Mat4}
+ */
+export function mat4FromTransform({ pos, rot, scale } = {}) {
+  const r = rot ? matFromEuler(rot) : [[1, 0, 0], [0, 1, 0], [0, 0, 1]];
+  const sx = scale?.x ?? 1, sy = scale?.y ?? 1, sz = scale?.z ?? 1;
+  return [
+    r[0][0] * sx, r[1][0] * sx, r[2][0] * sx, 0,
+    r[0][1] * sy, r[1][1] * sy, r[2][1] * sy, 0,
+    r[0][2] * sz, r[1][2] * sz, r[2][2] * sz, 0,
+    pos?.x ?? 0, pos?.y ?? 0, pos?.z ?? 0, 1,
+  ];
+}
+
+/**
+ * Matrix product a · b: b is applied first. A child's world matrix is
+ * `mulMat4(parentWorld, childLocal)`.
+ *
+ * @param {Mat4} a
+ * @param {Mat4} b
+ * @returns {Mat4}
+ */
+export function mulMat4(a, b) {
+  const out = new Array(16);
+  for (let c = 0; c < 4; c++) {
+    for (let r = 0; r < 4; r++) {
+      out[c * 4 + r] = a[r] * b[c * 4] + a[4 + r] * b[c * 4 + 1] + a[8 + r] * b[c * 4 + 2] + a[12 + r] * b[c * 4 + 3];
+    }
+  }
+  return out;
+}
+
+/**
+ * Inverse of a transform matrix (scale, rotation and move; no perspective).
+ * Turns world positions into an object's local ones.
+ *
+ * @param {Mat4} m
+ * @returns {Mat4} The inverse, or the identity if `m` flattens space (a zero scale)
+ */
+export function invertMat4(m) {
+  const [a, b, c, , d, e, f, , g, h, i] = m;
+  // Inverse of the 3×3 part by cofactors
+  const A = e * i - f * h, B = -(d * i - f * g), C = d * h - e * g;
+  const det = a * A + b * B + c * C;
+  if (Math.abs(det) < 1e-12) return identityMat4();
+  const k = 1 / det;
+  const inv = [
+    A * k, -(b * i - c * h) * k, (b * f - c * e) * k,
+    B * k, (a * i - c * g) * k, -(a * f - c * d) * k,
+    C * k, -(a * h - b * g) * k, (a * e - b * d) * k,
+  ];
+  const tx = m[12], ty = m[13], tz = m[14];
+  return [
+    inv[0], inv[1], inv[2], 0,
+    inv[3], inv[4], inv[5], 0,
+    inv[6], inv[7], inv[8], 0,
+    -(inv[0] * tx + inv[3] * ty + inv[6] * tz),
+    -(inv[1] * tx + inv[4] * ty + inv[7] * tz),
+    -(inv[2] * tx + inv[5] * ty + inv[8] * tz),
+    1,
+  ];
+}
+
+/**
+ * Determinant of the 3×3 part: < 0 when the matrix mirrors (an odd number
+ * of negative scales), which turns faces inside out.
+ *
+ * @param {Mat4} m
+ * @returns {number}
+ */
+export function determinantMat4(m) {
+  return m[0] * (m[5] * m[10] - m[6] * m[9]) - m[4] * (m[1] * m[10] - m[2] * m[9]) + m[8] * (m[1] * m[6] - m[2] * m[5]);
+}
+
+/**
+ * A point through a matrix (scaled, turned and moved).
+ *
+ * @param {Mat4} m
+ * @param {Vec3} p
+ * @returns {Vec3}
+ */
+export function transformPoint(m, p) {
+  return {
+    x: m[0] * p.x + m[4] * p.y + m[8] * p.z + m[12],
+    y: m[1] * p.x + m[5] * p.y + m[9] * p.z + m[13],
+    z: m[2] * p.x + m[6] * p.y + m[10] * p.z + m[14],
+  };
+}
+
+/**
+ * A direction or offset through a matrix: scaled and turned, not moved.
+ *
+ * @param {Mat4} m
+ * @param {Vec3} v
+ * @returns {Vec3}
+ */
+export function transformDirection(m, v) {
+  return {
+    x: m[0] * v.x + m[4] * v.y + m[8] * v.z,
+    y: m[1] * v.x + m[5] * v.y + m[9] * v.z,
+    z: m[2] * v.x + m[6] * v.y + m[10] * v.z,
+  };
+}
+
+/**
+ * The 3×3 matrix that turns surface normals with an object (the inverse
+ * transpose of its matrix), column-major. It keeps normals perpendicular to
+ * stretched faces, and pointing outward on mirrored ones.
+ *
+ * @param {Mat4} m
+ * @returns {number[]} 9 numbers, column-major (ready for `gl.uniformMatrix3fv`)
+ */
+export function normalMatrix(m) {
+  const inv = invertMat4(m);
+  // Transpose of the inverse's 3×3 part
+  return [inv[0], inv[4], inv[8], inv[1], inv[5], inv[9], inv[2], inv[6], inv[10]];
+}
+
+/**
+ * A surface normal through a normal matrix (from `normalMatrix`), unit length.
+ *
+ * @param {number[]} nm - 3×3 column-major
+ * @param {Vec3} n
+ * @returns {Vec3}
+ */
+export function transformNormal(nm, n) {
+  const x = nm[0] * n.x + nm[3] * n.y + nm[6] * n.z;
+  const y = nm[1] * n.x + nm[4] * n.y + nm[7] * n.z;
+  const z = nm[2] * n.x + nm[5] * n.y + nm[8] * n.z;
+  const len = Math.hypot(x, y, z) || 1;
+  return { x: x / len, y: y / len, z: z / len };
+}
+
+/**
+ * Turns a world-space `TransformOp` (what `TransformGizmo` reports) into the
+ * space of an object's parent, so `applyTransformOp(child, op)` works on an
+ * object inside a group. Exact when the parents scale evenly (the same on
+ * every axis); with uneven scales, the turn is the closest a plain rotation
+ * can get.
+ *
+ * @example
+ * const local = obj.parent ? transformOpToLocal(op, worldMatrix(obj.parent)) : op;
+ * Object.assign(obj, applyTransformOp(saved, local));
+ *
+ * @param {Object} op - `{ mode: "move", delta }`, `{ mode: "rotate", axis, angle, center }`
+ *   or `{ mode: "scale", axis, factor, center }`
+ * @param {Mat4} parentWorld - The parent's world matrix
+ * @returns {Object} The same operation, in the parent's space
+ */
+export function transformOpToLocal(op, parentWorld) {
+  const inv = invertMat4(parentWorld);
+  const unit = (v) => {
+    const len = Math.hypot(v.x, v.y, v.z) || 1;
+    return { x: v.x / len, y: v.y / len, z: v.z / len };
+  };
+  switch (op.mode) {
+    case "move":
+      return { mode: "move", delta: transformDirection(inv, op.delta) };
+    case "rotate":
+      // A mirrored parent turns the other way
+      return {
+        mode: "rotate",
+        axis: unit(transformDirection(inv, op.axis)),
+        angle: determinantMat4(parentWorld) < 0 ? -op.angle : op.angle,
+        center: transformPoint(inv, op.center),
+      };
+    case "scale":
+      return {
+        mode: "scale",
+        axis: op.axis ? unit(transformDirection(inv, op.axis)) : null,
+        factor: op.factor,
+        center: transformPoint(inv, op.center),
+      };
+    default:
+      return op;
+  }
+}

package/trid/math/noise.js

@@ -0,0 +1,162 @@
+/**
+ * Seeded randomness and smooth noise, for procedural shapes and textures.
+ * The same seed always gives the same result, on every browser.
+ */
+
+/**
+ * A seeded random number generator (mulberry32): call the function it
+ * returns for the next number in [0, 1). Use it instead of Math.random when
+ * the same seed must build the same model again.
+ *
+ * @example
+ * const random = rng(42);
+ * const x = random(), y = random(); // the same two numbers every time
+ *
+ * @param {number} [seed=0] - Any whole number
+ * @returns {() => number}
+ */
+export function rng(seed = 0) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** Hash of lattice coordinates and a seed, in [0, 1). */
+function hash3(x, y, z, seed) {
+  let h = Math.imul(x, 374761393) ^ Math.imul(y, 668265263) ^ Math.imul(z, 2147483647) ^ Math.imul(seed, 1442695041);
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  h ^= h >>> 16;
+  return (h >>> 0) / 4294967296;
+}
+
+const fade = (t) => t * t * t * (t * (t * 6 - 15) + 10);
+const lerp = (a, b, t) => a + (b - a) * t;
+/** Wraps lattice coordinate n when the noise repeats every `period` (0: no wrap) */
+const wrap = (n, period) => (period > 0 ? ((n % period) + period) % period : n);
+/** A usable period: a whole number, or 0 for none */
+const periodOf = (p) => (p > 0 ? Math.max(1, Math.round(p)) : 0);
+
+function value2(x, y, seed, period) {
+  const xi = Math.floor(x), yi = Math.floor(y);
+  const fx = fade(x - xi), fy = fade(y - yi);
+  const x0 = wrap(xi, period), x1 = wrap(xi + 1, period);
+  const y0 = wrap(yi, period), y1 = wrap(yi + 1, period);
+  return lerp(
+    lerp(hash3(x0, y0, 0, seed), hash3(x1, y0, 0, seed), fx),
+    lerp(hash3(x0, y1, 0, seed), hash3(x1, y1, 0, seed), fx),
+    fy,
+  );
+}
+
+function value3(x, y, z, seed, period) {
+  const xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z);
+  const fx = fade(x - xi), fy = fade(y - yi), fz = fade(z - zi);
+  const h = (dx, dy, dz) => hash3(wrap(xi + dx, period), wrap(yi + dy, period), wrap(zi + dz, period), seed);
+  return lerp(
+    lerp(lerp(h(0, 0, 0), h(1, 0, 0), fx), lerp(h(0, 1, 0), h(1, 1, 0), fx), fy),
+    lerp(lerp(h(0, 0, 1), h(1, 0, 1), fx), lerp(h(0, 1, 1), h(1, 1, 1), fx), fy),
+    fz,
+  );
+}
+
+/**
+ * Smooth 2D noise (value noise) in [0, 1): random at whole coordinates,
+ * blended smoothly in between. Multiply the coordinates to change the size
+ * of the blobs.
+ *
+ * With `period`, the noise repeats every `period` units on both axes, so a
+ * texture painted with it tiles with no seam (map the texture's width to
+ * `period` units).
+ *
+ * @param {number} x
+ * @param {number} y
+ * @param {Object} [opts]
+ * @param {number} [opts.seed=0] - Whole number; another seed gives other noise
+ * @param {number} [opts.period=0] - Repeat every this many units (a whole number; 0: never)
+ * @returns {number}
+ */
+export function noise2(x, y, { seed = 0, period = 0 } = {}) {
+  return value2(x, y, seed, periodOf(period));
+}
+
+/**
+ * Smooth 3D noise in [0, 1). Sample it at a mesh's vertex positions to
+ * displace a sphere with no seam. `period` repeats it on all three axes.
+ *
+ * @param {number} x
+ * @param {number} y
+ * @param {number} z
+ * @param {Object} [opts]
+ * @param {number} [opts.seed=0] - Whole number; another seed gives other noise
+ * @param {number} [opts.period=0] - Repeat every this many units (a whole number; 0: never)
+ * @returns {number}
+ */
+export function noise3(x, y, z, { seed = 0, period = 0 } = {}) {
+  return value3(x, y, z, seed, periodOf(period));
+}
+
+/**
+ * Fractal 2D noise (fBm): `octaves` layers of noise2, each twice as fine and
+ * `gain` times as strong as the one before. Gives natural detail: terrain,
+ * clouds, rock, marble. Result in about [0, 1), averaging 0.5.
+ *
+ * @example
+ * // A tiling cloud texture
+ * const p = 4; // 4 blobs across
+ * for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) {
+ *   const n = fbm2((x / size) * p, (y / size) * p, { period: p });
+ *   ctx.fillStyle = `rgb(${n * 255}, ${n * 255}, 255)`;
+ *   ctx.fillRect(x, y, 1, 1);
+ * }
+ *
+ * @param {number} x
+ * @param {number} y
+ * @param {Object} [opts]
+ * @param {number} [opts.octaves=5] - Layers of detail
+ * @param {number} [opts.gain=0.5] - Strength of each layer compared to the one before
+ * @param {number} [opts.seed=0] - Whole number; another seed gives other noise
+ * @param {number} [opts.period=0] - Repeat every this many units (a whole number; 0: never)
+ * @returns {number}
+ */
+export function fbm2(x, y, { octaves = 5, gain = 0.5, seed = 0, period = 0 } = {}) {
+  const p = periodOf(period);
+  let sum = 0, amp = 1, norm = 0, freq = 1;
+  for (let i = 0; i < octaves; i++) {
+    sum += amp * value2(x * freq, y * freq, seed + i * 31, p * freq);
+    norm += amp;
+    amp *= gain;
+    freq *= 2;
+  }
+  return norm > 0 ? sum / norm : 0;
+}
+
+/**
+ * Fractal 3D noise (fBm), like `fbm2` in three dimensions. Result in about
+ * [0, 1), averaging 0.5.
+ *
+ * @param {number} x
+ * @param {number} y
+ * @param {number} z
+ * @param {Object} [opts]
+ * @param {number} [opts.octaves=5] - Layers of detail
+ * @param {number} [opts.gain=0.5] - Strength of each layer compared to the one before
+ * @param {number} [opts.seed=0] - Whole number; another seed gives other noise
+ * @param {number} [opts.period=0] - Repeat every this many units (a whole number; 0: never)
+ * @returns {number}
+ */
+export function fbm3(x, y, z, { octaves = 5, gain = 0.5, seed = 0, period = 0 } = {}) {
+  const p = periodOf(period);
+  let sum = 0, amp = 1, norm = 0, freq = 1;
+  for (let i = 0; i < octaves; i++) {
+    sum += amp * value3(x * freq, y * freq, z * freq, seed + i * 31, p * freq);
+    norm += amp;
+    amp *= gain;
+    freq *= 2;
+  }
+  return norm > 0 ? sum / norm : 0;
+}