abstract-3d 0.1.2

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

@@ -0,0 +1,44 @@
+import * as A3D from "../../../abstract-3d";
+import { gray, black, zElem, zOrderElement } from "./shared";
+import { EmbededImage, svgImage, svgPolygon } from "../svg-encoding";
+import { rgbGray } from "../../shared";
+
+export function plane(
+  p: A3D.Plane,
+  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,
+  view: A3D.View,
+  image?: EmbededImage | undefined
+): ReadonlyArray<zOrderElement> {
+  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 = (point: A3D.Vec3): A3D.Vec3 => A3D.vec3TransRot(point, pos, rot);
+
+  const v2 = vec3tr(A3D.vec3(half.x, -half.y, 0));
+  const v4 = vec3tr(A3D.vec3(-half.x, half.y, 0));
+
+  if (view === "front" && image) {
+    const [leftX, rightX] = v4.x > v2.x ? [v2.x, v4.x] : [v4.x, v2.x];
+    const [bottomY, topY] = v4.y > v2.y ? [v4.y, v2.y] : [v2.y, v4.y];
+    const bottomLeft = point(leftX, bottomY);
+    const topRight = point(rightX, topY);
+    const degrees = A3D.isZero(rot.z, 0.1) ? 0 : rot.z * (-180 / Math.PI);
+    const img = svgImage(bottomLeft, A3D.vec2(topRight.x - bottomLeft.x, topRight.y - bottomLeft.y), degrees, image);
+    return [zElem(img, (v2.z + v4.z) / 2)];
+  }
+
+  const v1 = vec3tr(A3D.vec3(-half.x, -half.y, 0));
+  const v3 = vec3tr(A3D.vec3(half.x, half.y, 0));
+  const points = [point(v1.x, v1.y), point(v2.x, v2.y), point(v3.x, v3.y), point(v4.x, v4.y)];
+  const [stroke, fill, strokeThickness] = onlyStroke
+    ? [grayScale ? gray : color, onlyStrokeFill, _stroke]
+    : [black, grayScale ? rgbGray(color) : color, 0];
+  return [zElem(svgPolygon(points, fill, stroke, strokeThickness), A3D.vec3ZMean(v1, v2, v3, v4))];
+}

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

@@ -0,0 +1,25 @@
+import { Polygon, vec3ZMean, Vec3, Vec2, vec3TransRot, vec3RotCombine, vec3Zero } from "../../../abstract-3d";
+import { gray, zElem, zOrderElement, transparent } from "./shared";
+import { svgPolygon } from "../svg-encoding";
+import { rgbGray } from "../../shared";
+
+export function polygon(
+  p: Polygon,
+  point: (x: number, y: number) => Vec2,
+  color: string,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
+  onlyStrokeFill: string,
+  _stroke: number,
+  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 [strokeColor, fill] = onlyStroke
+    ? [grayScale ? gray : color, onlyStrokeFill]
+    : [transparent, grayScale ? rgbGray(color) : color];
+  return [zElem(svgPolygon(points, fill, strokeColor, 0), vec3ZMean(...rotatedPoints))];
+}

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

@@ -0,0 +1,25 @@
+import { vec3ZMean, Vec3, Vec2, vec3TransRot, vec3RotCombine, Shape, vec3, vec3Zero } from "../../../abstract-3d";
+import { gray, zElem, zOrderElement, transparent } from "./shared";
+import { svgPolygon } from "../svg-encoding";
+import { rgbGray } from "../../shared";
+
+export function shape(
+  s: Shape,
+  point: (x: number, y: number) => Vec2,
+  color: string,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
+  onlyStrokeFill: string,
+  _stroke: number,
+  parentPos: Vec3,
+  parentRot: Vec3
+): ReadonlyArray<zOrderElement> {
+  const pos = vec3TransRot(s.pos, parentPos, parentRot);
+  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 [strokeColor, fill] = onlyStroke
+    ? [grayScale ? gray : color, onlyStrokeFill]
+    : [transparent, grayScale ? rgbGray(color) : color];
+  return [zElem(svgPolygon(points, fill, strokeColor, 0), vec3ZMean(...rotatedPoints))];
+}

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

