trid3d 0.3.1 → 0.5.0

package/trid/render/post.js

@@ -0,0 +1,325 @@
+/**
+ * Post effects: shaders run on the whole picture after the scene is drawn
+ * (bloom, vignette, color grading, film grain...). Tools draw on top
+ * afterwards, so handles and overlays aren't affected.
+ *
+ *   scene.post = [bloom(), grade({ saturation: 1.2 }), vignette()];
+ *
+ * They run in the list's order, each on the result of the one before.
+ * A post effect is a plain object, like a material effect:
+ * - `glsl`: GLSL code defining `vec4 post(vec4 color, Frame f)`, run once
+ *   per pixel (WebGL renderer). `color` is the picture at `f.uv`
+ * - `passes`: instead of `glsl`, a list of passes run one after the other,
+ *   each `{ glsl, scale }` (`scale`: size of that pass's picture, 0.5 = half,
+ *   cheaper for blurs). Bloom is made this way
+ * - `canvas`: optional `(ctx, frame, uniforms) => void` that changes the 2D
+ *   canvas directly. The canvas renderer uses it (WebGL too, for effects
+ *   without `glsl` or `passes`). Without it, the canvas renderer skips the effect
+ * - `uniforms`: settings used by the code, like `{ uStrength: 0.5 }`. Same
+ *   types as material effects; read every frame
+ * - `enabled: false` turns the effect off without removing it
+ *
+ * In GLSL, every pass can call:
+ * - `frame(uv)`: the previous pass's picture (the first pass: the picture
+ *   this effect starts from)
+ * - `source(uv)`: the picture this effect starts from
+ * Colors are premultiplied by alpha (the same as plain colors where the
+ * picture is opaque, which it is when the scene has an opaque background).
+ *
+ * With post effects on, the WebGL renderer draws the scene into a texture
+ * first. On WebGL 2 it keeps antialiasing (multisampling); on WebGL 1 edges
+ * get a little rougher.
+ */
+
+import { parseColor } from "./color.js";
+
+/**
+ * What a post effect knows about the picture. GLSL fields and the canvas
+ * function's `frame` argument have the same names.
+ *
+ * @typedef {Object} Frame
+ * @property {{x:number,y:number}} uv - GLSL only: position in the picture, 0..1 (0, 0 = bottom left)
+ * @property {{x:number,y:number}} size - Size of the picture being made, in pixels (GLSL: `vec2`;
+ *   canvas: `width` / `height` instead)
+ * @property {{x:number,y:number}} texel - GLSL only: one pixel of the input picture, in uv units
+ * @property {number} time - Seconds since the renderer started
+ * @property {number[]} background - The scene's background color [r, g, b, a]
+ */
+
+/** The GLSL declaration of `Frame`, and the `frame` / `source` helpers. */
+export const FRAME_GLSL = `
+struct Frame {
+  vec2 uv;
+  vec2 size;
+  vec2 texel;
+  float time;
+  vec4 background;
+};
+uniform sampler2D uFrame;
+uniform sampler2D uSource;
+vec4 frame(vec2 uv) { return texture2D(uFrame, uv); }
+vec4 source(vec2 uv) { return texture2D(uSource, uv); }
+`;
+
+/** A post effect's passes, as `{ glsl, scale }`. Empty when it has no GLSL (canvas only). */
+export function postPasses(effect) {
+  if (Array.isArray(effect.passes)) return effect.passes.filter((p) => p?.glsl).map((p) => ({ glsl: p.glsl, scale: p.scale > 0 ? p.scale : 1 }));
+  return effect.glsl ? [{ glsl: effect.glsl, scale: 1 }] : [];
+}
+
+/** The effects of a list that are on. */
+export function activePost(list) {
+  return Array.isArray(list) ? list.filter((e) => e && e.enabled !== false) : [];
+}
+
+/**
+ * Runs post effects' `canvas` functions on a scene's 2D canvas.
+ * Used by the renderers after drawing.
+ *
+ * @param {Object} scene
+ * @param {Object[]} list - Post effects (the ones off, or without `canvas`, are skipped)
+ * @param {number} start - When the renderer started (`performance.now()`), for `time`
+ */
+export function runCanvasPost(scene, list, start) {
+  const effects = activePost(list).filter((e) => typeof e.canvas === "function");
+  if (!effects.length) return;
+  const { ctx, canvas } = scene;
+  const frame = {
+    width: canvas.width,
+    height: canvas.height,
+    time: (performance.now() - start) / 1000,
+    canvas,
+    rgba: (v) => (typeof v === "string" ? parseColor(ctx, v).map((x, i) => (i < 3 ? x / 255 : x)) : v),
+  };
+  frame.background = frame.rgba(scene.background ?? "#000000");
+  for (const e of effects) {
+    ctx.save();
+    try {
+      e.canvas(ctx, frame, e.uniforms ?? {});
+    } finally {
+      ctx.restore();
+    }
+  }
+}
+
+// --- Built-in post effects ---
+
+/**
+ * Darkens the corners of the picture.
+ *
+ * @param {Object} [opts]
+ * @param {number} [opts.strength=0.5] - How dark the corners get (0..1)
+ * @param {number} [opts.radius=0.5] - Where the darkening starts: 0 = center, 1 = corners
+ * @param {number} [opts.softness=0.5] - How far it takes to reach `strength`
+ * @param {string} [opts.color="#000000"] - Color the corners turn to
+ */
+export function vignette({ strength = 0.5, radius = 0.5, softness = 0.5, color = "#000000" } = {}) {
+  return {
+    name: "vignette",
+    uniforms: { uStrength: strength, uRadius: radius, uSoftness: softness, uColor: color },
+    glsl: `
+vec4 post(vec4 color, Frame f) {
+  float r = length((f.uv - 0.5) * 2.0) / 1.41421356; // 0 at the center, 1 in the corners
+  float v = smoothstep(uRadius, uRadius + max(uSoftness, 1e-3), r) * uStrength;
+  return vec4(mix(color.rgb, uColor.rgb * color.a, v), color.a);
+}`,
+    canvas(ctx, f, u) {
+      const [r, g, b] = f.rgba(u.uColor);
+      const rgba = (a) => `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${a})`;
+      ctx.translate(f.width / 2, f.height / 2);
+      ctx.scale(f.width / 2, f.height / 2); // the picture is -1..1 both ways: the circle becomes an ellipse
+      const r0 = u.uRadius * Math.SQRT2, r1 = (u.uRadius + Math.max(u.uSoftness, 1e-3)) * Math.SQRT2;
+      const grad = ctx.createRadialGradient(0, 0, r0, 0, 0, r1);
+      for (const t of [0, 0.25, 0.5, 0.75, 1]) grad.addColorStop(t, rgba(t * t * (3 - 2 * t) * u.uStrength));
+      ctx.fillStyle = grad;
+      ctx.fillRect(-1, -1, 2, 2);
+    },
+  };
+}
+
+/**
+ * Color grading: brightness, contrast, saturation and a tint, in that order
+ * (like the CSS filters of the same names).
+ *
+ * @param {Object} [opts]
+ * @param {number} [opts.brightness=1] - Multiplies the colors (1 = unchanged)
+ * @param {number} [opts.contrast=1] - Pushes colors away from (> 1) or toward (< 1) middle gray
+ * @param {number} [opts.saturation=1] - 0 = gray, 1 = unchanged, > 1 = more vivid
+ * @param {string} [opts.tint="#ffffff"] - Multiplies the colors by this one
+ */
+export function grade({ brightness = 1, contrast = 1, saturation = 1, tint = "#ffffff" } = {}) {
+  return {
+    name: "grade",
+    uniforms: { uBrightness: brightness, uContrast: contrast, uSaturation: saturation, uTint: tint },
+    glsl: `
+vec4 post(vec4 color, Frame f) {
+  if (color.a <= 0.0) return color;
+  vec3 c = color.rgb / color.a;
+  c = clamp(c * uBrightness, 0.0, 1.0);
+  c = clamp((c - 0.5) * uContrast + 0.5, 0.0, 1.0);
+  float l = dot(c, vec3(0.2126, 0.7152, 0.0722));
+  c = clamp(mix(vec3(l), c, uSaturation), 0.0, 1.0) * uTint.rgb;
+  return vec4(c * color.a, color.a);
+}`,
+    canvas(ctx, f, u) {
+      if (supportsFilter(ctx) && (u.uBrightness !== 1 || u.uContrast !== 1 || u.uSaturation !== 1)) {
+        const copy = scratch(f.width, f.height);
+        copy.getContext("2d").drawImage(f.canvas, 0, 0);
+        ctx.filter = `brightness(${u.uBrightness}) contrast(${u.uContrast}) saturate(${u.uSaturation})`;
+        ctx.globalCompositeOperation = "copy";
+        ctx.drawImage(copy, 0, 0);
+        ctx.filter = "none";
+      }
+      const t = f.rgba(u.uTint);
+      if (t[0] < 1 || t[1] < 1 || t[2] < 1) {
+        ctx.globalCompositeOperation = "multiply";
+        ctx.fillStyle = u.uTint;
+        ctx.fillRect(0, 0, f.width, f.height);
+      }
+    },
+  };
+}
+
+/**
+ * Film grain: a little random noise over the picture.
+ *
+ * @param {Object} [opts]
+ * @param {number} [opts.amount=0.08] - How strong the noise is (0..1)
+ * @param {number} [opts.size=1] - Size of a grain, in pixels
+ * @param {boolean} [opts.animated=true] - New noise every frame (false: the same noise stays)
+ */
+export function grain({ amount = 0.08, size = 1, animated = true } = {}) {
+  return {
+    name: "grain",
+    uniforms: { uAmount: amount, uGrain: size, uAnimated: animated },
+    glsl: `
+float grainHash(vec2 p) {
+  vec3 q = fract(vec3(p.xyx) * 0.1031);
+  q += dot(q, q.yzx + 33.33);
+  return fract((q.x + q.y) * q.z);
+}
+vec4 post(vec4 color, Frame f) {
+  vec2 cell = floor(f.uv * f.size / max(uGrain, 1.0));
+  float t = uAnimated > 0.5 ? floor(f.time * 24.0) : 0.0;
+  float n = grainHash(cell + vec2(t * 17.0, t * 31.0)) - 0.5;
+  return vec4(clamp(color.rgb + n * uAmount * color.a, 0.0, 1.0), color.a);
+}`,
+    canvas(ctx, f, u) {
+      const tile = noiseTile();
+      const pattern = ctx.createPattern(tile, "repeat");
+      const s = Math.max(1, u.uGrain);
+      const frameNo = u.uAnimated ? Math.floor(f.time * 24) : 0;
+      // A different spot of the tile each frame
+      const ox = (frameNo * 37) % tile.width, oy = (frameNo * 61) % tile.height;
+      pattern.setTransform?.(new DOMMatrix([s, 0, 0, s, -ox * s, -oy * s]));
+      ctx.globalCompositeOperation = "overlay";
+      ctx.globalAlpha = Math.min(1, u.uAmount * 4);
+      ctx.fillStyle = pattern;
+      ctx.fillRect(0, 0, f.width, f.height);
+    },
+  };
+}
+
+/**
+ * Glow around bright parts: what's brighter than `threshold` is blurred
+ * and added back on top.
+ *
+ * On the canvas renderer it's an approximation (CSS filters can't cut at a
+ * brightness exactly), and it needs a browser with canvas `filter` support.
+ *
+ * @param {Object} [opts]
+ * @param {number} [opts.threshold=0.7] - Brightness (0..1) where the glow starts
+ * @param {number} [opts.strength=0.8] - How bright the glow is
+ * @param {number} [opts.radius=1] - How far it spreads (1 = about 25 pixels)
+ */
+export function bloom({ threshold = 0.7, strength = 0.8, radius = 1 } = {}) {
+  // 9-tap Gaussian blur, along one direction
+  const blur = (dir) => `
+vec4 post(vec4 color, Frame f) {
+  vec2 step = ${dir} * f.texel * uRadius * 1.5;
+  vec3 c = frame(f.uv).rgb * 0.227027;
+  c += (frame(f.uv + step).rgb + frame(f.uv - step).rgb) * 0.1945946;
+  c += (frame(f.uv + step * 2.0).rgb + frame(f.uv - step * 2.0).rgb) * 0.1216216;
+  c += (frame(f.uv + step * 3.0).rgb + frame(f.uv - step * 3.0).rgb) * 0.054054;
+  c += (frame(f.uv + step * 4.0).rgb + frame(f.uv - step * 4.0).rgb) * 0.016216;
+  return vec4(c, 1.0);
+}`;
+  return {
+    name: "bloom",
+    uniforms: { uThreshold: threshold, uStrength: strength, uRadius: radius },
+    passes: [
+      {
+        // The bright parts only, at half size (four pixels averaged into one)
+        scale: 0.5,
+        glsl: `
+vec4 post(vec4 color, Frame f) {
+  vec2 o = f.texel * 0.5;
+  vec3 c = (frame(f.uv - o).rgb + frame(f.uv + o).rgb
+    + frame(f.uv + vec2(o.x, -o.y)).rgb + frame(f.uv + vec2(-o.x, o.y)).rgb) * 0.25;
+  float b = max(c.r, max(c.g, c.b));
+  return vec4(c * smoothstep(uThreshold - 0.1, uThreshold + 0.1, b), 1.0);
+}`,
+      },
+      { scale: 0.25, glsl: blur("vec2(1.0, 0.0)") },
+      { scale: 0.25, glsl: blur("vec2(0.0, 1.0)") },
+      {
+        // Added on top of the picture
+        scale: 1,
+        glsl: `
+vec4 post(vec4 color, Frame f) {
+  vec4 s = source(f.uv);
+  vec3 g = frame(f.uv).rgb * uStrength;
+  return vec4(min(s.rgb + g, 1.0), min(1.0, max(s.a, max(g.r, max(g.g, g.b)))));
+}`,
+      },
+    ],
+    canvas(ctx, f, u) {
+      if (!supportsFilter(ctx)) return;
+      const copy = scratch(f.width, f.height);
+      const c = copy.getContext("2d");
+      c.clearRect(0, 0, f.width, f.height);
+      // brightness, then strong contrast: what's darker than about `threshold` goes black
+      const t = Math.min(0.99, Math.max(0.05, u.uThreshold));
+      c.filter = `brightness(${0.375 / t}) contrast(4) blur(${Math.max(1, 10 * u.uRadius)}px)`;
+      c.drawImage(f.canvas, 0, 0);
+      c.filter = "none";
+      ctx.globalCompositeOperation = "lighter";
+      ctx.globalAlpha = Math.min(1, u.uStrength);
+      ctx.drawImage(copy, 0, 0);
+    },
+  };
+}
+
+// --- Helpers for the canvas versions ---
+
+function supportsFilter(ctx) {
+  return typeof ctx.filter === "string";
+}
+
+let scratchCanvas = null;
+/** A spare canvas of a size (one, reused). */
+function scratch(w, h) {
+  scratchCanvas ??= document.createElement("canvas");
+  if (scratchCanvas.width !== w || scratchCanvas.height !== h) {
+    scratchCanvas.width = w;
+    scratchCanvas.height = h;
+  }
+  return scratchCanvas;
+}
+
+let tile = null;
+/** 128 × 128 gray noise, made once. */
+function noiseTile() {
+  if (tile) return tile;
+  tile = document.createElement("canvas");
+  tile.width = tile.height = 128;
+  const c = tile.getContext("2d");
+  const img = c.createImageData(128, 128);
+  for (let i = 0; i < img.data.length; i += 4) {
+    const v = Math.floor(Math.random() * 256);
+    img.data[i] = img.data[i + 1] = img.data[i + 2] = v;
+    img.data[i + 3] = 255;
+  }
+  c.putImageData(img, 0, 0);
+  return tile;
+}

