trid3d 0.5.0 → 0.7.0

package/trid/render/shadows.js

@@ -0,0 +1,184 @@
+/**
+ * Shadows from a directional light.
+ *
+ *   scene.lights = [
+ *     { type: "ambient", intensity: 0.3 },
+ *     { type: "directional", direction: { x: -0.5, y: 1, z: -0.8 }, intensity: 0.7, shadows: true },
+ *   ];
+ *
+ * - The first directional light with `shadows` casts them (point lights
+ *   don't, yet). `shadows` is `true` or options, see `shadowOptions`
+ * - Objects cast and receive shadows unless they (or a group they're in)
+ *   have `castShadow: false` / `receiveShadow: false`. Only faces cast
+ *   shadows, not lines or see-through faces
+ *
+ * WebGL renderer: a shadow map. The scene is drawn from the light into a
+ * picture of distances, fitted around the casting objects every frame;
+ * each pixel then checks whether something is nearer the light than it.
+ *
+ * Canvas renderer: ground shadows. The casting objects are flattened onto
+ * the floor (the level where most of the area of flat, upward faces is, or
+ * `ground`) and drawn as one darker shape on the floor's faces. Objects
+ * don't shadow each other there.
+ */
+
+import { transformPoint } from "../math/matrix.js";
+import { newell } from "./normals.js";
+
+/** Settings used for `shadows: true`. */
+export const DEFAULT_SHADOWS = Object.freeze({ size: 2048, softness: 1.5, bias: 1, ground: null });
+
+/**
+ * A light's shadow settings, defaults filled in.
+ *
+ * @param {boolean|Object} value - The light's `shadows`
+ * @returns {{ size:number, softness:number, bias:number, ground:number|null }}
+ *   - `size`: width of the shadow map in pixels (WebGL). Bigger: sharper, slower
+ *   - `softness`: blur of the shadows' edges, in shadow map pixels (0: sharp)
+ *   - `bias`: pushes the test away from surfaces, against speckles ("shadow acne")
+ *     on surfaces facing the light. Raise it if they appear; too high and shadows
+ *     come loose from their objects
+ *   - `ground`: the floor's height for the canvas renderer (default: found)
+ */
+export function shadowOptions(value) {
+  const o = value && typeof value === "object" ? value : {};
+  return {
+    size: Math.max(64, Math.min(8192, Math.round(o.size ?? DEFAULT_SHADOWS.size))),
+    softness: Math.max(0, o.softness ?? DEFAULT_SHADOWS.softness),
+    bias: Math.max(0, o.bias ?? DEFAULT_SHADOWS.bias),
+    ground: typeof o.ground === "number" ? o.ground : null,
+  };
+}
+
+/** False when the object or one of its groups sets `key` to false. */
+export function shadowFlag(obj, key) {
+  for (let o = obj; o; o = o.parent) if (o[key] === false) return false;
+  return true;
+}
+
+const spheres = new WeakMap();
+
+/** A sphere around a mesh's vertices, in its own space (cached per vertex array). */
+function meshSphere(mesh) {
+  const v = mesh.vertices;
+  const hit = spheres.get(v);
+  if (hit && hit.n === v.length && !mesh.dirty) return hit;
+  let min = { x: Infinity, y: Infinity, z: Infinity }, max = { x: -Infinity, y: -Infinity, z: -Infinity };
+  for (const p of v) {
+    min = { x: Math.min(min.x, p.x), y: Math.min(min.y, p.y), z: Math.min(min.z, p.z) };
+    max = { x: Math.max(max.x, p.x), y: Math.max(max.y, p.y), z: Math.max(max.z, p.z) };
+  }
+  const c = { x: (min.x + max.x) / 2, y: (min.y + max.y) / 2, z: (min.z + max.z) / 2 };
+  let r = 0;
+  for (const p of v) r = Math.max(r, Math.hypot(p.x - c.x, p.y - c.y, p.z - c.z));
+  const s = { c, r, n: v.length };
+  spheres.set(v, s);
+  return s;
+}
+
+/**
+ * Where the shadow map looks: a box facing along the light, around every
+ * casting object (each object's mesh sphere, placed and scaled).
+ *
+ * @param {Object[]} casters - Objects with `mesh` and `world`
+ * @param {{x:number,y:number,z:number}} dir - Unit direction the light comes from
+ * @returns {{ matrix: Float32Array, radius: number } | null} `matrix` takes world points to
+ *   the shadow map's -1..1 cube (column-major, for WebGL)
+ */
+export function shadowFrame(casters, dir) {
+  let min = { x: Infinity, y: Infinity, z: Infinity }, max = { x: -Infinity, y: -Infinity, z: -Infinity };
+  let any = false;
+  for (const obj of casters) {
+    if (!obj.mesh?.vertices?.length) continue;
+    const s = meshSphere(obj.mesh);
+    const w = obj.world;
+    const c = transformPoint(w, s.c);
+    const k = Math.max(Math.hypot(w[0], w[1], w[2]), Math.hypot(w[4], w[5], w[6]), Math.hypot(w[8], w[9], w[10]));
+    const r = s.r * k;
+    min = { x: Math.min(min.x, c.x - r), y: Math.min(min.y, c.y - r), z: Math.min(min.z, c.z - r) };
+    max = { x: Math.max(max.x, c.x + r), y: Math.max(max.y, c.y + r), z: Math.max(max.z, c.z + r) };
+    any = true;
+  }
+  if (!any) return null;
+  const c = { x: (min.x + max.x) / 2, y: (min.y + max.y) / 2, z: (min.z + max.z) / 2 };
+  const R = Math.max(1e-6, Math.hypot(max.x - min.x, max.y - min.y, max.z - min.z) / 2);
+
+  // The light looks along -dir; right and up across it
+  const f = { x: -dir.x, y: -dir.y, z: -dir.z };
+  const up = Math.abs(f.y) > 0.99 ? { x: 0, y: 0, z: 1 } : { x: 0, y: 1, z: 0 };
+  const r = unit(cross(up, f));
+  const u = cross(f, r);
+  const dot = (a, b) => a.x * b.x + a.y * b.y + a.z * b.z;
+  const m = new Float32Array([
+    r.x / R, u.x / R, f.x / R, 0,
+    r.y / R, u.y / R, f.y / R, 0,
+    r.z / R, u.z / R, f.z / R, 0,
+    -dot(r, c) / R, -dot(u, c) / R, -dot(f, c) / R, 1,
+  ]);
+  return { matrix: m, radius: R };
+}
+
+/**
+ * The floor for ground shadows: the height where receiving objects have the
+ * most area of flat faces turned up. Null when there's none.
+ *
+ * @param {Object[]} receivers - Objects with `mesh` and `world`
+ */
+export function findGround(receivers) {
+  const area = new Map();
+  for (const obj of receivers) {
+    const v = obj.mesh.vertices;
+    for (const face of obj.mesh.faces ?? []) {
+      if (face.length < 3) continue;
+      const p = face.map((i) => transformPoint(obj.world, v[i]));
+      const n = newell(p);
+      const len = Math.hypot(n.x, n.y, n.z);
+      if (!(len > 0) || n.y / len < 0.99) continue;
+      const y = Math.round(p[0].y * 1e4) / 1e4;
+      area.set(y, (area.get(y) ?? 0) + len / 2);
+    }
+  }
+  let best = null, most = 0;
+  for (const [y, a] of area) if (a > most) [best, most] = [y, a];
+  return best;
+}
+
+/**
+ * A world polygon's part above `ground`, flattened onto it along the light.
+ * Empty when it's all at or below the ground.
+ *
+ * @param {{x:number,y:number,z:number}[]} pts - World points
+ * @param {{x:number,y:number,z:number}} dir - Unit direction the light comes from (dir.y > 0)
+ * @param {number} ground
+ */
+export function flattenOnGround(pts, dir, ground) {
+  const eps = 1e-5;
+  if (pts.every((p) => p.y <= ground + eps)) return [];
+  // Cut off what's below the ground
+  let poly = pts;
+  if (pts.some((p) => p.y < ground)) {
+    poly = [];
+    for (let i = 0; i < pts.length; i++) {
+      const a = pts[i], b = pts[(i + 1) % pts.length];
+      const aIn = a.y >= ground, bIn = b.y >= ground;
+      if (aIn) poly.push(a);
+      if (aIn !== bIn) {
+        const t = (ground - a.y) / (b.y - a.y);
+        poly.push({ x: a.x + (b.x - a.x) * t, y: ground, z: a.z + (b.z - a.z) * t });
+      }
+    }
+  }
+  return poly.map((p) => {
+    const t = (p.y - ground) / dir.y;
+    return { x: p.x - dir.x * t, y: ground, z: p.z - dir.z * t };
+  });
+}
+
+function cross(a, b) {
+  return { x: a.y * b.z - a.z * b.y, y: a.z * b.x - a.x * b.z, z: a.x * b.y - a.y * b.x };
+}
+
+function 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 };
+}

