3draft 26.11.4010 → 26.11.11010

package/dist/index.d.ts

@@ -1,20 +1,25 @@
 export declare const name: "3draft";
-export declare const version = "26.11.4010";
+export declare const version = "26.11.11010";
 export type { Vec3, Face, Mesh, Axes, ViewName, ViewSpec, Fit, Camera, Hit, Mark } from './types.js';
 export { box, extrude, merge, rotate, bounds, faceNormal, faceCenter } from './mesh.js';
 export type { BoxOptions } from './mesh.js';
 export { validate } from './check.js';
-export { boolean, union, subtract, intersect, health } from './csg.js';
+export { boolean, union, subtract, intersect, health, splitParts } from './csg.js';
+export { saw, planeThroughLine, planeThroughTriangle, sectionSegments } from './saw.js';
+export type { CutPlane, Sawn } from './saw.js';
 export type { BooleanOp, Health, Part } from './csg.js';
 export type { Validation } from './check.js';
 export { extrudeFace, moveVertices } from './edit.js';
 export { VIEW_ORDER, makeCamera, orbit, project, ray } from './camera.js';
 export { pick, crosshair } from './pick.js';
+export { instantiate, lodLevel } from './instances.js';
+export type { Prototype, Placement } from './instances.js';
 export { standOn } from './place.js';
 export type { StandOptions, Frame } from './place.js';
 export { paintOrder } from './order.js';
 export type { PaintItem } from './order.js';
-export { createGpu, viewProjection, buildVertices, buildInstances, defaultLight, defaultMaterial } from './gpu.js';
+export { createGpu, viewProjection, buildVertices, cornerNormals, buildInstances, defaultLight, defaultMaterial } from './gpu.js';
+export { createGl } from './gl.js';
 export type { Gpu, GpuLight, GpuMaterial, GpuRenderOptions, Instance, Pixels } from './gpu.js';
 export { renderView, renderViews, renderSheet } from './svg.js';
 export type { RenderOptions } from './svg.js';
@@ -31,5 +36,8 @@ export interface Info {
 export declare const info: () => Info;
 export { initKernel } from './kernel.js';
 export type { Kernel } from './kernel.js';
-export { insertVertex, cutFace, moveVertex, fillLoop, addLine, findLoop, nearestSurface, wireFromSegments, moveVertexSet } from './wire.js';
+export { insertVertex, cutFace, moveVertex, fillLoop, addLine, findLoop, nearestSurface, wireFromSegments, moveVertexSet, reshape, outlineOf } from './wire.js';
+export { triangulate } from './triangulate.js';
+export { buildEdges, buildMarks, MARK_FLOATS, sceneEdges } from './gpu.js';
+export type { Tri } from './triangulate.js';
 export type { Wire } from './wire.js';

package/dist/index.js

@@ -4,16 +4,19 @@
 // a target cross that lies on the surface under the cursor. No textures, no
 // shading yet.
 export const name = '3draft';
-export const version = '26.11.4010';
+export const version = '26.11.11010';
 export { box, extrude, merge, rotate, bounds, faceNormal, faceCenter } from './mesh.js';
 export { validate } from './check.js';
-export { boolean, union, subtract, intersect, health } from './csg.js';
+export { boolean, union, subtract, intersect, health, splitParts } from './csg.js';
+export { saw, planeThroughLine, planeThroughTriangle, sectionSegments } from './saw.js';
 export { extrudeFace, moveVertices } from './edit.js';
 export { VIEW_ORDER, makeCamera, orbit, project, ray } from './camera.js';
 export { pick, crosshair } from './pick.js';
+export { instantiate, lodLevel } from './instances.js';
 export { standOn } from './place.js';
 export { paintOrder } from './order.js';
-export { createGpu, viewProjection, buildVertices, buildInstances, defaultLight, defaultMaterial } from './gpu.js';
+export { createGpu, viewProjection, buildVertices, cornerNormals, buildInstances, defaultLight, defaultMaterial } from './gpu.js';
+export { createGl } from './gl.js';
 export { renderView, renderViews, renderSheet } from './svg.js';
 export { surfaceOf, DEFAULTS as MATERIAL_DEFAULTS } from './material.js';
 export { displayVersion } from './version.js';
@@ -30,4 +33,6 @@ export const info = () => ({
     ],
 });
 export { initKernel } from './kernel.js';
