abstract-3d 4.0.0-beta.8 → 4.0.0

package/src/renderers/svg/svg-geometries/svg-box.ts

@@ -3,7 +3,7 @@ import { vec3Scale, vec3TransRot, vec3RotCombine, vec3Zero, vec3, vec3ZMean } fr
 import { rgbGrayScale } from "../../../utils.js";
 import { svgPolygon } from "../svg-encoding.js";
 import type { zOrderElement, SvgOptions } from "./shared.js";
-import { gray, black, zElem } from "./shared.js";
+import { gray, black, zElem, getArea, isOpaque } from "./shared.js";
 
 export function box(
   b: Box,
@@ -16,46 +16,52 @@ export function box(
   const half = vec3Scale(b.size, 0.5);
   const pos = vec3TransRot(b.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, b.rot ?? vec3Zero);
-  const vec3tr = (p: Vec3): Vec3 => vec3TransRot(p, pos, rot);
-
-  const v1 = vec3tr(vec3(-half.x, -half.y, half.z));
-  const v2 = vec3tr(vec3(half.x, -half.y, half.z));
-  const v3 = vec3tr(vec3(half.x, half.y, half.z));
-  const v4 = vec3tr(vec3(-half.x, half.y, half.z));
-  const v5 = vec3tr(vec3(-half.x, -half.y, -half.z));
-  const v6 = vec3tr(vec3(half.x, -half.y, -half.z));
-  const v7 = vec3tr(vec3(half.x, half.y, -half.z));
-  const v8 = vec3tr(vec3(-half.x, half.y, -half.z));
-
-  const frontMean = vec3ZMean(v1, v2, v3, v4);
-  const backMean = vec3ZMean(v5, v6, v7, v8);
-  const [frontBackPoints, frontBackMean] =
-    frontMean > backMean
-      ? [[point(v1.x, v1.y), point(v2.x, v2.y), point(v3.x, v3.y), point(v4.x, v4.y)], frontMean]
-      : [[point(v5.x, v5.y), point(v6.x, v6.y), point(v7.x, v7.y), point(v8.x, v8.y)], backMean];
-  const topMean = vec3ZMean(v8, v7, v3, v4);
-  const botMean = vec3ZMean(v5, v6, v2, v1);
-  const [topBotPoints, topBotMean] =
-    topMean > botMean
-      ? [[point(v8.x, v8.y), point(v7.x, v7.y), point(v3.x, v3.y), point(v4.x, v4.y)], topMean]
-      : [[point(v5.x, v5.y), point(v6.x, v6.y), point(v2.x, v2.y), point(v1.x, v1.y)], botMean];
-
-  const rightMean = vec3ZMean(v6, v2, v3, v7);
-  const leftMean = vec3ZMean(v5, v1, v4, v8);
-  const [rightLeftPoints, rightLeftMean] =
-    rightMean > leftMean
-      ? [[point(v6.x, v6.y), point(v2.x, v2.y), point(v3.x, v3.y), point(v7.x, v7.y)], rightMean]
-      : [[point(v5.x, v5.y), point(v1.x, v1.y), point(v4.x, v4.y), point(v8.x, v8.y)], leftMean];
+  const corners = unitCorners.map((c) => vec3TransRot(vec3(c.x * half.x, c.y * half.y, c.z * half.z), pos, rot));
 
   const color = material.normal;
   const opacity = material.opacity ?? 1.0;
   const [strokeColor, fill, strokeUse] = opts.only_stroke
     ? [opts.gray_scale ? gray : color, opts.background, opts.stroke_thickness]
     : [black, opts.gray_scale ? rgbGrayScale(color) : color, 0];
+  const opaque = isOpaque(fill, opacity);
 
-  return [
-    zElem(svgPolygon(rot, frontBackPoints, fill, opacity, strokeColor, strokeUse, b.holes, parentPos), frontBackMean),
-    zElem(svgPolygon(rot, topBotPoints, fill, opacity, strokeColor, strokeUse), topBotMean),
-    zElem(svgPolygon(rot, rightLeftPoints, fill, opacity, strokeColor, strokeUse), rightLeftMean),
-  ];
+  return faces.flatMap(([one, other], i) => {
+    const polygon = (one.reduce((z, c) => z + corners[c]!.z, 0) > other.reduce((z, c) => z + corners[c]!.z, 0) ? one : other).map((c) => corners[c]!);
+    const points = polygon.map((c) => point(c.x, c.y));
+    // Seen edge on, a face is only a line along the edges of the box's other faces
+    if (Math.abs(getArea(points)) < minArea) {
+      return [];
+    }
+    // Only the front and back have holes, which show what's behind them
+    const holes = i === 0 ? b.holes : undefined;
+    return [zElem(svgPolygon(rot, points, fill, opacity, strokeColor, strokeUse, holes), vec3ZMean(...polygon), polygon, opaque && !holes?.length)];
+  });
 }
+
+const unitCorners = [
+  vec3(-1, -1, 1),
+  vec3(1, -1, 1),
+  vec3(1, 1, 1),
+  vec3(-1, 1, 1),
+  vec3(-1, -1, -1),
+  vec3(1, -1, -1),
+  vec3(1, 1, -1),
+  vec3(-1, 1, -1),
+];
+/** Pairs of opposite faces by their corners, front and back, top and bottom, right and left, of which the one toward the viewer is drawn */
+const faces: ReadonlyArray<readonly [ReadonlyArray<number>, ReadonlyArray<number>]> = [
+  [
+    [0, 1, 2, 3],
+    [4, 5, 6, 7],
+  ],
+  [
+    [7, 6, 2, 3],
+    [4, 5, 1, 0],
+  ],
+  [
+    [5, 1, 2, 6],
+    [4, 0, 3, 7],
+  ],
+];
+/** Of a face on screen, in the scene's units squared, below which it's seen edge on */
+const minArea = 1e-6;

package/src/renderers/svg/svg-geometries/svg-cone.ts

@@ -3,7 +3,7 @@ import { vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3ZMean, equals } from
 import { rgbGrayScale } from "../../../utils.js";
 import { svgCircle, svgPolygon } from "../svg-encoding.js";
 import type { zOrderElement, SvgOptions } from "./shared.js";
-import { gray, stBW, zElem, transparent } from "./shared.js";
+import { gray, isOpaque, stBW, zElem, transparent } from "./shared.js";
 
 export function cone(
   c: Cone,
@@ -37,7 +37,14 @@ export function cone(
     if (i !== 0) {
       const prevBot = botVec3Array[i - 1]!;
       const points = [point(currBot.x, currBot.y), point(prevBot.x, prevBot.y), point(topPos.x, topPos.y), point(topPos.x, topPos.y)];
-      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(currBot, prevBot, topPos)));
+      zOrderComponents.push(
+        zElem(
+          svgPolygon(rot, points, fill, opacity, stroke, stBW),
+          vec3ZMean(currBot, prevBot, topPos),
+          [currBot, prevBot, topPos],
+          isOpaque(fill, opacity)
+        )
+      );
     }
     currentAngle += angleStep;
   }
