abstract-3d 4.1.1 → 4.1.3

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

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

@@ -0,0 +1,56 @@
+import { createSVG } from "abstract-image";
+import { exhaustiveCheck } from "ts-exhaustive-check";
+import type { ImageMesh, Vec2, Vec3 } from "../../../abstract-3d.js";
+import { vec2Scale, vec3TransRot, vec3RotCombine, vec3Zero, vec3 } from "../../../abstract-3d.js";
+import type { EmbededImage } from "../svg-encoding.js";
+import { rawSvgPrefix, svgImage } from "../svg-encoding.js";
+import type { zOrderElement, SvgOptions } from "./shared.js";
+import { zElem } from "./shared.js";
+
+export function image(
+  i: ImageMesh,
+  point: (x: number, y: number) => Vec2,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3
+): ReadonlyArray<zOrderElement> {
+  const half = vec2Scale(i.size, 0.5);
+  const pos = vec3TransRot(i.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, i.rot ?? vec3Zero);
+  const vec3tr = (x: number, y: number): Vec3 => vec3TransRot(vec3(x, y, 0), pos, rot);
+
+  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": {
+      const scale = {
+        x: i.size.x / i.image.image.size.width,
+        y: i.size.y / i.image.image.size.height,
+      };
+      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, corners)];
+    }
+    case "Url": {
+      const imageData = opts.imageDataByUrl[i.image.url];
+      const image: EmbededImage | undefined = imageData?.startsWith(rawSvgPrefix)
+        ? {
+            type: "svg",
+            svg: decodeURIComponent(imageData.slice(rawSvgPrefix.length)).replace(/^\s*(<\?xml[^>]*\?>\s*)?(<!DOCTYPE[^>]*>\s*)?/i, ""),
+          }
+        : i.image.url
+          ? { type: "url", url: imageData ?? i.image.url }
+          : undefined;
+
+      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, corners)];
+      }
+      return [];
+    }
+    default:
+      return exhaustiveCheck(i.image);
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { CulledLine, Line, Vec2, Vec3 } from "../../../abstract-3d.js";
+import { vec3TransRot, vec3ZMean } from "../../../abstract-3d.js";
+import { rgbGrayScale } from "../../../utils.js";
+import { svgLine } from "../svg-encoding.js";
+import type { SvgOptions, zOrderElement } from "./shared.js";
+import { zElem } from "./shared.js";
+
+export function line(
+  l: Line | CulledLine,
+  point: (x: number, y: number) => Vec2,
+  fill: string,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3
+): 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), [v1, v2]),
+  ];
+}

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

@@ -0,0 +1,43 @@
+import type { Plane, Vec2, Vec3, Material, Hole } from "../../../abstract-3d.js";
+import { vec2Scale, 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, isOpaque, zElem } from "./shared.js";
+
+export function plane(
+  p: Plane,
+  point: (x: number, y: number) => Vec2,
+  material: Material,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3,
+  holes?: ReadonlyArray<Hole>
+): ReadonlyArray<zOrderElement> {
+  const half = vec2Scale(p.size, 0.5);
+  const pos = vec3TransRot(p.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
+  const vec3tr = (x: number, y: number): Vec3 => vec3TransRot(vec3(x, y, 0), pos, rot);
+
+  const v1 = vec3tr(-half.x, -half.y);
+  const v2 = vec3tr(half.x, -half.y);
+  const v3 = vec3tr(half.x, half.y);
+  const v4 = vec3tr(-half.x, half.y);
+
+  const points = [point(v1.x, v1.y), point(v2.x, v2.y), point(v3.x, v3.y), point(v4.x, v4.y)];
+
+  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
+    ),
+  ];
+}

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

@@ -0,0 +1,33 @@
+import type { Polygon, Vec3, Vec2, Material } from "../../../abstract-3d.js";
+import { vec3ZMean, vec3TransRot, vec3RotCombine, vec3Zero } from "../../../abstract-3d.js";
+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";
+
+export function polygon(
+  p: Polygon,
+  point: (x: number, y: number) => Vec2,
+  material: Material,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3
+): ReadonlyArray<zOrderElement> {
+  const pos = vec3TransRot(p.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
+  const rotatedPoints = p.points.map((p) => vec3TransRot(p, pos, rot));
+  const points = rotatedPoints.map(({ x, y }) => point(x, y));
+  const color = material.normal;
+  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,
+    }),
+  ];
+}