poppygl 0.0.36 → 0.0.38

package/README.md

@@ -245,6 +245,28 @@ Pass `explosionLines` to any render entrypoint to draw polylines between assembl
 and displaced part positions. The caller moves the geometry and supplies the
 points in the same glTF scene frame and units (normally right-handed, +Y up).
 
+The selected glTF scene can embed the same setting in `extras.poppygl.explosionLines`:
+
+```json
+{
+  "scene": 0,
+  "scenes": [{
+    "nodes": [0],
+    "extras": {
+      "poppygl": {
+        "explosionLines": [{ "points": [[0, 0, 0], [0, 20, 0]], "dashed": true }]
+      }
+    }
+  }]
+}
+```
+
+`renderSceneFromGLTF`, the URL renderer, and the GLB renderer use these guides
+when `explosionLines` is omitted. An explicit list replaces the embedded guides;
+`null` or `[]` hides them. Points are already in glTF world coordinates and are
+not transformed by individual nodes. No guide meshes are required, and other
+glTF viewers may ignore this optional metadata.
+
 This lamp is adapted from [core's reference-surface lamp](https://github.com/tscircuit/core/blob/81bef4337570e3ac4d7dd6d30ab63481304e8147/tests/assembly/fixtures/reference-surface-lamp.tsx).
 Its base, hollow blue stem, and bulb stay in place while the hollow shade,
 mounting collar, and three spokes move together by **+60 mm on scene Y**. The
@@ -295,3 +317,57 @@ controls both the shaft and arrowhead stroke width. Omit `arrow` or set it to
 - `encodePNG` packs any `BitmapLike` into a `Uint8Array` PNG that can be written to disk or served over the network.
 
 Happy rendering!
+
+### Outline rendering
+
+```ts
+const png = await renderGLTFToPNGFromURL("https://example.com/housing.glb", {
+  renderStyle: "outline",
+  width: 1200,
+  height: 900,
+  supersampling: 2,
+  camPos: [80, 60, 100],
+  lookAt: [0, 0, 0],
+  showHiddenEdges: true,
+  edgeWidth: 1.5,
+})
+```
+
+`renderStyle: "outline"` uses white opaque surfaces, black boundary/crease
+edges and view-dependent silhouettes, and orthographic projection by default.
+Hidden edges are omitted by default, including model-level hidden-edge flags;
+`showHiddenEdges: true` adds dashed occluded strokes with `hiddenEdgeOpacity`.
+Materials, textures, vertex colors, transparency and lighting are ignored in this
+style. Input meshes are not modified. Existing shaded rendering defaults stay
+unchanged. The same options work with `renderDrawCalls`, GLB bytes, and glTF/GLB URLs.
+
+`projection: "orthographic"` also works independently of outline style.
+`orthographicHeight` sets the vertical field of view in model scene units; omit it
+to fit the transformed scene bounds with a margin. Orthographic projection preserves
+parallel edges and apparent size with distance. `camPos`, `lookAt`, `up` and
+`cameraRotation` keep their existing meanings. For an axis-aligned view choose a
+camera on that axis and an `up` axis that is not parallel to it.
+
+Section views are available in outline style:
+
+```ts
+const png = await renderGLTFToPNGFromGLB(glbBytes, {
+  renderStyle: "outline",
+  up: "y+",
+  section: { axis: "x", offset: 5, keepSide: "less", hatchSpacing: 1 },
+})
+```
+
+The plane is specified in **world glTF coordinates**, normally +Y up, using model
+scene units. `less` retains axis coordinates <= offset; `greater` retains >= offset.
+Closed cut surfaces receive diagonal hatching in the section plane (spacing defaults
+to one scene unit). Nested loops preserve cavities. Open cut chains remain uncapped; non-manifold inputs are unsupported. `createOutlineSection` exposes the prepared draw calls and
+`openChains` count for callers that need to report incomplete caps. Primitives are
+capped independently; surfaces split across separate primitives cannot form a cap.
+Sections outside or tangent to a mesh do not create artificial caps. Section cuts
+currently require outline style; shaded sections are not supported.
+
+These are raster outline illustrations, not CAD/B-rep exports: silhouettes
+follow the input tessellation, crease extraction uses a 30-degree threshold, and
+hidden lines are resolved against raster depth. Dimension annotations, paper sheet
+layout and TSX/core integration are separate downstream work.

package/dist/index.d.ts

@@ -1,64 +1,21 @@
 import { mat4 } from 'gl-matrix';
 
-type RGBA = readonly [number, number, number, number];
-type MutableRGBA = [number, number, number, number];
-interface BitmapLike {
-    width: number;
-    height: number;
-    data: Uint8Array | Uint8ClampedArray;
+type SectionAxis = "x" | "y" | "z";
+/** Axis-aligned plane in world/glTF coordinates, in model scene units. */
+interface OutlineSection {
+    axis: SectionAxis;
+    offset: number;
+    keepSide: "less" | "greater";
+    /** Distance between diagonal hatch strokes in scene units; defaults to 1. */
+    hatchSpacing?: number;
 }
-type ImageFactory = (width: number, height: number) => BitmapLike;
-declare const createUint8Bitmap: ImageFactory;
-
-interface Material {
-    baseColorFactor: [number, number, number, number];
-    baseColorTexture: BitmapLike | null;
-    metallicFactor?: number;
-    roughnessFactor?: number;
-    emissiveFactor?: [number, number, number];
-    emissiveTexture?: BitmapLike | null;
-    emissiveStrength?: number;
-    alphaMode?: "OPAQUE" | "MASK" | "BLEND";
-    alphaCutoff?: number;
-}
-interface DrawCall {
-    positions: Float32Array;
-    normals: Float32Array | null;
-    uvs: Float32Array | null;
-    indices: Uint32Array | null;
-    model: mat4;
-    material: Material;
-    colors?: Float32Array | null;
-    mode?: number;
-    showHiddenEdges?: boolean;
-    /** Source triangle third vertices for each extracted edge segment. */
-    edgeAdjacentVertices?: number[][];
-}
-interface GridOptions {
-    size?: number | readonly [number, number, number];
-    divisions?: number;
-    color?: readonly [number, number, number];
-    offset?: Partial<{
-        x: number;
-        y: number;
-        z: number;
-    }>;
-    infiniteGrid?: boolean;
-    cellSize?: number;
-    sectionSize?: number;
-    fadeDistance?: number;
-    fadeStrength?: number;
-    gridColor?: readonly [number, number, number];
-    sectionColor?: readonly [number, number, number];
-}
-interface GLTFResources {
-    buffers: Uint8Array[];
-    images: BitmapLike[];
-}
-interface GLTFScene {
+/** Prepare opaque monochrome section geometry without modifying the input.
+ * Separate primitives are capped independently; open surfaces remain uncapped.
+ */
+declare function createOutlineSection(drawCalls: DrawCall[], spec: OutlineSection): {
     drawCalls: DrawCall[];
-    gltf: any;
-}
+    openChains: number;
+};
 
 declare const DEFAULT_LIGHT_DIR: readonly [-0.4, -0.9, -0.2];
 interface DebugPoint {
@@ -97,6 +54,14 @@ interface CameraRotation {
  */
 declare function hexToRgb(hex: string): [number, number, number] | null;
 interface RenderOptions {
+    /** White opaque surfaces with black boundary, crease and silhouette edges. */
+    renderStyle: "shaded" | "outline";
+    /** Section cuts are supported in outline style only. */
+    section: OutlineSection | null;
+    /** Outline defaults to orthographic; existing renders stay perspective. */
+    projection: "perspective" | "orthographic";
+    /** Vertical span in scene units. Null automatically fits the world bounds. */
+    orthographicHeight: number | null;
     /** Opt into metallic/roughness studio lighting and geometry-based soft shadows. */
     realistic: boolean;
     width: number;
@@ -133,11 +98,77 @@ type RenderOptionsInput = Partial<RenderOptions>;
 declare const DEFAULT_RENDER_OPTIONS: RenderOptions;
 declare function getDefaultRenderOptions(): RenderOptions;
 
+type RGBA = readonly [number, number, number, number];
+type MutableRGBA = [number, number, number, number];
+interface BitmapLike {
+    width: number;
+    height: number;
+    data: Uint8Array | Uint8ClampedArray;
+}
+type ImageFactory = (width: number, height: number) => BitmapLike;
+declare const createUint8Bitmap: ImageFactory;
+
+interface Material {
+    baseColorFactor: [number, number, number, number];
+    baseColorTexture: BitmapLike | null;
+    /** Repeat rather than clamp the base-color texture (used by section hatching). */
+    baseColorTextureWrap?: "repeat" | "clamp";
+    metallicFactor?: number;
+    roughnessFactor?: number;
+    emissiveFactor?: [number, number, number];
+    emissiveTexture?: BitmapLike | null;
+    emissiveStrength?: number;
+    alphaMode?: "OPAQUE" | "MASK" | "BLEND";
+    alphaCutoff?: number;
+}
+interface DrawCall {
+    /** Generated section cap; preserve its hatch material in outline style. */
+    outlineSectionCap?: boolean;
+    positions: Float32Array;
+    normals: Float32Array | null;
+    uvs: Float32Array | null;
+    indices: Uint32Array | null;
+    model: mat4;
+    material: Material;
+    colors?: Float32Array | null;
+    mode?: number;
+    showHiddenEdges?: boolean;
+    /** Source triangle third vertices for each extracted edge segment. */
+    edgeAdjacentVertices?: number[][];
+}
+interface GridOptions {
+    size?: number | readonly [number, number, number];
+    divisions?: number;
+    color?: readonly [number, number, number];
+    offset?: Partial<{
+        x: number;
+        y: number;
+        z: number;
+    }>;
+    infiniteGrid?: boolean;
+    cellSize?: number;
+    sectionSize?: number;
+    fadeDistance?: number;
+    fadeStrength?: number;
+    gridColor?: readonly [number, number, number];
+    sectionColor?: readonly [number, number, number];
+}
+interface GLTFResources {
+    buffers: Uint8Array[];
+    images: BitmapLike[];
+}
+interface GLTFScene {
+    /** Selected scene extras.poppygl.explosionLines, in glTF world coordinates. */
+    explosionLines?: readonly ExplosionLine[];
+    drawCalls: DrawCall[];
+    gltf: any;
+}
+
 interface Camera {
     view: mat4;
     proj: mat4;
 }
-declare function buildCamera(drawCalls: DrawCall[], width: number, height: number, fovDeg: number, camPos: readonly [number, number, number] | null | undefined, lookAt: readonly [number, number, number] | null | undefined, up?: CameraUp | null | undefined, cameraRotation?: CameraRotation | null | undefined): Camera;
+declare function buildCamera(drawCalls: DrawCall[], width: number, height: number, fovDeg: number, camPos: readonly [number, number, number] | null | undefined, lookAt: readonly [number, number, number] | null | undefined, up?: CameraUp | null | undefined, cameraRotation?: CameraRotation | null | undefined, projection?: "perspective" | "orthographic", orthographicHeight?: number | null): Camera;
 
 interface RenderResult {
     bitmap: BitmapLike;
@@ -155,7 +186,12 @@ declare function createGrid(options?: GridOptions): DrawCall;
  * mesh. Vertices are welded by position so glTF meshes that duplicate vertices
  * for normals or UV seams do not produce coplanar triangulation lines.
  */
-declare function createEdgeDrawCall(mesh: DrawCall, creaseAngleDegrees?: number): DrawCall | null;
+declare function createEdgeDrawCall(mesh: DrawCall, creaseAngleDegrees?: number, 
+/** Include view-dependent silhouettes, with crease angles measured after transforms. */
+camera?: {
+    view: mat4;
+    projection: "perspective" | "orthographic";
+}): DrawCall | null;
 
 /**
  * Creates an infinite grid that matches the appearance of the 3d-viewer reference.
@@ -277,6 +313,9 @@ declare function renderGLTFToPNGFromURL(url: string, options?: RenderGLTFToPNGFr
 type RenderGLTFToPNGFromGLBOptions = RenderOptionsInput;
 declare function renderGLTFToPNGFromGLB(glb: ArrayBuffer | Uint8Array, options?: RenderGLTFToPNGFromGLBOptions): Promise<Uint8Array>;
 
+/** Render the selected glTF scene's guides in scene-world coordinates.
+ * Explicit options override extras; null or [] disables embedded guides.
+ */
 declare function renderSceneFromGLTF(scene: GLTFScene, options?: RenderOptionsInput, imageFactory?: ImageFactory): RenderResult;
 
-export { type BitmapLike, type Camera, type CameraRotation, type CameraUp, DEFAULT_LIGHT_DIR, DEFAULT_RENDER_OPTIONS, type DebugPoint, type DrawCall, type ExplosionLine, type FetchLike, type GLTFResources, type GLTFScene, type GridOptions, type ImageFactory, type LightSettings, type LineRenderOptions, type LoadGLTFWithResourcesFromURLOptions, type Material, type MutableRGBA, type RGBA, type RenderGLTFToPNGFromGLBOptions, type RenderGLTFToPNGFromURLOptions, type RenderOptions, type RenderOptionsInput, type RenderResult, SoftwareRenderer, bufferFromDataURI, buildCamera, computeSmoothNormals, computeWorldAABB, createEdgeDrawCall, createGrid, createInfiniteGrid, createSceneFromGLTF, createUint8Bitmap, decodeImageFromBuffer, drawInfiniteGrid, encodePNG, getDefaultRenderOptions, hexToRgb, isJPG, isPNG, loadGLTFWithResourcesFromURL, renderDrawCalls, renderGLTFToPNGFromGLB, renderGLTFToPNGFromURL, renderSceneFromGLTF, resolveRenderOptions };
+export { type BitmapLike, type Camera, type CameraRotation, type CameraUp, DEFAULT_LIGHT_DIR, DEFAULT_RENDER_OPTIONS, type DebugPoint, type DrawCall, type ExplosionLine, type FetchLike, type GLTFResources, type GLTFScene, type GridOptions, type ImageFactory, type LightSettings, type LineRenderOptions, type LoadGLTFWithResourcesFromURLOptions, type Material, type MutableRGBA, type OutlineSection, type RGBA, type RenderGLTFToPNGFromGLBOptions, type RenderGLTFToPNGFromURLOptions, type RenderOptions, type RenderOptionsInput, type RenderResult, SoftwareRenderer, bufferFromDataURI, buildCamera, computeSmoothNormals, computeWorldAABB, createEdgeDrawCall, createGrid, createInfiniteGrid, createOutlineSection, createSceneFromGLTF, createUint8Bitmap, decodeImageFromBuffer, drawInfiniteGrid, encodePNG, getDefaultRenderOptions, hexToRgb, isJPG, isPNG, loadGLTFWithResourcesFromURL, renderDrawCalls, renderGLTFToPNGFromGLB, renderGLTFToPNGFromURL, renderSceneFromGLTF, resolveRenderOptions };

package/dist/index.js

@@ -1,5 +1,276 @@
-// lib/camera/buildCamera.ts
+// lib/render/createOutlineSection.ts
 import { mat4, vec3 } from "gl-matrix";
+import earcut from "earcut";
+
+// lib/image/createUint8Bitmap.ts
+var createUint8Bitmap = (width, height) => ({
+  width,
+  height,
+  data: new Uint8ClampedArray(width * height * 4)
+});
+
+// lib/render/createOutlineSection.ts
+function findSectionLoops(input) {
+  const { positions, axis, offset, epsilon = 1e-5 } = input;
+  const k = axis === "x" ? 0 : axis === "y" ? 1 : 2;
+  let minimum = Infinity, maximum = -Infinity;
+  for (let i = k; i < positions.length; i += 3) {
+    minimum = Math.min(minimum, positions[i]);
+    maximum = Math.max(maximum, positions[i]);
+  }
+  if (offset <= minimum + epsilon || offset >= maximum - epsilon)
+    return { loops: [], openChains: 0 };
+  const u = (k + 1) % 3;
+  const v = (k + 2) % 3;
+  const points = /* @__PURE__ */ new Map();
+  const adjacency = /* @__PURE__ */ new Map();
+  const edges = /* @__PURE__ */ new Set();
+  const key = (p) => `${Math.round(p[0] / epsilon)},${Math.round(p[1] / epsilon)}`;
+  for (let i = 0; i < positions.length; i += 9) {
+    const hits = [];
+    const distances = [0, 1, 2].map((j) => positions[i + j * 3 + k] - offset);
+    const onPlane = distances.filter((d) => Math.abs(d) <= epsilon).length;
+    if (onPlane === 3) continue;
+    if (!(distances.some((d) => d > epsilon) && distances.some((d) => d < -epsilon)) && !(onPlane === 2 && distances.some((d) => d < -epsilon)))
+      continue;
+    for (let j = 0; j < 3; j++) {
+      const a2 = i + j * 3;
+      const b2 = i + (j + 1) % 3 * 3;
+      const da = distances[j];
+      const db = distances[(j + 1) % 3];
+      if (Math.abs(da) <= epsilon)
+        hits.push([positions[a2 + u], positions[a2 + v]]);
+      else if (da > 0 !== db > 0 && Math.abs(db) > epsilon) {
+        const t = da / (da - db);
+        hits.push([
+          positions[a2 + u] + t * (positions[b2 + u] - positions[a2 + u]),
+          positions[a2 + v] + t * (positions[b2 + v] - positions[a2 + v])
+        ]);
+      }
+    }
+    const unique = [...new Map(hits.map((p) => [key(p), p])).values()];
+    if (unique.length !== 2) continue;
+    const [a, b] = unique.map(key);
+    if (a === b) continue;
+    const edge2 = a < b ? `${a}|${b}` : `${b}|${a}`;
+    if (edges.has(edge2)) continue;
+    edges.add(edge2);
+    points.set(a, unique[0]);
+    points.set(b, unique[1]);
+    if (!adjacency.has(a)) adjacency.set(a, /* @__PURE__ */ new Set());
+    if (!adjacency.has(b)) adjacency.set(b, /* @__PURE__ */ new Set());
+    adjacency.get(a).add(b);
+    adjacency.get(b).add(a);
+  }
+  const loops = [];
+  let openChains = 0;
+  while (edges.size) {
+    const first = edges.values().next().value;
+    const [start, next] = first.split("|");
+    const path = [start];
+    let previous = start;
+    let current = next;
+    const remove = (a, b) => {
+      edges.delete(a < b ? `${a}|${b}` : `${b}|${a}`);
+      adjacency.get(a)?.delete(b);
+      adjacency.get(b)?.delete(a);
+    };
+    remove(start, next);
+    while (current !== start) {
+      path.push(current);
+      const candidates = [...adjacency.get(current) ?? []];
+      if (!candidates.length) break;
+      const p = points.get(previous);
+      const c = points.get(current);
+      candidates.sort((a, b) => {
+        const score = (s) => {
+          const n = points.get(s);
+          return ((c[0] - p[0]) * (n[0] - c[0]) + (c[1] - p[1]) * (n[1] - c[1])) / (Math.hypot(n[0] - c[0], n[1] - c[1]) || 1);
+        };
+        return score(b) - score(a);
+      });
+      const chosen = candidates[0];
+      remove(current, chosen);
+      previous = current;
+      current = chosen;
+    }
+    if (current === start && path.length >= 3)
+      loops.push(path.map((p) => points.get(p)));
+    else openChains++;
+  }
+  return { loops, openChains };
+}
+function contains(p, polygon) {
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const a = polygon[i], b = polygon[j];
+    if (a[1] > p[1] !== b[1] > p[1] && p[0] < (b[0] - a[0]) * (p[1] - a[1]) / (b[1] - a[1]) + a[0])
+      inside = !inside;
+  }
+  return inside;
+}
+function createOutlineSection(drawCalls, spec) {
+  const k = spec.axis === "x" ? 0 : spec.axis === "y" ? 1 : 2;
+  const u = (k + 1) % 3, v = (k + 2) % 3;
+  const spacing = spec.hatchSpacing ?? 1;
+  if (!["x", "y", "z"].includes(spec.axis) || !Number.isFinite(spec.offset) || !["less", "greater"].includes(spec.keepSide) || !Number.isFinite(spacing) || spacing <= 0)
+    throw new Error("Invalid outline section plane or hatch spacing");
+  const output = [];
+  let openChains = 0;
+  const texture = createUint8Bitmap(128, 128);
+  for (let y = 0; y < 128; y++)
+    for (let x = 0; x < 128; x++) {
+      const c = (x + 127 - y) % 16 < 2 ? 0 : 255;
+      texture.data.set([c, c, c, 255], (y * 128 + x) * 4);
+    }
+  const sign = spec.keepSide === "less" ? 1 : -1;
+  for (const dc of drawCalls) {
+    const points = [];
+    for (let i = 0; i < dc.positions.length; i += 3)
+      points.push(
+        Array.from(
+          vec3.transformMat4(
+            vec3.create(),
+            dc.positions.subarray(i, i + 3),
+            dc.model
+          )
+        )
+      );
+    const indices = dc.indices ?? Uint32Array.from(points, (_, i) => i);
+    const clipped = [], triangles = [];
+    const distance = (p) => sign * (p[k] - spec.offset);
+    const intersection = (a, b) => {
+      const t = distance(a) / (distance(a) - distance(b));
+      return a.map((n, j) => n + t * (b[j] - n));
+    };
+    if (dc.mode === 1) {
+      for (let i = 0; i + 1 < indices.length; i += 2) {
+        let a = points[indices[i]], b = points[indices[i + 1]];
+        if (distance(a) > 0 && distance(b) > 0) continue;
+        if (distance(a) > 0) a = intersection(a, b);
+        else if (distance(b) > 0) b = intersection(a, b);
+        clipped.push(...a, ...b);
+      }
+      output.push({
+        ...dc,
+        positions: new Float32Array(clipped),
+        indices: null,
+        model: mat4.create()
+      });
+      continue;
+    }
+    if (dc.mode != null && dc.mode !== 4) continue;
+    for (let i = 0; i + 2 < indices.length; i += 3) {
+      const triangle = [
+        points[indices[i]],
+        points[indices[i + 1]],
+        points[indices[i + 2]]
+      ];
+      triangles.push(...triangle.flat());
+      const polygon = [];
+      for (let j = 0; j < 3; j++) {
+        const a = triangle[j], b = triangle[(j + 1) % 3];
+        if (distance(a) <= 0) polygon.push(a);
+        if (distance(a) < 0 && distance(b) > 0 || distance(a) > 0 && distance(b) < 0)
+          polygon.push(intersection(a, b));
+      }
+      for (let j = 1; j + 1 < polygon.length; j++)
+        clipped.push(...polygon[0], ...polygon[j], ...polygon[j + 1]);
+    }
+    const white = {
+      baseColorFactor: [1, 1, 1, 1],
+      baseColorTexture: null
+    };
+    const mesh = {
+      ...dc,
+      positions: new Float32Array(clipped),
+      indices: null,
+      model: mat4.create(),
+      normals: null,
+      colors: null,
+      uvs: null,
+      material: white
+    };
+    output.push(mesh);
+    const extent = Math.max(
+      ...[0, 1, 2].map((axis) => {
+        let min = Infinity, max = -Infinity;
+        for (const p of points) {
+          min = Math.min(min, p[axis]);
+          max = Math.max(max, p[axis]);
+        }
+        return max - min;
+      })
+    );
+    const result = findSectionLoops({
+      positions: new Float32Array(triangles),
+      axis: spec.axis,
+      offset: spec.offset,
+      epsilon: Math.max(extent * 1e-7, 1e-9)
+    });
+    openChains += result.openChains;
+    const rings = result.loops.map((points2) => ({
+      points: points2,
+      area: Math.abs(
+        points2.reduce((a, p, i) => {
+          const q = points2[(i + 1) % points2.length];
+          return a + p[0] * q[1] - q[0] * p[1];
+        }, 0)
+      ),
+      parent: -1,
+      depth: 0
+    })).sort((a, b) => b.area - a.area);
+    rings.forEach((ring, i) => {
+      for (let j = 0; j < i; j++)
+        if (contains(ring.points[0], rings[j].points)) ring.parent = j;
+      ring.depth = ring.parent < 0 ? 0 : rings[ring.parent].depth + 1;
+    });
+    const cap = [], uv = [];
+    rings.forEach((ring, i) => {
+      if (ring.depth % 2) return;
+      const holes = rings.filter((r) => r.parent === i && r.depth % 2);
+      const flat = [...ring.points], starts = [];
+      for (const hole of holes) {
+        starts.push(flat.length);
+        flat.push(...hole.points);
+      }
+      const faces = earcut(flat.flat(), starts, 2);
+      for (let j = 0; j < faces.length; j += 3) {
+        const ids = faces.slice(j, j + 3);
+        const a = flat[ids[0]], b = flat[ids[1]], c = flat[ids[2]];
+        if (((b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0])) * sign < 0)
+          ids.reverse();
+        for (const id of ids) {
+          const p = flat[id], xyz = [0, 0, 0];
+          xyz[k] = spec.offset;
+          xyz[u] = p[0];
+          xyz[v] = p[1];
+          cap.push(...xyz);
+          uv.push(
+            p[0] / (spacing * 8 * Math.SQRT2),
+            p[1] / (spacing * 8 * Math.SQRT2)
+          );
+        }
+      }
+    });
+    if (cap.length)
+      output.push({
+        ...mesh,
+        outlineSectionCap: true,
+        positions: new Float32Array(cap),
+        uvs: new Float32Array(uv),
+        material: {
+          ...white,
+          baseColorTexture: texture,
+          baseColorTextureWrap: "repeat"
+        }
+      });
+  }
+  return { drawCalls: output, openChains };
+}
+
+// lib/camera/buildCamera.ts
+import { mat4 as mat42, vec3 as vec32 } from "gl-matrix";
 
 // lib/gltf/computeWorldAABB.ts
 import { vec4 } from "gl-matrix";
@@ -39,33 +310,33 @@ var toRad = (degrees) => degrees * Math.PI / 180;
 function getWorldUpVector(up) {
   switch (up) {
     case "y-":
-      return vec3.fromValues(0, -1, 0);
+      return vec32.fromValues(0, -1, 0);
     case "x+":
-      return vec3.fromValues(1, 0, 0);
+      return vec32.fromValues(1, 0, 0);
     case "x-":
-      return vec3.fromValues(-1, 0, 0);
+      return vec32.fromValues(-1, 0, 0);
     case "z+":
-      return vec3.fromValues(0, 0, 1);
+      return vec32.fromValues(0, 0, 1);
     case "z-":
-      return vec3.fromValues(0, 0, -1);
+      return vec32.fromValues(0, 0, -1);
     case "y+":
     default:
-      return vec3.fromValues(0, 1, 0);
+      return vec32.fromValues(0, 1, 0);
   }
 }
 function buildCameraWorldMatrix(eye, forward, up) {
-  const normalizedForward = vec3.normalize(vec3.create(), forward);
-  const right = vec3.cross(vec3.create(), normalizedForward, up);
-  if (vec3.squaredLength(right) === 0) {
+  const normalizedForward = vec32.normalize(vec32.create(), forward);
+  const right = vec32.cross(vec32.create(), normalizedForward, up);
+  if (vec32.squaredLength(right) === 0) {
     return null;
   }
-  vec3.normalize(right, right);
-  const correctedUp = vec3.cross(vec3.create(), right, normalizedForward);
-  if (vec3.squaredLength(correctedUp) === 0) {
+  vec32.normalize(right, right);
+  const correctedUp = vec32.cross(vec32.create(), right, normalizedForward);
+  if (vec32.squaredLength(correctedUp) === 0) {
     return null;
   }
-  vec3.normalize(correctedUp, correctedUp);
-  return mat4.fromValues(
+  vec32.normalize(correctedUp, correctedUp);
+  return mat42.fromValues(
     right[0],
     right[1],
     right[2],
@@ -85,11 +356,11 @@ function buildCameraWorldMatrix(eye, forward, up) {
   );
 }
 function getDefaultForwardForUp(up) {
-  const zForward = vec3.fromValues(0, 0, -1);
-  if (Math.abs(vec3.dot(up, zForward)) < 0.999) {
+  const zForward = vec32.fromValues(0, 0, -1);
+  if (Math.abs(vec32.dot(up, zForward)) < 0.999) {
     return zForward;
   }
-  return vec3.fromValues(1, 0, 0);
+  return vec32.fromValues(1, 0, 0);
 }
 function buildViewFromRotation(eye, up, rotation) {
   const cameraWorld = buildCameraWorldMatrix(
@@ -98,39 +369,39 @@ function buildViewFromRotation(eye, up, rotation) {
     up
   );
   if (!cameraWorld) {
-    return mat4.create();
+    return mat42.create();
   }
   if (rotation.x !== 0) {
-    mat4.rotateX(cameraWorld, cameraWorld, toRad(rotation.x));
+    mat42.rotateX(cameraWorld, cameraWorld, toRad(rotation.x));
   }
   if (rotation.y !== 0) {
-    mat4.rotateY(cameraWorld, cameraWorld, toRad(rotation.y));
+    mat42.rotateY(cameraWorld, cameraWorld, toRad(rotation.y));
   }
   if (rotation.z !== 0) {
-    mat4.rotateZ(cameraWorld, cameraWorld, toRad(rotation.z));
+    mat42.rotateZ(cameraWorld, cameraWorld, toRad(rotation.z));
   }
-  const view = mat4.create();
-  mat4.invert(view, cameraWorld);
+  const view = mat42.create();
+  mat42.invert(view, cameraWorld);
   return view;
 }
 function buildViewFromLookAt(eye, center, up) {
-  const forward = vec3.subtract(vec3.create(), center, eye);
-  if (vec3.squaredLength(forward) === 0) {
-    return mat4.create();
+  const forward = vec32.subtract(vec32.create(), center, eye);
+  if (vec32.squaredLength(forward) === 0) {
+    return mat42.create();
   }
   const cameraWorld = buildCameraWorldMatrix(eye, forward, up);
   if (!cameraWorld) {
-    return mat4.create();
+    return mat42.create();
   }
-  const view = mat4.create();
-  mat4.invert(view, cameraWorld);
+  const view = mat42.create();
+  mat42.invert(view, cameraWorld);
   return view;
 }
 function getAutoDistance(drawCalls, fovDeg) {
   const aabb = computeWorldAABB(drawCalls);
-  const diag = vec3.distance(
-    vec3.fromValues(aabb.min[0], aabb.min[1], aabb.min[2]),
-    vec3.fromValues(aabb.max[0], aabb.max[1], aabb.max[2])
+  const diag = vec32.distance(
+    vec32.fromValues(aabb.min[0], aabb.min[1], aabb.min[2]),
+    vec32.fromValues(aabb.max[0], aabb.max[1], aabb.max[2])
   );
   const radius = diag * 0.5;
   const fov = toRad(fovDeg);
@@ -149,7 +420,7 @@ function getAABBCornerDistances(aabb, eye) {
   for (const x of xs) {
     for (const y of ys) {
       for (const z of zs) {
-        const distance = vec3.distance(eye, vec3.fromValues(x, y, z));
+        const distance = vec32.distance(eye, vec32.fromValues(x, y, z));
         farthest = Math.max(farthest, distance);
       }
     }
@@ -157,29 +428,29 @@ function getAABBCornerDistances(aabb, eye) {
   return { nearest, farthest };
 }
 function getCameraForwardFromView(view) {
-  const cameraWorld = mat4.create();
-  mat4.invert(cameraWorld, view);
-  return vec3.fromValues(-cameraWorld[8], -cameraWorld[9], -cameraWorld[10]);
+  const cameraWorld = mat42.create();
+  mat42.invert(cameraWorld, view);
+  return vec32.fromValues(-cameraWorld[8], -cameraWorld[9], -cameraWorld[10]);
 }
-function buildCamera(drawCalls, width, height, fovDeg, camPos, lookAt, up = "y+", cameraRotation = null) {
+function buildCamera(drawCalls, width, height, fovDeg, camPos, lookAt, up = "y+", cameraRotation = null, projection = "perspective", orthographicHeight = null) {
   const aspect = width / height;
   const worldUp = getWorldUpVector(up);
   const aabb = computeWorldAABB(drawCalls);
-  const center = vec3.fromValues(
+  const center = vec32.fromValues(
     0.5 * (aabb.min[0] + aabb.max[0]),
     0.5 * (aabb.min[1] + aabb.max[1]),
     0.5 * (aabb.min[2] + aabb.max[2])
   );
   const autoDistance = getAutoDistance(drawCalls, fovDeg);
   if (cameraRotation) {
-    const provisionalEye = camPos ? vec3.fromValues(camPos[0], camPos[1], camPos[2]) : vec3.clone(center);
+    const provisionalEye = camPos ? vec32.fromValues(camPos[0], camPos[1], camPos[2]) : vec32.clone(center);
     const provisionalView = buildViewFromRotation(
       provisionalEye,
       worldUp,
       cameraRotation
     );
-    const eye2 = camPos ? provisionalEye : vec3.scaleAndAdd(
-      vec3.create(),
+    const eye2 = camPos ? provisionalEye : vec32.scaleAndAdd(
+      vec32.create(),
       center,
       getCameraForwardFromView(provisionalView),
       -autoDistance
@@ -187,30 +458,78 @@ function buildCamera(drawCalls, width, height, fovDeg, camPos, lookAt, up = "y+"
     const { nearest: nearest2, farthest: farthest2 } = getAABBCornerDistances(aabb, eye2);
     const near2 = Math.max(0.01, nearest2 * 0.5);
     const far2 = Math.max(1e3, farthest2 * 1.1);
-    const proj2 = mat4.create();
-    mat4.perspective(proj2, toRad(fovDeg), aspect, near2, far2);
+    const proj2 = mat42.create();
+    const view2 = buildViewFromRotation(eye2, worldUp, cameraRotation);
+    setProjection(
+      proj2,
+      view2,
+      aabb,
+      projection,
+      orthographicHeight,
+      fovDeg,
+      aspect,
+      near2,
+      far2
+    );
     return {
-      view: buildViewFromRotation(eye2, worldUp, cameraRotation),
+      view: view2,
       proj: proj2
     };
   }
-  const eye = camPos ? vec3.fromValues(camPos[0], camPos[1], camPos[2]) : vec3.fromValues(
+  const eye = camPos ? vec32.fromValues(camPos[0], camPos[1], camPos[2]) : vec32.fromValues(
     center[0] + autoDistance,
     center[1] + autoDistance * 0.3,
     center[2] + autoDistance
   );
-  const target = lookAt ? vec3.fromValues(lookAt[0], lookAt[1], lookAt[2]) : center;
+  const target = lookAt ? vec32.fromValues(lookAt[0], lookAt[1], lookAt[2]) : center;
   const { nearest, farthest } = getAABBCornerDistances(aabb, eye);
   const near = Math.max(0.01, nearest * 0.5);
   const far = Math.max(1e3, farthest * 1.1);
-  const proj = mat4.create();
-  mat4.perspective(proj, toRad(fovDeg), aspect, near, far);
+  const proj = mat42.create();
   const view = buildViewFromLookAt(eye, target, worldUp);
+  setProjection(
+    proj,
+    view,
+    aabb,
+    projection,
+    orthographicHeight,
+    fovDeg,
+    aspect,
+    near,
+    far
+  );
   return { view, proj };
 }
+function setProjection(proj, view, aabb, projection, height, fov, aspect, near, far) {
+  if (projection === "perspective") {
+    mat42.perspective(proj, toRad(fov), aspect, near, far);
+    return;
+  }
+  let halfHeight = 0;
+  for (const x of [aabb.min[0], aabb.max[0]])
+    for (const y of [aabb.min[1], aabb.max[1]])
+      for (const z of [aabb.min[2], aabb.max[2]]) {
+        const p = vec32.transformMat4(vec32.create(), [x, y, z], view);
+        halfHeight = Math.max(
+          halfHeight,
+          Math.abs(p[1]),
+          Math.abs(p[0]) / aspect
+        );
+      }
+  halfHeight = height != null && Number.isFinite(height) && height > 0 ? height / 2 : Math.max(halfHeight * 1.1, 1e-3);
+  mat42.ortho(
+    proj,
+    -halfHeight * aspect,
+    halfHeight * aspect,
+    -halfHeight,
+    halfHeight,
+    near,
+    far
+  );
+}
 
 // lib/gltf/createGrid.ts
-import { mat4 as mat42 } from "gl-matrix";
+import { mat4 as mat43 } from "gl-matrix";
 function createGrid(options = {}) {
   const size = options.size ?? 10;
   const sizeX = typeof size === "number" ? size : size[0];
@@ -235,8 +554,8 @@ function createGrid(options = {}) {
     positions.push(halfSizeX, 0, pZ);
     indices.push(vertexIndex++, vertexIndex++);
   }
-  const model = mat42.create();
-  mat42.fromTranslation(model, [offset.x, offset.y, offset.z]);
+  const model = mat43.create();
+  mat43.fromTranslation(model, [offset.x, offset.y, offset.z]);
   return {
     positions: new Float32Array(positions),
     indices: new Uint32Array(indices),
@@ -253,6 +572,7 @@ function createGrid(options = {}) {
 }
 
 // lib/gltf/createEdgeDrawCall.ts
+import { mat4 as mat44, vec3 as vec33 } from "gl-matrix";
 var DEFAULT_CREASE_ANGLE_DEGREES = 30;
 function positionKey(positions, index) {
   return `${positions[index * 3 + 0]},${positions[index * 3 + 1]},${positions[index * 3 + 2]}`;
@@ -271,7 +591,7 @@ function triangleNormal(positions, i0, i1, i2) {
   if (length === 0) return null;
   return [nx / length, ny / length, nz / length];
 }
-function addEdge(edges, positions, i0, i1, thirdVertex, normal) {
+function addEdge(edges, positions, i0, i1, thirdVertex, normal, facing) {
   const key0 = positionKey(positions, i0);
   const key1 = positionKey(positions, i1);
   const isForward = key0 < key1;
@@ -281,11 +601,13 @@ function addEdge(edges, positions, i0, i1, thirdVertex, normal) {
   if (existing) {
     if (normal) existing.normals.push(normal);
     existing.adjacentVertices.push(thirdVertex);
+    existing.facings.push(facing);
   } else {
     edges.set(key, {
       indices,
       normals: normal ? [normal] : [],
-      adjacentVertices: [thirdVertex]
+      adjacentVertices: [thirdVertex],
+      facings: [facing]
     });
   }
 }
@@ -301,26 +623,41 @@ function hasCrease(normals, minimumDot) {
   }
   return false;
 }
-function createEdgeDrawCall(mesh, creaseAngleDegrees = DEFAULT_CREASE_ANGLE_DEGREES) {
+function createEdgeDrawCall(mesh, creaseAngleDegrees = DEFAULT_CREASE_ANGLE_DEGREES, camera) {
   if (mesh.mode != null && mesh.mode !== 4) return null;
   const vertexCount = Math.floor(mesh.positions.length / 3);
   const triangleIndices = mesh.indices ?? Uint32Array.from({ length: vertexCount }, (_, i) => i);
   if (triangleIndices.length < 3) return null;
+  let normalPositions = mesh.positions;
+  if (camera) {
+    const modelView = mat44.multiply(mat44.create(), camera.view, mesh.model);
+    normalPositions = new Float32Array(mesh.positions.length);
+    for (let i = 0; i < vertexCount; i++) {
+      const point = vec33.transformMat4(
+        vec33.create(),
+        mesh.positions.subarray(i * 3, i * 3 + 3),
+        modelView
+      );
+      normalPositions.set(point, i * 3);
+    }
+  }
   const edges = /* @__PURE__ */ new Map();
   for (let i = 0; i + 2 < triangleIndices.length; i += 3) {
     const i0 = triangleIndices[i];
     const i1 = triangleIndices[i + 1];
     const i2 = triangleIndices[i + 2];
-    const normal = triangleNormal(mesh.positions, i0, i1, i2);
-    addEdge(edges, mesh.positions, i0, i1, i2, normal);
-    addEdge(edges, mesh.positions, i1, i2, i0, normal);
-    addEdge(edges, mesh.positions, i2, i0, i1, normal);
+    const normal = triangleNormal(normalPositions, i0, i1, i2);
+    const facing = !normal ? 0 : camera?.projection === "perspective" ? -(normal[0] * normalPositions[i0 * 3] + normal[1] * normalPositions[i0 * 3 + 1] + normal[2] * normalPositions[i0 * 3 + 2]) : normal[2];
+    addEdge(edges, mesh.positions, i0, i1, i2, normal, facing);
+    addEdge(edges, mesh.positions, i1, i2, i0, normal, facing);
+    addEdge(edges, mesh.positions, i2, i0, i1, normal, facing);
   }
   const minimumDot = Math.cos(creaseAngleDegrees * Math.PI / 180);
   const edgeIndices = [];
   const edgeAdjacentVertices = [];
   for (const edge2 of edges.values()) {
-    if (!hasCrease(edge2.normals, minimumDot)) continue;
+    const silhouette = camera && edge2.facings.some((n) => n > 1e-7) && edge2.facings.some((n) => n <= 1e-7);
+    if (!hasCrease(edge2.normals, minimumDot) && !silhouette) continue;
     edgeIndices.push(edge2.indices[0], edge2.indices[1]);
     edgeAdjacentVertices.push(edge2.adjacentVertices);
   }
@@ -341,13 +678,6 @@ function createEdgeDrawCall(mesh, creaseAngleDegrees = DEFAULT_CREASE_ANGLE_DEGR
   };
 }
 
-// lib/image/createUint8Bitmap.ts
-var createUint8Bitmap = (width, height) => ({
-  width,
-  height,
-  data: new Uint8ClampedArray(width * height * 4)
-});
-
 // lib/render/downsampleBitmap.ts
 function downsampleBitmap(source, targetWidth, targetHeight, imageFactory) {
   const target = imageFactory(targetWidth, targetHeight);
@@ -396,10 +726,10 @@ import {
   glyphLineAlphabet,
   textMetrics
 } from "@tscircuit/alphabet";
-import { mat4 as mat44, vec4 as vec43 } from "gl-matrix";
+import { mat4 as mat46, vec4 as vec43 } from "gl-matrix";
 
 // lib/render/SoftwareRenderer.ts
-import { mat3, mat4 as mat43, vec3 as vec32, vec4 as vec42 } from "gl-matrix";
+import { mat3, mat4 as mat45, vec3 as vec34, vec4 as vec42 } from "gl-matrix";
 
 // lib/gltf/computeSmoothNormals.ts
 function computeSmoothNormals(positions, indices) {
@@ -480,6 +810,10 @@ function hexToRgb(hex) {
   return [r, g, b];
 }
 var DEFAULT_RENDER_OPTIONS = {
+  renderStyle: "shaded",
+  section: null,
+  projection: "perspective",
+  orthographicHeight: null,
   realistic: false,
   width: 800,
   height: 600,
@@ -831,8 +1165,8 @@ var SoftwareRenderer = class {
     if (!indices) return;
     const view = camera.view;
     const proj = camera.proj;
-    const mvp = mat43.create();
-    mat43.multiply(mvp, proj, mat43.multiply(mat43.create(), view, model));
+    const mvp = mat45.create();
+    mat45.multiply(mvp, proj, mat45.multiply(mat45.create(), view, model));
     const vertexCount = positions.length / 3 | 0;
     const vScreen = new Array(vertexCount);
     const vInvW = new Float32Array(vertexCount);
@@ -1022,14 +1356,14 @@ var SoftwareRenderer = class {
     const materialId = this.denoiser?.materialId(material) ?? 0;
     const lightDir = light.dir ?? DEFAULT_LIGHT_DIR;
     const ambient = clamp(light.ambient ?? DEFAULT_RENDER_OPTIONS.ambient, 0, 1);
-    const L = studio ? null : vec32.normalize(
-      vec32.create(),
-      vec32.fromValues(lightDir[0], lightDir[1], lightDir[2])
+    const L = studio ? null : vec34.normalize(
+      vec34.create(),
+      vec34.fromValues(lightDir[0], lightDir[1], lightDir[2])
     );
     const view = camera.view;
     const proj = camera.proj;
-    const mvp = mat43.create();
-    mat43.multiply(mvp, proj, mat43.multiply(mat43.create(), view, model));
+    const mvp = mat45.create();
+    mat45.multiply(mvp, proj, mat45.multiply(mat45.create(), view, model));
     const normalMat = mat3.create();
     mat3.normalFromMat4(normalMat, model);
     let vertexCount = positions.length / 3 | 0;
@@ -1086,13 +1420,13 @@ var SoftwareRenderer = class {
       vInvW[i] = invW;
       vNDCz[i] = ndcZ;
       if (depthOnly) continue;
-      const n = vec32.fromValues(
+      const n = vec34.fromValues(
         useNormals[i * 3 + 0],
         useNormals[i * 3 + 1],
         useNormals[i * 3 + 2]
       );
-      const nw = vec32.create();
-      vec32.transformMat3(nw, n, normalMat);
+      const nw = vec34.create();
+      vec34.transformMat3(nw, n, normalMat);
       vWorldN[i] = [nw[0], nw[1], nw[2]];
       if (colors && colors.length >= (i + 1) * 3) {
         vColor[i] = [colors[i * 3 + 0], colors[i * 3 + 1], colors[i * 3 + 2]];
@@ -1182,8 +1516,8 @@ var SoftwareRenderer = class {
             const uvp = this.perspInterp(uv, invW, [l0, l1, l2]);
             const texel = this.sampleTextureNearest(
               material.baseColorTexture,
-              uvp[0],
-              uvp[1]
+              material.baseColorTextureWrap === "repeat" ? uvp[0] - Math.floor(uvp[0]) : uvp[0],
+              material.baseColorTextureWrap === "repeat" ? uvp[1] - Math.floor(uvp[1]) : uvp[1]
             );
             baseColor = mulColor(baseColor, [
               srgbDecodeToLinear01(texel[0]),
@@ -1333,8 +1667,8 @@ var DEFAULT_TEXT_COLOR = [
 var CHARACTER_WIDTH_RATIO = 0.62;
 function drawDebugPoints(renderer, camera, debugPoints, debugFontSize, debugPointColor, debugLabelColor) {
   if (debugPoints.length === 0) return;
-  const viewProj = mat44.create();
-  mat44.multiply(viewProj, camera.proj, camera.view);
+  const viewProj = mat46.create();
+  mat46.multiply(viewProj, camera.proj, camera.view);
   const markerColor = toColorRGBA(debugPointColor, DEFAULT_MARKER_COLOR);
   const textColor = toColorRGBA(debugLabelColor, DEFAULT_TEXT_COLOR);
   const labelScale = typeof debugFontSize === "number" && Number.isFinite(debugFontSize) ? Math.max(1, Math.round(debugFontSize)) : Math.max(
@@ -1487,7 +1821,7 @@ function toColorRGBA(color, fallback) {
 }
 
 // lib/render/drawInfiniteGrid.ts
-import { mat4 as mat45, vec4 as vec44 } from "gl-matrix";
+import { mat4 as mat47, vec4 as vec44 } from "gl-matrix";
 function computeGridLineIntensity(params) {
   const rx = params.world_x / params.cell_size;
   const rz = params.world_z / params.cell_size;
@@ -1523,15 +1857,15 @@ function drawInfiniteGrid(software_renderer, params) {
   const camera = params.camera;
   const view = camera.view;
   const proj = camera.proj;
-  const inv_view = mat45.create();
-  mat45.invert(inv_view, view);
+  const inv_view = mat47.create();
+  mat47.invert(inv_view, view);
   const cam_pos_x = inv_view[12];
   const cam_pos_y = inv_view[13];
   const cam_pos_z = inv_view[14];
-  const vp = mat45.create();
-  mat45.multiply(vp, proj, view);
-  const inv_vp = mat45.create();
-  mat45.invert(inv_vp, vp);
+  const vp = mat47.create();
+  mat47.multiply(vp, proj, view);
+  const inv_vp = mat47.create();
+  mat47.invert(inv_vp, vp);
   for (let y = 0; y < software_renderer.height; y++) {
     for (let x = 0; x < software_renderer.width; x++) {
       const ndc_x = x / (software_renderer.width - 1) * 2 - 1;
@@ -1649,17 +1983,28 @@ function resolveCameraRotation(cameraRotation) {
 }
 function resolveRenderOptions(options = {}) {
   const supersampling = typeof options.supersampling === "number" && Number.isFinite(options.supersampling) ? Math.max(1, Math.floor(options.supersampling)) : DEFAULT_RENDER_OPTIONS.supersampling;
+  const outline = options.renderStyle === "outline";
   return {
     ...DEFAULT_RENDER_OPTIONS,
     ...options,
+    renderStyle: outline ? "outline" : "shaded",
+    projection: options.projection === "orthographic" || outline && options.projection !== "perspective" ? "orthographic" : "perspective",
+    orthographicHeight: typeof options.orthographicHeight === "number" && Number.isFinite(options.orthographicHeight) && options.orthographicHeight > 0 ? options.orthographicHeight : null,
+    ...outline ? {
+      realistic: false,
+      ambient: 1,
+      gamma: false,
+      cull: false,
+      backgroundColor: options.backgroundColor ?? "#ffffff"
+    } : {},
     supersampling,
     lightDir: options.lightDir != null ? options.lightDir : DEFAULT_RENDER_OPTIONS.lightDir,
     camPos: options.camPos !== void 0 ? options.camPos : DEFAULT_RENDER_OPTIONS.camPos,
     lookAt: options.lookAt !== void 0 ? options.lookAt : DEFAULT_RENDER_OPTIONS.lookAt,
     up: resolveCameraUp(options.up),
     cameraRotation: resolveCameraRotation(options.cameraRotation),
-    showEdges: options.showEdges === true,
-    showHiddenEdges: typeof options.showHiddenEdges === "boolean" ? options.showHiddenEdges : null,
+    showEdges: options.showEdges ?? outline,
+    showHiddenEdges: typeof options.showHiddenEdges === "boolean" ? options.showHiddenEdges : outline ? false : null,
     edgeWidth: resolveWidth(options.edgeWidth),
     lineWidth: resolveWidth(options.lineWidth),
     hiddenEdgeOpacity: typeof options.hiddenEdgeOpacity === "number" && Number.isFinite(options.hiddenEdgeOpacity) ? Math.max(0, Math.min(1, options.hiddenEdgeOpacity)) : DEFAULT_RENDER_OPTIONS.hiddenEdgeOpacity
@@ -1670,7 +2015,7 @@ function resolveWidth(width) {
 }
 
 // lib/render/StudioLighting.ts
-import { mat4 as mat46 } from "gl-matrix";
+import { mat4 as mat48 } from "gl-matrix";
 
 // lib/render/studio-environment.json
 var studio_environment_default = {
@@ -1683,7 +2028,7 @@ var studio_environment_default = {
 };
 
 // lib/render/RayOcclusion.ts
-import { vec3 as vec33 } from "gl-matrix";
+import { vec3 as vec35 } from "gl-matrix";
 var RayOcclusion = class {
   bounds = new Float64Array(0);
   escapes = new Uint32Array(0);
@@ -1706,8 +2051,8 @@ var RayOcclusion = class {
       const count = dc.indices?.length ?? dc.positions.length / 3;
       const worldVertices = [];
       for (let i = 0; i < dc.positions.length; i += 3) {
-        const p = vec33.transformMat4(
-          vec33.create(),
+        const p = vec35.transformMat4(
+          vec35.create(),
           [dc.positions[i], dc.positions[i + 1], dc.positions[i + 2]],
           dc.model
         );
@@ -2167,7 +2512,7 @@ var StudioLighting = class {
   }
   constructor(drawCalls, camera) {
     this.occlusion = new RayOcclusion(drawCalls);
-    const world = mat46.invert(mat46.create(), camera.view);
+    const world = mat48.invert(mat48.create(), camera.view);
     if (!world)
       throw new Error("Realistic rendering requires an invertible camera view.");
     this.eye = [world[12], world[13], world[14]];
@@ -2371,7 +2716,7 @@ var StudioLighting = class {
 };
 
 // lib/render/createExplosionLineDrawCall.ts
-import { mat4 as mat47, vec4 as vec45 } from "gl-matrix";
+import { mat4 as mat49, vec4 as vec45 } from "gl-matrix";
 function createExplosionLineDrawCall(line) {
   if (line.points.length < 2 || line.points.some(
     (point) => point.length !== 3 || !point.every(Number.isFinite)
@@ -2395,13 +2740,13 @@ function createExplosionLineDrawCall(line) {
     indices: new Uint32Array(indices),
     normals: null,
     uvs: null,
-    model: mat47.create(),
+    model: mat49.create(),
     material: { baseColorFactor: [...color, 1], baseColorTexture: null },
     mode: 1
   };
 }
 function clipExplosionLineDrawCall(drawCall, camera) {
-  const viewProjection = mat47.multiply(mat47.create(), camera.proj, camera.view);
+  const viewProjection = mat49.multiply(mat49.create(), camera.proj, camera.view);
   const positions = [];
   const indices = [];
   const distances = (point) => [
@@ -2465,7 +2810,7 @@ function clipExplosionLineDrawCall(drawCall, camera) {
 }
 
 // lib/render/createExplosionArrowDrawCall.ts
-import { mat4 as mat48, vec4 as vec46 } from "gl-matrix";
+import { mat4 as mat410, vec4 as vec46 } from "gl-matrix";
 function createExplosionArrowDrawCall(drawCall, camera, width, height, supersampling) {
   if (width <= 1 || height <= 1) return null;
   const points = drawCall.positions;
@@ -2475,7 +2820,7 @@ function createExplosionArrowDrawCall(drawCall, camera, width, height, supersamp
     start -= 3;
   }
   if (start < 0) return null;
-  const viewProjection = mat48.multiply(mat48.create(), camera.proj, camera.view);
+  const viewProjection = mat410.multiply(mat410.create(), camera.proj, camera.view);
   const tip = vec46.transformMat4(
     vec46.create(),
     vec46.fromValues(points[end], points[end + 1], points[end + 2], 1),
@@ -2518,7 +2863,7 @@ function createExplosionArrowDrawCall(drawCall, camera, width, height, supersamp
   const arrowLength = Math.min(10 * supersampling, length / 2);
   const ux = dx / length;
   const uy = dy / length;
-  const inverse = mat48.invert(mat48.create(), viewProjection);
+  const inverse = mat410.invert(mat410.create(), viewProjection);
   if (!inverse) return null;
   const positions = [points[end], points[end + 1], points[end + 2]];
   for (const side of [-1, 1]) {
@@ -2547,6 +2892,11 @@ function createExplosionArrowDrawCall(drawCall, camera, width, height, supersamp
 // lib/render/renderDrawCalls.ts
 function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint8Bitmap) {
   const options = resolveRenderOptions(optionsInput);
+  if (options.section) {
+    if (options.renderStyle !== "outline")
+      throw new Error("section requires renderStyle: outline");
+    drawCalls = createOutlineSection(drawCalls, options.section).drawCalls;
+  }
   const renderWidth = options.width * options.supersampling;
   const renderHeight = options.height * options.supersampling;
   const explosionDrawCalls = (options.explosionLines ?? []).map(
@@ -2560,7 +2910,9 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
     options.camPos ?? null,
     options.lookAt ?? null,
     options.up,
-    options.cameraRotation ?? null
+    options.cameraRotation ?? null,
+    options.projection,
+    options.orthographicHeight
   );
   const renderer = new SoftwareRenderer(
     renderWidth,
@@ -2587,7 +2939,19 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
   } else {
     renderer.clear([0, 0, 0, 0]);
   }
-  const allDrawCalls = [...drawCalls];
+  const allDrawCalls = options.renderStyle === "outline" ? drawCalls.map(
+    (dc) => dc.mode === 1 || dc.outlineSectionCap ? dc : {
+      ...dc,
+      normals: null,
+      colors: null,
+      uvs: null,
+      material: {
+        baseColorFactor: [1, 1, 1, 1],
+        baseColorTexture: null,
+        alphaMode: "OPAQUE"
+      }
+    }
+  ) : [...drawCalls];
   let infiniteGridOptions = null;
   if (options.grid) {
     const userGridOptions = typeof options.grid === "boolean" ? {} : options.grid;
@@ -2693,7 +3057,11 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
   for (const dc of drawCalls) {
     const showHiddenEdges = options.showHiddenEdges ?? dc.showHiddenEdges;
     if (!options.showEdges && !showHiddenEdges) continue;
-    const edgeDrawCall = createEdgeDrawCall(dc);
+    const edgeDrawCall = createEdgeDrawCall(
+      dc,
+      30,
+      options.renderStyle === "outline" ? { view: camera.view, projection: options.projection } : void 0
+    );
     if (!edgeDrawCall) continue;
     renderer.drawLines(edgeDrawCall, camera, options.gamma, {
       depthCompare: "less-equal",
@@ -2769,7 +3137,7 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
 }
 
 // lib/gltf/createInfiniteGrid.ts
-import { mat4 as mat49 } from "gl-matrix";
+import { mat4 as mat411 } from "gl-matrix";
 function createInfiniteGrid(options = {}) {
   const cellSize = options.cellSize ?? 1;
   const sectionSize = options.sectionSize ?? 10;
@@ -2793,9 +3161,9 @@ function createInfiniteGrid(options = {}) {
     size
   ]);
   const indices = new Uint32Array([0, 1, 2, 0, 2, 3]);
-  const model = mat49.create();
+  const model = mat411.create();
   const offset = options.offset ?? {};
-  mat49.fromTranslation(model, [offset.x ?? 0, offset.y ?? 0, offset.z ?? 0]);
+  mat411.fromTranslation(model, [offset.x ?? 0, offset.y ?? 0, offset.z ?? 0]);
   return {
     positions,
     indices,
@@ -2820,7 +3188,7 @@ function createInfiniteGrid(options = {}) {
 }
 
 // lib/gltf/createSceneFromGLTF.ts
-import { mat4 as mat410 } from "gl-matrix";
+import { mat4 as mat412 } from "gl-matrix";
 var COMPONENT_INFO = {
   5120: {
     name: "BYTE",
@@ -3027,17 +3395,17 @@ function readIndices(ctx, accessorIndex) {
 }
 function nodeLocalMatrix(node) {
   if (node.matrix) {
-    const m2 = mat410.create();
+    const m2 = mat412.create();
     for (let i = 0; i < 16; i++) m2[i] = node.matrix[i];
     return m2;
   }
   const translation = node.translation || [0, 0, 0];
   const rotation = node.rotation || [0, 0, 0, 1];
   const scale = node.scale || [1, 1, 1];
-  const m = mat410.create();
-  const tmp = mat410.create();
-  mat410.fromRotationTranslationScale(tmp, rotation, translation, scale);
-  mat410.copy(m, tmp);
+  const m = mat412.create();
+  const tmp = mat412.create();
+  mat412.fromRotationTranslationScale(tmp, rotation, translation, scale);
+  mat412.copy(m, tmp);
   return m;
 }
 function getMaterial(gltf, textures, images, materialIndex) {
@@ -3080,8 +3448,8 @@ function createSceneFromGLTF(gltf, resources) {
     const node = nodes[nodeIndex];
     if (!node) return;
     const local = nodeLocalMatrix(node);
-    const world = mat410.create();
-    mat410.multiply(world, parentMatrix, local);
+    const world = mat412.create();
+    mat412.multiply(world, parentMatrix, local);
     if (Number.isInteger(node.mesh)) {
       const mesh = meshes[node.mesh];
       if (mesh) {
@@ -3120,11 +3488,15 @@ function createSceneFromGLTF(gltf, resources) {
       traverse(childIndex, world);
     }
   }
-  const identity = mat410.create();
+  const identity = mat412.create();
   for (const rootIndex of scene.nodes || []) {
     traverse(rootIndex, identity);
   }
-  return { gltf, drawCalls };
+  return {
+    gltf,
+    drawCalls,
+    explosionLines: scene.extras?.poppygl?.explosionLines
+  };
 }
 
 // lib/gltf/resourceUtils.ts
@@ -3364,6 +3736,18 @@ async function encodePNG(image) {
   });
 }
 
+// lib/render/renderSceneFromGLTF.ts
+function renderSceneFromGLTF(scene, options = {}, imageFactory) {
+  return renderDrawCalls(
+    scene.drawCalls,
+    {
+      ...options,
+      explosionLines: options.explosionLines === void 0 ? scene.explosionLines : options.explosionLines
+    },
+    imageFactory
+  );
+}
+
 // lib/render/renderGLTFToPNGFromURL.ts
 async function renderGLTFToPNGFromURL(url, options = {}) {
   const { fetchImpl, ...renderOptions } = options;
@@ -3371,8 +3755,8 @@ async function renderGLTFToPNGFromURL(url, options = {}) {
     fetchImpl
   });
   const scene = createSceneFromGLTF(gltf, resources);
-  const { bitmap } = renderDrawCalls(
-    scene.drawCalls,
+  const { bitmap } = renderSceneFromGLTF(
+    scene,
     renderOptions,
     createUint8Bitmap
   );
@@ -3449,18 +3833,9 @@ async function renderGLTFToPNGFromGLB(glb, options = {}) {
     })
   );
   const scene = createSceneFromGLTF(gltf, { buffers, images });
-  const { bitmap } = renderDrawCalls(
-    scene.drawCalls,
-    options,
-    createUint8Bitmap
-  );
+  const { bitmap } = renderSceneFromGLTF(scene, options, createUint8Bitmap);
   return encodePNG(bitmap);
 }
-
-// lib/index.ts
-function renderSceneFromGLTF(scene, options, imageFactory) {
-  return renderDrawCalls(scene.drawCalls, options, imageFactory);
-}
 export {
   DEFAULT_LIGHT_DIR,
   DEFAULT_RENDER_OPTIONS,
@@ -3472,6 +3847,7 @@ export {
   createEdgeDrawCall,
   createGrid,
   createInfiniteGrid,
+  createOutlineSection,
   createSceneFromGLTF,
   createUint8Bitmap,
   decodeImageFromBuffer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poppygl",
   "main": "dist/index.js",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/poppygl.git"
@@ -42,6 +42,7 @@
     "fast-png": "^8.0.0",
     "gl-matrix": "^3.4.4",
     "pureimage": "^0.4.18",
-    "readable-stream": "^4.7.0"
+    "readable-stream": "^4.7.0",
+    "earcut": "^3.2.4"
   }
 }