svg/dxf render scenes

Author: Kinatzo

packages/abstract-3d/src/abstract-3d.ts

@@ -304,6 +304,8 @@ export const boundsZero: Bounds = bounds(0, 0);
 export const bounds2Zero: Bounds2 = bounds2(vec2Zero, vec2Zero);
 export const bounds3Zero: Bounds3 = bounds3(vec3Zero, vec3Zero);
 
+export const bounds2ToSize = (bounds: Bounds2): Vec2 => vec2(bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y);
+
 export const bounds3ToSize = (bounds: Bounds3): Vec3 =>
   vec3(bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y, bounds.max.z - bounds.min.z);
 
@@ -342,11 +344,27 @@ export function bounds3FromPosAndSize(pos: Vec3, size: Vec3): Bounds3 {
   return bounds3(vec3(pos.x - halfX, pos.y - halfY, pos.z - halfZ), vec3(pos.x + halfX, pos.y + halfY, pos.z + halfZ));
 }
 
-export const bounds2Merge = (a: Bounds2, b: Bounds2): Bounds2 => {
-  return bounds2(
-    vec2(Math.min(a.min.x, b.min.x), Math.min(a.min.y, b.min.y)),
-    vec2(Math.max(a.max.x, b.max.x), Math.max(a.max.y, b.max.y))
-  );
+export const bounds2Merge = (...bounds: ReadonlyArray<Bounds2>): Bounds2 => {
+  if (bounds.length === 0) {
+    return bounds2Zero;
+  }
+  const min = vec2Dupl(Number.MAX_VALUE) as { x: number; y: number };
+  const max = vec2Dupl(-Number.MAX_VALUE) as { x: number; y: number };
+  bounds.forEach((b) => {
+    if (b.min.x < min.x) {
+      min.x = b.min.x;
+    }
+    if (b.min.y < min.y) {
+      min.y = b.min.y;
+    }
+    if (b.max.x > max.x) {
+      max.x = b.max.x;
+    }
+    if (b.max.y > max.y) {
+      max.y = b.max.y;
+    }
+  });
+  return bounds2(min, max);
 };
 
 export const bounds3Merge = (...bounds: ReadonlyArray<Bounds3>): Bounds3 => {

packages/abstract-3d/src/renderers/dxf/dxf-encoding.ts

@@ -1,11 +1,20 @@
 /* eslint-disable max-lines */
 import { Vec3 } from "../../abstract-3d.js";
+import { generateUUID } from "three/src/math/MathUtils.js";
 
 //this doesn't have to be ordered, it can be completely random.
 //the only requirement is that all of them are unique. So handling
 //it like this makes the format more deterministic and less prone to
 //errors
-function dxfHandle(handleRef: { handle: number }): string {
+
+export function dxf(groups: string, center: Vec3, size: Vec3): string {
+  const id = generateUUID();
+  return dxfHeader(size, center, id) + groups + dxfFooter(id);
+}
+
+export type Handle = { handle: number };
+
+function dxfHandle(handleRef: Handle): string {
   return (++handleRef.handle).toString(16).toUpperCase();
 }
 
@@ -20,7 +29,7 @@ export const dxf3DFACE = (
   vec3: Vec3,
   vec4: Vec3,
   color: number,
-  handleRef: { handle: number }
+  handleRef: Handle
 ): string => `  0
 3DFACE
  5
@@ -110,7 +119,7 @@ ${fontSize}
 ${text}
 `;
 
-export const dxf3DLine = (start: Vec3, end: Vec3, color: string, handleRef: { handle: number }): string =>
+export const dxf3DLine = (start: Vec3, end: Vec3, color: string, handleRef: Handle): string =>
   `  0
 LINE
  5
@@ -135,13 +144,7 @@ ${dxfRound(end.y)}
 ${dxfRound(end.z)}
 `;
 
-export const dxf3DEllipse = (
-  center: Vec3,
-  major: Vec3,
-  minor: Vec3,
-  color: string,
-  handleRef: { handle: number }
-): string =>
+export const dxf3DEllipse = (center: Vec3, major: Vec3, minor: Vec3, color: string, handleRef: Handle): string =>
   `  0
 ELLIPSE
  5

packages/abstract-3d/src/renderers/dxf/dxf-geometries/dxf-cylinder.ts

@@ -13,14 +13,7 @@ import { color } from "../color.js";
 import { dxf3DFACE } from "../dxf-encoding.js";
 import { dxfPlane } from "./dxf-plane.js";
 
-export function dxfCylinder(
-  c: Cylinder,
-  m: Material,
-  sides: number,
-  parentPos: Vec3,
-  parentRot: Vec3,
-  handleRef: { handle: number }
-): string {
+export function dxfCylinder(c: Cylinder, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3, Handle): string {
   const angleStart = c.angleStart ?? 0.0;
   const angleLength = c.angleLength ?? Math.PI * 2;
   const angleEnd = angleStart + angleLength;

packages/abstract-3d/src/renderers/dxf/dxf.ts

@@ -9,52 +9,67 @@ import {
   group,
   bounds3ToSize,
   vec3,
-  boundsScene,
   rotationForCameraPos,
+  bounds3FromPosAndSize,
+  Bounds3,
+  bounds3Merge,
+  bounds3Center,
 } from "../../abstract-3d.js";
-import { dxfFooter, dxfHeader } from "./dxf-encoding.js";
+import { dxf, Handle } from "./dxf-encoding.js";
 import { dxfPlane } from "./dxf-geometries/dxf-plane.js";
 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 { generateUUID } from "three/src/math/MathUtils.js";
 import { Optional } from "../shared.js";
 
 const DEFAULT_CYLINDER_SIDE_COUNT = 18;
 
 export type DxfOrigin = "BottomLeftFront" | "Center";
 export type DxfOptions = { readonly view: View; readonly origin: DxfOrigin; readonly cylinderSideCount: number };
 
-export const render = (scene: Scene, options: Optional<DxfOptions>): string => {
+export function renderScenes(
+  scenes: ReadonlyArray<{ readonly scene: Scene; readonly options?: Optional<DxfOptions>; readonly pos: Vec3 }>
+): string {
+  let allGroups = "";
+  const allBounds = Array<Bounds3>();
+  const handle = { handle: 0x1000 };
+  for (const view of scenes) {
+    const { groups } = dxfGroups(view.scene, { ...view.options, view: undefined, origin: undefined }, view.pos, handle);
+    allGroups += groups;
+    allBounds.push(bounds3FromPosAndSize(view.scene.center_deprecated ?? vec3Zero, view.scene.size_deprecated));
+  }
+  const bounds = bounds3Merge(...allBounds);
+  return dxf(allGroups, bounds3Center(bounds), bounds3ToSize(bounds));
+}
+
+export const render = (scene: Scene, options?: Optional<DxfOptions>): string => {
+  const center = scene.center_deprecated ?? vec3Zero;
+  const bounds = bounds3FromPosAndSize(center, scene.size_deprecated);
+  const offset =
+    options?.origin === "Center" ? vec3Zero : vec3(Math.abs(bounds.min.x), Math.abs(bounds.min.y), -bounds.max.z);
+  const res = dxfGroups(scene, options, offset, { handle: 0x1000 });
+  return dxf(res.groups, center, scene.size_deprecated);
+};
+
+const dxfGroups = (
+  scene: Scene,
+  options: Optional<DxfOptions> | undefined,
+  offset: Vec3,
+  handleRef: Handle //make sure we start with a value higher than any other handle id's used in the header
+): { readonly groups: string } => {
   const opts: DxfOptions = {
-    view: options.view ?? "front",
-    origin: options.origin ?? "BottomLeftFront",
+    view: options?.view ?? "front",
+    origin: options?.origin ?? "BottomLeftFront",
     cylinderSideCount: DEFAULT_CYLINDER_SIDE_COUNT,
   };
   const unitRot = vec3RotCombine(rotationForCameraPos(opts.view), scene.rotation_deprecated ?? vec3Zero);
-  const boundingBox = boundsScene(scene);
-  const boundingBoxSize = bounds3ToSize(boundingBox);
-  const center = vec3Zero;
-  const offset =
-    opts.origin === "Center"
-      ? vec3Zero
-      : vec3(Math.abs(boundingBox.min.x), Math.abs(boundingBox.min.y), -boundingBox.max.z);
+  const center = scene.center_deprecated ?? vec3Zero;
   const groupRoot = group([], offset, vec3Zero, scene.groups);
-  const id = generateUUID();
-  const handleRef = { handle: 0x1000 }; //make sure we start with a value higher than any other handle id's used in the header
-  return (
-    dxfHeader(boundingBoxSize, center, id) + dxfGroup(groupRoot, center, unitRot, options, handleRef) + dxfFooter(id)
-  );
+  return { groups: dxfGroup(groupRoot, center, unitRot, opts, handleRef) };
 };
 
-function dxfGroup(
-  g: Group,
-  parentPos: Vec3,
-  parentRot: Vec3,
-  options: Optional<DxfOptions>,
-  handleRef: { handle: number }
-): string {
+function dxfGroup(g: Group, parentPos: Vec3, parentRot: Vec3, options: DxfOptions, handleRef: Handle): string {
   const pos = vec3TransRot(g.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, g.rot ?? vec3Zero);
   return (
@@ -67,30 +82,10 @@ function dxfGroup(
           return a + dxfBox(c.geometry, c.material, pos, rot, handleRef);
         }
         case "Cylinder": {
-          return (
-            a +
-            dxfCylinder(
-              c.geometry,
-              c.material,
-              options.cylinderSideCount ?? DEFAULT_CYLINDER_SIDE_COUNT,
-              pos,
-              rot,
-              handleRef
-            )
-          );
+          return a + dxfCylinder(c.geometry, c.material, options.cylinderSideCount, pos, rot, handleRef);
         }
         case "Cone": {
-          return (
-            a +
-            dxfCone(
-              c.geometry,
-              c.material,
-              options.cylinderSideCount ?? DEFAULT_CYLINDER_SIDE_COUNT,
-              pos,
-              rot,
-              handleRef
-            )
-          );
+          return a + dxfCone(c.geometry, c.material, options.cylinderSideCount, pos, rot, handleRef);
         }
         case "Polygon": {
           return a + dxfPolygon(c.geometry, c.material, pos, rot, handleRef);

packages/abstract-3d/src/renderers/svg/svg.ts

@@ -16,6 +16,11 @@ import {
   Material,
   rotationForCameraPos,
   sizeCenterForCameraPos,
+  Bounds2,
+  bounds2FromPosAndSize,
+  bounds2ToSize,
+  bounds2Merge,
+  vec2Zero,
 } from "../../abstract-3d.js";
 import { SvgOptions, zOrderElement } from "./svg-geometries/shared.js";
 import { box } from "./svg-geometries/svg-box.js";
@@ -29,10 +34,51 @@ import { cone } from "./svg-geometries/svg-cone.js";
 import { Optional } from "../shared.js";
 import { svg } from "./svg-encoding.js";
 
+export function renderScenes(
+  scenes: ReadonlyArray<{ readonly scene: Scene; readonly options?: Optional<SvgOptions>; readonly pos: Vec2 }>
+): {
+  readonly image: string;
+  readonly width: number;
+  readonly height: number;
+} {
+  const allElements = Array<zOrderElement>();
+  const bounds = Array<Bounds2>();
+  for (const view of scenes) {
+    const { elements, width, height } = renderInternal(
+      view.scene,
+      { ...view.options, view: undefined, rotation: undefined },
+      view.pos
+    );
+    allElements.push(...elements);
+    bounds.push(bounds2FromPosAndSize(view.pos, vec2(width, height)));
+  }
+  const size = bounds2ToSize(bounds2Merge(...bounds));
+  const image = svg(
+    size.x,
+    size.y,
+    allElements.reduce((a, { element }) => `${a} ${element}`, "")
+  );
+  return { image, width: size.x, height: size.y };
+}
+
 export function render(
   scene: Scene,
   options?: Optional<SvgOptions>
 ): { readonly image: string; readonly width: number; readonly height: number } {
+  const { elements, width, height } = renderInternal(scene, options, vec2Zero);
+  const image = svg(
+    width,
+    height,
+    elements.reduce((a, { element }) => `${a} ${element}`, "")
+  );
+  return { image, width, height };
+}
+
+function renderInternal(
+  scene: Scene,
+  options: Optional<SvgOptions> | undefined,
+  offset: Vec2
+): { readonly elements: ReadonlyArray<zOrderElement>; readonly width: number; readonly height: number } {
   const opts: SvgOptions = {
     view: options?.view ?? "front",
     stroke: options?.stroke ?? 2,
@@ -65,7 +111,7 @@ export function render(
   const centerAdj = vec3(center.x - opts.stroke * 0.75, center.y + opts.stroke * 0.75, center.z);
   const elements = Array<zOrderElement>();
   const point = (x: number, y: number): Vec2 =>
-    vec2(-centerAdj.x + unitHalfSize.x + x * factor, centerAdj.y + unitHalfSize.y - y * factor);
+    vec2(-centerAdj.x + unitHalfSize.x + x * factor + offset.x, centerAdj.y + unitHalfSize.y - y * factor + offset.y);
 
   for (const g of scene.groups) {
     const pos = vec3Rot(g.pos, unitPos, unitRot);
@@ -87,12 +133,7 @@ export function render(
     }
   }
 
-  const image = svg(
-    width,
-    height,
-    elements.reduce((a, { element }) => `${a} ${element}`, "")
-  );
-  return { image, width, height };
+  return { elements, width, height };
 }
 
 function svgGroup(