trid3d 0.4.0 → 0.6.0

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.
@@ -163,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.
@@ -170,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.
@@ -206,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)]);
     }
   }
@@ -264,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. */
@@ -548,8 +653,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);

package/trid/render/webglRenderer.js

@@ -343,7 +343,7 @@ export class WebGLRenderer {
     // Post effects: the ones with GLSL run here, canvas-only ones after the copy
     const post = activePost(scene.post);
     const gpuPost = post.filter((e) => postPasses(e).length);
-    const background = this._color(ctx, scene.background);
+    const background = this._color(ctx, scene.background ?? "transparent");
     if (gpuPost.length) {
       // Into a texture, on the scene's background so effects see the whole picture
       gl.bindFramebuffer(gl.FRAMEBUFFER, this._sceneTarget(w, h));

package/trid/scene.js

@@ -37,7 +37,7 @@ export class Scene {
    * @param {Object} [opts]
    * @param {number} [opts.width] - Sets canvas.width (keeps the current one if omitted)
    * @param {number} [opts.height] - Sets canvas.height (keeps the current one if omitted)
-   * @param {string} [opts.background="#141414"] - Clear color
+   * @param {string|null} [opts.background="#141414"] - Clear color; "transparent" or null: see-through, the page shows behind
    * @param {string} [opts.color="#ffffff"] - Default wireframe color
    * @param {number} [opts.lineWidth=3] - Default wireframe width
    * @param {import("./math/transform.js").Camera} [opts.camera={ z: -1 }] - Camera