abstract-3d 0.1.2

package/src/renderers/shared.ts

@@ -0,0 +1,111 @@
+import {
+  Vec3,
+  View,
+  DimensionBounds,
+  vec3Add,
+  vec3,
+  vec3Sub,
+  vec3Scale,
+  vec3Rot,
+  bounds3FromVec3Array,
+  bounds3ToSize,
+  vec3Zero,
+  bounds3Zero,
+} from "../abstract-3d";
+
+export function sizeCenterForCameraPos(
+  size: Vec3,
+  center: Vec3,
+  _dimBound: DimensionBounds | undefined,
+  rotation: Vec3,
+  _view: View,
+  factor: number
+): readonly [Vec3, Vec3] {
+  // const [sizeAdj, centerAdj] = (() => {
+  //   switch (view) {
+  //     case "front":
+  //     default:
+  //       return [
+  //         vec3Add(size, vec3(dimBound.front.min.x + dimBound.front.max.x, dimBound.front.min.y + dimBound.front.max.y, 0)),
+  //         vec3Add(center, vec3((dimBound.front.max.x - dimBound.front.min.x) / 2, (dimBound.front.max.y - dimBound.front.min.y) / 2, 0)),
+  //       ];
+  //     case "back":
+  //       return [
+  //         vec3Add(size, vec3(dimBound.back.min.x + dimBound.back.max.x, dimBound.back.min.y + dimBound.back.max.y, 0)),
+  //         vec3Add(center, vec3((dimBound.back.max.x - dimBound.back.min.x) / 2, (dimBound.back.max.y - dimBound.back.min.y) / 2, 0)),
+  //       ];
+  //     case "top":
+  //       return [
+  //         vec3Add(size, vec3(dimBound.top.min.x + dimBound.top.max.x, 0, dimBound.top.min.y + dimBound.top.max.y)),
+  //         vec3Add(center, vec3((dimBound.top.max.x - dimBound.top.min.x) / 2, (dimBound.top.max.y - dimBound.top.min.y) / 2, 0)),
+  //       ];
+  //     case "bottom":
+  //       return [
+  //         vec3Add(size, vec3(dimBound.bottom.min.x + dimBound.bottom.max.x, 0, dimBound.bottom.min.y + dimBound.bottom.max.y)),
+  //         vec3Add(center, vec3((dimBound.bottom.max.x - dimBound.bottom.min.x) / 2, (dimBound.bottom.max.y - dimBound.bottom.min.y) / 2, 0)),
+  //       ];
+  //     case "right":
+  //       return [
+  //         vec3Add(size, vec3(0, dimBound.right.min.y + dimBound.right.max.y, dimBound.right.min.x + dimBound.right.max.x)),
+  //         vec3Add(center, vec3((dimBound.right.max.x - dimBound.right.min.x) / 2, (dimBound.right.max.y - dimBound.right.min.y) / 2, 0)),
+  //       ];
+  //     case "left":
+  //       return [
+  //         vec3Add(size, vec3(0, dimBound.left.min.y + dimBound.left.max.y, dimBound.left.min.x + dimBound.left.max.x)),
+  //         vec3Add(center, vec3((dimBound.left.max.x - dimBound.left.min.x) / 2, (dimBound.left.max.y - dimBound.left.min.y) / 2, 0)),
+  //       ];
+  //   }
+  // })();
+
+  const [sizeAdj, centerAdj] = (() => {
+    return [size, center];
+  })();
+
+  const half = vec3Scale(sizeAdj, 0.5);
+  const min = vec3Sub(centerAdj, half);
+  const max = vec3Add(centerAdj, half);
+  const v1 = vec3Rot(vec3(min.x, min.y, max.z), centerAdj, rotation);
+  const v2 = vec3Rot(vec3(max.x, min.y, max.z), centerAdj, rotation);
+  const v3 = vec3Rot(vec3(max.x, max.y, max.z), centerAdj, rotation);
+  const v4 = vec3Rot(vec3(min.x, max.y, max.z), centerAdj, rotation);
+  const v5 = vec3Rot(vec3(min.x, min.y, min.z), centerAdj, rotation);
+  const v6 = vec3Rot(vec3(max.x, min.y, min.z), centerAdj, rotation);
+  const v7 = vec3Rot(vec3(max.x, max.y, min.z), centerAdj, rotation);
+  const v8 = vec3Rot(vec3(min.x, max.y, min.z), centerAdj, rotation);
+  const bounds = bounds3FromVec3Array([v1, v2, v3, v4, v5, v6, v7, v8]);
+  return [vec3Scale(bounds3ToSize(bounds), factor), vec3Scale(centerAdj, factor)];
+}
+
+export function rotationForCameraPos(view: View): Vec3 {
+  switch (view) {
+    default:
+    case "front":
+      return vec3Zero;
+    case "back":
+      return vec3(-Math.PI, 0, -Math.PI);
+    case "top":
+      return vec3(Math.PI / 2, 0, 0);
+    case "bottom":
+      return vec3(-Math.PI / 2, 0, 0);
+    case "right":
+      return vec3(0, -Math.PI / 2, 0);
+    case "left":
+      return vec3(0, Math.PI / 2, 0);
+  }
+}
+
+export const dimBoundZero: DimensionBounds = {
+  front: bounds3Zero,
+  back: bounds3Zero,
+  top: bounds3Zero,
+  bottom: bounds3Zero,
+  right: bounds3Zero,
+  left: bounds3Zero,
+  threeD: bounds3Zero,
+};
+
+export function rgbGray(color: string): string {
+  const parts = color.split("(")[1]?.slice(0, -1).split(",");
+  const c = Number(parts?.[0] ?? 416) * 0.3 + Number(parts?.[1] ?? 212) * 0.587 + Number(parts?.[2] ?? 1100) * 0.114;
+  return `rgb(${c},${c},${c})`;
+}

