abstract-3d 4.1.1 → 4.1.3

package/lib/renderers/svg-bsp/svg.js

@@ -0,0 +1,120 @@
+import { exhaustiveCheck } from "ts-exhaustive-check";
+import { vec2, vec3Rot, vec3Zero, vec3RotCombine, vec3, vec3TransRot, rotationForCameraPos, sizeBoundsForCameraPos, bounds2FromPosAndSize, bounds2ToSize, bounds2Merge, vec2Zero, vec3Flip, dimensionConvertToTypeMesh, } from "../../abstract-3d.js";
+import { calculateVisibleViews, isViewVisible } from "../../utils.js";
+import { svg } from "./svg-encoding.js";
+import { box } from "./svg-geometries/svg-box.js";
+import { cone } from "./svg-geometries/svg-cone.js";
+import { cylinder } from "./svg-geometries/svg-cylinder.js";
+import { image } from "./svg-geometries/svg-image.js";
+import { line } from "./svg-geometries/svg-line.js";
+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 function renderScenes(scenes, baseOptions) {
+    const allElements = Array();
+    const bounds = Array();
+    for (const view of scenes) {
+        const { elements, size, center } = renderInternal(view.scene, { ...baseOptions, ...view.options }, view.pos);
+        allElements.push(...elements);
+        const newBounds = bounds2FromPosAndSize(center, size);
+        bounds.push(newBounds);
+    }
+    const mergedBounds = bounds2Merge(...bounds);
+    const size = bounds2ToSize(mergedBounds);
+    const image = svg(mergedBounds.min, size, allElements.reduce((a, { element }) => `${a} ${element}`, ""), baseOptions?.className ?? "");
+    return { image, width: size.x, height: size.y };
+}
+export function render(scene, options) {
+    const { elements, size, center } = renderInternal(scene, options, vec2Zero);
+    const image = svg(vec2(center.x - size.x / 2, center.y - size.y / 2), size, elements.reduce((a, { element }) => `${a} ${element}`, ""), options?.className ?? "");
+    return { image, width: size.x, height: size.y };
+}
+function renderInternal(scene, options, offset) {
+    const opts = {
+        view: options?.view ?? "front",
+        stroke_thickness: options?.stroke_thickness ?? 2,
+        only_stroke: options?.only_stroke ?? false,
+        gray_scale: options?.gray_scale ?? false,
+        background: options?.background ?? "rgba(255,255,255,0)",
+        font: options?.font ?? "",
+        imageDataByUrl: options?.imageDataByUrl ?? {},
+        rotation: options?.rotation ?? 0,
+        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))
+        : vec3Zero;
+    const cameraRot = vec3RotCombine(angledRot, rotationForCameraPos(view));
+    const viewRot = opts.rotation ? vec3RotCombine(vec3(0, 0, (opts.rotation * Math.PI) / 180), cameraRot) : cameraRot;
+    const unitRot = vec3RotCombine(viewRot, scene.rotation_deprecated ?? vec3Zero);
+    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, y) => 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 dimOpts = { ...opts, only_stroke: false, gray_scale: false };
+    const visibleViews = calculateVisibleViews(view, scene.rotation_deprecated);
+    // Dimensions are drawn for the flat views
+    for (const dim of angled ? [] : (scene.dimensions_deprecated?.dimensions ?? [])) {
+        const d = dimensionConvertToTypeMesh(dim, scene.rotation_deprecated ?? vec3Zero, scene.dimensions_deprecated?.material);
+        if (isViewVisible(d.views[0], visibleViews)) {
+            const pos = vec3TransRot(d.pos, unitCenterFlipped, unitRot);
+            const rot = vec3RotCombine(unitRot, d.rot);
+            for (const m of d.meshes) {
+                elements.push(...svgMesh(m, pos, rot, point, scene.dimensions_deprecated?.material ?? { normal: "" }, dimOpts));
+            }
+        }
+    }
+    return { elements, size: svgSize, center: svgCenter };
+}
+function svgGroup(g, parentPos, parentRot, point, opts) {
+    const pos = vec3TransRot(g.pos, parentPos, parentRot);
+    const rot = vec3RotCombine(parentRot, g.rot ?? vec3Zero);
+    const elements = Array();
+    for (const m of g.meshes ?? []) {
+        elements.push(...svgMesh(m, pos, rot, point, m.material, opts));
+    }
+    for (const sg of g.groups ?? []) {
+        elements.push(...svgGroup(sg, pos, rot, point, opts));
+    }
+    return elements;
+}
+function svgMesh(mesh, parentPos, parentRot, point, material, opts) {
+    switch (mesh.geometry.type) {
+        case "Box":
+            return box(mesh.geometry, point, material, opts, parentPos, parentRot);
+        case "Plane":
+            return plane(mesh.geometry, point, material, opts, parentPos, parentRot);
+        case "Cylinder":
+            return cylinder(mesh.geometry, point, material, opts, parentPos, parentRot);
+        case "Cone":
+            return cone(mesh.geometry, point, material, opts, parentPos, parentRot);
+        case "CulledLine":
+        case "Line":
+            return line(mesh.geometry, point, material.normal, opts, parentPos, parentRot);
+        case "Polygon":
+            return polygon(mesh.geometry, point, material, opts, parentPos, parentRot);
+        case "Shape":
+            return shape(mesh.geometry, point, material, opts, parentPos, parentRot);
+        case "Text":
+            return text(mesh.geometry, point, material.normal, opts, parentPos, parentRot);
+        case "Image":
+            return image(mesh.geometry, point, opts, parentPos, parentRot);
+        case "Tube":
+        case "Sphere":
+            return [];
+        default:
+            return exhaustiveCheck(mesh.geometry);
+    }
+}
+//# sourceMappingURL=svg.js.map

