vgpu-render 0.0.0-stage → 0.2.0

package/dist/text-sdf.js

@@ -0,0 +1,119 @@
+/**
+ * Signed distance field generation for the glyph atlas.
+ *
+ * Canvas2D hands back an anti-aliased coverage mask, which is enough for the bitmap path but
+ * cannot be rescaled: a texel says "80% ink", not "the edge is 0.3 px that way". A distance field
+ * stores the latter, so the fragment stage can rebuild the edge at whatever magnification the
+ * camera asks for instead of interpolating coverage between texels.
+ *
+ * The mask is binarised, an exact Euclidean distance transform (Felzenszwalb & Huttenlocher, 2012)
+ * gives the distance to the opposite side away from the edge, and partially covered texels override
+ * that with the sub-texel offset their own coverage implies — the coverage carries the detail a
+ * binary transform would throw away.
+ *
+ * Values are stored as `distance / (2 × range) + 0.5`, so 128 is the edge, and the field saturates
+ * `range` texels either side. `range` is small on purpose: only the neighbourhood of the edge is
+ * ever resampled, and a smaller range spends the 8 available bits on a narrower band.
+ */
+/** Distance in atlas texels that one side of the encoded range covers. */
+export const DEFAULT_SDF_RANGE = 4;
+const FAR = 1e20;
+/**
+ * Squared 1D distance transform, in place through `out`.
+ *
+ * Each input sample seeds a parabola `(q - i)² + f[i]` and the lower envelope of all of them is the
+ * transform. The stack of parabolas is built in one forward pass and sampled in a second, which is
+ * what makes this O(n) rather than O(n²) while staying exact.
+ */
+function edt1d(column, length, out) {
+    const vertex = new Int32Array(length);
+    const boundary = new Float64Array(length + 1);
+    let top = 0;
+    vertex[0] = 0;
+    boundary[0] = -FAR;
+    boundary[1] = FAR;
+    for (let q = 1; q < length; q++) {
+        const qValue = column[q] + q * q;
+        let intersection = (qValue - (column[vertex[top]] + vertex[top] * vertex[top])) / (2 * q - 2 * vertex[top]);
+        while (intersection <= boundary[top]) {
+            top--;
+            intersection = (qValue - (column[vertex[top]] + vertex[top] * vertex[top])) / (2 * q - 2 * vertex[top]);
+        }
+        top++;
+        vertex[top] = q;
+        boundary[top] = intersection;
+        boundary[top + 1] = FAR;
+    }
+    top = 0;
+    for (let q = 0; q < length; q++) {
+        while (boundary[top + 1] < q)
+            top++;
+        const delta = q - vertex[top];
+        out[q] = delta * delta + column[vertex[top]];
+    }
+}
+/** Exact squared Euclidean distance from every texel to the nearest set texel of `seeds`. */
+function edtSquared(seeds, width, height) {
+    const field = new Float64Array(width * height);
+    for (let index = 0; index < field.length; index++)
+        field[index] = seeds[index] !== 0 ? 0 : FAR;
+    const longest = Math.max(width, height);
+    const line = new Float64Array(longest);
+    const transformed = new Float64Array(longest);
+    for (let x = 0; x < width; x++) {
+        for (let y = 0; y < height; y++)
+            line[y] = field[y * width + x];
+        edt1d(line.subarray(0, height), height, transformed.subarray(0, height));
+        for (let y = 0; y < height; y++)
+            field[y * width + x] = transformed[y];
+    }
+    for (let y = 0; y < height; y++) {
+        const row = y * width;
+        for (let x = 0; x < width; x++)
+            line[x] = field[row + x];
+        edt1d(line.subarray(0, width), width, transformed.subarray(0, width));
+        for (let x = 0; x < width; x++)
+            field[row + x] = transformed[x];
+    }
+    return field;
+}
+/**
+ * Turns one glyph's coverage mask into an 8-bit distance field, one byte per texel.
+ *
+ * Positive means inside the glyph. Wholly covered and wholly empty texels take their distance from
+ * the transform; partially covered ones use `coverage - 0.5` instead, which is the sub-texel edge
+ * offset for a straight edge crossing that texel and is what keeps the field smooth across the
+ * boundary rather than quantised to whole texels.
+ */
+export function coverageToSdf(coverage, width, height, range = DEFAULT_SDF_RANGE) {
+    if (!(range > 0))
+        throw new RangeError("sdf range must be greater than zero");
+    const size = width * height;
+    if (coverage.length !== size)
+        throw new RangeError(`coverage must hold ${size} texels`);
+    const insideSeeds = new Uint8Array(size);
+    const outsideSeeds = new Uint8Array(size);
+    for (let index = 0; index < size; index++) {
+        if (coverage[index] > 127)
+            insideSeeds[index] = 1;
+        else
+            outsideSeeds[index] = 1;
+    }
+    const distanceToInside = edtSquared(insideSeeds, width, height);
+    const distanceToOutside = edtSquared(outsideSeeds, width, height);
+    const scale = 1 / (2 * range);
+    const result = new Uint8Array(size);
+    for (let index = 0; index < size; index++) {
+        const ink = coverage[index] / 255;
+        let signed;
+        if (ink > 0 && ink < 1)
+            signed = ink - 0.5;
+        else if (ink >= 1)
+            signed = Math.sqrt(distanceToOutside[index]) - 0.5;
+        else
+            signed = -(Math.sqrt(distanceToInside[index]) - 0.5);
+        const encoded = Math.round((signed * scale + 0.5) * 255);
+        result[index] = encoded < 0 ? 0 : encoded > 255 ? 255 : encoded;
+    }
+    return result;
+}