@@ -46,7 +53,14 @@ export function cone(
   const cylTop = vec3tr(vec3(0, half.y, 0));
   const cylBottom = vec3tr(vec3(0, -half.y, 0));
   if (equals(cylTop.x, cylBottom.x, 0.1) && equals(cylTop.y, cylBottom.y, 0.1)) {
-    zOrderComponents.push(zElem(svgCircle(c.radius, rot, point(cylBottom.x, cylBottom.y), fill, opacity, stroke, stBW), cylBottom.z));
+    zOrderComponents.push(
+      zElem(
+        svgCircle(c.radius, rot, point(cylBottom.x, cylBottom.y), fill, opacity, stroke, stBW),
+        cylBottom.z,
+        botVec3Array,
+        isOpaque(fill, opacity)
+      )
+    );
   }
 
   return zOrderComponents;

package/src/renderers/svg/svg-geometries/svg-cylinder.ts

@@ -3,7 +3,7 @@ import { vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3ZMean, equals } from
 import { rgbGrayScale } from "../../../utils.js";
 import { svgCircle, svgPolygon } from "../svg-encoding.js";
 import type { SvgOptions, zOrderElement } from "./shared.js";
-import { gray, stBW, transparent, zElem } from "./shared.js";
+import { getArea, gray, isOpaque, stBW, transparent, zElem } from "./shared.js";
 
 export function cylinder(
   c: Cylinder,
@@ -24,6 +24,9 @@ export function cylinder(
   const [stroke, fill] = opts.only_stroke
     ? [opts.gray_scale ? gray : color, opts.background]
     : [transparent, opts.gray_scale ? rgbGrayScale(color) : color];
+  const opaque = isOpaque(fill, opacity);
+  // A closed opaque cylinder's facets turned away are hidden by those toward the viewer and its near end
+  const cullBack = opaque && !c.open;
   const zOrderComponents = Array<zOrderElement>();
 
   const sides = 8;
@@ -39,23 +42,39 @@ export function cylinder(
     const currTop = vec3tr(vec3(sin * radiusEnd, half, cos * radiusEnd));
     botVec3Array.push(currBot);
     topVec3Array.push(currTop);
-    if (i !== 0) {
+    const mid = currentAngle - angleStep / 2;
+    if (i !== 0 && !(cullBack && vec3TransRot(vec3(Math.sin(mid), 0, Math.cos(mid)), vec3Zero, rot).z < -1e-6)) {
       const prevBot = botVec3Array[i - 1]!;
       const prevTop = topVec3Array[i - 1]!;
 
       const points = [point(currBot.x, currBot.y), point(prevBot.x, prevBot.y), point(prevTop.x, prevTop.y), point(currTop.x, currTop.y)];
-      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(currBot, prevBot, currTop, prevTop)));
+      const polygon = [currBot, prevBot, prevTop, currTop];
+      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(...polygon), polygon, opaque));
     }
     currentAngle += angleStep;
   }
   if (!c.open) {
-    // Add circle if direcly facing camera
+    // The near end: a circle when directly facing the camera, else seen at an angle, its ring of facet corners
     const circleTop = vec3tr(vec3(0, half, 0));
     const circleBottom = vec3tr(vec3(0, -half, 0));
+    const [circlePos, circleRadius, ring] =
+      circleTop.z > circleBottom.z ? [circleTop, radiusEnd, topVec3Array] : [circleBottom, c.radius, botVec3Array];
     if (equals(circleTop.x, circleBottom.x, 0.1) && equals(circleTop.y, circleBottom.y, 0.1)) {
-      const [circlePos, circleRadius] = circleTop.z > circleBottom.z ? [circleTop, radiusEnd] : [circleBottom, c.radius];
       const holes = radiusEnd === c.radius ? c.holes : undefined;
-      zOrderComponents.push(zElem(svgCircle(circleRadius, rot, point(circlePos.x, circlePos.y), fill, opacity, stroke, stBW, holes), circlePos.z));
+      zOrderComponents.push(
+        zElem(
+          svgCircle(circleRadius, rot, point(circlePos.x, circlePos.y), fill, opacity, stroke, stBW, holes),
+          circlePos.z,
+          ring,
+          opaque && !holes?.length
+        )
+      );
+    } else {
+      const points = ring.map((p) => point(p.x, p.y));
+      // Not seen edge on, when it's only a line along the facets' edges
+      if (Math.abs(getArea(points)) >= 1e-6) {
+        zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), circlePos.z, ring, opaque && !c.holes?.length));
+      }
     }
   }
   return zOrderComponents;