package/trid/render/shapes.js

@@ -13,7 +13,8 @@ function cubeWire(size = 0.5) {
  * @param {number} h - height (y)
  * @param {number} d - depth (z)
  */
-function rectPrismWire(w = 0.6, h = 0.3, d = 0.4) {
+function rectPrismWire(w = 0.6, h = 0.3, d = 0.4, radius = 0, segments = 4) {
+  if (radius > 0) return roundedBox(w, h, d, radius, segments);
   const x = w / 2, y = h / 2, z = d / 2;
 
   const mesh = {
@@ -51,6 +52,91 @@ function rectPrismWire(w = 0.6, h = 0.3, d = 0.4) {
   return withFaceUVs(mesh);
 }
 
+/**
+ * A box with rounded edges and corners, centered on the origin: each side is
+ * a grid whose outer rows bend around the edges (`segments` rows per
+ * rounded edge, evenly spread over the quarter circle). Vertices along the
+ * edges are shared, so smooth shading has no seams. Like the plain box,
+ * each side has its own material number (front, back, top, bottom, right,
+ * left) and the whole texture, upright as seen from outside.
+ */
+function roundedBox(w, h, d, radius, segments) {
+  const half = { x: Math.abs(w) / 2, y: Math.abs(h) / 2, z: Math.abs(d) / 2 };
+  const r = Math.min(radius, half.x, half.y, half.z);
+  const s = Math.max(1, Math.floor(segments));
+  const inner = { x: half.x - r, y: half.y - r, z: half.z - r };
+  // Grid lines across a side: `s` rows around each rounded edge, one flat span between
+  // (where the edges meet, as on a cube of radius = half its size, the flat span is skipped)
+  const ticks = (a) => {
+    const arc = Array.from({ length: s }, (_, i) => Math.tan((Math.PI / 4) * (1 - i / s)) * r);
+    const lo = arc.map((t) => -inner[a] - t), hi = [...arc].reverse().map((t) => inner[a] + t);
+    return inner[a] > 1e-12 ? [...lo, -inner[a], inner[a], ...hi] : [...lo, 0, ...hi];
+  };
+  // The point on the flat side pulled onto the rounded surface
+  const round = (p) => {
+    const c = { x: Math.max(-inner.x, Math.min(inner.x, p.x)), y: Math.max(-inner.y, Math.min(inner.y, p.y)), z: Math.max(-inner.z, Math.min(inner.z, p.z)) };
+    const dx = p.x - c.x, dy = p.y - c.y, dz = p.z - c.z, l = Math.hypot(dx, dy, dz);
+    return l > 1e-12 ? { x: c.x + (dx / l) * r, y: c.y + (dy / l) * r, z: c.z + (dz / l) * r } : p;
+  };
+  // Sides in the plain box's order: front (-z), back (+z), top, bottom, right (+x), left (-x).
+  // The texture goes like on the plain box (withFaceUVs): up is +Y (±Z on the top and bottom), right = normal × up
+  const axisOf = (v) => (v.x ? ["x", Math.sign(v.x)] : v.y ? ["y", Math.sign(v.y)] : ["z", Math.sign(v.z)]);
+  const sides = [["z", -1], ["z", 1], ["y", 1], ["y", -1], ["x", 1], ["x", -1]].map(([n, sign]) => {
+    const nv = { x: 0, y: 0, z: 0 };
+    nv[n] = sign;
+    const up = n === "y" ? { x: 0, y: 0, z: sign } : { x: 0, y: 1, z: 0 };
+    const right = { x: nv.y * up.z - nv.z * up.y, y: nv.z * up.x - nv.x * up.z, z: nv.x * up.y - nv.y * up.x };
+    return { n, sign, u: axisOf(right), v: axisOf(up) };
+  });
+  const vertices = [], faces = [], uvs = [], faceUVs = [], faceMaterials = [];
+  const shared = new Map();
+  const key = (p) => `${p.x.toFixed(9)},${p.y.toFixed(9)},${p.z.toFixed(9)}`;
+  sides.forEach((side, m) => {
+    const [ua, us] = side.u, [va, vs] = side.v;
+    const tu = ticks(ua), tv = ticks(va);
+    const ids = [], uvIds = [];
+    for (const b of tv) {
+      for (const a of tu) {
+        const p = { x: 0, y: 0, z: 0 };
+        p[side.n] = side.sign * half[side.n];
+        p[ua] = a;
+        p[va] = b;
+        const q = round(p);
+        const k = key(q);
+        if (!shared.has(k)) shared.set(k, vertices.push(q) - 1);
+        ids.push(shared.get(k));
+        uvIds.push(uvs.push({ u: (us * a + half[ua]) / (2 * half[ua] || 1), v: (vs * b + half[va]) / (2 * half[va] || 1) }) - 1);
+      }
+    }
+    const nu = tu.length;
+    for (let j = 0; j + 1 < tv.length; j++) {
+      for (let i = 0; i + 1 < nu; i++) {
+        const c = [j * nu + i, j * nu + i + 1, (j + 1) * nu + i + 1, (j + 1) * nu + i];
+        // Clockwise from outside
+        const p = c.map((t) => vertices[ids[t]]);
+        const e1 = { x: p[1].x - p[0].x, y: p[1].y - p[0].y, z: p[1].z - p[0].z };
+        const e2 = { x: p[3].x - p[0].x, y: p[3].y - p[0].y, z: p[3].z - p[0].z };
+        const nz = { x: e1.y * e2.z - e1.z * e2.y, y: e1.z * e2.x - e1.x * e2.z, z: e1.x * e2.y - e1.y * e2.x }[side.n] * side.sign;
+        const order = nz < 0 ? [...c].reverse() : c;
+        faces.push(order.map((t) => ids[t]));
+        faceUVs.push(order.map((t) => uvIds[t]));
+        faceMaterials.push(m);
+      }
+    }
+  });
+  // Faces that collapsed where grid points met (a cube rounded into a ball) are dropped
+  const keep = faces.map((f) => new Set(f).size >= 3);
+  const out = {
+    vertices,
+    faces: faces.filter((_, i) => keep[i]).map((f) => f.filter((v, i) => v !== f[(i + f.length - 1) % f.length])),
+    uvs,
+    faceUVs: faceUVs.filter((_, i) => keep[i]),
+    faceMaterials: faceMaterials.filter((_, i) => keep[i]),
+  };
+  out.faceUVs = out.faceUVs.map((uv, i) => (uv.length === out.faces[i].length ? uv : uv.slice(0, out.faces[i].length)));
+  return out;
+}
+
 /**
  * Gives every face the whole texture, upright as seen from outside:
  * side faces have +Y up, the top face has +Z up, the bottom face -Z.
@@ -548,8 +634,10 @@ export function scaleMesh(mesh, sx = 1, sy = 1, sz = 1) {
  */
 export function makeShape(kind, opts = {}) {
   switch (kind.toLowerCase()) {
-    case "cube":  return cubeWire(opts.size ?? 0.5);
-    case "box":   return rectPrismWire(opts.w ?? 0.6, opts.h ?? 0.6, opts.d ?? 0.6);
+    case "cube":  return opts.radius > 0
+      ? rectPrismWire(opts.size ?? 0.5, opts.size ?? 0.5, opts.size ?? 0.5, opts.radius, opts.segments ?? 4)
+      : cubeWire(opts.size ?? 0.5);
+    case "box":   return rectPrismWire(opts.w ?? 0.6, opts.h ?? 0.6, opts.d ?? 0.6, opts.radius ?? 0, opts.segments ?? 4);
     case "sphere":return sphereWire(opts.r ?? 0.45, opts.rings ?? 12, opts.segments ?? 24);
     case "cylinder": return cylinder(opts.r, opts.h, opts.segments);
     case "cone":  return cone(opts.r, opts.h, opts.segments, opts.rTop);