cadcode 0.0.0-stage → 0.2.0

package/src/dev/server.js

@@ -0,0 +1,190 @@
+import fs from 'node:fs';
+import http from 'node:http';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import { Worker } from 'node:worker_threads';
+import * as esbuild from 'esbuild';
+import { WebSocketServer } from 'ws';
+import { bundleOptions } from '../core/program.js';
+
+const CLIENT_DIR = fileURLToPath(new URL('../../client/', import.meta.url));
+const THREE_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.resolve('three'))), '..');
+const WORKER_URL = new URL('./worker.js', import.meta.url);
+
+const MIME = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json' };
+
+/** Serves a file from `root`, refusing paths that escape it. */
+function serveFile(res, root, relative) {
+  const file = path.resolve(root, `.${path.posix.normalize(`/${relative}`)}`);
+  if (!file.startsWith(root) || !fs.existsSync(file) || !fs.statSync(file).isFile()) {
+    res.writeHead(404).end('Not found');
+    return;
+  }
+  res.writeHead(200, { 'Content-Type': MIME[path.extname(file)] ?? 'application/octet-stream', 'Cache-Control': 'no-cache' });
+  fs.createReadStream(file).pipe(res);
+}
+
+/**
+ * Model frames are binary: a little-endian u32 header length, a JSON header
+ * padded to 4 bytes, then each group's positions (f32) and indices (u32).
+ */
+function encodeModel(result, file) {
+  const header = {
+    type: 'model',
+    file,
+    part: result.part,
+    partNames: result.partNames,
+    logs: result.logs,
+    ms: result.ms,
+    groups: result.groups.map((g) => ({ body: g.body, color: g.color, vertices: g.positions.length / 3, indices: g.indices.length })),
+  };
+  let json = Buffer.from(JSON.stringify(header));
+  json = Buffer.concat([json, Buffer.alloc((4 - (json.length % 4)) % 4, 0x20)]);
+  const length = Buffer.alloc(4);
+  length.writeUInt32LE(json.length);
+  const buffers = result.groups.flatMap((g) => [
+    Buffer.from(g.positions.buffer, g.positions.byteOffset, g.positions.byteLength),
+    Buffer.from(g.indices.buffer, g.indices.byteOffset, g.indices.byteLength),
+  ]);
+  return Buffer.concat([length, json, ...buffers]);
+}
+
+function openBrowser(url) {
+  const command = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'cmd' : 'xdg-open';
+  const args = process.platform === 'win32' ? ['/c', 'start', '', url] : [url];
+  spawn(command, args, { stdio: 'ignore', detached: true }).on('error', () => {}).unref();
+}
+
+/**
+ * Watches a program, re-evaluates it on every save, and pushes the meshes to
+ * connected browsers over a WebSocket.
+ */
+export async function startDevServer({ file, port, host, part, overrides, open }) {
+  const relative = path.relative(process.cwd(), path.resolve(file));
+  const displayName = relative.startsWith('..') ? path.resolve(file) : relative;
+  const baseName = path.basename(file).replace(/\.[^.]+$/, '');
+  // lastError is replayed to browsers that connect while the program is broken.
+  const state = { part, lastFrame: null, lastError: null, worker: null, bundle: null };
+  const sockets = new Set();
+
+  const broadcast = (data) => {
+    for (const ws of sockets) if (ws.readyState === ws.OPEN) ws.send(data);
+  };
+  const sendStatus = (status, extra = {}) => broadcast(JSON.stringify({ type: 'status', status, ...extra }));
+  const sendError = (error) => {
+    console.error(`✗ ${error.message}`);
+    state.lastError = JSON.stringify({ type: 'error', ...error });
+    broadcast(state.lastError);
+  };
+
+  function evaluate() {
+    if (!state.bundle) return;
+    state.worker?.terminate();
+    sendStatus('evaluating');
+    const worker = new Worker(WORKER_URL, { workerData: { bundle: state.bundle, part: state.part, overrides } });
+    state.worker = worker;
+    worker.once('message', (result) => {
+      if (state.worker !== worker) return;
+      state.worker = null;
+      worker.terminate();
+      if (!result.ok) return sendError({ message: result.message, stack: result.stack, logs: result.logs });
+      state.part = result.part;
+      state.lastError = null;
+      state.lastFrame = encodeModel(result, displayName);
+      broadcast(state.lastFrame);
+      const triangles = result.groups.reduce((n, g) => n + g.indices.length / 3, 0);
+      console.log(`✓ ${result.part}: ${triangles} triangles in ${result.ms} ms`);
+    });
+    worker.once('error', (error) => {
+      if (state.worker !== worker) return;
+      state.worker = null;
+      sendError({ message: error.message, stack: error.stack });
+    });
+  }
+
+  // A download evaluates in its own worker, so it never cancels or waits for the preview.
+  function downloadSTL(res, part) {
+    if (!state.bundle) return void res.writeHead(503, { 'Content-Type': 'text/plain' }).end('The program has not built yet');
+    const worker = new Worker(WORKER_URL, { workerData: { bundle: state.bundle, part, overrides, output: 'stl' } });
+    const fail = (message) => res.writeHead(500, { 'Content-Type': 'text/plain' }).end(message);
+    worker.once('message', (result) => {
+      worker.terminate();
+      if (!result.ok) return fail(result.message);
+      const name = result.partNames.length > 1 ? `${baseName}-${result.part}.stl` : `${baseName}.stl`;
+      res.writeHead(200, { 'Content-Type': 'model/stl', 'Content-Disposition': `attachment; filename="${name}"` });
+      res.end(Buffer.from(result.stl.buffer, result.stl.byteOffset, result.stl.byteLength));
+      console.log(`↓ ${name}`);
+    });
+    worker.once('error', (error) => fail(error.message));
+  }
+
+  const options = bundleOptions(file);
+  const ctx = await esbuild.context({
+    ...options,
+    plugins: [
+      ...options.plugins,
+      {
+        name: 'cadcode-dev',
+        setup(build) {
+          build.onStart(() => sendStatus('building'));
+          build.onEnd((result) => {
+            if (result.errors.length > 0) {
+              const message = result.errors.map((e) => `${e.location ? `${e.location.file}:${e.location.line}:${e.location.column}: ` : ''}${e.text}`).join('\n');
+              return sendError({ message });
+            }
+            state.bundle = options.outfile;
+            evaluate();
+          });
+        },
+      },
+    ],
+  });
+
+  const server = http.createServer((req, res) => {
+    const url = new URL(req.url ?? '/', 'http://localhost');
+    if (url.pathname === '/') return serveFile(res, CLIENT_DIR, 'index.html');
+    if (url.pathname === '/stl') return downloadSTL(res, url.searchParams.get('part') ?? state.part);
+    if (url.pathname.startsWith('/vendor/three/')) return serveFile(res, THREE_DIR, url.pathname.slice('/vendor/three/'.length));
+    serveFile(res, CLIENT_DIR, url.pathname.slice(1));
+  });
+
+  const wss = new WebSocketServer({ server });
+  wss.on('connection', (ws) => {
+    sockets.add(ws);
+    ws.on('close', () => sockets.delete(ws));
+    ws.on('message', (data) => {
+      let message;
+      try {
+        message = JSON.parse(String(data));
+      } catch {
+        return;
+      }
+      if (message.type === 'part' && message.name !== state.part) {
+        state.part = message.name;
+        evaluate();
+      }
+    });
+    if (state.lastFrame) ws.send(state.lastFrame);
+    if (state.lastError) ws.send(state.lastError);
+  });
+
+  await new Promise((resolve, reject) => {
+    server.once('error', (error) => reject(error.code === 'EADDRINUSE' ? new Error(`Port ${port} is in use; pass --port`) : error));
+    server.listen(port, host, resolve);
+  });
+  const url = `http://${host.includes(':') ? `[${host}]` : host}:${port}/`;
+  console.log(`cadcode dev: ${displayName} → ${url}`);
+  if (open) openBrowser(url);
+
+  await ctx.watch();
+
+  const shutdown = async () => {
+    state.worker?.terminate();
+    await ctx.dispose();
+    server.close();
+    process.exit(0);
+  };
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+}

