abstract-3d 4.0.5 → 4.0.8

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

@@ -42,7 +42,8 @@ export function cone(
           svgPolygon(rot, points, fill, opacity, stroke, stBW),
           vec3ZMean(currBot, prevBot, topPos),
           [currBot, prevBot, topPos],
-          isOpaque(fill, opacity)
+          isOpaque(fill, opacity),
+          { fill, opacity, stroke, strokeWidth: stBW }
         )
       );
     }

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

@@ -25,6 +25,7 @@ export function cylinder(
     ? [opts.gray_scale ? gray : color, opts.background]
     : [transparent, opts.gray_scale ? rgbGrayScale(color) : color];
   const opaque = isOpaque(fill, opacity);
+  const style = { fill, opacity, stroke, strokeWidth: stBW };
   // 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>();
@@ -49,7 +50,7 @@ export function cylinder(
 
       const points = [point(currBot.x, currBot.y), point(prevBot.x, prevBot.y), point(prevTop.x, prevTop.y), point(currTop.x, currTop.y)];
       const polygon = [currBot, prevBot, prevTop, currTop];
-      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(...polygon), polygon, opaque));
+      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(...polygon), polygon, opaque, style));
     }
     currentAngle += angleStep;
   }
@@ -73,7 +74,7 @@ export function cylinder(
       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));
+        zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), circlePos.z, ring, opaque && !c.holes?.length, style));
       }
     }
   }

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

@@ -29,12 +29,15 @@ 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];
+  const opacity = material.opacity ?? 1.0;
+  const plain = !holes?.length;
   return [
     zElem(
-      svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness, holes),
+      svgPolygon(rot, points, fill, opacity, strokeColor, strokeThickness, holes),
       vec3ZMean(v1, v2, v3, v4),
       [v1, v2, v3, v4],
-      isOpaque(fill, material.opacity ?? 1.0) && !holes?.length
+      isOpaque(fill, opacity) && plain,
+      plain ? { fill, opacity, stroke: strokeColor, strokeWidth: strokeThickness } : undefined
     ),
   ];
 }

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

@@ -21,12 +21,13 @@ 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];
+  const opacity = material.opacity ?? 1.0;
   return [
-    zElem(
-      svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness),
-      vec3ZMean(...rotatedPoints),
-      rotatedPoints,
-      isOpaque(fill, material.opacity ?? 1.0)
-    ),
+    zElem(svgPolygon(rot, points, fill, opacity, strokeColor, strokeThickness), vec3ZMean(...rotatedPoints), rotatedPoints, isOpaque(fill, opacity), {
+      fill,
+      opacity,
+      stroke: strokeColor,
+      strokeWidth: strokeThickness,
+    }),
   ];
 }

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

@@ -21,12 +21,14 @@ export function shape(
   const [strokeColor, fill] = opts.only_stroke
     ? [opts.gray_scale ? gray : color, opts.background]
     : [transparent, opts.gray_scale ? rgbGrayScale(color) : color];
+  const opacity = material.opacity ?? 1.0;
   return [
     zElem(
-      svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, 0),
+      svgPolygon(rot, points, fill, opacity, strokeColor, 0),
       vec3ZMean(...rotatedPoints),
       rotatedPoints,
-      isOpaque(fill, material.opacity ?? 1.0) && !s.holes?.length
+      isOpaque(fill, opacity) && !s.holes?.length,
+      { fill, opacity, stroke: strokeColor, strokeWidth: 0 }
     ),
   ];
 }

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

@@ -1,14 +1,26 @@
 import { describe, expect, it } from "vitest";
-import type { Vec3 } from "../../abstract-3d.js";
-import { vec3 } from "../../abstract-3d.js";
+import type { Vec2, Vec3 } from "../../abstract-3d.js";
+import { vec2, vec3 } from "../../abstract-3d.js";
+import type { PolygonStyle, zOrderElement } from "./svg-geometries/shared.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 point = (x: number, y: number): Vec2 => vec2(x, -y);
+const quad = (element: string, x0: number, x1: number, z: (x: number) => number, opaque?: boolean, style?: PolygonStyle): zOrderElement => {
   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);