package/src/renderers/stl/index.ts

@@ -0,0 +1 @@
+export * from "./stl";

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

@@ -0,0 +1,22 @@
+import { Vec3, vec3Sub } from "../../abstract-3d";
+
+export const stlTriangle = (vec1: Vec3, vec2: Vec3, vec3: Vec3): string => {
+  const v = vec3Sub(vec2, vec1);
+  const w = vec3Sub(vec3, vec1);
+  const nx = v.y * w.z - v.z * w.y;
+  const ny = v.z * w.x - v.x * w.z;
+  const nz = v.x * w.y - v.y * w.x;
+  const sum = Math.sqrt(nx * nx + ny * ny + nz * nz);
+  return `facet normal ${nx / sum} ${ny / sum} ${nz / sum}
+  outer loop
+    vertex ${vec1.x} ${vec1.y} ${vec1.z}
+    vertex ${vec2.x} ${vec2.y} ${vec2.z}
+    vertex ${vec3.x} ${vec3.y} ${vec3.z}
+  endloop
+endfacet
+`;
+};
+
+export function stlPlaneOfVertices(v1: Vec3, v2: Vec3, v3: Vec3, v4: Vec3): string {
+  return stlTriangle(v1, v2, v3) + stlTriangle(v3, v4, v1);
+}

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

