abstract-3d 4.1.0 → 4.1.2

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

@@ -0,0 +1,56 @@
+import { createSVG } from "abstract-image";
+import { exhaustiveCheck } from "ts-exhaustive-check";
+import type { ImageMesh, Vec2, Vec3 } from "../../../abstract-3d.js";
+import { vec2Scale, vec3TransRot, vec3RotCombine, vec3Zero, vec3 } from "../../../abstract-3d.js";
+import type { EmbededImage } from "../svg-encoding.js";
+import { rawSvgPrefix, svgImage } from "../svg-encoding.js";
+import type { zOrderElement, SvgOptions } from "./shared.js";
+import { zElem } from "./shared.js";
+
+export function image(
+  i: ImageMesh,
+  point: (x: number, y: number) => Vec2,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3
+): ReadonlyArray<zOrderElement> {
+  const half = vec2Scale(i.size, 0.5);
+  const pos = vec3TransRot(i.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, i.rot ?? vec3Zero);
+  const vec3tr = (x: number, y: number): Vec3 => vec3TransRot(vec3(x, y, 0), pos, rot);
+
+  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": {
+      const scale = {
+        x: i.size.x / i.image.image.size.width,
+        y: i.size.y / i.image.image.size.height,
+      };
+      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)];
+    }
+    case "Url": {
+      const imageData = opts.imageDataByUrl[i.image.url];
+      const image: EmbededImage | undefined = imageData?.startsWith(rawSvgPrefix)
+        ? {
+            type: "svg",
+            svg: decodeURIComponent(imageData.slice(rawSvgPrefix.length)).replace(/^\s*(<\?xml[^>]*\?>\s*)?(<!DOCTYPE[^>]*>\s*)?/i, ""),
+          }
+        : i.image.url
+          ? { type: "url", url: imageData ?? i.image.url }
+          : undefined;
+
+      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 [];
+    }
+    default:
+      return exhaustiveCheck(i.image);
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { CulledLine, Line, Vec2, Vec3 } from "../../../abstract-3d.js";
+import { vec3TransRot, vec3ZMean } from "../../../abstract-3d.js";
+import { rgbGrayScale } from "../../../utils.js";
+import { svgLine } from "../svg-encoding.js";
+import type { SvgOptions, zOrderElement } from "./shared.js";
+import { zElem } from "./shared.js";
+
+export function line(
+  l: Line | CulledLine,
+  point: (x: number, y: number) => Vec2,
+  fill: string,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3
+): 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]),
+  ];
+}

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

@@ -0,0 +1,43 @@
+import type { Plane, Vec2, Vec3, Material, Hole } from "../../../abstract-3d.js";
+import { vec2Scale, vec3TransRot, vec3RotCombine, vec3Zero, vec3, vec3ZMean } from "../../../abstract-3d.js";
+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";
+
+export function plane(
+  p: Plane,
+  point: (x: number, y: number) => Vec2,
+  material: Material,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3,
+  holes?: ReadonlyArray<Hole>
+): ReadonlyArray<zOrderElement> {
+  const half = vec2Scale(p.size, 0.5);
+  const pos = vec3TransRot(p.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
+  const vec3tr = (x: number, y: number): Vec3 => vec3TransRot(vec3(x, y, 0), pos, rot);
+
+  const v1 = vec3tr(-half.x, -half.y);
+  const v2 = vec3tr(half.x, -half.y);
+  const v3 = vec3tr(half.x, half.y);
+  const v4 = vec3tr(-half.x, half.y);
+
+  const points = [point(v1.x, v1.y), point(v2.x, v2.y), point(v3.x, v3.y), point(v4.x, v4.y)];
+
+  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
+    ),
+  ];
+}

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

@@ -0,0 +1,33 @@
+import type { Polygon, Vec3, Vec2, Material } from "../../../abstract-3d.js";
+import { vec3ZMean, vec3TransRot, vec3RotCombine, vec3Zero } from "../../../abstract-3d.js";
+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";
+
+export function polygon(
+  p: Polygon,
+  point: (x: number, y: number) => Vec2,
+  material: Material,
+  opts: SvgOptions,
+  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 color = material.normal;
+  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,
+    }),
+  ];
+}

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