package/src/renderers/svg/svg-geometries/svg-image.ts

@@ -21,6 +21,7 @@ export function image(
 
   const v2 = vec3tr(half.x, -half.y);
   const v4 = vec3tr(-half.x, half.y);
+  const corners = [vec3tr(-half.x, -half.y), v2, vec3tr(half.x, half.y), v4];
 
   switch (i.image.type) {
     case "AbstractImage": {
@@ -30,7 +31,7 @@ export function image(
       };
       const svg = createSVG(i.image.image, opts);
       const img = svgImage(point(v4.x, v4.y), i.size, rot, { type: "svg", svg }, opts.imageBg ? opts.background : undefined, scale);
-      return [zElem(img, (v2.z + v4.z) / 2)];
+      return [zElem(img, (v2.z + v4.z) / 2, corners)];
     }
     case "Url": {
       const imageData = opts.imageDataByUrl[i.image.url];
@@ -45,7 +46,7 @@ export function image(
 
       if (image) {
         const img = svgImage(point(v4.x, v4.y), i.size, rot, image, opts.imageBg ? opts.background : undefined);
-        return [zElem(img, (v2.z + v4.z) / 2)];
+        return [zElem(img, (v2.z + v4.z) / 2, corners)];
       }
       return [];
     }

package/src/renderers/svg/svg-geometries/svg-line.ts

@@ -15,5 +15,7 @@ export function line(
 ): ReadonlyArray<zOrderElement> {
   const v1 = vec3TransRot(l.start, parentPos, parentRot);
   const v2 = vec3TransRot(l.end, parentPos, parentRot);
-  return [zElem(svgLine(point(v1.x, v1.y), point(v2.x, v2.y), opts.gray_scale ? rgbGrayScale(fill) : fill, l.thickness), vec3ZMean(v1, v2))];
+  return [
+    zElem(svgLine(point(v1.x, v1.y), point(v2.x, v2.y), opts.gray_scale ? rgbGrayScale(fill) : fill, l.thickness), vec3ZMean(v1, v2), [v1, v2]),
+  ];
 }

package/src/renderers/svg/svg-geometries/svg-plane.ts

@@ -3,7 +3,7 @@ import { vec2Scale, vec3TransRot, vec3RotCombine, vec3Zero, vec3, vec3ZMean } fr
 import { rgbGrayScale } from "../../../utils.js";
 import { svgPolygon } from "../svg-encoding.js";
 import type { zOrderElement, SvgOptions } from "./shared.js";
-import { gray, black, zElem } from "./shared.js";
+import { gray, black, isOpaque, zElem } from "./shared.js";
 
 export function plane(
   p: Plane,
@@ -29,5 +29,12 @@ export function plane(
   const [strokeColor, fill, strokeThickness] = opts.only_stroke
     ? [opts.gray_scale ? gray : material.normal, opts.background, opts.stroke_thickness]
     : [black, opts.gray_scale ? rgbGrayScale(material.normal) : material.normal, 0];
-  return [zElem(svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness, holes), vec3ZMean(v1, v2, v3, v4))];
+  return [
+    zElem(
+      svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness, holes),
+      vec3ZMean(v1, v2, v3, v4),
+      [v1, v2, v3, v4],
+      isOpaque(fill, material.opacity ?? 1.0) && !holes?.length
+    ),
+  ];
 }

package/src/renderers/svg/svg-geometries/svg-polygon.ts

@@ -3,7 +3,7 @@ import { vec3ZMean, vec3TransRot, vec3RotCombine, vec3Zero } from "../../../abst
 import { rgbGrayScale } from "../../../utils.js";
 import { svgPolygon } from "../svg-encoding.js";
 import type { zOrderElement, SvgOptions } from "./shared.js";
-import { gray, zElem, transparent } from "./shared.js";
+import { gray, isOpaque, zElem, transparent } from "./shared.js";
 
 export function polygon(
   p: Polygon,
@@ -21,5 +21,12 @@ export function polygon(
   const [strokeColor, fill, strokeThickness] = opts.only_stroke
     ? [opts.gray_scale ? gray : color, opts.background, opts.stroke_thickness]
     : [transparent, opts.gray_scale ? rgbGrayScale(color) : color, 0];
-  return [zElem(svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness), vec3ZMean(...rotatedPoints))];
+  return [
+    zElem(
+      svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness),
+      vec3ZMean(...rotatedPoints),
+      rotatedPoints,
+      isOpaque(fill, material.opacity ?? 1.0)
+    ),
+  ];
 }

package/src/renderers/svg/svg-geometries/svg-shape.ts

@@ -3,7 +3,7 @@ import { vec3ZMean, vec3TransRot, vec3RotCombine, vec3, vec3Zero } from "../../.
 import { rgbGrayScale } from "../../../utils.js";
 import { svgPolygon } from "../svg-encoding.js";
 import type { zOrderElement, SvgOptions } from "./shared.js";
-import { gray, zElem, transparent } from "./shared.js";
+import { gray, isOpaque, zElem, transparent } from "./shared.js";
 
 export function shape(
   s: Shape,
@@ -21,5 +21,12 @@ export function shape(
   const [strokeColor, fill] = opts.only_stroke
     ? [opts.gray_scale ? gray : color, opts.background]
     : [transparent, opts.gray_scale ? rgbGrayScale(color) : color];
-  return [zElem(svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, 0), vec3ZMean(...rotatedPoints))];
+  return [
+    zElem(
+      svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, 0),
+      vec3ZMean(...rotatedPoints),
+      rotatedPoints,
+      isOpaque(fill, material.opacity ?? 1.0) && !s.holes?.length
+    ),
+  ];
 }