@@ -0,0 +1,33 @@
+import * as A3D from "../../../abstract-3d";
+import { stlTriangle } from "../stl-encoding";
+
+export function stlBox(b: A3D.Box, _m: A3D.Material, parentPos: A3D.Vec3, parentRot: A3D.Vec3): string {
+  const half = A3D.vec3Scale(b.size, 0.5);
+  const pos = A3D.vec3TransRot(b.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, b.rot ?? A3D.vec3Zero);
+  const vec3tr = (x: number, y: number, z: number): A3D.Vec3 => A3D.vec3TransRot(A3D.vec3(x, y, z), pos, rot);
+
+  const v1 = vec3tr(-half.x, -half.y, half.z);
+  const v2 = vec3tr(half.x, -half.y, half.z);
+  const v3 = vec3tr(half.x, half.y, half.z);
+  const v4 = vec3tr(-half.x, half.y, half.z);
+  const v5 = vec3tr(-half.x, -half.y, -half.z);
+  const v6 = vec3tr(half.x, -half.y, -half.z);
+  const v7 = vec3tr(half.x, half.y, -half.z);
+  const v8 = vec3tr(-half.x, half.y, -half.z);
+
+  return (
+    stlTriangle(v1, v2, v3) + // front
+    stlTriangle(v3, v4, v1) +
+    stlTriangle(v5, v6, v7) + // Back
+    stlTriangle(v7, v8, v5) +
+    stlTriangle(v5, v1, v4) + // Left
+    stlTriangle(v8, v4, v5) +
+    stlTriangle(v6, v2, v3) + // Right
+    stlTriangle(v3, v7, v6) +
+    stlTriangle(v8, v7, v3) + // Top
+    stlTriangle(v3, v4, v8) +
+    stlTriangle(v5, v6, v2) + // Bottom
+    stlTriangle(v2, v1, v5)
+  );
+}

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

@@ -0,0 +1,37 @@
+import * as A3D from "../../../abstract-3d";
+import { stlPlaneOfVertices } from "../stl-encoding";
+
+export function stlCone(
+  c: A3D.Cone,
+  _m: A3D.Material,
+  sides: number,
+  parentPos: A3D.Vec3,
+  parentRot: A3D.Vec3
+): string {
+  let dxfString = "";
+  const pos = A3D.vec3TransRot(c.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, c.rot ?? A3D.vec3Zero);
+  const vec3tr = (x: number, y: number, z: number): A3D.Vec3 => A3D.vec3TransRot(A3D.vec3(x, y, z), pos, rot);
+
+  const angleStep = (2 * Math.PI) / sides;
+  let currentAngle = 0;
+
+  const half = c.length / 2;
+  const botPos = vec3tr(0, -half, 0);
+  const topPos = vec3tr(0, half, 0);
+
+  const botVec3Array = Array<A3D.Vec3>();
+  for (let i = 0; i <= sides; i++) {
+    const currBot = vec3tr(Math.sin(currentAngle) * c.radius, -half, Math.cos(currentAngle) * c.radius);
+    botVec3Array.push(currBot);
+
+    if (i !== 0) {
+      const prevBot = botVec3Array[i - 1]!;
+      dxfString +=
+        stlPlaneOfVertices(botPos, prevBot, currBot, currBot) + stlPlaneOfVertices(currBot, prevBot, topPos, topPos);
+    }
+    currentAngle += angleStep;
+  }
+
+  return dxfString;
+}

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

@@ -0,0 +1,45 @@
+import * as A3D from "../../../abstract-3d";
+import { stlPlaneOfVertices } from "../stl-encoding";
+
+export function stlCylinder(
+  c: A3D.Cylinder,
+  _m: A3D.Material,
+  sides: number,
+  parentPos: A3D.Vec3,
+  parentRot: A3D.Vec3
+): string {
+  let dxfString = "";
+  const pos = A3D.vec3TransRot(c.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, c.rot ?? A3D.vec3Zero);
+  const vec3tr = (x: number, y: number, z: number): A3D.Vec3 => A3D.vec3TransRot(A3D.vec3(x, y, z), pos, rot);
+
+  const angleStep = (2 * Math.PI) / sides;
+  let currentAngle = 0;
+
+  const half = c.length / 2;
+  const topPos = vec3tr(0, half, 0);
+  const botPos = vec3tr(0, -half, 0);
+
+  const botVec3Array = Array<A3D.Vec3>();
+  const topVec3Array = Array<A3D.Vec3>();
+
+  for (let i = 0; i <= sides; i++) {
+    const x = Math.sin(currentAngle) * c.radius;
+    const z = Math.cos(currentAngle) * c.radius;
+    const currBot = vec3tr(x, -half, z);
+    const currTop = vec3tr(x, half, z);
+    botVec3Array.push(currBot);
+    topVec3Array.push(currTop);
+    if (i !== 0) {
+      const prevBot = botVec3Array[i - 1]!;
+      const prevTop = topVec3Array[i - 1]!;
+      dxfString +=
+        stlPlaneOfVertices(botPos, prevBot, currBot, currBot) +
+        stlPlaneOfVertices(topPos, prevTop, currTop, currTop) +
+        stlPlaneOfVertices(currBot, prevBot, prevTop, currTop);
+    }
+    currentAngle += angleStep;
+  }
+
+  return dxfString;
+}

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