package/src/dev/worker.js

@@ -0,0 +1,46 @@
+// Evaluates a program in a worker thread, for the viewer's meshes or, with
+// output 'stl', for a download. Each evaluation gets a fresh worker:
+// that frees all WASM memory between runs, resets library state such as
+// setResolution(), and lets the server kill a run that a newer save made stale.
+import { parentPort, workerData } from 'node:worker_threads';
+import { format } from 'node:util';
+import { evaluateProgram } from '../core/program.js';
+import { meshGroups } from '../core/mesh.js';
+import { toSTL } from '../export/stl.js';
+
+// Bundles carry inline source maps; this makes stack traces point at the user's files.
+process.setSourceMapsEnabled(true);
+
+const logs = [];
+for (const level of ['log', 'info', 'warn', 'error']) {
+  const original = console[level].bind(console);
+  console[level] = (...args) => {
+    logs.push({ level, text: format(...args) });
+    original(...args);
+  };
+}
+
+const { bundle, part, overrides, output } = workerData;
+const started = performance.now();
+try {
+  const result = await evaluateProgram(bundle, { part, overrides, fallbackToFirst: output !== 'stl' });
+  if (output === 'stl') {
+    const stl = toSTL(result.solids);
+    parentPort.postMessage({ ok: true, partNames: result.partNames, part: result.part, stl }, [stl.buffer]);
+  } else {
+    const groups = meshGroups(result.solids);
+    parentPort.postMessage(
+      {
+        ok: true,
+        partNames: result.partNames,
+        part: result.part,
+        groups,
+        logs,
+        ms: Math.round(performance.now() - started),
+      },
+      groups.flatMap((g) => [g.positions.buffer, g.indices.buffer]),
+    );
+  }
+} catch (error) {
+  parentPort.postMessage({ ok: false, message: error?.message ?? String(error), stack: error?.stack, logs });
+}

