abstract-3d 4.1.0 → 4.1.2

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, isOpaque, zElem } from "./shared.js";
+import { gray, black, zElem } from "./shared.js";
 
 export function plane(
   p: Plane,
@@ -29,15 +29,5 @@ 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, opacity, strokeColor, strokeThickness, holes),
-      vec3ZMean(v1, v2, v3, v4),
-      [v1, v2, v3, v4],
-      isOpaque(fill, opacity) && plain,
-      plain ? { fill, opacity, stroke: strokeColor, strokeWidth: strokeThickness } : undefined
-    ),
-  ];
+  return [zElem(svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness, holes), vec3ZMean(v1, v2, v3, v4))];
 }

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, isOpaque, zElem, transparent } from "./shared.js";
+import { gray, zElem, transparent } from "./shared.js";
 
 export function polygon(
   p: Polygon,
@@ -21,13 +21,5 @@ 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, opacity, strokeColor, strokeThickness), vec3ZMean(...rotatedPoints), rotatedPoints, isOpaque(fill, opacity), {
-      fill,
-      opacity,
-      stroke: strokeColor,
-      strokeWidth: strokeThickness,
-    }),
-  ];
+  return [zElem(svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness), vec3ZMean(...rotatedPoints))];
 }

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, isOpaque, zElem, transparent } from "./shared.js";
+import { gray, zElem, transparent } from "./shared.js";
 
 export function shape(
   s: Shape,
@@ -21,14 +21,5 @@ 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, opacity, strokeColor, 0),
-      vec3ZMean(...rotatedPoints),
-      rotatedPoints,
-      isOpaque(fill, opacity) && !s.holes?.length,
-      { fill, opacity, stroke: strokeColor, strokeWidth: 0 }
-    ),
-  ];
+  return [zElem(svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, 0), vec3ZMean(...rotatedPoints))];
 }

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, [pos]));
+    texts.push(zElem(svgText(s, matrix, fill, opts.font, fontSize), pos.z));
     posY -= fontSize * 1.2;
   }
 

package/src/renderers/svg/svg.ts

@@ -29,7 +29,6 @@ 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;
@@ -93,13 +92,13 @@ function renderInternal(
     imageBg: options?.imageBg ?? false,
     className: options?.className ?? "",
   };
-  // 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))
+  // 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(angledRot, rotationForCameraPos(view));
+  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);
 