-export { insertVertex, cutFace, moveVertex, fillLoop, addLine, findLoop, nearestSurface, wireFromSegments, moveVertexSet } from './wire.js';
+export { insertVertex, cutFace, moveVertex, fillLoop, addLine, findLoop, nearestSurface, wireFromSegments, moveVertexSet, reshape, outlineOf } from './wire.js';
+export { triangulate } from './triangulate.js';
+export { buildEdges, buildMarks, MARK_FLOATS, sceneEdges } from './gpu.js';

package/dist/instances.d.ts

@@ -0,0 +1,19 @@
+import type { Mesh, Vec3 } from './types.js';
+export interface Prototype {
+    lods: Mesh[];
+}
+export interface Placement {
+    at: Vec3;
+    /** Size of the instance; a record scales each slot on its own ('*' is the default), e.g. a star core and its halo. */
+    scale: number | Record<string, number>;
+    /** Slot -> palette name. */
+    mats?: Record<string, string>;
+    /** Turn of the instance about its own centre: [tilt about x, turn about y] in radians (a galaxy disc seen from any side). */
+    rot?: [number, number];
+    /** Colour of every face (a tint on top of the material). */
+    color?: string;
+}
+/** A copy of the prototype mesh, scaled, moved and given its materials. Slots must not share vertices when scaled apart. */
+export declare const instantiate: (proto: Mesh, p: Placement) => Mesh;
+/** Which level of detail to draw for something that is `px` pixels across (its radius); `limits` are the pixel sizes where the next finer level starts. */
+export declare const lodLevel: (px: number, levels: number, limits?: readonly number[]) => number;

package/dist/instances.js

@@ -0,0 +1,41 @@
+// Prototypes and instances. A PROTOTYPE is a list of meshes of the same thing in decreasing detail (level of detail:
+// lods[0] is the finest), all of unit size and centred on the origin, with material SLOTS in `Face.mat` ('core', 'halo'...).
+// An INSTANCE is the prototype placed with a position, a size (one number, or one per slot) and its own slot -> palette
+// map, so a scene file stores the shape once and one short record per star. The detail used on screen follows the size
+// the thing has in pixels, so a far star costs a few faces and a near one a few dozen.
+/** A copy of the prototype mesh, scaled, moved and given its materials. Slots must not share vertices when scaled apart. */
+export const instantiate = (proto, p) => {
+    const slotOf = [];
+    for (const f of proto.faces)
+        for (const i of f.v)
+            slotOf[i] ??= f.mat ?? '';
+    const size = (slot) => (typeof p.scale === 'number' ? p.scale : (p.scale[slot] ?? p.scale['*'] ?? 1));
+    const positions = proto.positions.map((q, i) => {
+        const k = size(slotOf[i] ?? '');
+        let [x, y, z] = [q[0] * k, q[1] * k, q[2] * k];
+        if (p.rot) {
+            const [a, b] = p.rot;
+            [y, z] = [y * Math.cos(a) - z * Math.sin(a), y * Math.sin(a) + z * Math.cos(a)];
+            [x, z] = [x * Math.cos(b) + z * Math.sin(b), -x * Math.sin(b) + z * Math.cos(b)];
+        }
+        return [x + p.at[0], y + p.at[1], z + p.at[2]];
+    });
+    const faces = proto.faces.map((f) => {
+        const out = { v: f.v };
+        const mat = f.mat === undefined ? undefined : (p.mats?.[f.mat] ?? f.mat);
+        if (mat !== undefined)
+            out.mat = mat;
+        const color = p.color ?? f.color;
+        if (color !== undefined)
+            out.color = color;
+        return out;
+    });
+    return { positions, faces };
+};
+/** Which level of detail to draw for something that is `px` pixels across (its radius); `limits` are the pixel sizes where the next finer level starts. */
+export const lodLevel = (px, levels, limits = [60, 22, 8, 3, 1]) => {
+    let level = 0;
+    while (level < levels - 1 && level < limits.length && px < limits[level])
+        level++;
+    return level;
+};

package/dist/kernel.js

@@ -3,6 +3,7 @@
 // then every pick is one call that walks all triangles. Same answers as pick() in pick.ts.
 import { dot, norm, plus, times } from './vec.js';
 import { faceNormal } from './mesh.js';
+import { triangulate } from './triangulate.js';
 import { ray } from './camera.js';
 import { KERNEL_BYTES } from './kernel-bytes.js';
 const POS = 64; // vertices start here, 24 bytes each (f64 x y z)