package/src/export/png.js

@@ -0,0 +1,52 @@
+import zlib from 'node:zlib';
+import { meshGroups } from '../core/mesh.js';
+import { render } from './raster.js';
+
+const CRC_TABLE = Array.from({ length: 256 }, (_, n) => {
+  let c = n;
+  for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+  return c >>> 0;
+});
+
+function crc32(buf) {
+  let c = 0xffffffff;
+  for (const byte of buf) c = CRC_TABLE[(c ^ byte) & 0xff] ^ (c >>> 8);
+  return (c ^ 0xffffffff) >>> 0;
+}
+
+function chunk(type, data) {
+  const head = Buffer.alloc(8);
+  head.writeUInt32BE(data.length, 0);
+  head.write(type, 4, 'ascii');
+  const crc = Buffer.alloc(4);
+  crc.writeUInt32BE(crc32(Buffer.concat([head.subarray(4), data])), 0);
+  return Buffer.concat([head, data, crc]);
+}
+
+/** Encodes RGBA pixels as a PNG file. */
+export function encodePNG({ width, height, pixels }) {
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(width, 0);
+  ihdr.writeUInt32BE(height, 4);
+  ihdr.set([8, 6, 0, 0, 0], 8); // 8-bit RGBA, no interlace
+  const raw = Buffer.alloc((width * 4 + 1) * height);
+  for (let y = 0; y < height; y++) {
+    raw[y * (width * 4 + 1)] = 0; // filter: none
+    raw.set(pixels.subarray(y * width * 4, (y + 1) * width * 4), y * (width * 4 + 1) + 1);
+  }
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    chunk('IHDR', ihdr),
+    chunk('IDAT', zlib.deflateSync(raw)),
+    chunk('IEND', Buffer.alloc(0)),
+  ]);
+}
+
+/**
+ * Renders a part's solids to a PNG preview.
+ * @param {import('../lib/shapes.js').Solid[]} solids
+ * @param {{ width?: number, height?: number, view?: string }} [options]
+ */
+export function toPNG(solids, options) {
+  return encodePNG(render(meshGroups(solids), options));
+}

package/src/export/raster.js