@@ -110,17 +109,16 @@ 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)),
-      point
-    ),
-  ];
+  const elements = Array<zOrderElement>();
+  for (const g of scene.groups) {
+    elements.push(...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(view, scene.rotation_deprecated);
 
   // Dimensions are drawn for the flat views
-  for (const dim of angled ? [] : (scene.dimensions_deprecated?.dimensions ?? [])) {
+  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/svg-bsp/class-names.ts

@@ -0,0 +1,10 @@
+/**
+ * The classes the svg renderer puts on what it draws, for the page's CSS: `root` on the svg, e.g. sized to fill its box, `stroke` on each stroked
+ * element, e.g. as thick at any size by `vector-effect: non-scaling-stroke`, `image` on an embedded picture or svg. Colors and strokes are
+ * attributes, which a class overrides
+ */
+export const classNames = {
+  root: "a3d-root",
+  stroke: "a3d-stroke",
+  image: "a3d-image",
+} as const;

package/src/renderers/svg-bsp/index.ts

@@ -0,0 +1,4 @@
+export * from "./svg.js";
+export * from "./class-names.js";
+export { type EmbededImage } from "./svg-encoding.js";
+export type { ImageDataUri, SvgOptions, SvgView } from "./svg-geometries/shared.js";

package/src/renderers/svg-bsp/svg-encoding.ts

@@ -0,0 +1,190 @@
+import type { Hole, Vec2, Vec3 } from "../../abstract-3d.js";
+import { bounds2FromVec2Array, vec2, vec2Add, vec2Scale, vec2Sub, vec3, vec3Rot, vec3Zero } from "../../abstract-3d.js";
+import { classNames } from "./class-names.js";
+import { svgTrsMatrix } from "./svg-geometries/shared.js";
+
+export const svg = (min: Vec2, size: Vec2, children: string, className: string): string => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" class="${className ? `${classNames.root} ${className}` : classNames.root}" viewBox="${min.x.toFixed(0)} ${min.y.toFixed(0)} ${size.x.toFixed(
+    0
+  )} ${size.y.toFixed(0)}" width="${size.x.toFixed(0)}px" height="${size.y.toFixed(0)}px">${children}</svg>`;
+};
+export const svgLine = (p1: Vec2, p2: Vec2, stroke: string, strokeWidth: number): string =>
+  `<line class="${classNames.stroke}" x1="${p1.x.toFixed(0)}" y1="${p1.y.toFixed(0)}" x2="${p2.x.toFixed(0)}" y2="${p2.y.toFixed(
+    0
+  )}" stroke="${stroke}" stroke-width="${strokeWidth}" />`;
+
+export function svgPolygon(
+  rot: Vec3,
+  points: ReadonlyArray<Vec2>,
+  fill: string,
+  opacity: number,
+  stroke: string,
+  strokeWidth: number,
+  holes?: ReadonlyArray<Hole>,
+  _parentPos?: Vec3
+): string {
+  const bounds = bounds2FromVec2Array(points);
+  const size = vec2Sub(bounds.max, bounds.min);
+  const pos = vec2Scale(vec2Add(bounds.max, bounds.min), 0.5);
+  const [mask, maskAttribute] = svgHoleMask(rot, size, holes ?? []);
+  const pol = `<polygon class="${classNames.stroke}" points="${points
+    .reduce((a, c) => (a += `${c.x.toFixed(0)},${c.y.toFixed(0)} `), "")
+    .slice(0, -1)}" fill="${fill}" fill-opacity="${opacity.toFixed(1)}" stroke="${stroke}" stroke-width="${strokeWidth}" ${maskAttribute}/>`;
+  return mask + pol + svgStrokedHoles(pos, rot, holes ?? [], stroke, strokeWidth);
+}
+
+export function svgCircle(
+  radius: number,
+  rot: Vec3,
+  pos: Vec2,
+  fill: string,
+  opacity: number,
+  stroke: string,
+  strokeWidth: number,
+  holes?: ReadonlyArray<Hole>
+): string {
+  const size = vec2Scale(vec2(radius, radius), 2);
+  const [mask, maskAttribute] = svgHoleMask(rot, size, holes ?? []);
+  const cir = `<circle class="${classNames.stroke}" r="${radius.toFixed(0)}" cx="${pos.x.toFixed(0)}" cy="${pos.y.toFixed(0)}" fill="${fill}" fill-opacity="${opacity.toFixed(
+    1
+  )}" stroke="${stroke}" stroke-width="${strokeWidth}" ${maskAttribute}/>`;
+  return mask + cir + svgStrokedHoles(pos, rot, holes ?? [], stroke, strokeWidth);
+}
+
+function svgStrokedHoles(pos: Vec2, rot: Vec3, holes: ReadonlyArray<Hole>, strokeColor: string, strokeThickness: number): string {
+  if (strokeThickness <= Number.EPSILON) {
+    return "";
+  }
+
+  let svgHoles = "";
+  for (const hole of holes) {
+    const localSvg = vec3(hole.pos.x, -hole.pos.y, 0);
+    const rotated = vec3Rot(localSvg, vec3Zero, rot);
+    const holeCenter = vec2Add(vec2(pos.x, pos.y), vec2(rotated.x, rotated.y));
+    switch (hole.type) {
+      case "RoundHole": {
+        const matrix = svgTrsMatrix(holeCenter, vec3Zero);
+        svgHoles += `<circle
+          class="${classNames.stroke}"
+          r="${hole.radius.toFixed(0)}"
+          transform="${matrix}"
+          fill="none"
+          stroke="${strokeColor}"
+          stroke-width="${strokeThickness}"
+        />`;
+        break;
+      }
+
+      case "SquareHole": {
+        const half = vec2Scale(hole.size, 0.5);
+        const points = [vec2(-half.x, -half.y), vec2(half.x, -half.y), vec2(half.x, half.y), vec2(-half.x, half.y)]
+          .map((p) => `${p.x.toFixed(0)},${p.y.toFixed(0)}`)
+          .join(" ");
+
+        const matrix = svgTrsMatrix(holeCenter, rot);
+
+        svgHoles += `<polygon
+          class="${classNames.stroke}"
+          points="${points}"
+          transform="${matrix}"
+          fill="none"
+          stroke="${strokeColor}"
+          stroke-width="${strokeThickness}"
+        />`;
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  return svgHoles;
+}
+
+/** A polygon's edges that are flagged, the edge from each point to the next, as one path, without a fill */
+export function svgEdges(points: ReadonlyArray<Vec2>, edges: ReadonlyArray<boolean>, stroke: string, strokeWidth: number): string {
+  // From after an unflagged edge, so a run of edges isn't broken where the points wrap around
+  const start = edges.indexOf(false) + 1;
+  const d = points.reduce((path, _, k) => {
+    const i = (start + k) % points.length;
+    const [p, q] = [points[i]!, points[(i + 1) % points.length]!];
+    const move = k > 0 && edges[(i + points.length - 1) % points.length] ? "" : `M${p.x.toFixed(0)},${p.y.toFixed(0)}`;
+    return edges[i] ? `${path}${move}L${q.x.toFixed(0)},${q.y.toFixed(0)}` : path;
+  }, "");
+  return `<path class="${classNames.stroke}" d="${d}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" />`;
+}
+
+export const svgCircle2 = (radius: number, pos: Vec2, fill: string, stroke: string, strokeWidth: number, _holes?: ReadonlyArray<Hole>): string =>
+  `<circle class="${classNames.stroke}" r="${radius.toFixed(0)}" cx="${pos.x.toFixed(0)}" cy="${pos.y.toFixed(
+    0
+  )}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`;
+
+function svgHoleMask(rot: Vec3, size: Vec2, holes: ReadonlyArray<Hole>): [string, string] {
+  const id = `mask_${counter()}`;
+  return holes.length > 0
+    ? [
+        `<mask id="${id}" mask-type="luminance" maskContentUnits="objectBoundingBox">
+      <rect x="0" y="0" width="1" height="1" fill="white" />
+      ${svgMaskHoles(rot, size, holes)}
+    </mask>\n`,
+        `mask="url(#${id}) "`,
+      ]
+    : ["", ""];
+}
+
+function svgMaskHoles(rot: Vec3, size: Vec2, holes: ReadonlyArray<Hole>): string {
+  const holeMasks: Array<string> = [];
+  for (const hole of holes) {
+    const holePosRotated = vec3Rot(vec3(hole.pos.x, hole.pos.y, 0), vec3Zero, rot);
+    const holePos = vec2Add(holePosRotated, vec2Scale(size, 0.5));
+    switch (hole.type) {
+      case "RoundHole": {
+        holeMasks.push(
+          `<ellipse cx="${holePos.x / size.x}" cy="${holePos.y / size.y}" rx="${hole.radius / size.x}" ry="${hole.radius / size.y}" fill="black" />`
+        );
+        break;
+      }
+      case "SquareHole": {
+        const holeSizeRotated = vec3Rot(vec3(hole.size.x, hole.size.y, 0), vec3Zero, rot);
+        const holeSize = vec2(Math.abs(holeSizeRotated.x), Math.abs(holeSizeRotated.y));
+        const halfSize = vec2Scale(holeSize, 0.5);
+        holeMasks.push(
+          `<rect x="${(holePos.x - halfSize.x) / size.x}" y="${(holePos.y - halfSize.y) / size.y}" width="${
+            holeSize.x / size.x
+          }" height="${holeSize.y / size.y}" fill="black" />`
+        );
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  return holeMasks.join("\n");
+}
+
+export const svgText = (text: string, matrix: string, color: string, font: string, fontSize: number): string =>
+  `<text font-family="${font}" font-size="${fontSize}px" text-anchor="middle" alignment-baseline="middle" fill="${color}" transform="${matrix}">${text}</text>`;
+
+export type EmbededImage = { readonly type: "url"; readonly url: string } | { readonly type: "svg"; readonly svg: string };
+
+export const rawSvgPrefix = "data:image/svg+xml,";
+
+export const svgImage = (p: Vec2, size: Vec2, rot: Vec3, data: EmbededImage, background?: string, scale?: Vec2): string => {
+  const matrix = svgTrsMatrix(p, rot, scale);
+
+  if (data.type === "url") {
+    const bg = background ? `<rect width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" fill="${background}"/>` : "";
+    return `<g transform="${matrix}">${bg}<image class="${classNames.image}" width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" href="${data.url}"/></g>`;
+  }
+
+  // scale maps image-space coords → world coords, so the wrapper SVG and rect
+  // must use image-space dimensions: imgW * scale.x = size.x (the desired world size).
+  const imgW = scale ? size.x / scale.x : size.x;
+  const imgH = scale ? size.y / scale.y : size.y;
+  const bg = background ? `<rect width="${imgW.toFixed(0)}" height="${imgH.toFixed(0)}" fill="${background}"/>` : "";
+  return `<g transform="${matrix}"><svg class="${classNames.image}" width="${imgW.toFixed(0)}" height="${imgH.toFixed(0)}">${bg}${data.svg}</svg></g>`;
+};
+
+const counter = (() => {
+  let counter = 0;
+  return () => counter++;
+})();

package/src/renderers/svg-bsp/svg-geometries/shared.ts

@@ -0,0 +1,88 @@
+import type { Vec2, Vec3, View } from "../../../abstract-3d.js";
+import { vec3TransRot, vec3Zero } from "../../../abstract-3d.js";
+
+/**
+ * An element and its mean depth, and the points it covers in view space (x right, y up, z toward the viewer), by which it's ordered when given,
+ * whether it hides what's behind it, and the style of a plain polygon, without holes, by which its pieces are drawn when it's split
+ */
+export type zOrderElement = {
+  readonly element: string;
+  readonly zOrder: number;
+  readonly polygon?: ReadonlyArray<Vec3>;
+  readonly opaque?: boolean;
+  readonly style?: PolygonStyle;
+};
+export type PolygonStyle = { readonly fill: string; readonly opacity: number; readonly stroke: string; readonly strokeWidth: number };
+export const zElem = (element: string, zOrder: number, polygon?: ReadonlyArray<Vec3>, opaque?: boolean, style?: PolygonStyle): zOrderElement => ({
+  element,
+  zOrder,
+  ...(polygon && { polygon }),
+  ...(opaque && { opaque }),
+  ...(style && { style }),
+});
+
+/** Whether a fill hides what's behind it: fully opaque, and not transparent, e.g. a sketch's default background */
+export const isOpaque = (fill: string, opacity: number): boolean => opacity >= 1 && !/^(transparent|none|rgba\(.*,\s*0(\.0*)?\s*\))$/.test(fill);
+
+/** Twice the signed area of a polygon on screen */
+export function getArea(points: ReadonlyArray<Vec2>): number {
+  return points.reduce((sum, p, i) => {
+    const q = points[(i + 1) % points.length]!;
+    return sum + p.x * q.y - q.x * p.y;
+  }, 0);
+}
+
+export const stBW = 0.7;
+export const stN = 0.1;
+
+export const gray = "rgb(85, 85, 85)";
+export const white = "rgb(255, 255, 255)";
+export const transparent = "rgba(255, 255, 255, 0)";
+export const black = "rgb(15, 15, 15)";
+
+export type ImageDataUri = `data:image/png;base64,${string}` | `data:image/jpeg;base64,${string}` | `data:image/svg+xml,${string}`;
+
+/** A view, or a three-quarter one from the front's top left or top right, which shows the front foremost, the top and that side */
+export type SvgView = View | "TopLeft" | "TopRight";
+
+export type SvgOptions = {
+  readonly view: SvgView;
+  readonly stroke_thickness: number;
+  readonly only_stroke: boolean;
+  readonly gray_scale: boolean;
+  readonly background: string;
+  readonly rotation: number;
+  readonly imageBg: boolean;
+
+  readonly font: string;
+  readonly imageDataByUrl: Record<string, ImageDataUri>;
+  /** Its svg's class besides `classNames.root`, e.g. sized to fill its box */
+  readonly className: string;
+};
+
+export function svgTrsMatrix(translation: Vec2, rotation: Vec3, scale?: Vec2): string {
+  const xRot = vec3TransRot({ x: 1, y: 0, z: 0 }, vec3Zero, rotation);
+  const yRot = vec3TransRot({ x: 0, y: -1, z: 0 }, vec3Zero, rotation);
+
+  const x2D = { x: xRot.x, y: -xRot.y };
+  const y2D = { x: yRot.x, y: -yRot.y };
+
+  const sx = scale?.x ?? 1;
+  const sy = scale?.y ?? 1;
+
+  const a = x2D.x * sx;
+  const b = x2D.y * sx;
+  const c = y2D.x * sy;
+  const d = y2D.y * sy;
+  const e = translation.x;
+  const f = translation.y;
+
+  return `matrix(${svgNum(a)} ${svgNum(b)} ${svgNum(c)} ${svgNum(d)} ${svgNum(e)} ${svgNum(f)})`;
+}
+
+const svgNum = (num: number): string => {
+  if (Math.abs(num) < 1e-9) {
+    return "0";
+  }
+  return num.toFixed(6);
+};

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

@@ -0,0 +1,76 @@
+import type { Box, Vec2, Vec3, Material } from "../../../abstract-3d.js";
+import { vec3Scale, vec3TransRot, vec3RotCombine, vec3Zero, vec3, vec3ZMean } from "../../../abstract-3d.js";
+import { rgbGrayScale } from "../../../utils.js";
+import { svgPolygon } from "../svg-encoding.js";
+import type { zOrderElement, SvgOptions } from "./shared.js";
+import { gray, black, zElem, getArea, isOpaque } from "./shared.js";
+
+export function box(
+  b: Box,
+  point: (x: number, y: number) => Vec2,
+  material: Material,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3
+): ReadonlyArray<zOrderElement> {
+  const half = vec3Scale(b.size, 0.5);
+  const pos = vec3TransRot(b.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, b.rot ?? vec3Zero);
+  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 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;
+    const plain = !holes?.length;
+    return [
+      zElem(
+        svgPolygon(rot, points, fill, opacity, strokeColor, strokeUse, holes),
+        vec3ZMean(...polygon),
+        polygon,
+        opaque && plain,
+        plain ? { fill, opacity, stroke: strokeColor, strokeWidth: strokeUse } : undefined
+      ),
+    ];
+  });
+}
+
+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-bsp/svg-geometries/svg-cone.ts

@@ -0,0 +1,68 @@
+import type { Cone, Vec2, Vec3, Material } from "../../../abstract-3d.js";
+import { vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3ZMean, equals } from "../../../abstract-3d.js";
+import { rgbGrayScale } from "../../../utils.js";
+import { svgCircle, svgPolygon } from "../svg-encoding.js";
+import type { zOrderElement, SvgOptions } from "./shared.js";
+import { gray, isOpaque, stBW, zElem, transparent } from "./shared.js";
+
+export function cone(
+  c: Cone,
+  point: (x: number, y: number) => Vec2,
+  material: Material,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3
+): ReadonlyArray<zOrderElement> {
+  const half = vec3(c.radius, c.length / 2, c.radius);
+  const pos = vec3TransRot(c.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
+  const vec3tr = (p: Vec3): Vec3 => vec3TransRot(p, pos, rot);
+
+  const color = material.normal;
+  const opacity = material.opacity ?? 1.0;
+  const [stroke, fill] = opts.only_stroke
+    ? [opts.gray_scale ? gray : color, opts.background]
+    : [transparent, opts.gray_scale ? rgbGrayScale(color) : color];
+  const zOrderComponents = Array<zOrderElement>();
+
+  const sides = 8;
+  const angleStep = (2 * Math.PI) / sides;
+  let currentAngle = 0;
+
+  const topPos = vec3tr(vec3(0, half.y, 0));
+  const botVec3Array = Array<Vec3>();
+  for (let i = 0; i <= sides; i++) {
+    const currBot = vec3tr(vec3(0 + Math.sin(currentAngle) * c.radius, -half.y, 0 + Math.cos(currentAngle) * c.radius));
+    botVec3Array.push(currBot);
+    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),
+          [currBot, prevBot, topPos],
+          isOpaque(fill, opacity),
+          { fill, opacity, stroke, strokeWidth: stBW }
+        )
+      );
+    }
+    currentAngle += angleStep;
+  }
+
+  // Add circle if direcly facing camera
+  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,
+        botVec3Array,
+        isOpaque(fill, opacity)
+      )
+    );
+  }
+
+  return zOrderComponents;
+}

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