@@ -0,0 +1,16 @@
+import * as A3D from "../../../abstract-3d";
+import { stlTriangle } from "../stl-encoding";
+
+export function stlPlane(p: A3D.Plane, _m: A3D.Material, parentPos: A3D.Vec3, parentRot: A3D.Vec3): string {
+  const half = A3D.vec2Scale(p.size, 0.5);
+  const pos = A3D.vec3TransRot(p.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, p.rot ?? A3D.vec3Zero);
+  const vec3tr = (x: number, y: number): A3D.Vec3 => A3D.vec3TransRot(A3D.vec3(x, y, 0), pos, rot);
+  const [v1, v2, v3, v4] = [
+    vec3tr(-half.x, -half.y),
+    vec3tr(half.x, -half.y),
+    vec3tr(half.x, half.y),
+    vec3tr(-half.x, half.y),
+  ];
+  return stlTriangle(v1, v2, v3) + stlTriangle(v3, v4, v1);
+}

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

@@ -0,0 +1,35 @@
+import * as A3D from "../../../abstract-3d";
+import { stlTriangle } from "../stl-encoding";
+
+const chunkSize = 3;
+
+export function stlPolygon(p: A3D.Polygon, _m: A3D.Material, parentPos: A3D.Vec3, parentRot: A3D.Vec3): string {
+  let polygonString = "";
+  const pos = A3D.vec3TransRot(p.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, p.rot ?? A3D.vec3Zero);
+  const points = p.points.map((p) => A3D.vec3TransRot(p, pos, rot));
+  let i = 0;
+  const nbrIterations = Math.floor(points.length / chunkSize);
+  for (i; i < nbrIterations; i++) {
+    const start = i * chunkSize;
+    polygonString += stlTriangle(points[start]!, points[start + 1]!, points[start + 2]!);
+  }
+
+  const usedPoints = i * chunkSize;
+
+  if (usedPoints <= points.length && chunkSize - 1 <= points.length) {
+    const lastArrayLength = points.length - usedPoints;
+    switch (lastArrayLength) {
+      case 1:
+        polygonString += stlTriangle(points[usedPoints - 1]!, points[usedPoints]!, points[0]!);
+        break;
+      case 2:
+        polygonString += stlTriangle(points[usedPoints]!, points[usedPoints + 1]!, points[0]!);
+        break;
+      default:
+        break;
+    }
+  }
+
+  return polygonString;
+}

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

@@ -0,0 +1,35 @@
+import * as A3D from "../../../abstract-3d";
+import { stlTriangle } from "../stl-encoding";
+
+const chunkSize = 3;
+
+export function stlShape(s: A3D.Shape, _m: A3D.Material, parentPos: A3D.Vec3, parentRot: A3D.Vec3): string {
+  let polygonString = "";
+  const pos = A3D.vec3TransRot(s.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, s.rot ?? A3D.vec3Zero);
+  const points = s.points.map((p) => A3D.vec3TransRot(A3D.vec3(p.x, p.y, 0), pos, rot));
+  let i = 0;
+  const nbrIterations = Math.floor(points.length / chunkSize);
+  for (i; i < nbrIterations; i++) {
+    const start = i * chunkSize;
+    polygonString += stlTriangle(points[start]!, points[start + 1]!, points[start + 2]!);
+  }
+
+  const usedPoints = i * chunkSize;
+
+  if (usedPoints <= points.length && chunkSize - 1 <= points.length) {
+    const lastArrayLength = points.length - usedPoints;
+    switch (lastArrayLength) {
+      case 1:
+        polygonString += stlTriangle(points[usedPoints - 1]!, points[usedPoints]!, points[0]!);
+        break;
+      case 2:
+        polygonString += stlTriangle(points[usedPoints]!, points[usedPoints + 1]!, points[0]!);
+        break;
+      default:
+        break;
+    }
+  }
+
+  return polygonString;
+}