@@ -0,0 +1,207 @@
+// A small software renderer for preview images: orthographic camera, flat
+// shading, outline edges, and back-to-front blending for transparent parts.
+// No GPU or browser needed, so `cadcode png` runs anywhere Node runs.
+
+import { parseColor } from '../lib/colors.js';
+
+export const DEFAULT_COLOR = parseColor('#f2c14e');
+
+/** Camera directions (from the model toward the camera) and up vectors. Z is up. */
+export const VIEWS = {
+  iso: { dir: [1, -1, 1], up: [0, 0, 1] },
+  'iso-back': { dir: [-1, 1, 1], up: [0, 0, 1] },
+  front: { dir: [0, -1, 0], up: [0, 0, 1] },
+  back: { dir: [0, 1, 0], up: [0, 0, 1] },
+  left: { dir: [-1, 0, 0], up: [0, 0, 1] },
+  right: { dir: [1, 0, 0], up: [0, 0, 1] },
+  top: { dir: [0, 0, 1], up: [0, 1, 0] },
+  bottom: { dir: [0, 0, -1], up: [0, 1, 0] },
+};
+
+/** Views laid out by `view: 'sheet'`, two by two. */
+export const SHEET = ['iso', 'front', 'right', 'top'];
+
+const SUPERSAMPLE = 2;
+const EDGE_NORMAL_COS = Math.cos((25 * Math.PI) / 180);
+const EDGE_SHADE = 0.35;
+
+const sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+const normalize = (a) => {
+  const len = Math.hypot(a[0], a[1], a[2]) || 1;
+  return [a[0] / len, a[1] / len, a[2] / len];
+};
+
+/**
+ * Renders mesh groups to an RGBA pixel buffer.
+ * @param {import('../core/mesh.js').MeshGroup[]} groups
+ * @param {{ width?: number, height?: number, view?: string }} [options]
+ * @returns {{ width: number, height: number, pixels: Uint8Array }}
+ */
+export function render(groups, { width = 800, height = 600, view = 'iso' } = {}) {
+  if (view !== 'sheet') return renderView(groups, width, height, view);
+
+  const tileW = Math.floor(width / 2);
+  const tileH = Math.floor(height / 2);
+  const pixels = new Uint8Array(width * height * 4).fill(255);
+  SHEET.forEach((name, i) => {
+    const tile = renderView(groups, tileW, tileH, name);
+    const ox = (i % 2) * tileW;
+    const oy = Math.floor(i / 2) * tileH;
+    for (let y = 0; y < tileH; y++) {
+      pixels.set(tile.pixels.subarray(y * tileW * 4, (y + 1) * tileW * 4), ((oy + y) * width + ox) * 4);
+    }
+  });
+  return { width, height, pixels };
+}
+
+function renderView(groups, width, height, viewName) {
+  const view = VIEWS[viewName];
+  if (!view) throw new Error(`Unknown view "${viewName}". Views: ${[...Object.keys(VIEWS), 'sheet'].join(', ')}`);
+
+  const W = width * SUPERSAMPLE;
+  const H = height * SUPERSAMPLE;
+  const toCamera = normalize(view.dir);
+  const forward = [-toCamera[0], -toCamera[1], -toCamera[2]];
+  const right = normalize(cross(forward, view.up));
+  const up = cross(right, forward);
+  const light = normalize([toCamera[0] + right[0] * -0.4 + up[0] * 0.8, toCamera[1] + right[1] * -0.4 + up[1] * 0.8, toCamera[2] + right[2] * -0.4 + up[2] * 0.8]);
+
+  // Fit the projected model into the image with a margin.
+  let [minX, maxX, minY, maxY] = [Infinity, -Infinity, Infinity, -Infinity];
+  for (const { positions } of groups) {
+    for (let i = 0; i < positions.length; i += 3) {
+      const p = [positions[i], positions[i + 1], positions[i + 2]];
+      const x = dot(p, right);
+      const y = dot(p, up);
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+    }
+  }
+  const margin = 0.08;
+  const scale = Math.min((W * (1 - 2 * margin)) / (maxX - minX || 1), (H * (1 - 2 * margin)) / (maxY - minY || 1));
+  const cx = (minX + maxX) / 2;
+  const cy = (minY + maxY) / 2;
+  const project = (p) => [(dot(p, right) - cx) * scale + W / 2, H / 2 - (dot(p, up) - cy) * scale, dot(p, forward)];
+
+  const color = new Float32Array(W * H * 3);
+  const depth = new Float32Array(W * H).fill(Infinity);
+  const normals = new Float32Array(W * H * 3);
+  for (let y = 0; y < H; y++) {
+    const t = y / H;
+    const shade = 1 - 0.1 * t;
+    for (let x = 0; x < W; x++) color.set([shade, shade, shade * 1.01], (y * W + x) * 3);
+  }
+
+  const shadeFace = (n, rgb) => {
+    const facing = Math.abs(dot(n, toCamera));
+    const intensity = 0.28 + 0.52 * Math.max(0, dot(n, light)) + 0.25 * facing;
+    return [rgb[0] * intensity, rgb[1] * intensity, rgb[2] * intensity];
+  };
+
+  // Collect triangles; opaque ones are drawn first with depth writes.
+  const opaque = [];
+  const transparent = [];
+  for (const group of groups) {
+    const rgba = group.color ?? DEFAULT_COLOR;
+    const { positions, indices } = group;
+    for (let t = 0; t < indices.length; t += 3) {
+      const tri = [indices[t], indices[t + 1], indices[t + 2]].map((v) => [positions[v * 3], positions[v * 3 + 1], positions[v * 3 + 2]]);
+      const n = normalize(cross(sub(tri[1], tri[0]), sub(tri[2], tri[0])));
+      const screen = tri.map(project);
+      const entry = { screen, n, rgb: shadeFace(n, rgba), alpha: rgba[3] };
+      if (rgba[3] >= 0.999) {
+        if (dot(n, toCamera) > 0) opaque.push(entry);
+      } else {
+        entry.depth = (screen[0][2] + screen[1][2] + screen[2][2]) / 3;
+        transparent.push(entry);
+      }
+    }
+  }
+
+  for (const { screen, n, rgb } of opaque) {
+    rasterize(screen, W, H, (i, z) => {
+      if (z >= depth[i]) return;
+      depth[i] = z;
+      color.set(rgb, i * 3);
+      normals.set(n, i * 3);
+    });
+  }
+
+  // Outlines where depth jumps or the surface turns sharply.
+  const edge = new Uint8Array(W * H);
+  const depthJump = 6 / scale;
+  const isEdge = (a, b) => {
+    const fa = depth[a] !== Infinity;
+    const fb = depth[b] !== Infinity;
+    if (fa !== fb) return true;
+    if (!fa) return false;
+    if (Math.abs(depth[a] - depth[b]) > depthJump) return true;
+    return normals[a * 3] * normals[b * 3] + normals[a * 3 + 1] * normals[b * 3 + 1] + normals[a * 3 + 2] * normals[b * 3 + 2] < EDGE_NORMAL_COS;
+  };
+  for (let y = 0; y < H - 1; y++) {
+    for (let x = 0; x < W - 1; x++) {
+      const i = y * W + x;
+      if (isEdge(i, i + 1)) edge[i] = edge[i + 1] = 1;
+      if (isEdge(i, i + W)) edge[i] = edge[i + W] = 1;
+    }
+  }
+  for (let i = 0; i < W * H; i++) {
+    if (edge[i] && depth[i] !== Infinity) for (let k = 0; k < 3; k++) color[i * 3 + k] *= EDGE_SHADE;
+    else if (edge[i]) for (let k = 0; k < 3; k++) color[i * 3 + k] = color[i * 3 + k] * 0.4 + 0.12;
+  }
+
+  // Transparent faces back to front, tested against opaque depth only.
+  transparent.sort((a, b) => b.depth - a.depth);
+  for (const { screen, rgb, alpha } of transparent) {
+    rasterize(screen, W, H, (i, z) => {
+      if (z >= depth[i]) return;
+      for (let k = 0; k < 3; k++) color[i * 3 + k] = color[i * 3 + k] * (1 - alpha) + rgb[k] * alpha;
+    });
+  }
+
+  // Downsample the supersampled buffer.
+  const pixels = new Uint8Array(width * height * 4);
+  const area = SUPERSAMPLE * SUPERSAMPLE;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const sum = [0, 0, 0];
+      for (let sy = 0; sy < SUPERSAMPLE; sy++) {
+        for (let sx = 0; sx < SUPERSAMPLE; sx++) {
+          const i = ((y * SUPERSAMPLE + sy) * W + x * SUPERSAMPLE + sx) * 3;
+          sum[0] += color[i];
+          sum[1] += color[i + 1];
+          sum[2] += color[i + 2];
+        }
+      }
+      const o = (y * width + x) * 4;
+      for (let k = 0; k < 3; k++) pixels[o + k] = Math.max(0, Math.min(255, Math.round((sum[k] / area) * 255)));
+      pixels[o + 3] = 255;
+    }
+  }
+  return { width, height, pixels };
+}
+
+/** Calls `plot(pixelIndex, depth)` for every pixel center inside the screen-space triangle. */
+function rasterize([a, b, c], W, H, plot) {
+  const area = (b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0]);
+  if (Math.abs(area) < 1e-12) return;
+  const x0 = Math.max(0, Math.floor(Math.min(a[0], b[0], c[0])));
+  const x1 = Math.min(W - 1, Math.ceil(Math.max(a[0], b[0], c[0])));
+  const y0 = Math.max(0, Math.floor(Math.min(a[1], b[1], c[1])));
+  const y1 = Math.min(H - 1, Math.ceil(Math.max(a[1], b[1], c[1])));
+  for (let y = y0; y <= y1; y++) {
+    const py = y + 0.5;
+    for (let x = x0; x <= x1; x++) {
+      const px = x + 0.5;
+      const w0 = ((b[0] - px) * (c[1] - py) - (b[1] - py) * (c[0] - px)) / area;
+      const w1 = ((c[0] - px) * (a[1] - py) - (c[1] - py) * (a[0] - px)) / area;
+      const w2 = 1 - w0 - w1;
+      if (w0 < 0 || w1 < 0 || w2 < 0) continue;
+      plot(y * W + x, w0 * a[2] + w1 * b[2] + w2 * c[2]);
+    }
+  }
+}