package/lib/renderers/svg-bsp/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sourceRoot":"","sources":["../../../src/renderers/svg-bsp/svg.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "abstract-3d",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "gitHead": "17921b59da5eee6cc446fd37a2134165af4d1901",
   "description": "Abstract 3D",
   "license": "MIT",
@@ -59,6 +59,11 @@
       "ts": "./src/renderers/svg/index.ts",
       "types": "./lib/renderers/svg/index.d.ts",
       "import": "./lib/renderers/svg/index.js"
+    },
+    "./svg-bsp": {
+      "ts": "./src/renderers/svg-bsp/index.ts",
+      "types": "./lib/renderers/svg-bsp/index.d.ts",
+      "import": "./lib/renderers/svg-bsp/index.js"
     }
   },
   "dependencies": {

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

@@ -100,19 +100,6 @@ function svgStrokedHoles(pos: Vec2, rot: Vec3, holes: ReadonlyArray<Hole>, strok
   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

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

@@ -1,36 +1,8 @@
 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 type zOrderElement = { readonly element: string; readonly zOrder: number };
+export const zElem = (element: string, zOrder: number): zOrderElement => ({ element, zOrder });
 
 export const stBW = 0.7;
 export const stN = 0.1;
@@ -42,7 +14,7 @@ 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 */
+/** A view, or an isometric one from the front's top left or top right, which shows the front, the top and that side, foreshortened alike */
 export type SvgView = View | "TopLeft" | "TopRight";
 
 export type SvgOptions = {

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, getArea, isOpaque } from "./shared.js";
+import { gray, black, zElem } from "./shared.js";
 
 export function box(
   b: Box,
@@ -16,61 +16,46 @@ 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 corners = unitCorners.map((c) => vec3TransRot(vec3(c.x * half.x, c.y * half.y, c.z * half.z), pos, rot));
+  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 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
-      ),
-    ];
-  });
+  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),
+  ];
 }
-
-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, isOpaque, stBW, zElem, transparent } from "./shared.js";
+import { gray, stBW, zElem, transparent } from "./shared.js";
 
 export function cone(
   c: Cone,
@@ -37,15 +37,7 @@ 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),
-          [currBot, prevBot, topPos],
-          isOpaque(fill, opacity),
-          { fill, opacity, stroke, strokeWidth: stBW }
-        )
-      );
+      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(currBot, prevBot, topPos)));
     }
     currentAngle += angleStep;
   }
@@ -54,14 +46,7 @@ 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,
-        botVec3Array,
-        isOpaque(fill, opacity)
-      )
-    );
+    zOrderComponents.push(zElem(svgCircle(c.radius, rot, point(cylBottom.x, cylBottom.y), fill, opacity, stroke, stBW), cylBottom.z));
   }
 
   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 { getArea, gray, isOpaque, stBW, transparent, zElem } from "./shared.js";
+import { gray, stBW, transparent, zElem } from "./shared.js";
 
 export function cylinder(
   c: Cylinder,
@@ -24,10 +24,6 @@ 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);
-  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;
@@ -43,39 +39,23 @@ export function cylinder(
     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)) {
+    if (i !== 0) {
       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));
+      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(currBot, prevBot, currTop, prevTop)));
     }
     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
+    // Add circle if direcly facing camera
     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,
-          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));
-      }
+      zOrderComponents.push(zElem(svgCircle(circleRadius, rot, point(circlePos.x, circlePos.y), fill, opacity, stroke, stBW, holes), circlePos.z));
     }
   }
   return zOrderComponents;

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

@@ -21,7 +21,6 @@ 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": {
@@ -31,7 +30,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, corners)];
+      return [zElem(img, (v2.z + v4.z) / 2)];
     }
     case "Url": {
       const imageData = opts.imageDataByUrl[i.image.url];
@@ -46,7 +45,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, corners)];
+        return [zElem(img, (v2.z + v4.z) / 2)];
       }
       return [];
     }

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

@@ -15,7 +15,5 @@ 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), [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))];
 }

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