abstract-3d 4.0.4 → 4.0.7

package/src/renderers/svg/svg-order.ts

@@ -1,172 +1,294 @@
-import type { Vec3 } from "../../abstract-3d.js";
+import type { Vec2, Vec3 } from "../../abstract-3d.js";
+import { vec3Zero } from "../../abstract-3d.js";
+import { svgEdges, svgPolygon } from "./svg-encoding.js";
 import type { zOrderElement } from "./svg-geometries/shared.js";
+import { isOpaque } from "./svg-geometries/shared.js";
 
 /**
- * Elements in drawing order, back to front, by Newell's ordering without splitting: of two elements that overlap on screen, one entirely behind the
- * other's plane, or the other entirely in front of its plane, is drawn first. Elements are drawn by mean depth otherwise, each after those it must be
- * drawn after, depth first; elements overlapping in a cycle, which only splitting them could resolve, are drawn where the cycle is met. Elements
- * entirely inside an opaque convex polygon in front of them are left out, as they can't be seen
+ * Elements in drawing order, back to front, by a BSP tree of their planes: of each node, what's behind its plane is drawn first, then what's in it,
+ * then what's in front of it. An element on both sides of a plane is split by it when it's a plain polygon, its pieces stroked only along its own
+ * edges, else put on the side of its center, and drawn whole again where nothing drawn between its pieces overlaps it on screen. Elements without
+ * points are drawn last, by mean depth. Elements entirely inside an opaque convex polygon drawn after them are left out, as they can't be seen
  */