package/src/export/stl.js

@@ -0,0 +1,28 @@
+import { mergedSolid } from '../core/mesh.js';
+
+/**
+ * Binary STL of the part's solids merged into one.
+ * @param {import('../lib/shapes.js').Solid[]} solids
+ * @returns {Buffer}
+ */
+export function toSTL(solids) {
+  const { numProp, vertProperties, triVerts } = mergedSolid(solids).manifold.getMesh();
+  const triCount = triVerts.length / 3;
+  const buf = Buffer.alloc(84 + triCount * 50);
+  buf.write('cadcode', 0, 'ascii');
+  buf.writeUInt32LE(triCount, 80);
+
+  const p = (v, k) => vertProperties[v * numProp + k];
+  let o = 84;
+  for (let t = 0; t < triCount; t++) {
+    const [a, b, c] = [triVerts[t * 3], triVerts[t * 3 + 1], triVerts[t * 3 + 2]];
+    const u = [p(b, 0) - p(a, 0), p(b, 1) - p(a, 1), p(b, 2) - p(a, 2)];
+    const w = [p(c, 0) - p(a, 0), p(c, 1) - p(a, 1), p(c, 2) - p(a, 2)];
+    const n = [u[1] * w[2] - u[2] * w[1], u[2] * w[0] - u[0] * w[2], u[0] * w[1] - u[1] * w[0]];
+    const len = Math.hypot(...n) || 1;
+    for (const value of [n[0] / len, n[1] / len, n[2] / len]) (buf.writeFloatLE(value, o), (o += 4));
+    for (const v of [a, b, c]) for (let k = 0; k < 3; k++) (buf.writeFloatLE(p(v, k), o), (o += 4));
+    o += 2; // attribute byte count
+  }
+  return buf;
+}