@@ -38,14 +39,14 @@ export const initKernel = async () => {
             f64[i * 3 + 1] = p[1];
             f64[i * 3 + 2] = p[2];
         }
-        // faces are fanned into triangles (v0, vj, vj+1), each remembering its face number
+        // faces are cut into triangles (a fan, or ear clipping for a concave one), each remembering its face number
         const i32 = new Int32Array(memory.buffer, triBase, nt * 4);
         let at = 0;
         mesh.faces.forEach((f, face) => {
-            for (let j = 1; j < f.v.length - 1; j++) {
-                i32[at] = f.v[0];
-                i32[at + 1] = f.v[j];
-                i32[at + 2] = f.v[j + 1];
+            for (const [a, b, c] of triangulate(f.v.map((k) => mesh.positions[k]))) {
+                i32[at] = f.v[a];
+                i32[at + 1] = f.v[b];
+                i32[at + 2] = f.v[c];
                 i32[at + 3] = face;
                 at += 4;
             }

package/dist/material.d.ts

@@ -10,6 +10,8 @@ export interface Material {
     alpha?: number;
     /** 0..5: how much the color glows on its own, unlit. Up to 1 it fades from lit to flat colour; above 1 (WebGPU `tonemap`) it is a light source: that many times brighter. */
     emit?: number;
+    /** 0..1: soft, skin-like light. The light wraps round the form and a warm, scattered band shows where light turns to shade. */
+    soft?: number;
 }
 export type Palette = Record<string, Material>;
 /** What a face is made of, all numbers filled in. */
@@ -19,6 +21,7 @@ export interface Surface {
     rough: number;
     alpha: number;
     emit: number;
+    soft: number;
 }
 export declare const EMIT_MAX = 5;
 export declare const FALLBACK_COLOR = "#c8c8c8";
@@ -27,6 +30,7 @@ export declare const DEFAULTS: {
     readonly rough: 0.7;
     readonly alpha: 1;
     readonly emit: 0;
+    readonly soft: 0;
 };
 /** The surface of a face: its palette entry when it names one, else just its color with default properties. */
 export declare const surfaceOf: (face: Pick<Face, "color" | "mat">, palette?: Palette) => Surface;

package/dist/material.js

@@ -4,7 +4,7 @@
 const clamp = (n, fallback, max = 1) => (typeof n === 'number' && Number.isFinite(n) ? Math.max(0, Math.min(max, n)) : fallback);
 export const EMIT_MAX = 5;
 export const FALLBACK_COLOR = '#c8c8c8';
-export const DEFAULTS = { metal: 0, rough: 0.7, alpha: 1, emit: 0 };
+export const DEFAULTS = { metal: 0, rough: 0.7, alpha: 1, emit: 0, soft: 0 };
 /** The surface of a face: its palette entry when it names one, else just its color with default properties. */
 export const surfaceOf = (face, palette) => {
     const m = face.mat !== undefined ? palette?.[face.mat] : undefined;
@@ -14,5 +14,6 @@ export const surfaceOf = (face, palette) => {
         rough: clamp(m?.rough, DEFAULTS.rough),
         alpha: clamp(m?.alpha, DEFAULTS.alpha),
         emit: clamp(m?.emit, DEFAULTS.emit, EMIT_MAX),
+        soft: clamp(m?.soft, DEFAULTS.soft),
     };
 };

package/dist/pick.js

@@ -3,6 +3,7 @@
 // the painter-sorted drawing is not.
 import { cross, dot, norm, plus, minus, times, scale } from './vec.js';
 import { faceNormal } from './mesh.js';
+import { triangulate } from './triangulate.js';
 import { ray } from './camera.js';
 const EPS = 1e-9;
 // Moller-Trumbore ray/triangle test. Distance along the ray, or null.
@@ -41,8 +42,8 @@ export const pick = (mesh, cam, x, y, { cull = true } = {}) => {
         const front = dot(outward, dir) < 0;
         if (cull && !front)
             return;
-        for (let j = 1; j < pts.length - 1; j++) {
-            const t = hitTriangle(origin, dir, pts[0], pts[j], pts[j + 1]);
+        for (const [a, b, c] of triangulate(pts)) {
+            const t = hitTriangle(origin, dir, pts[a], pts[b], pts[c]);
             if (t !== null && (!best || t < best.distance)) {
                 best = {
                     face: i,

package/dist/saw.d.ts

@@ -0,0 +1,29 @@
+import type { Mesh, Vec3 } from './types.js';
+/** A plane: a point on it and the unit normal. `front` is the side the normal points to. */
+export interface CutPlane {
+    point: Vec3;
+    n: Vec3;
+}
+export interface Sawn {
+    /** Closed pieces on the normal's side of the plane. */
+    front: Mesh[];
+    /** Closed pieces on the other side. */
+    back: Mesh[];
+}
+/**
+ * The plane a drawn line gives: it contains the line and stands square on the face the line was drawn on
+ * (`faceNormal`), so it runs straight into the material and out beyond the ends of the line.
+ */
+export declare const planeThroughLine: (a: Vec3, b: Vec3, faceNormal: Vec3) => CutPlane;
+/** The plane through three points. Throws when they lie on one line. */
+export declare const planeThroughTriangle: (a: Vec3, b: Vec3, c: Vec3) => CutPlane;
+/**
+ * Saw `mesh` along `plane`. `mat` / `color` is the material of the two new faces (the cut surface).
+ * Throws when the mesh is not a closed solid, or when the plane does not go through it.
+ */
+export declare const saw: (mesh: Mesh, plane: CutPlane, opts?: {
+    color?: string;
+    mat?: string;
+}) => Sawn;
+/** Where the plane meets the faces of the mesh: line segments for the preview of a cut. */
+export declare const sectionSegments: (mesh: Mesh, plane: CutPlane) => [Vec3, Vec3][];

package/dist/saw.js

@@ -0,0 +1,121 @@
+// The saw: one plane cuts a closed solid into closed solids, like a board on the bench.
+// The cut is a half-space (a huge box with one face on the plane) run through the boolean, so both sides come out
+// closed, every face stays planar, and the new face lies exactly in the saw plane (the "kerf" has no width).
+// A solid that the plane splits into several pieces (a U shape cut across its arms) comes out as several meshes.
+import { sub, cross, dot, len, norm, add, scale as mul } from './vec.js';
+import { box, bounds } from './mesh.js';
+import { subtract, intersect, splitParts } from './csg.js';
+import { validate } from './check.js';
+const MIN = 1e-9;
+/**
+ * The plane a drawn line gives: it contains the line and stands square on the face the line was drawn on
+ * (`faceNormal`), so it runs straight into the material and out beyond the ends of the line.
+ */
+export const planeThroughLine = (a, b, faceNormal) => {
+    const c = cross(sub(b, a), faceNormal);
+    if (len(c) < MIN * Math.max(1, len(sub(b, a))))
+        throw new Error('the line has no length, or it points along the face normal: it cannot give a plane');
+    return { point: a, n: norm(c) };
+};
+/** The plane through three points. Throws when they lie on one line. */
+export const planeThroughTriangle = (a, b, c) => {
+    const x = cross(sub(b, a), sub(c, a));
+    const scale = Math.max(len(sub(b, a)), len(sub(c, a)), MIN);
+    if (len(x) < 1e-9 * scale * scale)
+        throw new Error('the three points lie on one line: they do not give a plane');
+    return { point: a, n: norm(x) };
+};
+const frame = (n) => {
+    const helper = Math.abs(n[1]) < 0.9 ? [0, 1, 0] : [1, 0, 0];
+    const u = norm(cross(helper, n));
+    const v = cross(n, u);
+    return [u, v, n]; // right-handed: u x v = n
+};
+/**
+ * Saw `mesh` along `plane`. `mat` / `color` is the material of the two new faces (the cut surface).
+ * Throws when the mesh is not a closed solid, or when the plane does not go through it.
+ */
+export const saw = (mesh, plane, opts = {}) => {
+    // A model of several shells (a cube with a drawn-and-pulled-out V standing on it, a loose open surface): every closed shell is cut by
+    // itself, a shell the plane misses, or one that is not closed, goes whole to the side its middle is on.
+    const parts = splitParts(mesh);
+    if (parts.length > 1) {
+        const n = norm(plane.n);
+        const front = [];
+        const back = [];
+        let solids = 0;
+        let cut = 0;
+        for (const part of parts) {
+            const pv = validate(part);
+            if (pv.closed && !pv.inside_out) {
+                solids++;
+                try {
+                    const s = sawSolid(part, plane, opts);
+                    front.push(...s.front);
+                    back.push(...s.back);
+                    cut++;
+                    continue;
+                }
+                catch (err) {
+                    if (!/does not go through/.test(String(err.message)))
+                        throw err;
+                }
+            }
+            (dot(sub(bounds(part).center, plane.point), n) >= 0 ? front : back).push(part);
+        }
+        if (!solids)
+            throw new Error('saw: only a closed solid can be cut');
+        if (!cut)
+            throw new Error('the plane does not go through the object');
+        return { front, back };
+    }
+    return sawSolid(mesh, plane, opts);
+};
+const sawSolid = (mesh, plane, { color = '#c8c8c8', mat } = {}) => {
+    const v = validate(mesh);
+    if (!v.closed || v.inside_out)
+        throw new Error('saw: only a closed solid can be cut');
+    const n = norm(plane.n);
+    const { center, radius } = bounds(mesh);
+    const size = Math.max(radius, MIN) * 8;
+    const axes = frame(n);
+    // the half-space: a box whose bottom face lies in the plane and which reaches far past the solid on every side
+    const along = dot(sub(center, plane.point), n);
+    const origin = add(sub(center, mul(n, along)), mul(n, size / 2)); // centre of the box: over the foot of the solid's centre
+    const slab = box({ size: [size, size, size], at: origin, color, axes });
+    if (mat)
+        slab.faces.forEach((f) => (f.mat = mat));
+    const front = intersect(mesh, slab);
+    const back = subtract(mesh, slab);
+    if (!front.faces.length || !back.faces.length)
+        throw new Error('the plane does not go through the object');
+    return { front: splitParts(front), back: splitParts(back) };
+};
+/** Where the plane meets the faces of the mesh: line segments for the preview of a cut. */
+export const sectionSegments = (mesh, plane) => {
+    const n = norm(plane.n);
+    const out = [];
+    const eps = 1e-9 * Math.max(bounds(mesh).radius, 1);
+    const d = mesh.positions.map((p) => dot(sub(p, plane.point), n));
+    for (const f of mesh.faces) {
+        const hits = [];
+        f.v.forEach((i, k) => {
+            const j = f.v[(k + 1) % f.v.length];
+            const a = d[i];
+            const b = d[j];
+            if (Math.abs(a) <= eps && Math.abs(b) <= eps)
+                return; // an edge lying in the plane is the cut's boundary: shown from the other face
+            if ((a < -eps && b > eps) || (a > eps && b < -eps)) {
+                const t = a / (a - b);
+                hits.push(add(mesh.positions[i], mul(sub(mesh.positions[j], mesh.positions[i]), t)));
+            }
+            else if (Math.abs(a) <= eps)
+                hits.push(mesh.positions[i]);
+        });
+        // a convex face meets a plane in at most two points
+        const uniq = hits.filter((p, k) => hits.findIndex((q) => len(sub(p, q)) <= eps * 10) === k);
+        if (uniq.length === 2)
+            out.push([uniq[0], uniq[1]]);
+    }
+    return out;
+};

package/dist/svg.js

@@ -208,7 +208,7 @@ const panel = (mesh, view, o, x = 0, y = 0) => {
         return [
             `<polyline data-mark="${esc(m.name ?? 'mark')}" points="${pts.map((p) => `${num(p.x)},${num(p.y)}`).join(' ')}" ` +
                 `fill="none" stroke="${m.color ?? '#0b7285'}" stroke-width="${m.width ?? 2}" ` +
-                `stroke-linecap="round" stroke-linejoin="round"/>`,
+                `stroke-linecap="round" stroke-linejoin="round"${m.opacity !== undefined && m.opacity < 1 ? ` stroke-opacity="${m.opacity}"` : ''}/>`,
         ];
     }));
     return [

package/dist/triangulate.d.ts

@@ -0,0 +1,4 @@
+import type { Vec3 } from './types.js';
+export type Tri = [number, number, number];
+/** Indices into `pts`, three per triangle, `pts.length - 2` triangles. */
+export declare const triangulate: (pts: Vec3[]) => Tri[];

package/dist/triangulate.js

@@ -0,0 +1,72 @@
+// Triangles of one polygon face. A convex polygon (and anything with 3 or 4 well-behaved corners) is a plain fan from its first
+// corner; a concave one (an L, a V, a star: an outline that was drawn or filled by hand) is cut by ear clipping, so no triangle ever
+// lies outside the outline. The triangles keep the winding of the polygon.
+import { faceNormal } from './mesh.js';
+const fan = (n) => Array.from({ length: Math.max(0, n - 2) }, (_, j) => [0, j + 1, j + 2]);
+/** Indices into `pts`, three per triangle, `pts.length - 2` triangles. */
+export const triangulate = (pts) => {
+    const n = pts.length;
+    if (n <= 3)
+        return fan(n);
+    const nrm = faceNormal(pts);
+    const big = Math.max(Math.abs(nrm[0]), Math.abs(nrm[1]), Math.abs(nrm[2]));
+    if (big < 1e-12)
+        return fan(n); // no plane to speak of: nothing better than the fan
+    // the plane is dropped to 2D along the normal's biggest axis; `sign` keeps the polygon counter-clockwise there
+    const axis = big === Math.abs(nrm[0]) ? 0 : big === Math.abs(nrm[1]) ? 1 : 2;
+    const [iu, iv] = axis === 0 ? [1, 2] : axis === 1 ? [2, 0] : [0, 1];
+    const sign = nrm[axis] >= 0 ? 1 : -1;
+    const P = pts.map((p) => [p[iu] * sign, p[iv]]);
+    const turn = (a, b, c) => (P[b][0] - P[a][0]) * (P[c][1] - P[a][1]) - (P[b][1] - P[a][1]) * (P[c][0] - P[a][0]);
+    let scale = 0;
+    for (const p of P)
+        scale = Math.max(scale, Math.abs(p[0]), Math.abs(p[1]));
+    const eps = 1e-12 * scale * scale;
+    let convex = true;
+    for (let i = 0; i < n && convex; i++)
+        if (turn(i, (i + 1) % n, (i + 2) % n) < -eps)
+            convex = false;
+    if (convex)
+        return fan(n);
+    const inside = (p, a, b, c) => {
+        // on or in the triangle (a, b, c), which is counter-clockwise; corners at the same place as a, b or c do not count
+        for (const q of [a, b, c])
+            if (Math.abs(P[p][0] - P[q][0]) <= 1e-12 * scale && Math.abs(P[p][1] - P[q][1]) <= 1e-12 * scale)
+                return false;
+        return turn(a, b, p) >= -eps && turn(b, c, p) >= -eps && turn(c, a, p) >= -eps;
+    };
+    const rest = pts.map((_, i) => i);
+    const out = [];
+    let guard = 0;
+    while (rest.length > 3 && guard++ < n * n) {
+        let clipped = false;
+        for (let k = 0; k < rest.length; k++) {
+            const a = rest[(k + rest.length - 1) % rest.length];
+            const b = rest[k];
+            const c = rest[(k + 1) % rest.length];
+            if (turn(a, b, c) <= eps)
+                continue; // a reflex (or flat) corner is not an ear
+            if (rest.some((p) => p !== a && p !== b && p !== c && inside(p, a, b, c)))
+                continue;
+            out.push([a, b, c]);
+            rest.splice(k, 1);
+            clipped = true;
+            break;
+        }
+        if (!clipped) {
+            // a self-touching or degenerate outline: take the flattest corner off so the loop always ends
+            let k = 0;
+            let best = -Infinity;
+            for (let i = 0; i < rest.length; i++) {
+                const t = turn(rest[(i + rest.length - 1) % rest.length], rest[i], rest[(i + 1) % rest.length]);
+                if (t > best)
+                    ((best = t), (k = i));
+            }
+            out.push([rest[(k + rest.length - 1) % rest.length], rest[k], rest[(k + 1) % rest.length]]);
+            rest.splice(k, 1);
+        }
+    }
+    if (rest.length === 3)
+        out.push([rest[0], rest[1], rest[2]]);
+    return out;
+};

package/dist/types.d.ts

@@ -25,6 +25,8 @@ export interface Fit {
     radius: number;
     /** Perspective only: distance from the eye to the center. A first-person eye sits almost on the center. */
     dist?: number;
+    /** Perspective only: the field of view in radians (default 35°). A first-person eye inside a room wants a wider one. */
+    fov?: number;
 }
 export interface Camera {
     name: string;
@@ -54,4 +56,6 @@ export interface Mark {
     lines: Vec3[][];
     color?: string;
     width?: number;
+    /** 0..1, default 1. */
+    opacity?: number;
 }

package/dist/wire.d.ts

@@ -55,3 +55,16 @@ export declare const wireFromSegments: (mesh: Mesh, wire: Wire, segments: [Vec3,
  * so every face stays planar.
  */
 export declare const moveVertexSet: (mesh: Mesh, moves: [number, Vec3][]) => Mesh;
+/**
+ * Moves vertices like `moveVertexSet`, but a polygon stays one polygon whenever the move leaves it flat (and facing the
+ * same way): a whole face dragged, scaled or stretched, the side of an extrusion. Only a polygon that the move would bend
+ * (or flip, or collapse) becomes triangles. This is what the grab / scale / extrude of the editor use.
+ */
+export declare const reshape: (mesh: Mesh, moves: [number, Vec3][]) => Mesh;
+/**
+ * The closed outline that loose lines make, as an ordered list of vertex ids, or null when they make none. `ids` are the points taken
+ * part in, `lines` the vertex pairs between them. The points are not ordered by angle round their middle (that only works for a convex
+ * shape, an L or a V comes out knotted): the lines are followed. The walk starts at the outermost point and at a junction (more than
+ * one way on) continues in the direction that turns least, the way Rustroke's fill follows the tangent. Winding is not decided here.
+ */
+export declare const outlineOf: (positions: Vec3[], lines: [number, number][], ids: number[]) => number[] | null;

package/dist/wire.js

@@ -3,8 +3,9 @@
 // its ends are ordinary mesh vertices, so moving a vertex moves every line (and every face) that uses it.
 // Faces stay convex and planar: a vertex placed inside a face splits it into triangles, a cut splits a convex
 // polygon into two convex ones, and a moved vertex turns the polygons it touches into triangles.
-import { sub, add, scale, dot, len } from './vec.js';
+import { sub, add, scale, dot, len, cross, norm } from './vec.js';
 import { faceNormal, bounds } from './mesh.js';
+import { triangulate } from './triangulate.js';
 const sizeOf = (mesh) => bounds(mesh).radius || 1;
 /** Distance from `p` to the segment a-b, and where along it (0..1). */
 const toSegment = (p, a, b) => {
@@ -87,8 +88,8 @@ export const moveVertex = (mesh, i, to) => {
         if (f.v.length <= 3 || !f.v.includes(i))
             faces.push(f);
         else
-            for (let j = 1; j < f.v.length - 1; j++)
-                faces.push({ ...f, v: [f.v[0], f.v[j], f.v[j + 1]] });
+            for (const [a, b, c] of triangulate(f.v.map((v) => mesh.positions[v])))
+                faces.push({ ...f, v: [f.v[a], f.v[b], f.v[c]] });
     }
     return withFaces(mesh, faces, positions);
 };
@@ -103,8 +104,8 @@ export const fillLoop = (mesh, loop, face = {}, awayFrom = bounds(mesh).center)
     const centre = scale(pts.reduce((s, p) => add(s, p), [0, 0, 0]), 1 / pts.length);
     const ordered = dot(faceNormal(pts), sub(centre, awayFrom)) >= 0 ? loop : [...loop].reverse();
     const out = [];
-    for (let j = 1; j < ordered.length - 1; j++)
-        out.push({ ...face, v: [ordered[0], ordered[j], ordered[j + 1]] });
+    for (const [a, b, c] of triangulate(ordered.map((v) => mesh.positions[v])))
+        out.push({ ...face, v: [ordered[a], ordered[b], ordered[c]] });
     return withFaces(mesh, [...mesh.faces, ...out]);
 };
 /** Adds the line a-b (not twice, not a point). */
@@ -177,8 +178,8 @@ export const nearestSurface = (mesh, p, tolerance) => {
     let best = null;
     mesh.faces.forEach((f, face) => {
         const pts = f.v.map((v) => mesh.positions[v]);
-        for (let j = 1; j < pts.length - 1; j++) {
-            const q = closestOnTriangle(p, pts[0], pts[j], pts[j + 1]);
+        for (const [a, b, c] of triangulate(pts)) {
+            const q = closestOnTriangle(p, pts[a], pts[b], pts[c]);
             const d = len(sub(q, p));
             if (d <= tolerance && (!best || d < best.d))
                 best = { face, point: q, d };
@@ -237,8 +238,109 @@ export const moveVertexSet = (mesh, moves) => {
         if (rigid)
             faces.push(f);
         else
-            for (let j = 1; j < f.v.length - 1; j++)
-                faces.push({ ...f, v: [f.v[0], f.v[j], f.v[j + 1]] });
+            for (const [a, b, c] of triangulate(f.v.map((v) => mesh.positions[v])))
+                faces.push({ ...f, v: [f.v[a], f.v[b], f.v[c]] });
     }
     return withFaces(mesh, faces, positions);
 };
+/**
+ * Moves vertices like `moveVertexSet`, but a polygon stays one polygon whenever the move leaves it flat (and facing the
+ * same way): a whole face dragged, scaled or stretched, the side of an extrusion. Only a polygon that the move would bend
+ * (or flip, or collapse) becomes triangles. This is what the grab / scale / extrude of the editor use.
+ */
+export const reshape = (mesh, moves) => {
+    const to = new Map(moves);
+    const positions = mesh.positions.map((p, k) => to.get(k) ?? p);
+    const tol = 1e-6 * sizeOf(mesh);
+    const faces = [];
+    for (const f of mesh.faces) {
+        if (f.v.length <= 3 || !f.v.some((v) => to.has(v))) {
+            faces.push(f);
+            continue;
+        }
+        const before = faceNormal(f.v.map((v) => mesh.positions[v]));
+        const pts = f.v.map((v) => positions[v]);
+        const after = faceNormal(pts);
+        const l = len(after);
+        const c = pts.reduce((t, p) => add(t, scale(p, 1 / pts.length)), [0, 0, 0]);
+        const flat = l > 1e-12 && dot(after, before) > 0 && pts.every((p) => Math.abs(dot(sub(p, c), after)) / l <= tol);
+        if (flat)
+            faces.push(f);
+        else
+            for (const [a, b, c] of triangulate(f.v.map((v) => mesh.positions[v])))
+                faces.push({ ...f, v: [f.v[a], f.v[b], f.v[c]] });
+    }
+    return withFaces(mesh, faces, positions);
+};
+/**
+ * The closed outline that loose lines make, as an ordered list of vertex ids, or null when they make none. `ids` are the points taken
+ * part in, `lines` the vertex pairs between them. The points are not ordered by angle round their middle (that only works for a convex
+ * shape, an L or a V comes out knotted): the lines are followed. The walk starts at the outermost point and at a junction (more than
+ * one way on) continues in the direction that turns least, the way Rustroke's fill follows the tangent. Winding is not decided here.
+ */
+export const outlineOf = (positions, lines, ids) => {
+    if (ids.length < 3 || !lines.length)
+        return null;
+    const P = positions;
+    // the plane: the two farthest points, and the point farthest from the line between them
+    let [a, b] = [ids[0], ids[1]];
+    let far = -1;
+    for (const i of ids)
+        for (const j of ids)
+            if (i < j) {
+                const d = len(sub(P[i], P[j]));
+                if (d > far)
+                    ((far = d), (a = i), (b = j));
+            }
+    const u = norm(sub(P[b], P[a]));
+    let n = null;
+    let best = 1e-12;
+    for (const i of ids) {
+        const m = cross(u, sub(P[i], P[a]));
+        if (len(m) > best)
+            ((best = len(m)), (n = norm(m)));
+    }
+    if (!n)
+        return null;
+    const w = cross(n, u);
+    const flat = (i) => [dot(sub(P[i], P[a]), u), dot(sub(P[i], P[a]), w)];
+    const adj = new Map();
+    const link = (p, q) => (adj.get(p) ?? adj.set(p, []).get(p)).push(q);
+    const seen = new Set();
+    for (const [p, q] of lines) {
+        const k = p < q ? `${p},${q}` : `${q},${p}`;
+        if (p === q || seen.has(k))
+            continue;
+        seen.add(k);
+        link(p, q);
+        link(q, p);
+    }
+    const starts = [...adj.keys()].filter((i) => adj.get(i).length >= 2);
+    if (starts.length < 3)
+        return null;
+    const first = starts.reduce((m, i) => (flat(i)[0] < flat(m)[0] ? i : m));
+    const loop = [first];
+    let prev = null;
+    let at = first;
+    for (let guard = 0; guard < ids.length * 4 + 8; guard++) {
+        const options = adj.get(at).filter((q) => q !== prev);
+        if (!options.length)
+            return null;
+        const here = flat(at);
+        const came = prev === null ? [0, -1] : [here[0] - flat(prev)[0], here[1] - flat(prev)[1]];
+        const turn = (q) => {
+            const t = flat(q);
+            const d = [t[0] - here[0], t[1] - here[1]];
+            return Math.abs(Math.atan2(came[0] * d[1] - came[1] * d[0], came[0] * d[0] + came[1] * d[1]));
+        };
+        const next = options.reduce((m, q) => (turn(q) < turn(m) ? q : m));
+        if (next === first)
+            return loop.length >= 3 ? loop : null;
+        if (loop.includes(next))
+            return null;
+        loop.push(next);
+        prev = at;
+        at = next;
+    }
+    return null;
+};