+  return zElem(element, points.reduce((sum, p) => sum + p.z, 0) / points.length, points, opaque, style);
 };
-const order = (...elements: ReadonlyArray<ReturnType<typeof zElem>>): ReadonlyArray<string> => orderElements(elements).map((e) => e.element);
+const style = (fill: string, strokeWidth = 0): PolygonStyle => ({ fill, opacity: 1, stroke: "rgb(0,0,0)", strokeWidth });
+const order = (...elements: ReadonlyArray<zOrderElement>): ReadonlyArray<string> => orderElements(elements, point).map((e) => e.element);
+/** The fill of the last drawn element whose polygon contains the point on screen */
+const topAt = (ordered: ReadonlyArray<zOrderElement>, x: number, y: number): string | undefined =>
+  ordered
+    .filter(({ polygon = [] }) => {
+      const xs = polygon.map((p) => p.x);
+      const ys = polygon.map((p) => p.y);
+      return Math.min(...xs) < x && x < Math.max(...xs) && Math.min(...ys) < y && y < Math.max(...ys);
+    })
+    .at(-1)?.style?.fill;
 
 describe("orderElements", () => {
   it("draws a part in front of a long tilted face after it, though the face's mean depth is nearer", () => {
@@ -28,8 +40,51 @@ describe("orderElements", () => {
     expect(order(zElem("text", 2), zElem("line", -2))).toEqual(["line", "text"]);
   });
 
-  it("draws every element once, also when they overlap in a cycle", () => {
+  it("draws every element once when it can't be split, 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"]);
   });
+
+  it("splits faces that cut through each other, each drawn in front where it's nearer", () => {
+    // Crossing at x 0: a is nearer at x > 0, b at x < 0
+    const ordered = orderElements([quad("a", -1, 1, (x) => x, true, style("a")), quad("b", -1, 1, (x) => -x, true, style("b"))], point);
+    expect([topAt(ordered, 0.5, 0), topAt(ordered, -0.5, 0)]).toEqual(["a", "b"]);
+  });
+
+  it("strokes a split face's pieces along its own edges, not the cut", () => {
+    const ordered = orderElements([quad("a", -1, 1, (x) => x, true, style("a", 2)), quad("b", -1, 1, (x) => -x, true, style("b", 2))], point);
+    const pieces = ordered.filter((e) => e.element.includes("<path"));
+    expect(pieces.length).toBeGreaterThan(0);
+    // A piece of a: its polygon unstroked, its outline three of its four edges, without the cut at x 0 from y -1 to 1
+    pieces.forEach((e) => expect(e.element).toMatch(/^<polygon[^>]*stroke-width="0"[^>]*\/><path[^>]* d="M[^"]*L[^"]*L[^"]*L[^"]*"/));
+    pieces.forEach((e) => expect(e.element).not.toMatch(/0,-1L0,1|0,1L0,-1/));
+  });
+
+  it("draws a face split by a plane whole, when nothing drawn between its pieces overlaps it", () => {
+    // Each is on both sides of the other's plane, so one is split, but b is above a on screen
+    const b = zElem("b", 0, [vec3(-1, 5, 1), vec3(1, 5, -1), vec3(1, 6, -1), vec3(-1, 6, 1)], true, style("b"));
+    expect(
+      [
+        ...order(
+          quad("a", -1, 1, (x) => x, true, style("a")),
+          b
+        ),
+      ].sort()
+    ).toEqual(["a", "b"]);
+  });
+
+  it("leaves out what an opaque face in front covers", () => {
+    expect(
+      order(
+        quad("small", -1, 1, () => 0),
+        quad("big", -2, 2, () => 1, true)
+      )
+    ).toEqual(["big"]);
+    expect(
+      order(
+        quad("small", -1, 1, () => 0),
+        quad("glass", -2, 2, () => 1)
+      )
+    ).toEqual(["small", "glass"]);
+  });
 });

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;
 }