package/src/renderers/stl/stl.ts

@@ -0,0 +1,33 @@
+import * as A3D from "../../abstract-3d";
+import { stlPlane } from "./stl-geometries/stl-plane";
+import { stlBox } from "./stl-geometries/stl-box";
+import { stlCylinder } from "./stl-geometries/stl-cylinder";
+import { stlCone } from "./stl-geometries/stl-cone";
+import { stlPolygon } from "./stl-geometries/stl-polygon";
+
+export const toStl = (scene: A3D.Scene): string =>
+  `solid
+` + scene.groups.reduce((a, c) => a + stlGroup(c, scene.center, scene.rotation ?? A3D.vec3Zero), "");
+
+function stlGroup(g: A3D.Group, parentPos: A3D.Vec3, parentRot: A3D.Vec3): string {
+  const pos = A3D.vec3TransRot(g.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, g.rot ?? A3D.vec3Zero);
+  return (
+    (g.meshes?.reduce((a, m) => {
+      switch (m.geometry.type) {
+        case "Plane":
+          return a + stlPlane(m.geometry, m.material, pos, rot);
+        case "Box":
+          return a + stlBox(m.geometry, m.material, pos, rot);
+        case "Cylinder":
+          return a + stlCylinder(m.geometry, m.material, 18, pos, rot);
+        case "Cone":
+          return a + stlCone(m.geometry, m.material, 18, pos, rot);
+        case "Polygon":
+          return a + stlPolygon(m.geometry, m.material, pos, rot);
+        default:
+          return a;
+      }
+    }, "") ?? "") + (g.groups?.reduce((a, c) => a + stlGroup(c, pos, rot), "") ?? "")
+  );
+}

package/src/renderers/svg/index.ts

@@ -0,0 +1,2 @@
+export * from "./svg";
+export type { EmbededImage } from "./svg-encoding";

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

@@ -0,0 +1,46 @@
+import { Vec2, vec2Add, vec2Scale } from "../../abstract-3d";
+
+export const svg = (width: number, height: number, children: string): string =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width.toFixed(0)} ${height.toFixed(
+    0
+  )}" width="${width.toFixed(0)}px" height="${height.toFixed(0)}px">${children} </svg>`;
+
+export const svgLine = (p1: Vec2, p2: Vec2, stroke: string, strokeWidth: number): string =>
+  `<line 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 const svgPolygon = (points: ReadonlyArray<Vec2>, fill: string, stroke: string, strokeWidth: number): string =>
+  `<polygon points="${points
+    .reduce((a, c) => (a += `${c.x.toFixed(0)},${c.y.toFixed(0)} `), "")
+    .slice(0, -1)}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`;
+
+export const svgText = (p: Vec2, text: string, rot: number, color: string, font: string, fontSize: number): string =>
+  `<text font-family="${font}" font-size="${fontSize}px" text-anchor="middle" alignment-baseline="middle" fill="${color}" transform="${translate(
+    p
+  )} ${rotate(rot)}">${text}</text>`;
+
+export type EmbededImage =
+  | { readonly type: "url"; readonly url: string }
+  | { readonly type: "svg"; readonly svg: string };
+
+export const svgImage = (p: Vec2, size: Vec2, rot: number, data: EmbededImage): string => {
+  const half = vec2Scale(size, 0.5);
+  return data.type === "url"
+    ? `<image x="${p.x.toFixed(0)}" y="${p.y.toFixed(0)}" transform="${rotate(rot)}" ${transformOrigin(
+        p,
+        half
+      )} width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" href="${data.url}" />`
+    : `<svg width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" transform="${translate(
+        vec2Add(p, half)
+      )} ${rotate(rot)} ${translate(vec2Scale(half, -1))}">${data.svg}</svg>
+
+  `;
+};
+
+const transformOrigin = (p: Vec2, half: Vec2): string =>
+  `transform-origin="${(p.x + half.x).toFixed(0)}px ${(p.y + half.y).toFixed(0)}px"`;
+
+const rotate = (rot: number): string => `rotate(${rot.toFixed(0)})`;
+
+const translate = (p: Vec2): string => `translate(${p.x.toFixed(0)}, ${p.y.toFixed(0)})`;

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