package/src/lib/colors.js

@@ -0,0 +1,56 @@
+/** @typedef {[number, number, number, number]} RGBA */
+/** @typedef {string | [number, number, number] | [number, number, number, number]} ColorInput */
+
+// CSS named colors, as hex. The same names OpenSCAD's color() accepts.
+const NAMED = Object.fromEntries(
+  (
+    'aliceblue:f0f8ff antiquewhite:faebd7 aqua:00ffff aquamarine:7fffd4 azure:f0ffff beige:f5f5dc bisque:ffe4c4 ' +
+    'black:000000 blanchedalmond:ffebcd blue:0000ff blueviolet:8a2be2 brown:a52a2a burlywood:deb887 cadetblue:5f9ea0 ' +
+    'chartreuse:7fff00 chocolate:d2691e coral:ff7f50 cornflowerblue:6495ed cornsilk:fff8dc crimson:dc143c cyan:00ffff ' +
+    'darkblue:00008b darkcyan:008b8b darkgoldenrod:b8860b darkgray:a9a9a9 darkgreen:006400 darkgrey:a9a9a9 ' +
+    'darkkhaki:bdb76b darkmagenta:8b008b darkolivegreen:556b2f darkorange:ff8c00 darkorchid:9932cc darkred:8b0000 ' +
+    'darksalmon:e9967a darkseagreen:8fbc8f darkslateblue:483d8b darkslategray:2f4f4f darkslategrey:2f4f4f ' +
+    'darkturquoise:00ced1 darkviolet:9400d3 deeppink:ff1493 deepskyblue:00bfff dimgray:696969 dimgrey:696969 ' +
+    'dodgerblue:1e90ff firebrick:b22222 floralwhite:fffaf0 forestgreen:228b22 fuchsia:ff00ff gainsboro:dcdcdc ' +
+    'ghostwhite:f8f8ff gold:ffd700 goldenrod:daa520 gray:808080 green:008000 greenyellow:adff2f grey:808080 ' +
+    'honeydew:f0fff0 hotpink:ff69b4 indianred:cd5c5c indigo:4b0082 ivory:fffff0 khaki:f0e68c lavender:e6e6fa ' +
+    'lavenderblush:fff0f5 lawngreen:7cfc00 lemonchiffon:fffacd lightblue:add8e6 lightcoral:f08080 lightcyan:e0ffff ' +
+    'lightgoldenrodyellow:fafad2 lightgray:d3d3d3 lightgreen:90ee90 lightgrey:d3d3d3 lightpink:ffb6c1 ' +
+    'lightsalmon:ffa07a lightseagreen:20b2aa lightskyblue:87cefa lightslategray:778899 lightslategrey:778899 ' +
+    'lightsteelblue:b0c4de lightyellow:ffffe0 lime:00ff00 limegreen:32cd32 linen:faf0e6 magenta:ff00ff maroon:800000 ' +
+    'mediumaquamarine:66cdaa mediumblue:0000cd mediumorchid:ba55d3 mediumpurple:9370db mediumseagreen:3cb371 ' +
+    'mediumslateblue:7b68ee mediumspringgreen:00fa9a mediumturquoise:48d1cc mediumvioletred:c71585 ' +
+    'midnightblue:191970 mintcream:f5fffa mistyrose:ffe4e1 moccasin:ffe4b5 navajowhite:ffdead navy:000080 ' +
+    'oldlace:fdf5e6 olive:808000 olivedrab:6b8e23 orange:ffa500 orangered:ff4500 orchid:da70d6 palegoldenrod:eee8aa ' +
+    'palegreen:98fb98 paleturquoise:afeeee palevioletred:db7093 papayawhip:ffefd5 peachpuff:ffdab9 peru:cd853f ' +
+    'pink:ffc0cb plum:dda0dd powderblue:b0e0e6 purple:800080 rebeccapurple:663399 red:ff0000 rosybrown:bc8f8f ' +
+    'royalblue:4169e1 saddlebrown:8b4513 salmon:fa8072 sandybrown:f4a460 seagreen:2e8b57 seashell:fff5ee ' +
+    'sienna:a0522d silver:c0c0c0 skyblue:87ceeb slateblue:6a5acd slategray:708090 slategrey:708090 snow:fffafa ' +
+    'springgreen:00ff7f steelblue:4682b4 tan:d2b48c teal:008080 thistle:d8bfd8 tomato:ff6347 turquoise:40e0d0 ' +
+    'violet:ee82ee wheat:f5deb3 white:ffffff whitesmoke:f5f5f5 yellow:ffff00 yellowgreen:9acd32'
+  )
+    .split(' ')
+    .map((pair) => pair.split(':')),
+);
+
+/**
+ * Parses a CSS color name, `#rgb`/`#rrggbb`/`#rrggbbaa`, or an [r, g, b(, a)] array of 0..1 floats.
+ * @param {ColorInput} input
+ * @param {number} [alpha] overrides the alpha channel
+ * @returns {RGBA}
+ */
+export function parseColor(input, alpha) {
+  /** @type {RGBA} */
+  let rgba;
+  if (Array.isArray(input)) {
+    rgba = [input[0], input[1], input[2], input[3] ?? 1];
+  } else {
+    const hex = input.startsWith('#') ? input.slice(1) : NAMED[input.toLowerCase()];
+    if (!hex || !/^([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)) throw new Error(`Unknown color: ${input}`);
+    const full = hex.length === 3 ? [...hex].map((c) => c + c).join('') : hex;
+    const channel = (i) => parseInt(full.slice(i * 2, i * 2 + 2), 16) / 255;
+    rgba = [channel(0), channel(1), channel(2), full.length === 8 ? channel(3) : 1];
+  }
+  if (alpha !== undefined) rgba[3] = alpha;
+  return rgba;
+}

package/src/lib/index.js

@@ -0,0 +1,25 @@
+export {
+  Solid,
+  Shape2,
+  setResolution,
+  cube,
+  cylinder,
+  sphere,
+  polyhedron,
+  square,
+  circle,
+  polygon,
+  union,
+  difference,
+  intersection,
+  hull,
+  translate,
+  rotate,
+  scale,
+  mirror,
+  color,
+  offset,
+  linearExtrude,
+} from './shapes.js';
+export { parseColor } from './colors.js';
+export { range, product } from './util.js';