package/trid/render/shapes.js

@@ -249,6 +249,9 @@ function sphereWire(radius = 0.35, rings = 10, segments = 16) {
   return { vertices, edges, faces, uvs, faceUVs };
 }
 
+/** Profile points closer to the axis than this are poles (one vertex). */
+const POLE = 1e-9;
+
 /**
  * Spins a profile around the Y axis: vases, bottles, cups, columns, chess
  * pieces. Cylinders, cones and tori are built with it.
@@ -256,6 +259,9 @@ function sphereWire(radius = 0.35, rings = 10, segments = 16) {
  * Walk the profile so the outside is on its right in the (r, y) plane:
  * bottom to top for a vase. Faces are clockwise as seen from outside.
  *
+ * A point on the axis (`r: 0`) is a pole: one vertex, with triangles around
+ * it, like a cone's tip or the closed end of a spinning top.
+ *
  * Texture coordinates: u goes around, v follows the profile's length.
  * Caps map the texture as a disc. Edges are the profile's rings plus one
  * line along the profile per segment.
@@ -292,52 +298,67 @@ export function lathe(profile, { segments = 32, capBottom = false, capTop = fals
   }
   const total = lengths[lengths.length - 1] || 1;
 
-  for (const p of profile) {
-    for (let s = 0; s < segments; s++) {
-      const t = (s / segments) * Math.PI * 2;
-      vertices.push({ x: Math.cos(t) * p.r, y: p.y, z: Math.sin(t) * p.r });
+  // One ring of vertices per profile point, or a single vertex for a pole (on the axis)
+  const pole = profile.map((p) => !(Math.abs(p.r) > POLE));
+  const start = [];
+  for (const [r, p] of profile.entries()) {
+    start.push(vertices.length);
+    if (pole[r]) vertices.push({ x: 0, y: p.y, z: 0 });
+    else {
+      for (let s = 0; s < segments; s++) {
+        const t = (s / segments) * Math.PI * 2;
+        vertices.push({ x: Math.cos(t) * p.r, y: p.y, z: Math.sin(t) * p.r });
+      }
     }
   }
+  const at = (r, s) => (pole[r] ? start[r] : start[r] + (s % segments));
 
   const rows = pts.length - 1;
   for (let r = 0; r < rows; r++) {
-    const a = r * segments;
-    const b = ((r + 1) % profile.length) * segments;
+    const next = (r + 1) % profile.length;
+    if (pole[r] && pole[next]) continue; // along the axis: nothing to draw
     for (let s = 0; s < segments; s++) {
-      const s1 = (s + 1) % segments;
-      faces.push([a + s, b + s, b + s1, a + s1]);
-      const u0 = s / segments, u1 = (s + 1) / segments;
+      const u0 = s / segments, u1 = (s + 1) / segments, um = (u0 + u1) / 2;
       const v0 = lengths[r] / total, v1 = lengths[r + 1] / total;
-      faceUVs.push([uv(u0, v0), uv(u0, v1), uv(u1, v1), uv(u1, v0)]);
+      // Next to a pole, a triangle; its corner there sits in the middle of u
+      if (pole[r]) {
+        faces.push([at(r, s), at(next, s), at(next, s + 1)]);
+        faceUVs.push([uv(um, v0), uv(u0, v1), uv(u1, v1)]);
+      } else if (pole[next]) {
+        faces.push([at(r, s), at(next, s), at(r, s + 1)]);
+        faceUVs.push([uv(u0, v0), uv(um, v1), uv(u1, v0)]);
+      } else {
+        faces.push([at(r, s), at(next, s), at(next, s + 1), at(r, s + 1)]);
+        faceUVs.push([uv(u0, v0), uv(u0, v1), uv(u1, v1), uv(u1, v0)]);
+      }
     }
   }
 
-  // Rings (skipped where the profile touches the axis) and lines along the profile
+  // Rings (none at a pole) and lines along the profile
   profile.forEach((p, r) => {
-    if (p.r > 1e-5) edges.push(Array.from({ length: segments }, (_, s) => r * segments + s));
+    if (!pole[r]) edges.push(Array.from({ length: segments }, (_, s) => at(r, s)));
   });
   for (let s = 0; s < segments; s++) {
-    if (closed && profile.length > 2) edges.push(profile.map((_, r) => r * segments + s));
-    else for (let r = 0; r < profile.length - 1; r++) edges.push([r * segments + s, (r + 1) * segments + s]);
+    if (closed && profile.length > 2) edges.push(profile.map((_, r) => at(r, s)));
+    else for (let r = 0; r < profile.length - 1; r++) if (!(pole[r] && pole[r + 1])) edges.push([at(r, s), at(r + 1, s)]);
   }
 
   const disc = (s) => {
     const t = (s / segments) * Math.PI * 2;
     return uv(0.5 + Math.cos(t) * 0.5, 0.5 + Math.sin(t) * 0.5);
   };
-  if (capBottom && !closed && profile[0].r > 0) {
+  if (capBottom && !closed && !pole[0]) {
     const c = vertices.push({ x: 0, y: profile[0].y, z: 0 }) - 1;
     for (let s = 0; s < segments; s++) {
-      faces.push([c, s, (s + 1) % segments]);
+      faces.push([c, at(0, s), at(0, s + 1)]);
       faceUVs.push([uv(0.5, 0.5), disc(s), disc(s + 1)]);
     }
   }
   const last = profile.length - 1;
-  if (capTop && !closed && profile[last].r > 0) {
+  if (capTop && !closed && !pole[last]) {
     const c = vertices.push({ x: 0, y: profile[last].y, z: 0 }) - 1;
-    const a = last * segments;
     for (let s = 0; s < segments; s++) {
-      faces.push([c, a + (s + 1) % segments, a + s]);
+      faces.push([c, at(last, s + 1), at(last, s)]);
       faceUVs.push([uv(0.5, 0.5), disc(s + 1), disc(s)]);
     }
   }
@@ -350,11 +371,9 @@ function cylinder(r = 0.3, h = 0.8, segments = 32) {
   return lathe([{ r, y: -h / 2 }, { r, y: h / 2 }], { segments, capBottom: true, capTop: true });
 }
 
-/** A cone along Y with its tip up, or a tapered cylinder when `rTop` > 0. */
+/** A cone along Y with its tip up (a single point, so it's closed), or a tapered cylinder when `rTop` > 0. */
 function cone(r = 0.35, h = 0.8, segments = 32, rTop = 0) {
-  // A tiny top ring keeps the tip's faces non-degenerate for UVs and normals
-  const profile = [{ r, y: -h / 2 }, { r: rTop > 0 ? rTop : 1e-6, y: h / 2 }];
-  return lathe(profile, { segments, capBottom: true, capTop: rTop > 0 });
+  return lathe([{ r, y: -h / 2 }, { r: rTop > 0 ? rTop : 0, y: h / 2 }], { segments, capBottom: true, capTop: rTop > 0 });
 }
 
 /** A ring in the XZ plane: `R` from the center to the middle of the tube. */