@@ -0,0 +1,10 @@
+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;
+
+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)";

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

@@ -0,0 +1,61 @@
+import * as A3D from "../../../abstract-3d";
+import { gray, black, zElem, zOrderElement } from "./shared";
+import { svgPolygon } from "../svg-encoding";
+import { rgbGray } from "../../shared";
+
+export function box(
+  b: A3D.Box,
+  point: (x: number, y: number) => A3D.Vec2,
+  color: string,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
+  stroke: number,
+  onlyStrokeFill: string,
+  parentPos: A3D.Vec3,
+  parentRot: A3D.Vec3
+): ReadonlyArray<zOrderElement> {
+  const half = A3D.vec3Scale(b.size, 0.5);
+  const pos = A3D.vec3TransRot(b.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, b.rot ?? A3D.vec3Zero);
+  const vec3tr = (p: A3D.Vec3): A3D.Vec3 => A3D.vec3TransRot(p, pos, rot);
+
+  const v1 = vec3tr(A3D.vec3(-half.x, -half.y, half.z));
+  const v2 = vec3tr(A3D.vec3(half.x, -half.y, half.z));
+  const v3 = vec3tr(A3D.vec3(half.x, half.y, half.z));
+  const v4 = vec3tr(A3D.vec3(-half.x, half.y, half.z));
+  const v5 = vec3tr(A3D.vec3(-half.x, -half.y, -half.z));
+  const v6 = vec3tr(A3D.vec3(half.x, -half.y, -half.z));
+  const v7 = vec3tr(A3D.vec3(half.x, half.y, -half.z));
+  const v8 = vec3tr(A3D.vec3(-half.x, half.y, -half.z));
+
+  const frontMean = A3D.vec3ZMean(v1, v2, v3, v4);
+  const backMean = A3D.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 = A3D.vec3ZMean(v8, v7, v3, v4);
+  const botMean = A3D.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 = A3D.vec3ZMean(v6, v2, v3, v7);
+  const leftMean = A3D.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 [strokeColor, fill, strokeUse] = onlyStroke
+    ? [grayScale ? gray : color, onlyStrokeFill, stroke]
+    : [black, grayScale ? rgbGray(color) : color, 0];
+
+  return [
+    zElem(svgPolygon(frontBackPoints, fill, strokeColor, strokeUse), frontBackMean),
+    zElem(svgPolygon(topBotPoints, fill, strokeColor, strokeUse), topBotMean),
+    zElem(svgPolygon(rightLeftPoints, fill, strokeColor, strokeUse), rightLeftMean),
+  ];
+}

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