package/dist/vector-math.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Small vector helpers shared by the geometry generators and the example layouts.
+ *
+ * These live in the library rather than next to the gallery scenes because
+ * `geometry-generators.ts` needs them, and a library module must not reach into
+ * the example code.
+ */
+import type { Vec3 } from "./frame-draw-list.js";
+export declare function normalizeVector(p: Vec3): Vec3;
+export declare function crossVector(a: Vec3, b: Vec3): Vec3;
+/** Right-handed Rodrigues rotation, equivalent to reference `Vector3.rotated(axis, angle)`. */
+export declare function rotateAroundAxis(p: Vec3, axis: Vec3, angle: number): Vec3;
+export type CircleBasis = {
+    readonly x: Vec3;
+    readonly y: Vec3;
+    readonly z: Vec3;
+};
+/** Orthonormal basis for a circle in the plane whose normal is `normal`. */
+export declare function circleBasis(normal: Vec3, angle: number): CircleBasis;

package/dist/vector-math.js

@@ -0,0 +1,37 @@
+/**
+ * Small vector helpers shared by the geometry generators and the example layouts.
+ *
+ * These live in the library rather than next to the gallery scenes because
+ * `geometry-generators.ts` needs them, and a library module must not reach into
+ * the example code.
+ */
+export function normalizeVector(p) {
+    const length = Math.hypot(p[0], p[1], p[2]) || 1;
+    return [p[0] / length, p[1] / length, p[2] / length];
+}
+export function crossVector(a, b) {
+    return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+}
+/** Right-handed Rodrigues rotation, equivalent to reference `Vector3.rotated(axis, angle)`. */
+export function rotateAroundAxis(p, axis, angle) {
+    const a = normalizeVector(axis);
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const dot = p[0] * a[0] + p[1] * a[1] + p[2] * a[2];
+    const cross = crossVector(a, p);
+    return [
+        p[0] * cos + cross[0] * sin + a[0] * dot * (1 - cos),
+        p[1] * cos + cross[1] * sin + a[1] * dot * (1 - cos),
+        p[2] * cos + cross[2] * sin + a[2] * dot * (1 - cos),
+    ];
+}
+/** Orthonormal basis for a circle in the plane whose normal is `normal`. */
+export function circleBasis(normal, angle) {
+    const n = normalizeVector(normal);
+    const reference = Math.abs(n[0]) > 0.95 ? [0, 0, 1] : [1, 0, 0];
+    const projection = reference[0] * n[0] + reference[1] * n[1] + reference[2] * n[2];
+    const planar = [reference[0] - n[0] * projection, reference[1] - n[1] * projection, reference[2] - n[2] * projection];
+    const widthAxis = normalizeVector(rotateAroundAxis(normalizeVector(planar), n, angle));
+    const heightAxis = normalizeVector(crossVector(n, widthAxis));
+    return { x: widthAxis, y: heightAxis, z: n };
+}

package/package.json

@@ -1,6 +1,82 @@
 {
   "name": "vgpu-render",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "WebGPU debug-draw, gizmo, infinite grid and text layer built on vgpu",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "keywords": [
+    "webgpu",
+    "wgsl",
+    "vgpu",
+    "debug-draw",
+    "gizmo",
+    "gizmos",
+    "infinite-grid",
+    "text-rendering",
+    "msdf"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jwu/vgpu-render.git"
+  },
+  "homepage": "https://jwu.github.io/vgpu-render/",
+  "bugs": {
+    "url": "https://github.com/jwu/vgpu-render/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "tsc -p tsconfig.build.json && bun scripts/strip-brand-from-dist.ts",
+    "prepublishOnly": "bun run typecheck && bun run build:lib",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "vgpu": "^0.6.0"
+  },
+  "dependencies": {
+    "@vgpu/wgsl": "^0.6.0",
+    "opentype.js": "^2.0.0"
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "latest",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vgpu/wgsl": "^0.6.0",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.4.0",
+    "lucide-react": "^1.57.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "shadcn": "^4.21.5",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "latest",
+    "vgpu": "^0.6.0",
+    "vite": "latest",
+    "vitest": "latest"
+  }
+}