package/src/renderers/svg/svg-geometries/svg-text.ts

@@ -32,7 +32,7 @@ export function text(
   let posY = strings.length === 1 ? 0 : (fontSize * strings.length - fontSize) / 2;
   for (const s of strings) {
     const matrix = svgTrsMatrix(point(pos.x, pos.y + posY), rot);
-    texts.push(zElem(svgText(s, matrix, fill, opts.font, fontSize), pos.z));
+    texts.push(zElem(svgText(s, matrix, fill, opts.font, fontSize), pos.z, [pos]));
     posY -= fontSize * 1.2;
   }
 

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

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import type { Vec3 } from "../../abstract-3d.js";
+import { vec3 } from "../../abstract-3d.js";
+import { zElem } from "./svg-geometries/shared.js";
+import { orderElements } from "./svg-order.js";
+
+const quad = (element: string, x0: number, x1: number, z: (x: number) => number): ReturnType<typeof zElem> => {
+  const points: ReadonlyArray<Vec3> = [vec3(x0, -1, z(x0)), vec3(x1, -1, z(x1)), vec3(x1, 1, z(x1)), vec3(x0, 1, z(x0))];
+  return zElem(element, points.reduce((sum, p) => sum + p.z, 0) / points.length, points);
+};
+const order = (...elements: ReadonlyArray<ReturnType<typeof zElem>>): ReadonlyArray<string> => orderElements(elements).map((e) => e.element);
+
+describe("orderElements", () => {
+  it("draws a part in front of a long tilted face after it, though the face's mean depth is nearer", () => {
+    // The face runs from z -10 at x -10 to z 10 at x 10, mean 0; the part at z -5 is in front of it where they overlap, at x -9 to -8
+    const face = quad("face", -10, 10, (x) => x);
+    const part = quad("part", -9, -8, () => -5);
+    expect(order(part, face)).toEqual(["face", "part"]);
+  });
+
+  it("keeps the mean depth order of elements that don't overlap on screen, or have no points", () => {
+    expect(
+      order(
+        quad("near", 0, 1, () => 1),
+        quad("far", 5, 6, () => -1)
+      )
+    ).toEqual(["far", "near"]);
+    expect(order(zElem("text", 2), zElem("line", -2))).toEqual(["line", "text"]);
+  });
+
+  it("draws every element once, also when they overlap in a cycle", () => {
+    const elements = [quad("a", 0, 2, (x) => x), quad("b", 1, 3, (x) => 2 - x), quad("c", -1, 4, () => 1), zElem("text", 0)];
+    expect([...order(...elements)].sort()).toEqual(["a", "b", "c", "text"]);
+  });
+});

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

@@ -0,0 +1,172 @@
+import type { Vec3 } from "../../abstract-3d.js";
+import type { zOrderElement } 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
+ */
+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);
+    }
+  });
+  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 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]!);
+        }
+      }
+    }
+  }
+  return ordered;
+}
+
+/** Distances below this, in the scene's units, are equal */
+const eps = 1e-3;
+
+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 };
+  /** The winding on screen of an opaque convex polygon, 1 or -1, by which it can hide others; 0 for others */
+  readonly occluder: 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]);
+    }
+    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 };
+}
+
+/** -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;
+  }
+  if (b.max.z <= a.min.z + eps) {
+    return 1;
+  }
+  if (!overlap(a, b)) {
+    return 0;
+  }
+  const aToB = b.plane ? getSide(a.points, b.plane) : 0;
+  if (aToB !== 0) {
+    return aToB;
+  }
+  return a.plane ? -getSide(b.points, a.plane) : 0;
+}
+
+/** -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;
+}
+
+/** 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));
+}
+
+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;
+}
+
+/** 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));
+    })
+  );
+}

package/src/renderers/svg/svg.ts

@@ -29,6 +29,7 @@ import { plane } from "./svg-geometries/svg-plane.js";
 import { polygon } from "./svg-geometries/svg-polygon.js";
 import { shape } from "./svg-geometries/svg-shape.js";
 import { text } from "./svg-geometries/svg-text.js";
+import { orderElements } from "./svg-order.js";
 
 export type SvgScene = {
   readonly scene: Scene;
@@ -89,26 +90,29 @@ function renderInternal(
     rotation: options?.rotation ?? 0,
     imageBg: options?.imageBg ?? false,
   };
-  const cameraRot = rotationForCameraPos(opts.view);
+  // 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))
+    : vec3Zero;
+  const cameraRot = vec3RotCombine(isometricRot, 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);
 
-  const unitCenter = vec3Rot(scene.center_deprecated ?? vec3Zero, vec3Zero, rotationForCameraPos(opts.view));
+  const unitCenter = vec3Rot(scene.center_deprecated ?? vec3Zero, vec3Zero, cameraRot);
   const [unitSize] = sizeBoundsForCameraPos(scene.size_deprecated, unitCenter, unitRot);
   const svgSize = vec2(unitSize.x + 1.5 * opts.stroke_thickness, unitSize.y + 1.5 * opts.stroke_thickness);
   const svgCenter = vec2(offset.x + opts.stroke_thickness * 0.75, offset.y + opts.stroke_thickness * 0.75);
   const point = (x: number, y: number): Vec2 => vec2(svgCenter.x + x, svgCenter.y - y);
   const unitCenterFlipped = vec3Flip(unitCenter);
 
-  const elements = Array<zOrderElement>();
-  for (const g of scene.groups) {
-    elements.push(...svgGroup(g, unitCenterFlipped, unitRot, point, opts));
-  }
+  const elements = [...orderElements(scene.groups.flatMap((g) => svgGroup(g, unitCenterFlipped, unitRot, point, opts)))];
   const dimOpts: SvgOptions = { ...opts, only_stroke: false, gray_scale: false };
-  elements.sort((a, b) => a.zOrder - b.zOrder);
-  const visibleViews = calculateVisibleViews(opts.view, scene.rotation_deprecated);
+  const visibleViews = calculateVisibleViews(view, scene.rotation_deprecated);
 
-  for (const dim of scene.dimensions_deprecated?.dimensions ?? []) {
+  // Dimensions are drawn for the flat views
+  for (const dim of isometric ? [] : (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/build/build.ts

@@ -45,6 +45,8 @@ export type BuildOptions = {
   readonly materialStateImages?: Record<string, string>;
   readonly useAlphaTest?: boolean;
   readonly onTextureLoaded?: () => void;
+  /** Lit by the studio, whose reflections metals show; true by default */
+  readonly studio?: boolean;
 };
 
 export type BuiltScene = {
@@ -233,7 +235,7 @@ function createPart(
       });
       if (first.role === "solid") {
         const c = getMaterialClass(first, targetStates[first.target]!);
-        const part = createSolidPart(entries, createClassMaterial(c));
+        const part = createSolidPart(entries, createClassMaterial(c, options.studio !== false));
         Object.assign(part.object, { castShadow: c.castShadow, receiveShadow: c.lit });
         return part;
       }