abstract-3d 1.2.1 → 1.3.0

package/src/abstract-3d.ts

@@ -427,6 +427,123 @@ export function bounds3FromVec3Array(vec3Array: ReadonlyArray<Vec3>): Bounds3 {
   return bounds3(min, max);
 }
 
+export function boundsScene(scene: Scene): Bounds3 {
+  const bounds: Array<Bounds3> = [];
+  for (const group of scene.groups) {
+    bounds.push(...boundsGroup(group, vec3Zero, vec3Zero))
+  }
+  return bounds3Merge(...bounds);
+}
+
+export function boundsGroup(group: Group, parentPos: Vec3, parentRot: Vec3): ReadonlyArray<Bounds3> {
+  const pos = vec3TransRot(group.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, group.rot ?? vec3Zero);
+  const bounds: Array<Bounds3> = [];
+
+  for (const childMesh of group.meshes ?? []) {
+    switch (childMesh.geometry.type) {
+      case "Sphere": {
+        bounds.push(boundsSphere(childMesh.geometry, pos, rot));
+        break;
+      }
+      case "Plane": {
+        bounds.push(boundsPlane(childMesh.geometry, pos, rot));
+        break;
+      }
+      case "Box": {
+        bounds.push(boundsBox(childMesh.geometry, pos, rot));
+        break;
+      }
+      case "Cylinder": {
+        bounds.push(boundsCylinder(childMesh.geometry, pos, rot));
+        break;
+      }
+      case "Cone": {
+        bounds.push(boundsCone(childMesh.geometry, pos, rot));
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  for (const childGroup of group.groups ?? []) {
+    bounds.push(...boundsGroup(childGroup, pos, rot));
+  }
+  return bounds;
+}
+
+export function boundsSphere(s: Sphere, parentPos: Vec3, parentRot: Vec3): Bounds3 {
+  const pos = vec3TransRot(s.pos, parentPos, parentRot);
+  const half = vec3(s.radius, s.radius, s.radius);
+  return bounds3(vec3Sub(pos, half), vec3Add(pos, half));
+}
+
+export function boundsPlane(p: Plane, parentPos: Vec3, parentRot: Vec3): Bounds3 {
+  const pos = vec3TransRot(p.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
+  const half = vec3(p.size.x / 2, p.size.y / 2, 0);
+  const points = [
+    vec3(-half.x, half.y, half.z),
+    vec3(half.x, half.y, half.z),
+    vec3(-half.x, half.y, -half.z),
+    vec3(half.x, half.y, -half.z),
+    vec3(-half.x, -half.y, half.z),
+    vec3(half.x, -half.y, half.z),
+    vec3(-half.x, -half.y, -half.z),
+    vec3(half.x, -half.y, -half.z),
+  ].map((p) => vec3Add(pos, vec3Rot(p, vec3Zero, rot)));
+  return bounds3FromVec3Array(points);
+}
+
+export function boundsBox(b: Box, parentPos: Vec3, parentRot: Vec3): Bounds3 {
+  const pos = vec3TransRot(b.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, b.rot ?? vec3Zero);
+  const half = vec3Scale(b.size, 0.5);
+  const points = [
+    vec3(-half.x, half.y, half.z),
+    vec3(half.x, half.y, half.z),
+    vec3(-half.x, half.y, -half.z),
+    vec3(half.x, half.y, -half.z),
+    vec3(-half.x, -half.y, half.z),
+    vec3(half.x, -half.y, half.z),
+    vec3(-half.x, -half.y, -half.z),
+    vec3(half.x, -half.y, -half.z),
+  ].map((p) => vec3Add(pos, vec3Rot(p, vec3Zero, rot)));
+  return bounds3FromVec3Array(points);
+}
+
+export function boundsCylinder(c: Cylinder, parentPos: Vec3, parentRot: Vec3): Bounds3 {
+  const pos = vec3TransRot(c.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
+  const half = vec3(c.radius, c.length / 2, c.radius);
+  const points = [
+    vec3(-half.x, half.y, half.z),
+    vec3(half.x, half.y, half.z),
+    vec3(-half.x, half.y, -half.z),
+    vec3(half.x, half.y, -half.z),
+    vec3(-half.x, -half.y, half.z),
+    vec3(half.x, -half.y, half.z),
+    vec3(-half.x, -half.y, -half.z),
+    vec3(half.x, -half.y, -half.z),
+  ].map((p) => vec3Add(pos, vec3Rot(p, vec3Zero, rot)));
+  return bounds3FromVec3Array(points);
+}
+
+export function boundsCone(c: Cone, parentPos: Vec3, parentRot: Vec3): Bounds3 {
+  const pos = vec3TransRot(c.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
+  const half = vec3(c.radius, c.length / 2, c.radius);
+  const points = [
+    vec3(0, half.y, 0),
+    vec3(-half.x, -half.y, half.z),
+    vec3(half.x, -half.y, half.z),
+    vec3(-half.x, -half.y, -half.z),
+    vec3(half.x, -half.y, -half.z),
+  ].map((p) => vec3Add(pos, vec3Rot(p, vec3Zero, rot)));
+  return bounds3FromVec3Array(points);
+}
+
 // -- Transformations
 
 const quaternion1 = new Quaternion();

package/src/renderers/dxf/dxf.ts

@@ -9,6 +9,7 @@ import {
   group,
   bounds3ToSize,
   vec3,
+  boundsScene,
 } from "../../abstract-3d.js";
 import { dxfFooter, dxfHeader } from "./dxf-encoding.js";
 import { dxfPlane } from "./dxf-geometries/dxf-plane.js";
@@ -16,7 +17,7 @@ import { dxfBox } from "./dxf-geometries/dxf-box.js";
 import { dxfCylinder } from "./dxf-geometries/dxf-cylinder.js";
 import { dxfCone } from "./dxf-geometries/dxf-cone.js";
 import { dxfPolygon } from "./dxf-geometries/dxf-polygon.js";
-import { boundsScene, Optional, rotationForCameraPos } from "../shared.js";
+import { Optional, rotationForCameraPos } from "../shared.js";
 
 export type DxfOrigin = "BottomLeftFront" | "Center";
 export type DxfOptions = { readonly view: View; readonly origin: DxfOrigin };

package/src/renderers/shared.ts

@@ -211,121 +211,4 @@ export function shade(p: number, from: string, to?: string): string | undefined
   );
 }
 
-export function boundsScene(scene: Scene): Bounds3 {
-  const bounds: Array<Bounds3> = [];
-  for (const group of scene.groups) {
-    bounds.push(...boundsGroup(group, vec3Zero, vec3Zero))
-  }
-  return bounds3Merge(...bounds);
-}
-
-function boundsGroup(group: Group, parentPos: Vec3, parentRot: Vec3): ReadonlyArray<Bounds3> {
-  const pos = vec3TransRot(group.pos, parentPos, parentRot);
-  const rot = vec3RotCombine(parentRot, group.rot ?? vec3Zero);
-  const bounds: Array<Bounds3> = [];
-
-  for (const childMesh of group.meshes ?? []) {
-    switch (childMesh.geometry.type) {
-      case "Sphere": {
-        //bounds.push(boundsSphere(childMesh.geometry, pos, rot));
-        break;
-      }
-      case "Plane": {
-        bounds.push(boundsPlane(childMesh.geometry, pos, rot));
-        break;
-      }
-      case "Box": {
-        bounds.push(boundsBox(childMesh.geometry, pos, rot));
-        break;
-      }
-      case "Cylinder": {
-        bounds.push(boundsCylinder(childMesh.geometry, pos, rot));
-        break;
-      }
-      case "Cone": {
-        bounds.push(boundsCone(childMesh.geometry, pos, rot));
-        break;
-      }
-      default:
-        break;
-    }
-  }
-
-  for (const childGroup of group.groups ?? []) {
-    bounds.push(...boundsGroup(childGroup, pos, rot));
-  }
-  return bounds;
-}
-
-function boundsSphere(s: Sphere, parentPos: Vec3, parentRot: Vec3): Bounds3 {
-  const pos = vec3TransRot(s.pos, parentPos, parentRot);
-  const half = vec3(s.radius, s.radius, s.radius);
-  return bounds3(vec3Sub(pos, half), vec3Add(pos, half));
-}
-
-function boundsPlane(p: Plane, parentPos: Vec3, parentRot: Vec3): Bounds3 {
-  const pos = vec3TransRot(p.pos, parentPos, parentRot);
-  const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
-  const half = vec3(p.size.x / 2, p.size.y / 2, 0);
-  const points = [
-    vec3(-half.x, half.y, half.z),
-    vec3(half.x, half.y, half.z),
-    vec3(-half.x, half.y, -half.z),
-    vec3(half.x, half.y, -half.z),
-    vec3(-half.x, -half.y, half.z),
-    vec3(half.x, -half.y, half.z),
-    vec3(-half.x, -half.y, -half.z),
-    vec3(half.x, -half.y, -half.z),
-  ].map((p) => vec3Add(pos, vec3Rot(p, vec3Zero, rot)));
-  return bounds3FromVec3Array(points);
-}
-
-function boundsBox(b: Box, parentPos: Vec3, parentRot: Vec3): Bounds3 {
-  const pos = vec3TransRot(b.pos, parentPos, parentRot);
-  const rot = vec3RotCombine(parentRot, b.rot ?? vec3Zero);
-  const half = vec3Scale(b.size, 0.5);
-  const points = [
-    vec3(-half.x, half.y, half.z),
-    vec3(half.x, half.y, half.z),
-    vec3(-half.x, half.y, -half.z),
-    vec3(half.x, half.y, -half.z),
-    vec3(-half.x, -half.y, half.z),
-    vec3(half.x, -half.y, half.z),
-    vec3(-half.x, -half.y, -half.z),
-    vec3(half.x, -half.y, -half.z),
-  ].map((p) => vec3Add(pos, vec3Rot(p, vec3Zero, rot)));
-  return bounds3FromVec3Array(points);
-}
-
-function boundsCylinder(c: Cylinder, parentPos: Vec3, parentRot: Vec3): Bounds3 {
-  const pos = vec3TransRot(c.pos, parentPos, parentRot);
-  const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
-  const half = vec3(c.radius, c.length / 2, c.radius);
-  const points = [
-    vec3(-half.x, half.y, half.z),
-    vec3(half.x, half.y, half.z),
-    vec3(-half.x, half.y, -half.z),
-    vec3(half.x, half.y, -half.z),
-    vec3(-half.x, -half.y, half.z),
-    vec3(half.x, -half.y, half.z),
-    vec3(-half.x, -half.y, -half.z),
-    vec3(half.x, -half.y, -half.z),
-  ].map((p) => vec3Add(pos, vec3Rot(p, vec3Zero, rot)));
-  return bounds3FromVec3Array(points);
-}
-
-function boundsCone(c: Cone, parentPos: Vec3, parentRot: Vec3): Bounds3 {
-  const pos = vec3TransRot(c.pos, parentPos, parentRot);
-  const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
-  const half = vec3(c.radius, c.length / 2, c.radius);
-  const points = [
-    vec3(0, half.y, 0),
-    vec3(-half.x, -half.y, half.z),
-    vec3(half.x, -half.y, half.z),
-    vec3(-half.x, -half.y, -half.z),
-    vec3(half.x, -half.y, -half.z),
-  ].map((p) => vec3Add(pos, vec3Rot(p, vec3Zero, rot)));
-  return bounds3FromVec3Array(points);
-}
-
 export type Optional<T> = { readonly [K in keyof T]?: T[K] };

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

@@ -11,20 +11,20 @@ export const svgLine = (p1: Vec2, p2: Vec2, stroke: string, strokeWidth: number)
     0
   )}" stroke="${stroke}" stroke-width="${strokeWidth}" />`;
 
-export function svgPolygon(factor: number, rot: Vec3, points: ReadonlyArray<Vec2>, fill: string, stroke: string, strokeWidth: number, holes?: ReadonlyArray<Hole>): string {
+export function svgPolygon(factor: number, rot: Vec3, points: ReadonlyArray<Vec2>, fill: string, opacity: number, stroke: string, strokeWidth: number, holes?: ReadonlyArray<Hole>): string {
   const bounds = bounds2FromVec2Array(points);
   const size = vec2Sub(bounds.max, bounds.min);
-  const [mask, maskID] = svgHoleMask(factor, rot, size, holes ?? []);
+  const [mask, maskAttribute] = svgHoleMask(factor, rot, size, holes ?? []);
   const pol = `<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}" mask="url(#${maskID})" />`;
+    .slice(0, -1)}" fill="${fill}" fill-opacity="${opacity.toFixed(1)}" stroke="${stroke}" stroke-width="${strokeWidth}" ${maskAttribute}/>`;
   return mask + pol;
 }
 
-export function svgCircle(radius: number, rot: Vec3, pos: Vec2, fill: string, stroke: string, strokeWidth: number, factor: number, holes?: ReadonlyArray<Hole>): string {
+export function svgCircle(radius: number, rot: Vec3, pos: Vec2, fill: string, opacity: number, stroke: string, strokeWidth: number, factor: number, holes?: ReadonlyArray<Hole>): string {
   const size = vec2Scale(vec2(radius, radius), 2);
-  const [mask, maskID] = svgHoleMask(factor, rot, size, holes ?? []);
-  const cir = `<circle r="${radius.toFixed(0)}" cx="${pos.x.toFixed(0)}" cy="${pos.y.toFixed(0)}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" mask="url(#${maskID})" />`;
+  const [mask, maskAttribute] = svgHoleMask(factor, rot, size, holes ?? []);
+  const cir = `<circle 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;
 }
 
@@ -35,11 +35,16 @@ export const svgCircle2 = (radius: number, pos: Vec2, fill: string, stroke: stri
 
 function svgHoleMask(factor: number, 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">
+  return holes.length > 0 ? [
+    `<mask id="${id}" mask-type="luminance" maskContentUnits="objectBoundingBox">
       <rect x="0" y="0" width="1" height="1" fill="white" />
       ${svgMaskHoles(factor, rot, size, holes ?? [])}
-    </mask>\n` : "", id];
+    </mask>\n`,
+    `mask="url(#${id}) "`
+  ] : [
+    "",
+    ""
+  ];
 }
 
 function svgMaskHoles(factor: number, rot: Vec3, size: Vec2, holes: ReadonlyArray<Hole>): string {
@@ -56,7 +61,7 @@ function svgMaskHoles(factor: number, rot: Vec3, size: Vec2, holes: ReadonlyArra
       case "SquareHole":
         const holeSizeRotated = vec3Rot(vec3(hole.size.x, hole.size.y, 0), vec3Zero, rot);
         const holeSizeAbs = vec2(Math.abs(holeSizeRotated.x), Math.abs(holeSizeRotated.y));
-        const holeSize = vec2Scale(holeSizeAbs, factor * 2);
+        const holeSize = vec2Scale(holeSizeAbs, factor);
         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;

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

@@ -8,6 +8,7 @@ import {
   vec3Zero,
   vec3,
   vec3ZMean,
+  Material,
 } from "../../../abstract-3d.js";
 import { gray, black, zElem, zOrderElement, SvgOptions } from "./shared.js";
 import { svgPolygon } from "../svg-encoding.js";
@@ -16,7 +17,7 @@ import { rgbGrayScale } from "../../shared.js";
 export function box(
   b: Box,
   point: (x: number, y: number) => Vec2,
-  color: string,
+  material: Material,
   opts: SvgOptions,
   parentPos: Vec3,
   parentRot: Vec3,
@@ -57,13 +58,15 @@ export function box(
       ? [[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.onlyStroke
     ? [opts.grayScale ? gray : color, opts.onlyStrokeFill, opts.stroke]
     : [black, opts.grayScale ? rgbGrayScale(color) : color, 0];
 
   return [
-    zElem(svgPolygon(factor, rot, frontBackPoints, fill, strokeColor, strokeUse, b.holes), frontBackMean),
-    zElem(svgPolygon(factor, rot, topBotPoints, fill, strokeColor, strokeUse), topBotMean),
-    zElem(svgPolygon(factor, rot, rightLeftPoints, fill, strokeColor, strokeUse), rightLeftMean),
+    zElem(svgPolygon(factor, rot, frontBackPoints, fill, opacity, strokeColor, strokeUse, b.holes), frontBackMean),
+    zElem(svgPolygon(factor, rot, topBotPoints, fill, opacity, strokeColor, strokeUse), topBotMean),
+    zElem(svgPolygon(factor, rot, rightLeftPoints, fill, opacity, strokeColor, strokeUse), rightLeftMean),
   ];
 }

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

@@ -8,6 +8,7 @@ import {
   vec3Zero,
   vec3ZMean,
   equals,
+  Material,
 } from "../../../abstract-3d.js";
 import { gray, stBW, zElem, zOrderElement, transparent, SvgOptions } from "./shared.js";
 import { svgCircle, svgPolygon } from "../svg-encoding.js";
@@ -16,7 +17,7 @@ import { rgbGrayScale } from "../../shared.js";
 export function cone(
   c: Cone,
   point: (x: number, y: number) => Vec2,
-  color: string,
+  material: Material,
   opts: SvgOptions,
   parentPos: Vec3,
   parentRot: Vec3,
@@ -27,6 +28,8 @@ export function cone(
   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.onlyStroke
     ? [opts.grayScale ? gray : color, opts.onlyStrokeFill]
     : [transparent, opts.grayScale ? rgbGrayScale(color) : color];
@@ -49,7 +52,7 @@ export function cone(
         point(topPos.x, topPos.y),
         point(topPos.x, topPos.y),
       ];
-      zOrderComponents.push(zElem(svgPolygon(factor, rot, points, fill, stroke, stBW), vec3ZMean(currBot, prevBot, topPos)));
+      zOrderComponents.push(zElem(svgPolygon(factor, rot, points, fill, opacity, stroke, stBW), vec3ZMean(currBot, prevBot, topPos)));
     }
     currentAngle += angleStep;
   }
@@ -59,7 +62,7 @@ export function cone(
   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(factor * c.radius, rot, point(cylBottom.x, cylBottom.y), fill, stroke, stBW, factor), cylBottom.z)
+      zElem(svgCircle(factor * c.radius, rot, point(cylBottom.x, cylBottom.y), fill, opacity, stroke, stBW, factor), cylBottom.z)
     );
   }
 

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

@@ -8,6 +8,7 @@ import {
   vec3Zero,
   vec3ZMean,
   equals,
+  Material,
 } from "../../../abstract-3d.js";
 import { gray, stBW, SvgOptions, transparent, zElem, zOrderElement } from "./shared.js";
 import { svgCircle, svgPolygon } from "../svg-encoding.js";
@@ -16,7 +17,7 @@ import { rgbGrayScale } from "../../shared.js";
 export function cylinder(
   c: Cylinder,
   point: (x: number, y: number) => Vec2,
-  color: string,
+  material: Material,
   opts: SvgOptions,
   parentPos: Vec3,
   parentRot: Vec3,
@@ -27,6 +28,8 @@ export function cylinder(
   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.onlyStroke
     ? [opts.grayScale ? gray : color, opts.onlyStrokeFill]
     : [transparent, opts.grayScale ? rgbGrayScale(color) : color];
@@ -56,7 +59,7 @@ export function cylinder(
         point(currTop.x, currTop.y),
       ];
       zOrderComponents.push(
-        zElem(svgPolygon(factor, rot, points, fill, stroke, stBW), vec3ZMean(currBot, prevBot, currTop, prevTop))
+        zElem(svgPolygon(factor, rot, points, fill, opacity, stroke, stBW), vec3ZMean(currBot, prevBot, currTop, prevTop))
       );
     }
     currentAngle += angleStep;
@@ -68,7 +71,7 @@ export function cylinder(
     if (equals(circleTop.x, circleBottom.x, 0.1) && equals(circleTop.y, circleBottom.y, 0.1)) {
       const circlePos = circleTop.z > circleBottom.z ? circleTop : circleBottom;
       zOrderComponents.push(
-        zElem(svgCircle(factor * c.radius, rot, point(circlePos.x, circlePos.y), fill, stroke, stBW, factor, c.holes), circlePos.z)
+        zElem(svgCircle(factor * c.radius, rot, point(circlePos.x, circlePos.y), fill, opacity, stroke, stBW, factor, c.holes), circlePos.z)
       );
     }
   }

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

@@ -59,7 +59,7 @@ export function plane(
   const [strokeColor, fill, strokeThickness] = opts.onlyStroke
     ? [opts.grayScale ? gray : material.normal, opts.onlyStrokeFill, opts.stroke]
     : [black, opts.grayScale ? rgbGrayScale(material.normal) : material.normal, 0];
-  return [zElem(svgPolygon(factor, rot, points, fill, strokeColor, strokeThickness, holes), vec3ZMean(v1, v2, v3, v4))];
+  return [zElem(svgPolygon(factor, rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness, holes), vec3ZMean(v1, v2, v3, v4))];
 }
 
 const rawSvgPrefix = "data:image/svg+xml,";

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

@@ -1,4 +1,4 @@
-import { Polygon, vec3ZMean, Vec3, Vec2, vec3TransRot, vec3RotCombine, vec3Zero } from "../../../abstract-3d.js";
+import { Polygon, vec3ZMean, Vec3, Vec2, vec3TransRot, vec3RotCombine, vec3Zero, Material } from "../../../abstract-3d.js";
 import { gray, zElem, zOrderElement, transparent, SvgOptions } from "./shared.js";
 import { svgPolygon } from "../svg-encoding.js";
 import { rgbGrayScale } from "../../shared.js";
@@ -7,7 +7,7 @@ export function polygon(
   p: Polygon,
   point: (x: number, y: number) => Vec2,
   factor: number,
-  color: string,
+  material: Material,
   opts: SvgOptions,
   parentPos: Vec3,
   parentRot: Vec3
@@ -16,8 +16,9 @@ export function polygon(
   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.onlyStroke
     ? [opts.grayScale ? gray : color, opts.onlyStrokeFill, opts.stroke]
     : [transparent, opts.grayScale ? rgbGrayScale(color) : color, 0];
-  return [zElem(svgPolygon(factor, rot, points, fill, strokeColor, strokeThickness), vec3ZMean(...rotatedPoints))];
+  return [zElem(svgPolygon(factor, rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness), vec3ZMean(...rotatedPoints))];
 }

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

@@ -1,4 +1,4 @@
-import { vec3ZMean, Vec3, Vec2, vec3TransRot, vec3RotCombine, Shape, vec3, vec3Zero } from "../../../abstract-3d.js";
+import { vec3ZMean, Vec3, Vec2, vec3TransRot, vec3RotCombine, Shape, vec3, vec3Zero, Material } from "../../../abstract-3d.js";
 import { gray, zElem, zOrderElement, transparent, SvgOptions } from "./shared.js";
 import { svgPolygon } from "../svg-encoding.js";
 import { rgbGrayScale } from "../../shared.js";
@@ -7,7 +7,7 @@ export function shape(
   s: Shape,
   point: (x: number, y: number) => Vec2,
   factor: number,
-  color: string,
+  material: Material,
   opts: SvgOptions,
   parentPos: Vec3,
   parentRot: Vec3
@@ -16,8 +16,9 @@ export function shape(
   const rot = vec3RotCombine(parentRot, s.rot ?? vec3Zero);
   const rotatedPoints = s.points.map((p) => vec3TransRot(vec3(p.x, p.y, 0), pos, rot));
   const points = rotatedPoints.map(({ x, y }) => point(x, y));
+  const color = material.normal;
   const [strokeColor, fill] = opts.onlyStroke
     ? [opts.grayScale ? gray : color, opts.onlyStrokeFill]
     : [transparent, opts.grayScale ? rgbGrayScale(color) : color];
-  return [zElem(svgPolygon(factor, rot, points, fill, strokeColor, 0), vec3ZMean(...rotatedPoints))];
+  return [zElem(svgPolygon(factor, rot, points, fill, material.opacity ?? 1.0, strokeColor, 0), vec3ZMean(...rotatedPoints))];
 }

package/src/renderers/svg/svg.ts

@@ -123,24 +123,23 @@ function svgMesh(
   material: Material,
   opts: SvgOptions
 ): ReadonlyArray<zOrderElement> {
-  const color = material.normal;
   switch (mesh.geometry.type) {
     case "Box":
-      return box(mesh.geometry, point, color, opts, parentPos, parentRot, factor);
+      return box(mesh.geometry, point, material, opts, parentPos, parentRot, factor);
     case "Plane":
       return plane(mesh.geometry, point, factor, material, opts, parentPos, parentRot);
     case "Cylinder":
-      return cylinder(mesh.geometry, point, color, opts, parentPos, parentRot, factor);
+      return cylinder(mesh.geometry, point, material, opts, parentPos, parentRot, factor);
     case "Cone":
-      return cone(mesh.geometry, point, color, opts, parentPos, parentRot, factor);
+      return cone(mesh.geometry, point, material, opts, parentPos, parentRot, factor);
     case "Line":
-      return line(mesh.geometry, point, color, opts, parentPos, parentRot);
+      return line(mesh.geometry, point, material.normal, opts, parentPos, parentRot);
     case "Polygon":
-      return polygon(mesh.geometry, point, factor, color, opts, parentPos, parentRot);
+      return polygon(mesh.geometry, point, factor, material, opts, parentPos, parentRot);
     case "Shape":
-      return shape(mesh.geometry, point, factor, color, opts, parentPos, parentRot);
+      return shape(mesh.geometry, point, factor, material, opts, parentPos, parentRot);
     case "Text":
-      return text(mesh.geometry, point, color, opts, parentPos, parentRot, factor);
+      return text(mesh.geometry, point, material.normal, opts, parentPos, parentRot, factor);
     case "Tube":
     case "Sphere":
       return [];