@@ -0,0 +1,82 @@
+import type { Cylinder, Vec2, Vec3, Material } from "../../../abstract-3d.js";
+import { vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3ZMean, equals } from "../../../abstract-3d.js";
+import { rgbGrayScale } from "../../../utils.js";
+import { svgCircle, svgPolygon } from "../svg-encoding.js";
+import type { SvgOptions, zOrderElement } from "./shared.js";
+import { getArea, gray, isOpaque, stBW, transparent, zElem } from "./shared.js";
+
+export function cylinder(
+  c: Cylinder,
+  point: (x: number, y: number) => Vec2,
+  material: Material,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3
+): ReadonlyArray<zOrderElement> {
+  const half = c.length / 2;
+  const radiusEnd = c.radiusEnd ?? c.radius;
+  const pos = vec3TransRot(c.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
+  const vec3tr = (p: Vec3): Vec3 => vec3TransRot(p, pos, rot);
+
+  const color = material.normal;
+  const opacity = material.opacity ?? 1.0;
+  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);
+  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>();
+
+  const sides = 8;
+  const angleStep = (2 * Math.PI) / sides;
+  let currentAngle = 0;
+
+  const botVec3Array = Array<Vec3>();
+  const topVec3Array = Array<Vec3>();
+  for (let i = 0; i <= sides; i++) {
+    const sin = Math.sin(currentAngle);
+    const cos = Math.cos(currentAngle);
+    const currBot = vec3tr(vec3(sin * c.radius, -half, cos * c.radius));
+    const currTop = vec3tr(vec3(sin * radiusEnd, half, cos * radiusEnd));
+    botVec3Array.push(currBot);
+    topVec3Array.push(currTop);
+    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)];
+      const polygon = [currBot, prevBot, prevTop, currTop];
+      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(...polygon), polygon, opaque, style));
+    }
+    currentAngle += angleStep;
+  }
+  if (!c.open) {
+    // 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 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,
+          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, style));
+      }
+    }
+  }
+  return zOrderComponents;
+}