@@ -0,0 +1,34 @@
+import type { Vec3, Vec2, Shape, Material } from "../../../abstract-3d.js";
+import { vec3ZMean, vec3TransRot, vec3RotCombine, vec3, vec3Zero } from "../../../abstract-3d.js";
+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";
+
+export function shape(
+  s: Shape,
+  point: (x: number, y: number) => Vec2,
+  material: Material,
+  opts: SvgOptions,
+  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 color = material.normal;
+  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 }
+    ),
+  ];
+}

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

@@ -0,0 +1,40 @@
+import type { Text, Vec2, Vec3 } from "../../../abstract-3d.js";
+import { vec3TransRot, vec3RotCombine, vec3Zero, vec3, vec3Dot, vec3Rot } from "../../../abstract-3d.js";
+import { svgText } from "../svg-encoding.js";
+import type { SvgOptions, zOrderElement } from "./shared.js";
+import { svgTrsMatrix, zElem } from "./shared.js";
+
+const SVG_FORWARD: Vec3 = vec3(0.0, 0.0, 1.0);
+const SVG_DOT_OPPOSITE_THRESHOLD: number = -0.9;
+
+// dummy
+export function text(
+  t: Text,
+  point: (x: number, y: number) => Vec2,
+  fill: string,
+  opts: SvgOptions,
+  parentPos: Vec3,
+  parentRot: Vec3
+): ReadonlyArray<zOrderElement> {
+  const pos = vec3TransRot(t.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, t.rot ?? vec3Zero);
+
+  const textForward = vec3Rot({ x: 0, y: 0, z: 1 }, vec3Zero, rot);
+
+  //discard texts that are pointing away
+  if (vec3Dot(textForward, SVG_FORWARD) <= SVG_DOT_OPPOSITE_THRESHOLD) {
+    return [];
+  }
+
+  const texts = Array<zOrderElement>();
+  const fontSize = t.fontSize;
+  const strings = t.text.split("\n");
+  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]));
+    posY -= fontSize * 1.2;
+  }
+
+  return texts;
+}

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

@@ -0,0 +1,183 @@
+import { exhaustiveCheck } from "ts-exhaustive-check";
+import type { Scene, Vec3, Mesh, Vec2, Group, Material, Bounds2 } from "../../abstract-3d.js";
+import {
+  vec2,
+  vec3Rot,
+  vec3Zero,
+  vec3RotCombine,
+  vec3,
+  vec3TransRot,
+  rotationForCameraPos,
+  sizeBoundsForCameraPos,
+  bounds2FromPosAndSize,
+  bounds2ToSize,
+  bounds2Merge,
+  vec2Zero,
+  vec3Flip,
+  dimensionConvertToTypeMesh,
+} from "../../abstract-3d.js";
+import type { Optional } from "../../utils.js";
+import { calculateVisibleViews, isViewVisible } from "../../utils.js";
+import { svg } from "./svg-encoding.js";
+import type { SvgOptions, zOrderElement } from "./svg-geometries/shared.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 type SvgScene = {
+  readonly scene: Scene;
+  readonly options?: Optional<SvgOptions>;
+  readonly pos: Vec2;
+};
+
+export type SvgWithSize = { readonly image: string; readonly width: number; readonly height: number };
+
+export function renderScenes(scenes: ReadonlyArray<SvgScene>, baseOptions?: Optional<SvgOptions>): SvgWithSize {
+  const allElements = Array<zOrderElement>();
+  const bounds = Array<Bounds2>();
+
+  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: Scene, options?: Optional<SvgOptions>): SvgWithSize {
+  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: Scene,
+  options: Optional<SvgOptions> | undefined,
+  offset: Vec2
+): {
+  readonly elements: ReadonlyArray<zOrderElement>;
+  readonly size: Vec2;
+  readonly center: Vec2;
+} {
+  const opts: SvgOptions = {
+    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: 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 dimOpts: SvgOptions = { ...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: Group, parentPos: Vec3, parentRot: Vec3, point: (x: number, y: number) => Vec2, opts: SvgOptions): ReadonlyArray<zOrderElement> {
+  const pos = vec3TransRot(g.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, g.rot ?? vec3Zero);
+  const elements = Array<zOrderElement>();
+  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: Mesh,
+  parentPos: Vec3,
+  parentRot: Vec3,
+  point: (x: number, y: number) => Vec2,
+  material: Material,
+  opts: SvgOptions
+): ReadonlyArray<zOrderElement> {
+  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);
+  }
+}