-export function orderElements(elements: ReadonlyArray<zOrderElement>): ReadonlyArray<zOrderElement> {
-  const items: Array<Item | undefined> = [];
-  const swept: Array<number> = [];
-  const byDepth: Array<number> = [];
-  elements.forEach((e, i) => {
-    items.push(e.polygon && createItem(e.polygon, !!e.opaque));
-    byDepth.push(i);
-    if (e.polygon) {
-      swept.push(i);
+export function orderElements(elements: ReadonlyArray<zOrderElement>, point: (x: number, y: number) => Vec2): ReadonlyArray<zOrderElement> {
+  const pieces: Array<Piece> = [];
+  const pointless: Array<zOrderElement> = [];
+  for (const element of elements) {
+    if (element.polygon?.length) {
+      pieces.push({ element, points: element.polygon, plane: getPlane(element.polygon) });
+    } else {
+      pointless.push(element);
     }
-  });
-  swept.sort((a, b) => items[a]!.min.x - items[b]!.min.x);
-  byDepth.sort((a, b) => elements[a]!.zOrder - elements[b]!.zOrder);
-
-  // Sweep along x: each item is compared with the active ones whose bounds still overlap it on screen, dropping the others in the same pass
-  const behind: Array<Array<number>> = [];
-  const hidden = new Uint8Array(elements.length);
-  const active: Array<number> = [];
-  for (const i of swept) {
-    const a = items[i]!;
-    active.length = active.reduce((kept, j) => {
-      const b = items[j]!;
-      if (b.max.x <= a.min.x + eps) {
-        return kept;
-      }
-      active[kept] = j;
-      const order = b.min.y < a.max.y - eps && a.min.y < b.max.y - eps ? getOrder(a, b) : 0;
-      if (order !== 0) {
-        const [back, front] = order < 0 ? [i, j] : [j, i];
-        (behind[front] ??= []).push(back);
-        hidden[back] ||= covers(items[front]!, items[back]!) ? 1 : 0;
-      }
-      return kept + 1;
-    }, 0);
-    active.push(i);
   }
-
-  // Depth first: an element is drawn when it's met on the stack again, after the elements behind it; 1 while it waits, 2 once drawn
-  const state = new Uint8Array(elements.length);
-  const stack: Array<number> = [];
+  const drawn: Drawn = { pieces: [], items: [], spans: new Map() };
+  draw(pieces, drawn);
+  const state = getHidden(drawn.items);
+  mergeSplit(drawn, state);
   const ordered: Array<zOrderElement> = [];
-  for (const start of byDepth) {
-    stack.push(start);
-    while (stack.length > 0) {
-      const i = stack.pop()!;
-      if (state[i] === 0) {
-        state[i] = 1;
-        stack.push(i);
-        behind[i]?.forEach((j) => state[j] === 0 && stack.push(j));
-      } else if (state[i] === 1) {
-        state[i] = 2;
-        if (!hidden[i]) {
-          ordered.push(elements[i]!);
-        }
-      }
+  for (let i = 0; i < drawn.pieces.length; i++) {
+    const p = drawn.pieces[i]!;
+    if (state[i] !== skip) {
+      ordered.push(state[i] === whole || !p.edges ? p.element : createPieceElement(p, point));
     }
   }
-  return ordered;
+  return [...ordered, ...pointless.sort((a, b) => a.zOrder - b.zOrder)];
 }
 
 /** Distances below this, in the scene's units, are equal */
 const eps = 1e-3;
+/** The planes tried at a node, spread over its pieces, of which the one splitting the fewest is taken */
+const candidates = 8;
+/** A drawn piece's state: drawn as it is, left out, or drawn as its whole element */
+const [skip, whole] = [1, 2];
 
+/** A plane oriented toward the viewer, at +z */
+type Plane = { readonly normal: Vec3; readonly d: number };
+/** An element, or a piece of it with whether the edge from each point to the next is the element's own, not a cut */
+type Piece = {
+  readonly element: zOrderElement;
+  readonly points: ReadonlyArray<Vec3>;
+  readonly plane?: Plane;
+  readonly edges?: ReadonlyArray<boolean>;
+};
 type Item = {
   readonly points: ReadonlyArray<Vec3>;
-  readonly min: Vec3;
-  readonly max: Vec3;
-  /** The screen's normals of the polygon's edges, which separate it from polygons it doesn't overlap */
-  readonly axes: ReadonlyArray<readonly [number, number]>;
-  /** Its plane, oriented toward the viewer, unless it's a line or a point, or seen edge on */
-  readonly plane?: { readonly normal: Vec3; readonly d: number };
+  readonly min: Vec2;
+  readonly max: Vec2;
   /** The winding on screen of an opaque convex polygon, 1 or -1, by which it can hide others; 0 for others */
   readonly occluder: number;
 };
+/** Pieces in drawing order, their items, and of each split element the first and last of its pieces */
+type Drawn = {
+  readonly pieces: Array<Piece>;
+  readonly items: Array<Item>;
+  readonly spans: Map<zOrderElement, { readonly first: number; readonly last: number }>;
+};
 
-/** In one pass over the points: their bounds, edge normals on screen, plane by Newell's method, and whether they're a convex polygon */
-function createItem(points: ReadonlyArray<Vec3>, opaque: boolean): Item {
-  const min = { x: Infinity, y: Infinity, z: Infinity };
-  const max = { x: -Infinity, y: -Infinity, z: -Infinity };
-  const normal = { x: 0, y: 0, z: 0 };
-  // The smallest and largest turn at a corner on screen, the same sign throughout for a convex polygon
-  const turns = { min: 0, max: 0 };
-  const axes: Array<readonly [number, number]> = [];
-  points.forEach((p, i) => {
-    Object.assign(min, { x: Math.min(min.x, p.x), y: Math.min(min.y, p.y), z: Math.min(min.z, p.z) });
-    Object.assign(max, { x: Math.max(max.x, p.x), y: Math.max(max.y, p.y), z: Math.max(max.z, p.z) });
-    const q = points[(i + 1) % points.length]!;
-    normal.x += (p.y - q.y) * (p.z + q.z);
-    normal.y += (p.z - q.z) * (p.x + q.x);
-    normal.z += (p.x - q.x) * (p.y + q.y);
-    if (Math.abs(q.x - p.x) + Math.abs(q.y - p.y) > eps) {
-      axes.push([q.y - p.y, p.x - q.x]);
+/** The tree walked as it's built, with a stack instead of recursion, as it's as deep as a scene's planes can be many: back, then in, then front */
+function draw(pieces: ReadonlyArray<Piece>, drawn: Drawn): void {
+  const stack: Array<{ readonly pieces: ReadonlyArray<Piece>; readonly inPlane?: boolean }> = [{ pieces }];
+  while (stack.length > 0) {
+    const task = stack.pop()!;
+    const plane = task.inPlane ? undefined : getSplitter(task.pieces);
+    if (plane) {
+      const [back, inPlane, front]: [Array<Piece>, Array<Piece>, Array<Piece>] = [[], [], []];
+      for (const p of task.pieces) {
+        partition(p, plane, back, inPlane, front);
+      }
+      stack.push({ pieces: front }, { pieces: inPlane, inPlane: true }, { pieces: back });
+      continue;
     }
-    const o = points[(i + points.length - 1) % points.length]!;
-    const turn = (p.x - o.x) * (q.y - p.y) - (p.y - o.y) * (q.x - p.x);
-    Object.assign(turns, { min: Math.min(turns.min, turn), max: Math.max(turns.max, turn) });
-  });
-  const convex = points.length >= 3 && (turns.min >= -eps || turns.max <= eps);
-  const occluder = opaque && convex ? Math.sign(normal.z) : 0;
-  const length = Math.hypot(normal.x, normal.y, normal.z);
-  if (points.length < 3 || length < eps || Math.abs(normal.z) < 1e-6 * length) {
-    return { points, min, max, axes, occluder: 0 };
-  }
-  // Toward the viewer, at +z
-  const s = Math.sign(normal.z) / length;
-  const n = { x: normal.x * s, y: normal.y * s, z: normal.z * s };
-  const p0 = points[0]!;
-  return { points, min, max, axes, plane: { normal: n, d: n.x * p0.x + n.y * p0.y + n.z * p0.z }, occluder };
+    // In a plane, as given; else a leaf, whose pieces have no plane, by mean depth
+    for (const p of task.inPlane ? task.pieces : [...task.pieces].sort((a, b) => a.element.zOrder - b.element.zOrder)) {
+      if (p.edges) {
+        drawn.spans.set(p.element, { first: drawn.spans.get(p.element)?.first ?? drawn.pieces.length, last: drawn.pieces.length });
+      }
+      drawn.pieces.push(p);
+      drawn.items.push(createItem(p.points, !!p.element.opaque));
+    }
+  }
+}
+
+/** Of the candidates' planes, the one that the fewest pieces are on both sides of */
+function getSplitter(pieces: ReadonlyArray<Piece>): Plane | undefined {
+  const step = Math.max(1, Math.floor(pieces.length / candidates));
+  let best: Plane | undefined = undefined;
+  let fewest = Infinity;
+  for (let i = 0; i < pieces.length && fewest > 0;) {
+    const plane = pieces[i]!.plane;
+    if (plane) {
+      let splits = 0;
+      for (const p of pieces) {
+        if (p.plane !== plane && getSide(p.points, plane) === 2 && ++splits >= fewest) {
+          break;
+        }
+      }
+      [best, fewest] = splits < fewest ? [plane, splits] : [best, fewest];
+    }
+    i += plane ? step : 1;
+  }
+  return best;
+}
+
+/** Behind, in or in front of the plane; split by it if on both sides and a plain polygon, else on the side of its center */
+function partition(piece: Piece, plane: Plane, back: Array<Piece>, inPlane: Array<Piece>, front: Array<Piece>): void {
+  // An element's pieces share its plane, which they're in, though its points may be off it by more than eps
+  const side = piece.plane === plane ? 0 : getSide(piece.points, plane);
+  if (side === 2 && piece.element.style && piece.points.length >= 3) {
+    split(piece, plane, back, front);
+  } else if (side === 2) {
+    let sum = 0;
+    for (const p of piece.points) {
+      sum += getDistance(p, plane);
+    }
+    (sum < 0 ? back : front).push(piece);
+  } else {
+    (side === 0 ? inPlane : side < 0 ? back : front).push(piece);
+  }
 }
 
-/** -1 if `a` is drawn before `b`, 1 if after, 0 if they don't overlap or nothing decides */
-function getOrder(a: Item, b: Item): number {
-  if (a.max.z <= b.min.z + eps) {
-    return -1;
+/** Sutherland–Hodgman against the plane, both ways; an edge of a piece along the cut isn't the element's own */
+function split(piece: Piece, plane: Plane, back: Array<Piece>, front: Array<Piece>): void {
+  const { points, edges } = piece;
+  const [b, f] = [
+    { points: Array<Vec3>(), edges: Array<boolean>() },
+    { points: Array<Vec3>(), edges: Array<boolean>() },
+  ];
+  const first = getDistance(points[0]!, plane);
+  let dp = first;
+  for (let i = 0; i < points.length; i++) {
+    const [p, q] = [points[i]!, points[(i + 1) % points.length]!];
+    const dq = i + 1 < points.length ? getDistance(q, plane) : first;
+    const own = edges?.[i] ?? true;
+    const crosses = (dp < -eps && dq > eps) || (dp > eps && dq < -eps);
+    if (dp <= eps) {
+      b.points.push(p);
+      b.edges.push(own && (crosses || dq <= eps));
+    }
+    if (dp >= -eps) {
+      f.points.push(p);
+      f.edges.push(own && (crosses || dq >= -eps));
+    }
+    if (crosses) {
+      const t = dp / (dp - dq);
+      const r = { x: p.x + (q.x - p.x) * t, y: p.y + (q.y - p.y) * t, z: p.z + (q.z - p.z) * t };
+      b.points.push(r);
+      b.edges.push(own && dq < 0);
+      f.points.push(r);
+      f.edges.push(own && dq > 0);
+    }
+    dp = dq;
   }
-  if (b.max.z <= a.min.z + eps) {
-    return 1;
+  if (b.points.length >= 3) {
+    back.push({ ...piece, ...b });
   }
-  if (!overlap(a, b)) {
-    return 0;
+  if (f.points.length >= 3) {
+    front.push({ ...piece, ...f });
   }
-  const aToB = b.plane ? getSide(a.points, b.plane) : 0;
-  if (aToB !== 0) {
-    return aToB;
+}
+
+function createPieceElement({ element, points, edges = [] }: Piece, point: (x: number, y: number) => Vec2): zOrderElement {
+  const { fill, opacity, stroke, strokeWidth } = element.style!;
+  const screen = points.map((p) => point(p.x, p.y));
+  const outline = strokeWidth > 0 && isOpaque(stroke, 1) && edges.includes(true) ? svgEdges(screen, edges, stroke, strokeWidth) : "";
+  return { ...element, element: svgPolygon(vec3Zero, screen, fill, opacity, stroke, 0) + outline, polygon: points };
+}
+
+/** By Newell's method, unless they're a line or a point, or seen edge on */
+function getPlane(points: ReadonlyArray<Vec3>): Plane | undefined {
+  let [x, y, z] = [0, 0, 0];
+  for (let i = 0; i < points.length; i++) {
+    const [p, q] = [points[i]!, points[(i + 1) % points.length]!];
+    [x, y, z] = [x + (p.y - q.y) * (p.z + q.z), y + (p.z - q.z) * (p.x + q.x), z + (p.x - q.x) * (p.y + q.y)];
   }
-  return a.plane ? -getSide(b.points, a.plane) : 0;
+  const length = Math.hypot(x, y, z);
+  if (points.length < 3 || length < eps || Math.abs(z) < 1e-6 * length) {
+    return undefined;
+  }
+  const s = Math.sign(z) / length;
+  const n = { x: x * s, y: y * s, z: z * s };
+  return { normal: n, d: n.x * points[0]!.x + n.y * points[0]!.y + n.z * points[0]!.z };
 }
 
-/** -1 if the points are all behind the plane, 1 if all in front of it, 0 if on both sides or in it */
-function getSide(points: ReadonlyArray<Vec3>, { normal: n, d }: NonNullable<Item["plane"]>): number {
-  const range = { min: Infinity, max: -Infinity };
-  points.forEach((p) => {
-    const distance = n.x * p.x + n.y * p.y + n.z * p.z - d;
-    Object.assign(range, { min: Math.min(range.min, distance), max: Math.max(range.max, distance) });
-  });
-  return range.max <= eps && range.min < -eps ? -1 : range.min >= -eps && range.max > eps ? 1 : 0;
+const getDistance = (p: Vec3, { normal: n, d }: Plane): number => n.x * p.x + n.y * p.y + n.z * p.z - d;
+
+/** -1 if the points are all behind the plane, 1 if all in front of it, 0 if all in it, 2 if on both sides */
+function getSide(points: ReadonlyArray<Vec3>, plane: Plane): number {
+  let [min, max] = [Infinity, -Infinity];
+  for (const p of points) {
+    const distance = getDistance(p, plane);
+    min = Math.min(min, distance);
+    max = Math.max(max, distance);
+  }
+  return min >= -eps ? (max > eps ? 1 : 0) : max <= eps ? -1 : 2;
 }
 
-/** Whether the polygons overlap on screen by more than touching: no edge normal of either separates them */
-function overlap(a: Item, b: Item): boolean {
-  return a.axes.every(([x, y]) => !separates(a, b, x, y)) && b.axes.every(([x, y]) => !separates(a, b, x, y));
+/** Of items drawn back to front, `skip` for those inside an opaque convex polygon drawn after them; a sweep along x over their bounds on screen */
+function getHidden(items: ReadonlyArray<Item>): Uint8Array {
+  const state = new Uint8Array(items.length);
+  const active: Array<number> = [];
+  for (const i of [...items.keys()].sort((a, b) => items[a]!.min.x - items[b]!.min.x)) {
+    const a = items[i]!;
+    // Those whose bounds end before this one's start are dropped in place
+    let kept = 0;
+    for (const j of active) {
+      const b = items[j]!;
+      if (b.max.x > a.min.x + eps) {
+        active[kept++] = j;
+        // Along x they overlap, by the sweep, which a vertical line's zero width wouldn't by bounds
+        const [back, front] = [Math.min(i, j), Math.max(i, j)];
+        state[back] ||= a.min.y < b.max.y - eps && b.min.y < a.max.y - eps && covers(items[front]!, items[back]!) ? skip : 0;
+      }
+    }
+    active.length = kept;
+    active.push(i);
+  }
+  return state;
 }
 
-function separates(a: Item, b: Item, x: number, y: number): boolean {
-  const range = { aMin: Infinity, aMax: -Infinity, bMin: Infinity, bMax: -Infinity };
-  a.points.forEach((p) => Object.assign(range, { aMin: Math.min(range.aMin, p.x * x + p.y * y), aMax: Math.max(range.aMax, p.x * x + p.y * y) }));
-  b.points.forEach((p) => Object.assign(range, { bMin: Math.min(range.bMin, p.x * x + p.y * y), bMax: Math.max(range.bMax, p.x * x + p.y * y) }));
-  const tolerance = eps * Math.hypot(x, y);
-  return range.aMax <= range.bMin + tolerance || range.bMax <= range.aMin + tolerance;
+/**
+ * A split element whose pieces have nothing else drawn between them that overlaps it on screen is drawn whole where its last piece is, its other
+ * pieces skipped, unless they're all hidden
+ */
+function mergeSplit({ pieces, items, spans }: Drawn, state: Uint8Array): void {
+  for (const [element, { first, last }] of spans) {
+    const bounds = createItem(element.polygon!, false);
+    let [blocked, visible] = [false, false];
+    for (let k = first; k <= last && !blocked; k++) {
+      const own = pieces[k]!.element === element;
+      visible ||= own && state[k] !== skip;
+      blocked = !own && overlaps(items[k]!, bounds);
+    }
+    if (!blocked) {
+      for (let k = first; k <= last; k++) {
+        state[k] = pieces[k]!.element === element ? skip : state[k]!;
+      }
+      state[last] = visible ? whole : skip;
+    }
+  }
+}
+
+/** In one pass over the points: their bounds on screen, and whether they're a convex polygon */
+function createItem(points: ReadonlyArray<Vec3>, opaque: boolean): Item {
+  const [min, max] = [
+    { x: Infinity, y: Infinity },
+    { x: -Infinity, y: -Infinity },
+  ];
+  // Twice the signed area, and the smallest and largest turn at a corner on screen, the same sign throughout for a convex polygon
+  let [area, minTurn, maxTurn] = [0, 0, 0];
+  for (let i = 0; i < points.length; i++) {
+    const o = points[(i + points.length - 1) % points.length]!;
+    const p = points[i]!;
+    const q = points[(i + 1) % points.length]!;
+    min.x = Math.min(min.x, p.x);
+    min.y = Math.min(min.y, p.y);
+    max.x = Math.max(max.x, p.x);
+    max.y = Math.max(max.y, p.y);
+    const turn = (p.x - o.x) * (q.y - p.y) - (p.y - o.y) * (q.x - p.x);
+    area += p.x * q.y - q.x * p.y;
+    minTurn = Math.min(minTurn, turn);
+    maxTurn = Math.max(maxTurn, turn);
+  }
+  const convex = points.length >= 3 && (minTurn >= -eps || maxTurn <= eps) && Math.abs(area) > eps;
+  return { points, min, max, occluder: opaque && convex ? Math.sign(area) : 0 };
 }
 
+const overlaps = (a: Pick<Item, "min" | "max">, b: Pick<Item, "min" | "max">): boolean =>
+  a.min.x < b.max.x - eps && b.min.x < a.max.x - eps && a.min.y < b.max.y - eps && b.min.y < a.max.y - eps;
+
 /** Whether the front's opaque convex polygon contains all of the back's points on screen, so the back can't be seen; not for a single point, e.g. text */
-function covers(front: Item, back: Item): boolean {
-  const { points, occluder } = front;
-  return (
-    occluder !== 0 &&
-    back.points.length >= 2 &&
-    points.every((p, i) => {
-      const q = points[(i + 1) % points.length]!;
-      return back.points.every((r) => occluder * ((q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x)) >= -eps * Math.hypot(q.x - p.x, q.y - p.y));
-    })
-  );
+function covers({ points, occluder }: Item, back: Item): boolean {
+  if (occluder === 0 || back.points.length < 2) {
+    return false;
+  }
+  for (let i = 0; i < points.length; i++) {
+    const [p, q] = [points[i]!, points[(i + 1) % points.length]!];
+    const tolerance = -eps * Math.hypot(q.x - p.x, q.y - p.y);
+    for (const r of back.points) {
+      if (occluder * ((q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x)) < tolerance) {
+        return false;
+      }
+    }
+  }
+  return true;
 }

package/src/renderers/svg/svg.ts

@@ -93,13 +93,13 @@ function renderInternal(
     imageBg: options?.imageBg ?? false,
     className: options?.className ?? "",
   };
-  // Isometric: the front turned 45° to show the side, and tilted by arctan(1/√2) to show the top, so the three axes are foreshortened alike
-  const isometric = opts.view === "TopLeft" || opts.view === "TopRight";
-  const view = isometric ? "front" : opts.view;
-  const isometricRot = isometric
-    ? vec3RotCombine(vec3(Math.atan(1 / Math.SQRT2), 0, 0), vec3(0, ((opts.view === "TopRight" ? -1 : 1) * Math.PI) / 4, 0))
+  // A three-quarter view: the front turned 30° to show the side, and tilted 20° to show the top, the front foremost
+  const angled = opts.view === "TopLeft" || opts.view === "TopRight";
+  const view = angled ? "front" : opts.view;
+  const angledRot = angled
+    ? vec3RotCombine(vec3((20 * Math.PI) / 180, 0, 0), vec3(0, ((opts.view === "TopRight" ? -1 : 1) * 30 * Math.PI) / 180, 0))
     : vec3Zero;
-  const cameraRot = vec3RotCombine(isometricRot, rotationForCameraPos(view));
+  const cameraRot = vec3RotCombine(angledRot, rotationForCameraPos(view));
   const viewRot = opts.rotation ? vec3RotCombine(vec3(0, 0, (opts.rotation * Math.PI) / 180), cameraRot) : cameraRot;
   const unitRot = vec3RotCombine(viewRot, scene.rotation_deprecated ?? vec3Zero);
 
@@ -110,12 +110,17 @@ function renderInternal(
   const point = (x: number, y: number): Vec2 => vec2(svgCenter.x + x, svgCenter.y - y);
   const unitCenterFlipped = vec3Flip(unitCenter);
 
-  const elements = [...orderElements(scene.groups.flatMap((g) => svgGroup(g, unitCenterFlipped, unitRot, point, opts)))];
+  const elements = [
+    ...orderElements(
+      scene.groups.flatMap((g) => svgGroup(g, unitCenterFlipped, unitRot, point, opts)),
+      point
+    ),
+  ];
   const dimOpts: SvgOptions = { ...opts, only_stroke: false, gray_scale: false };
   const visibleViews = calculateVisibleViews(view, scene.rotation_deprecated);
 
   // Dimensions are drawn for the flat views
-  for (const dim of isometric ? [] : (scene.dimensions_deprecated?.dimensions ?? [])) {
+  for (const dim of angled ? [] : (scene.dimensions_deprecated?.dimensions ?? [])) {
     const d = dimensionConvertToTypeMesh(dim, scene.rotation_deprecated ?? vec3Zero, scene.dimensions_deprecated?.material);
     if (isViewVisible(d.views[0], visibleViews)) {
       const pos = vec3TransRot(d.pos, unitCenterFlipped, unitRot);

package/src/renderers/three/shadow/key-light.ts

@@ -11,9 +11,9 @@ const direction = new Vector3(-1, 2, 1.2).normalize();
 const intensity = 1.2;
 const mapSize = 1024;
 /** Of the key light kept out of its shadows, so faces under an overhang, e.g. a recessed base frame, aren't black */
-const shadowIntensity = 0.45;
+const shadowIntensity = 0.55;
 /** The penumbra's reach, in shadow map texels */
-const penumbra = 16;
+const penumbra = 8;
 
 /** The light and its target, to add to the scene, with or without shadows; undefined for a scene without solids */
 export function createKeyLight(built: BuiltScene, shadows: boolean): Group | undefined {

package/src/renderers/three/shadow/shadow.ts

@@ -37,8 +37,8 @@ const shadowLayer = 1;
 /** Of the texture's longer side */
 const resolution = 512;
 /** The blur's reach, of the solids' height */
-const softness = 0.22;
-const opacity = 0.8;
+const softness = 0.16;
+const opacity = 0.9;
 /** A pool of light on the floor the shadow lies in, so it shows on a dark background, which a shadow alone can't darken; on white it's invisible */
 const floorLight = 0.06;
 /** The pool's reach beyond the solids, of their height */