@@ -0,0 +1,28 @@
+import * as A3D from "../../../abstract-3d";
+import { zElem, zOrderElement } from "./shared";
+import { svgText } from "../svg-encoding";
+
+export function text(
+  t: A3D.Text,
+  point: (x: number, y: number) => A3D.Vec2,
+  fill: string,
+  parentPos: A3D.Vec3,
+  parentRot: A3D.Vec3,
+  factor: number,
+  font: string
+): ReadonlyArray<zOrderElement> {
+  const pos = A3D.vec3TransRot(t.pos, parentPos, parentRot);
+  const rot = A3D.vec3RotCombine(parentRot, t.rot ?? A3D.vec3Zero);
+  const texts = Array<zOrderElement>();
+  const degrees = A3D.isZero(rot.z, 0.1) ? 0 : rot.z * (-180 / Math.PI);
+
+  const fontSize = t.fontSize * factor;
+  const strings = t.text.split("\n");
+  let posY = strings.length === 1 ? 0 : (fontSize * strings.length - fontSize) / 2;
+  for (const s of strings) {
+    texts.push(zElem(svgText(point(pos.x, pos.y + posY), s, degrees, fill, font, fontSize), pos.z));
+    posY -= fontSize * 1.2;
+  }
+
+  return texts;
+}

package/src/renderers/svg/svg.ts