@@ -0,0 +1,52 @@
+import * as A3D from "../../../abstract-3d";
+import { gray, stBW, zElem, zOrderElement, transparent } from "./shared";
+import { svgPolygon } from "../svg-encoding";
+import { rgbGray } from "../../shared";
+
+export function cone(
+  c: A3D.Cone,
+  point: (x: number, y: number) => A3D.Vec2,
+  color: string,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
+  _stroke: number,
+  onlyStrokeFill: string,
+  parentPos: A3D.Vec3,
+  parentRot: A3D.Vec3
+): ReadonlyArray<zOrderElement> {
+  const half = A3D.vec3(c.radius, c.length / 2, c.radius);
+  const pos = A3D.vec3TransRot(c.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, c.rot ?? A3D.vec3Zero);
+  const vec3tr = (p: A3D.Vec3): A3D.Vec3 => A3D.vec3TransRot(p, pos, rot);
+
+  const [stroke, fill] = onlyStroke
+    ? [grayScale ? gray : color, onlyStrokeFill]
+    : [transparent, grayScale ? rgbGray(color) : color];
+  const zOrderComponents = Array<zOrderElement>();
+
+  const sides = 8;
+  const angleStep = (2 * Math.PI) / sides;
+  let currentAngle = 0;
+
+  const topPos = vec3tr(A3D.vec3(0, half.y, 0));
+  const botVec3Array = Array<A3D.Vec3>();
+  for (let i = 0; i <= sides; i++) {
+    const currBot = vec3tr(
+      A3D.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(points, fill, stroke, stBW), A3D.vec3ZMean(currBot, prevBot, topPos)));
+    }
+    currentAngle += angleStep;
+  }
+
+  return zOrderComponents;
+}

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

@@ -0,0 +1,58 @@
+import * as A3D from "../../../abstract-3d";
+import { gray, stBW, transparent, zElem, zOrderElement } from "./shared";
+import { svgPolygon } from "../svg-encoding";
+import { rgbGray } from "../../shared";
+
+export function cylinder(
+  c: A3D.Cylinder,
+  point: (x: number, y: number) => A3D.Vec2,
+  color: string,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
+  _stroke: number,
+  onlyStrokeFill: string,
+  parentPos: A3D.Vec3,
+  parentRot: A3D.Vec3
+): ReadonlyArray<zOrderElement> {
+  const half = A3D.vec3(c.radius, c.length / 2, c.radius);
+  const pos = A3D.vec3TransRot(c.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, c.rot ?? A3D.vec3Zero);
+  const vec3tr = (p: A3D.Vec3): A3D.Vec3 => A3D.vec3TransRot(p, pos, rot);
+
+  const [stroke, fill] = onlyStroke
+    ? [grayScale ? gray : color, onlyStrokeFill]
+    : [transparent, grayScale ? rgbGray(color) : color];
+  const zOrderComponents = Array<zOrderElement>();
+
+  const sides = 8;
+  const angleStep = (2 * Math.PI) / sides;
+  let currentAngle = 0;
+
+  const botVec3Array = Array<A3D.Vec3>();
+  const topVec3Array = Array<A3D.Vec3>();
+  for (let i = 0; i <= sides; i++) {
+    const x = Math.sin(currentAngle) * c.radius;
+    const z = Math.cos(currentAngle) * c.radius;
+    const currBot = vec3tr(A3D.vec3(x, -half.y, z));
+    const currTop = vec3tr(A3D.vec3(x, half.y, z));
+    botVec3Array.push(currBot);
+    topVec3Array.push(currTop);
+    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),
+      ];
+      zOrderComponents.push(
+        zElem(svgPolygon(points, fill, stroke, stBW), A3D.vec3ZMean(currBot, prevBot, currTop, prevTop))
+      );
+    }
+    currentAngle += angleStep;
+  }
+
+  return zOrderComponents;
+}

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

@@ -0,0 +1,20 @@
+import * as A3D from "../../../abstract-3d";
+import { zElem, zOrderElement } from "./shared";
+import { svgLine } from "../svg-encoding";
+import { rgbGray } from "../../shared";
+
+export function line(
+  l: A3D.Line,
+  point: (x: number, y: number) => A3D.Vec2,
+  fill: string,
+  grayScale: boolean | undefined,
+  _stroke: number,
+  parentPos: A3D.Vec3,
+  parentRot: A3D.Vec3
+): ReadonlyArray<zOrderElement> {
+  const v1 = A3D.vec3TransRot(l.start, parentPos, parentRot);
+  const v2 = A3D.vec3TransRot(l.end, parentPos, parentRot);
+  return [
+    zElem(svgLine(point(v1.x, v1.y), point(v2.x, v2.y), grayScale ? rgbGray(fill) : fill, 0.5), A3D.vec3ZMean(v1, v2)),
+  ];
+}