package/src/renderers/three/build/build.test.ts

@@ -129,14 +129,18 @@ describe("buildScene", () => {
     expect(position.toArray().map((v) => Math.round(v * 1000) / 1000 + 0)).toEqual([5, 1, 0]);
   });
 
-  it("hides culled lines that face away from the camera", () => {
-    const built = build(scene([group([culledLine(vec3(0, 0, 0), vec3(10, 0, 0), vec3(0, 0, 1), 1, red)])]));
+  it("doesn't draw culled lines that face away from the camera", () => {
+    const built = build(
+      scene([
+        group([culledLine(vec3(0, 0, 0), vec3(10, 0, 0), vec3(0, 0, 1), 1, red), culledLine(vec3(0, 0, 0), vec3(20, 0, 0), vec3(0, 0, -1), 1, red)]),
+      ])
+    );
     const line = built.parts.find((p) => p.kind === "line")!;
     const endX = (): number => (line.object.geometry.getAttribute("instanceEnd") as unknown as { readonly getX: (i: number) => number }).getX(0);
     cullScene(built, new Vector3(0, 0, -100));
-    expect(endX()).toBe(0);
+    expect([line.object.geometry.instanceCount, endX()]).toEqual([1, 20]);
     cullScene(built, new Vector3(0, 0, 100));
-    expect(endX()).toBe(10);
+    expect([line.object.geometry.instanceCount, endX()]).toEqual([1, 10]);
   });
 
   it("disposes its batches and materials", () => {

package/src/renderers/three/build/parts.ts

@@ -50,8 +50,9 @@ export type Part =
       readonly kind: "line";
       readonly object: LineSegments2;
       readonly segments: ReadonlyArray<Segment>;
-      /** World start, end and normal of each segment, while the drawn positions collapse hidden ones */
+      /** World start, end and normal, and color, of each segment, while the drawn ones are its visible ones packed first */
       readonly world: Float32Array;
+      readonly rgb: Float32Array;
       readonly visible: Uint8Array;
       readonly positions: InterleavedBuffer;
       readonly colors: InterleavedBuffer;
@@ -114,6 +115,7 @@ export function createLinePart(segments: ReadonlyArray<Segment>, thickness: numb
     object: line,
     segments,
     world: new Float32Array(segments.length * 9),
+    rgb: new Float32Array(segments.length * 3),
     visible: new Uint8Array(segments.length).fill(1),
     positions: (geometry.getAttribute("instanceStart") as InterleavedBufferAttribute).data,
     colors: (geometry.getAttribute("instanceColorStart") as InterleavedBufferAttribute).data,
@@ -145,7 +147,6 @@ export function placeSlot(part: Part, slot: number, matrix: Matrix4): void {
       part.world.set(vector.set(start.x, start.y, start.z).applyMatrix4(matrix).toArray(), slot * 9);
       part.world.set(vector.set(end.x, end.y, end.z).applyMatrix4(matrix).toArray(), slot * 9 + 3);
       part.world.set(normal ? vector.set(normal.x, normal.y, normal.z).transformDirection(matrix).toArray() : [0, 0, 0], slot * 9 + 6);
-      writeSegment(part, slot);
       break;
     }
     default:
@@ -165,7 +166,7 @@ export function paintSlot(part: Part, slot: number, rgba: Vector4): void {
       }
       break;
     case "line":
-      part.colors.array.set([rgba.x, rgba.y, rgba.z, rgba.x, rgba.y, rgba.z], slot * 6);
+      part.rgb.set([rgba.x, rgba.y, rgba.z], slot * 3);
       break;
     default:
       part.object.material.color.setRGB(rgba.x, rgba.y, rgba.z);
@@ -188,8 +189,7 @@ export function flushPart(part: Part, moved: boolean): void {
       part.object.boundingSphere = null;
       break;
     case "line":
-      part.positions.needsUpdate = true;
-      part.colors.needsUpdate = true;
+      writeSegments(part);
       break;
     default:
   }
@@ -214,19 +214,20 @@ export function cullLines(part: Part, cameraPosition: Vector3): void {
   if (part.kind !== "line") {
     return;
   }
-  part.segments.forEach((segment, slot) => {
+  const changed = part.segments.reduce((acc, segment, slot) => {
     const w = slot * 9;
     const mid = vector
       .fromArray(part.world, w)
       .add(normal.fromArray(part.world, w + 3))
       .multiplyScalar(0.5);
     const facing = !segment.normal || normal.fromArray(part.world, w + 6).dot(mid.subVectors(cameraPosition, mid)) > 0 ? 1 : 0;
-    if (facing !== part.visible[slot]) {
-      part.visible[slot] = facing;
-      writeSegment(part, slot);
-      part.positions.needsUpdate = true;
-    }
-  });
+    const flipped = facing !== part.visible[slot];
+    part.visible[slot] = facing;
+    return acc || flipped;
+  }, false);
+  if (changed) {
+    writeSegments(part);
+  }
 }
 
 export function disposePart(part: Part): void {
@@ -239,13 +240,20 @@ export function disposePart(part: Part): void {
   (Array.isArray(materials) ? materials : [materials]).forEach((m: Material) => m.dispose());
 }
 
-/** A hidden segment collapses to its start */
-function writeSegment(part: Extract<Part, { readonly kind: "line" }>, slot: number): void {
-  const w = slot * 9;
-  part.positions.array.set(
-    part.visible[slot] ? part.world.subarray(w, w + 6) : [...part.world.subarray(w, w + 3), ...part.world.subarray(w, w + 3)],
-    slot * 6
-  );
+/** Packs the visible segments first and draws only those, as a hidden one collapsed to a point still drew a dot of the line's caps */
+function writeSegments(part: Extract<Part, { readonly kind: "line" }>): void {
+  const drawn = part.segments.reduce((d, _, slot) => {
+    if (!part.visible[slot]) {
+      return d;
+    }
+    const rgb = part.rgb.subarray(slot * 3, slot * 3 + 3);
+    part.positions.array.set(part.world.subarray(slot * 9, slot * 9 + 6), d * 6);
+    part.colors.array.set([...rgb, ...rgb], d * 6);
+    return d + 1;
+  }, 0);
+  part.object.geometry.instanceCount = drawn;
+  part.positions.needsUpdate = true;
+  part.colors.needsUpdate = true;
 }
 
 const textVertexShader = /* glsl */ `

package/lib/renderers/dxf/color.d.ts

@@ -1,7 +0,0 @@
-import { Color } from "abstract-image";
-import { Vec3 } from "../../abstract-3d.js";
-export declare function colorToInteger(color: string): number;
-export declare function colorHexFromAbstractImageColor(color: Color): string;
-export declare function color(colorNormal: string | undefined): number;
-export declare const ACI_COLOR_TABLE: ReadonlyArray<Vec3>;
-//# sourceMappingURL=color.d.ts.map

package/lib/renderers/dxf/color.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/renderers/dxf/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAyB,MAAM,sBAAsB,CAAC;AAEnE,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAQpD;AAED,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAEnE;AAED,wBAAgB,KAAK,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAqB7D;AAsBD,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,IAAI,CAiQ/C,CAAC"}