@@ -0,0 +1,201 @@
+import { exhaustiveCheck } from "ts-exhaustive-check";
+import {
+  vec2,
+  vec3Scale,
+  Scene,
+  View,
+  Vec3,
+  Mesh,
+  vec3Rot,
+  vec3Zero,
+  vec3RotCombine,
+  vec3,
+  Vec2,
+  Group,
+  vec3TransRot,
+} from "../../abstract-3d";
+import { zOrderElement } from "./svg-geometries/shared";
+import { box } from "./svg-geometries/svg-box";
+import { cylinder } from "./svg-geometries/svg-cylinder";
+import { line } from "./svg-geometries/svg-line";
+import { plane } from "./svg-geometries/svg-plane";
+import { shape } from "./svg-geometries/svg-shape";
+import { polygon } from "./svg-geometries/svg-polygon";
+import { text } from "./svg-geometries/svg-text";
+import { cone } from "./svg-geometries/svg-cone";
+import { rotationForCameraPos, sizeCenterForCameraPos } from "../shared";
+import { EmbededImage, svg } from "./svg-encoding";
+
+export function toSvg(
+  scene: Scene,
+  view: View,
+  stroke: number,
+  scale?: { readonly size: number; readonly scaleByWidth: boolean },
+  onlyStroke?: boolean,
+  grayScale?: boolean,
+  onlyStrokeFill: string = "rgba(255,255,255,0)",
+  font: string = "",
+  buffers?: Record<string, string>
+): { readonly image: string; readonly width: number; readonly height: number } {
+  const factor = scale
+    ? scale.size /
+      (scale.scaleByWidth
+        ? view === "right" || view === "left"
+          ? scene.size.z
+          : scene.size.x
+        : view === "top" || view === "bottom"
+        ? scene.size.z
+        : scene.size.y)
+    : 1;
+  const unitRot = vec3RotCombine(rotationForCameraPos(view), scene.rotation ?? vec3Zero);
+  const unitPos = vec3Rot(scene.center, vec3Zero, scene.rotation ?? vec3Zero);
+  const [size, center] = sizeCenterForCameraPos(scene.size, unitPos, scene.dimensions?.bounds, unitRot, view, factor);
+  const unitHalfSize = vec3Scale(size, 0.5);
+  const centerAdj = vec3(center.x - stroke * 0.75, center.y + stroke * 0.75, center.z);
+  const width = size.x + 1.5 * stroke;
+  const height = size.y + 1.5 * stroke;
+  const elements = Array<zOrderElement>();
+  const point = (x: number, y: number): Vec2 =>
+    vec2(-centerAdj.x + unitHalfSize.x + x * factor, centerAdj.y + unitHalfSize.y - y * factor);
+  for (const g of scene.groups) {
+    const pos = vec3Rot(g.pos, unitPos, unitRot);
+    const rot = vec3RotCombine(unitRot, g.rot ?? vec3Zero);
+    elements.push(
+      ...svgGroup(g, pos, rot, point, view, factor, onlyStroke, grayScale, onlyStrokeFill, font, stroke, buffers)
+    );
+  }
+  elements.sort((a, b) => a.zOrder - b.zOrder);
+
+  for (const d of scene.dimensions?.dimensions ?? []) {
+    if (d.views[0] === view) {
+      const pos = vec3Rot(d.pos, unitPos, unitRot);
+      const rot = vec3RotCombine(unitRot, d.rot);
+      for (const m of d.meshes) {
+        elements.push(
+          ...svgMesh(
+            m,
+            pos,
+            rot,
+            point,
+            view,
+            factor,
+            scene.dimensions?.material.normal ?? "",
+            false,
+            false,
+            onlyStrokeFill,
+            font,
+            stroke
+          )
+        );
+      }
+    }
+  }
+
+  const image = svg(
+    width,
+    height,
+    elements.reduce((a, { element }) => `${a} ${element}`, "")
+  );
+  return { image, width, height };
+}
+
+function svgGroup(
+  g: Group,
+  pos: Vec3,
+  rot: Vec3,
+  point: (x: number, y: number) => Vec2,
+  view: View,
+  factor: number,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
+  onlyStrokeFill: string,
+  font: string,
+  stroke: number,
+  buffers?: Record<string, string>
+): ReadonlyArray<zOrderElement> {
+  const elements = Array<zOrderElement>();
+
+  for (const m of g.meshes ?? []) {
+    elements.push(
+      ...svgMesh(
+        m,
+        pos,
+        rot,
+        point,
+        view,
+        factor,
+        m.material.normal,
+        onlyStroke,
+        grayScale,
+        onlyStrokeFill,
+        font,
+        stroke,
+        m.material.image?.type === "HashImage" && buffers?.[m.material.image.hash]
+          ? { type: "svg", svg: buffers[m.material.image.hash]! }
+          : m.material.image?.type === "UrlImage"
+          ? { type: "url", url: m.material.image.url }
+          : undefined
+      )
+    );
+  }
+  for (const sg of g.groups ?? []) {
+    const sPos = vec3TransRot(sg.pos, pos, rot);
+    const sRot = vec3RotCombine(rot, sg.rot ?? vec3Zero);
+    elements.push(
+      ...svgGroup(sg, sPos, sRot, point, view, factor, onlyStroke, grayScale, onlyStrokeFill, font, stroke, buffers)
+    );
+  }
+  return elements;
+}
+
+function svgMesh(
+  mesh: Mesh,
+  parentPos: Vec3,
+  parentRot: Vec3,
+  point: (x: number, y: number) => Vec2,
+  view: View,
+  factor: number,
+  color: string,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
+  background: string,
+  font: string,
+  stroke: number,
+  image?: EmbededImage | undefined
+): ReadonlyArray<zOrderElement> {
+  switch (mesh.geometry.type) {
+    case "Box":
+      return box(mesh.geometry, point, color, onlyStroke, grayScale, stroke, background, parentPos, parentRot);
+    case "Plane":
+      return plane(
+        mesh.geometry,
+        point,
+        color,
+        onlyStroke,
+        grayScale,
+        stroke,
+        background,
+        parentPos,
+        parentRot,
+        view,
+        image
+      );
+    case "Cylinder":
+      return cylinder(mesh.geometry, point, color, onlyStroke, grayScale, stroke, background, parentPos, parentRot);
+    case "Cone":
+      return cone(mesh.geometry, point, color, onlyStroke, grayScale, stroke, background, parentPos, parentRot);
+    case "Line":
+      return line(mesh.geometry, point, color, grayScale, stroke, parentPos, parentRot);
+    case "Polygon":
+      return polygon(mesh.geometry, point, color, onlyStroke, grayScale, background, stroke, parentPos, parentRot);
+    case "Shape":
+      return shape(mesh.geometry, point, color, onlyStroke, grayScale, background, stroke, parentPos, parentRot);
+    case "Text":
+      return text(mesh.geometry, point, color, parentPos, parentRot, factor, font);
+    case "Tube":
+    case "Sphere":
+      return [];
+    default:
+      return exhaustiveCheck(mesh.geometry);
+  }
+}