abstract-3d 3.1.2 → 4.0.0-beta.0

package/lib/renderers/three/quality/quality.js

@@ -0,0 +1,64 @@
+import { N8AOPass } from "n8ao";
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
+const pixelRatioCaps = { low: 1, medium: 1.5, high: 2 };
+const windowSize = 30;
+const slowFrameMs = 25;
+/** Longer intervals are pauses between moves, not slow frames */
+const pauseMs = 250;
+const fadeFrames = 6;
+const intensity = 2;
+/** Records the time between two frames while the camera moves; true when that dropped the tier */
+export function recordFrame(governor, intervalMs) {
+    if (governor.quality !== "auto" || governor.tier === "low" || intervalMs > pauseMs) {
+        return false;
+    }
+    governor.sum += intervalMs;
+    governor.count += 1;
+    if (governor.count < windowSize) {
+        return false;
+    }
+    const slow = governor.sum / governor.count > slowFrameMs;
+    Object.assign(governor, { sum: 0, count: 0 }, slow ? { tier: "low" } : {});
+    return slow;
+}
+/** Also sets the renderer's pixel ratio, capped by the tier */
+export function createRenderPath(renderer, scene, camera, tier) {
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, pixelRatioCaps[tier]));
+    if (tier === "low") {
+        return { tier, composer: undefined, ao: undefined, fade: { frame: 0 } };
+    }
+    const composer = new EffectComposer(renderer);
+    const ao = new N8AOPass(scene, camera);
+    Object.assign(ao.configuration, {
+        aoRadius: 40,
+        distanceFalloff: 0.2,
+        screenSpaceRadius: true,
+        halfRes: true,
+        denoiseSamples: 4,
+        gammaCorrection: false,
+    });
+    // Multisampled, as SMAA, which N8AO suggests, would lose the antialiased alpha at edges over the transparent background
+    ao.beautyRenderTarget.samples = 4;
+    composer.addPass(ao);
+    // Tone mapping and sRGB, which rendering to the screen otherwise does
+    composer.addPass(new OutputPass());
+    return { tier, composer, ao, fade: { frame: 0 } };
+}
+/** Renders a frame; true while the frame at rest needs more frames to fade its ambient occlusion in */
+export function renderPath(path, renderer, scene, camera, moving) {
+    if (!path.composer || !path.ao || (moving && path.tier === "medium")) {
+        path.fade.frame = 0;
+        renderer.render(scene, camera);
+        return false;
+    }
+    path.fade.frame = path.tier === "high" ? fadeFrames : Math.min(fadeFrames, path.fade.frame + 1);
+    path.ao.configuration.intensity = (intensity * path.fade.frame) / fadeFrames;
+    path.composer.render();
+    return path.fade.frame < fadeFrames;
+}
+export function disposeRenderPath(path) {
+    path.composer?.passes.forEach((p) => p.dispose());
+    path.composer?.dispose();
+}
+//# sourceMappingURL=quality.js.map

package/lib/renderers/three/quality/quality.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality.js","sourceRoot":"","sources":["../../../../src/renderers/three/quality/quality.ts"],"names":[],"mappings":"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"}

package/lib/renderers/three/quality/quality.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=quality.test.d.ts.map

package/lib/renderers/three/quality/quality.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality.test.d.ts","sourceRoot":"","sources":["../../../../src/renderers/three/quality/quality.test.ts"],"names":[],"mappings":""}

package/lib/renderers/three/quality/quality.test.js

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { recordFrame } from "./quality.js";
+const governor = (quality) => ({ quality, tier: quality === "auto" ? "medium" : quality, sum: 0, count: 0 });
+const record = (g, intervals) => intervals.map((ms) => recordFrame(g, ms));
+describe("recordFrame", () => {
+    it("keeps a fixed quality", () => {
+        const g = governor("high");
+        record(g, Array(100).fill(100));
+        expect(g.tier).toBe("high");
+    });
+    it("drops auto to low for good when moving frames are slow", () => {
+        const g = governor("auto");
+        expect(record(g, Array(30).fill(40)).filter(Boolean)).toHaveLength(1);
+        record(g, Array(100).fill(5));
+        expect(g.tier).toBe("low");
+    });
+    it("keeps auto at medium at 60 frames per second, ignoring the pauses between moves", () => {
+        const g = governor("auto");
+        record(g, Array.from({ length: 100 }, (_, i) => (i % 10 === 0 ? 2000 : 16.7)));
+        expect(g.tier).toBe("medium");
+    });
+});
+//# sourceMappingURL=quality.test.js.map

package/lib/renderers/three/quality/quality.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality.test.js","sourceRoot":"","sources":["../../../../src/renderers/three/quality/quality.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,QAAQ,GAAG,CAAC,OAAgB,EAAgB,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;AACpI,MAAM,MAAM,GAAG,CAAC,CAAe,EAAE,SAAgC,EAA0B,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAExI,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3B,MAAM,CAAC,CAAC,EAAE,KAAK,CAAS,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACxC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;QAChE,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3B,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC9E,MAAM,CAAC,CAAC,EAAE,KAAK,CAAS,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iFAAiF,EAAE,GAAG,EAAE;QACzF,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3B,MAAM,CACJ,CAAC,EACD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CACpE,CAAC;QACF,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/renderers/three/quality.d.ts

@@ -0,0 +1,24 @@
+import type { OrthographicCamera, PerspectiveCamera, Scene } from "three";
+import { type WebGPURenderer } from "three/webgpu";
+/**
+ * Quality tiers that spend the GPU where it shows: the camera is still most of the time, and a still frame can afford ambient occlusion that a moving
+ * one can't on a weak GPU
+ */
+export type Tier = "low" | "medium" | "high";
+export type Quality = Tier | "auto";
+export declare const getPixelRatio: (tier: Tier, devicePixelRatio: number) => number;
+export type TierGovernor = {
+    readonly tier: () => Tier;
+    /** Records the time between two frames while the camera moves; returns the new tier when it changes */
+    readonly record: (intervalMs: number) => Tier | undefined;
+};
+/** `auto` starts at medium, and drops to low for good once moving frames average slower than 40 per second */
+export declare function createTierGovernor(quality: Quality): TierGovernor;
+export type RenderPath = {
+    /** Renders a frame; true while the frame at rest needs more frames to fade its ambient occlusion in */
+    readonly render: (moving: boolean) => boolean;
+    readonly dispose: () => void;
+};
+/** Low renders directly; medium adds ambient occlusion at rest, faded in; high has it while moving too */
+export declare function createRenderPath(renderer: WebGPURenderer, scene: Scene, camera: PerspectiveCamera | OrthographicCamera, tier: Tier, aoRadius: number): RenderPath;
+//# sourceMappingURL=quality.d.ts.map

package/lib/renderers/three/quality.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality.d.ts","sourceRoot":"","sources":["../../../src/renderers/three/quality.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9E;;;GAGG;AAEH,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7C,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAIpC,eAAO,MAAM,aAAa,SAAU,IAAI,oBAAoB,MAAM,KAAG,MAA0D,CAAC;AAEhI,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;IAC1B,uGAAuG;IACvG,QAAQ,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,GAAG,SAAS,CAAC;CAC3D,CAAC;AAOF,8GAA8G;AAC9G,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,YAAY,CAkBjE;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,uGAAuG;IACvG,QAAQ,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAC9C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAIF,0GAA0G;AAC1G,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,iBAAiB,GAAG,kBAAkB,EAC9C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAM,GACf,UAAU,CAkCZ"}

package/lib/renderers/three/quality.js

@@ -0,0 +1,67 @@
+import { ao } from "three/addons/tsl/display/GTAONode.js";
+import { float, mix, pass, screenUV, uniform, vec4 } from "three/tsl";
+import { RenderPipeline } from "three/webgpu";
+const pixelRatioCaps = { low: 1, medium: 1.5, high: 2 };
+export const getPixelRatio = (tier, devicePixelRatio) => Math.min(devicePixelRatio, pixelRatioCaps[tier]);
+const windowSize = 30;
+const slowFrameMs = 25;
+/** Longer intervals are pauses between moves, not slow frames */
+const pauseMs = 250;
+/** `auto` starts at medium, and drops to low for good once moving frames average slower than 40 per second */
+export function createTierGovernor(quality) {
+    const state = { tier: quality === "auto" ? "medium" : quality, sum: 0, count: 0 };
+    return {
+        tier: () => state.tier,
+        record: (intervalMs) => {
+            if (quality !== "auto" || state.tier === "low" || intervalMs > pauseMs) {
+                return undefined;
+            }
+            state.sum += intervalMs;
+            state.count += 1;
+            if (state.count < windowSize) {
+                return undefined;
+            }
+            const slow = state.sum / state.count > slowFrameMs;
+            Object.assign(state, { sum: 0, count: 0 }, slow ? { tier: "low" } : {});
+            return slow ? state.tier : undefined;
+        },
+    };
+}
+const fadeFrames = 6;
+/** Low renders directly; medium adds ambient occlusion at rest, faded in; high has it while moving too */
+export function createRenderPath(renderer, scene, camera, tier, aoRadius) {
+    if (tier === "low") {
+        return { render: () => (renderer.render(scene, camera), false), dispose: () => undefined };
+    }
+    const pipeline = new RenderPipeline(renderer);
+    // Multisampled, as SMAA would lose the antialiased alpha at edges over the transparent background
+    const scenePass = pass(scene, camera, { samples: 4 });
+    const color = scenePass.getTextureNode("output");
+    // Normals are reconstructed from depth, so there's no extra normal pass; the typings miss that the normal node is optional
+    const aoPass = ao(scenePass.getTextureNode("depth"), null, camera);
+    aoPass.resolutionScale = 0.5;
+    aoPass.radius.value = aoRadius;
+    const strength = uniform(0);
+    const occlusion = mix(float(1), aoPass.getTextureNode().sample(screenUV).r, strength);
+    pipeline.outputNode = vec4(color.rgb.mul(occlusion), color.a);
+    const fade = { frame: 0 };
+    return {
+        render: (moving) => {
+            if (moving && tier === "medium") {
+                fade.frame = 0;
+                renderer.render(scene, camera);
+                return false;
+            }
+            fade.frame = tier === "high" ? fadeFrames : Math.min(fadeFrames, fade.frame + 1);
+            strength.value = fade.frame / fadeFrames;
+            pipeline.render();
+            return fade.frame < fadeFrames;
+        },
+        dispose: () => {
+            aoPass.dispose();
+            scenePass.dispose();
+            pipeline.dispose();
+        },
+    };
+}
+//# sourceMappingURL=quality.js.map

package/lib/renderers/three/quality.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality.js","sourceRoot":"","sources":["../../../src/renderers/three/quality.ts"],"names":[],"mappings":"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"}

package/lib/renderers/three/text/text.d.ts

@@ -0,0 +1,55 @@
+import TinySDF from "@mapbox/tiny-sdf";
+import { DataTexture } from "three";
+/**
+ * Text as signed distance field glyphs from the system font, packed into one atlas texture, so all text draws in one call. The glyph atlas is Mapbox
+ * GL JS's approach (its @mapbox/tiny-sdf rasterizes), and the distance field text Valve's (Green, "Improved Alpha-Tested Magnification for Vector
+ * Textures and Special Effects", SIGGRAPH 2007)
+ */
+export declare const RASTER_SIZE = 40;
+export declare const SDF_BUFFER = 4;
+/** The distance field's value at the glyph's edge, from tiny-sdf's default cutoff of 0.25 */
+export declare const SDF_EDGE = 0.75;
+export type GlyphBitmap = ReturnType<TinySDF["draw"]>;
+export type Rasterize = (char: string) => GlyphBitmap;
+export type Glyph = {
+    /** The glyph's place in the atlas as a uv offset and scale, for a quad with uv (0, 0) at its bottom left */
+    readonly rect: readonly [number, number, number, number];
+    /** The bitmap's left and top edges and size, in em, from the pen at the baseline; no width for glyphs without ink */
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+    readonly advance: number;
+};
+export type GlyphAtlas = {
+    readonly texture: DataTexture;
+    readonly size: number;
+    readonly glyphs: Map<string, Glyph>;
+    /** Where the next glyph goes: the current row's top and next x, and its height */
+    readonly shelf: {
+        x: number;
+        y: number;
+        height: number;
+    };
+    readonly rasterize: Rasterize | undefined;
+    readonly sdf: {
+        current?: TinySDF;
+    };
+};
+/** A quad of a laid out text, with its center and size in the text's units, centered on the origin */
+export type GlyphQuad = {
+    readonly glyph: Glyph;
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+};
+/** Without `rasterize`, glyphs are rasterized with the OS's built-in Helvetica or Arial, on a canvas created at first use */
+export declare function createGlyphAtlas(rasterize?: Rasterize, size?: number): GlyphAtlas;
+export declare function getGlyph(atlas: GlyphAtlas, char: string): Glyph;
+/**
+ * Lays out the text centered on the origin, each line centered, as drei's Text (troika-three-text) did with the r3f renderer's line height and
+ * spacing
+ */
+export declare function layoutText(atlas: GlyphAtlas, text: string, fontSize: number): ReadonlyArray<GlyphQuad>;
+//# sourceMappingURL=text.d.ts.map

package/lib/renderers/three/text/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/renderers/three/text/text.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,WAAW,EAA6C,MAAM,OAAO,CAAC;AAE/E;;;;GAIG;AAEH,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,UAAU,IAAI,CAAC;AAC5B,6FAA6F;AAC7F,eAAO,MAAM,QAAQ,OAAO,CAAC;AAM7B,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AACtD,MAAM,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,WAAW,CAAC;AAEtD,MAAM,MAAM,KAAK,GAAG;IAClB,4GAA4G;IAC5G,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACzD,qHAAqH;IACrH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACpC,kFAAkF;IAClF,QAAQ,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,GAAG,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF,sGAAsG;AACtG,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,6HAA6H;AAC7H,wBAAgB,gBAAgB,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,SAAO,GAAG,UAAU,CAI/E;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,GAAG,KAAK,CAoB/D;AAqBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAwBtG"}

package/lib/renderers/three/text/text.js

@@ -0,0 +1,90 @@
+import TinySDF from "@mapbox/tiny-sdf";
+import { DataTexture, LinearFilter, RedFormat, UnsignedByteType } from "three";
+/**
+ * Text as signed distance field glyphs from the system font, packed into one atlas texture, so all text draws in one call. The glyph atlas is Mapbox
+ * GL JS's approach (its @mapbox/tiny-sdf rasterizes), and the distance field text Valve's (Green, "Improved Alpha-Tested Magnification for Vector
+ * Textures and Special Effects", SIGGRAPH 2007)
+ */
+export const RASTER_SIZE = 40;
+export const SDF_BUFFER = 4;
+/** The distance field's value at the glyph's edge, from tiny-sdf's default cutoff of 0.25 */
+export const SDF_EDGE = 0.75;
+const LINE_HEIGHT = 1.5;
+const LETTER_SPACING = 0.001;
+/** Of the font size, above the baseline, to center a line's glyphs in it */
+const ASCENT = 0.8;
+/** Without `rasterize`, glyphs are rasterized with the OS's built-in Helvetica or Arial, on a canvas created at first use */
+export function createGlyphAtlas(rasterize, size = 1024) {
+    const texture = new DataTexture(new Uint8Array(size * size), size, size, RedFormat, UnsignedByteType);
+    Object.assign(texture, { minFilter: LinearFilter, magFilter: LinearFilter, generateMipmaps: false });
+    return { texture, size, glyphs: new Map(), shelf: { x: 0, y: 0, height: 0 }, rasterize, sdf: {} };
+}
+export function getGlyph(atlas, char) {
+    const cached = atlas.glyphs.get(char);
+    if (cached) {
+        return cached;
+    }
+    atlas.sdf.current ??= atlas.rasterize
+        ? undefined
+        : new TinySDF({ fontSize: RASTER_SIZE, buffer: SDF_BUFFER, radius: 10, fontFamily: "Helvetica, Arial, sans-serif" });
+    const bitmap = atlas.rasterize?.(char) ?? atlas.sdf.current.draw(char);
+    const rect = bitmap.width > 2 * SDF_BUFFER && bitmap.height > 2 * SDF_BUFFER ? packGlyph(atlas, bitmap) : undefined;
+    const glyph = {
+        rect: rect ?? [0, 0, 0, 0],
+        left: (bitmap.glyphLeft - SDF_BUFFER) / RASTER_SIZE,
+        top: (bitmap.glyphTop + SDF_BUFFER) / RASTER_SIZE,
+        width: rect ? bitmap.width / RASTER_SIZE : 0,
+        height: rect ? bitmap.height / RASTER_SIZE : 0,
+        advance: bitmap.glyphAdvance / RASTER_SIZE,
+    };
+    atlas.glyphs.set(char, glyph);
+    return glyph;
+}
+/** Copies the bitmap to the atlas, left to right in rows, or leaves it out when the atlas is full; shelf packing, as @mapbox/shelf-pack does */
+function packGlyph({ texture, size, shelf }, bitmap) {
+    if (shelf.x + bitmap.width > size) {
+        Object.assign(shelf, { x: 0, y: shelf.y + shelf.height, height: 0 });
+    }
+    if (shelf.y + bitmap.height > size) {
+        return undefined;
+    }
+    const { x, y } = shelf;
+    const data = texture.image.data;
+    for (let row = 0; row < bitmap.height; row++) {
+        data.set(bitmap.data.subarray(row * bitmap.width, (row + 1) * bitmap.width), (y + row) * size + x);
+    }
+    Object.assign(shelf, { x: x + bitmap.width, height: Math.max(shelf.height, bitmap.height) });
+    texture.needsUpdate = true;
+    // Bitmap rows run top down from the texture's v = 0, while the quad's uv runs bottom up
+    return [x / size, (y + bitmap.height) / size, bitmap.width / size, -bitmap.height / size];
+}
+/**
+ * Lays out the text centered on the origin, each line centered, as drei's Text (troika-three-text) did with the r3f renderer's line height and
+ * spacing
+ */
+export function layoutText(atlas, text, fontSize) {
+    const lineHeight = LINE_HEIGHT * fontSize;
+    const lines = text.split("\n");
+    return lines.flatMap((line, i) => {
+        const glyphs = Array.from(line, (char) => getGlyph(atlas, char));
+        const advances = glyphs.map((g) => (g.advance + LETTER_SPACING) * fontSize);
+        const baseline = (lines.length * lineHeight) / 2 - i * lineHeight - (lineHeight - fontSize) / 2 - ASCENT * fontSize;
+        const pen = { x: -advances.reduce((sum, a) => sum + a, 0) / 2 };
+        return glyphs.flatMap((glyph, j) => {
+            const x = pen.x;
+            pen.x += advances[j];
+            return glyph.width === 0
+                ? []
+                : [
+                    {
+                        glyph,
+                        x: x + (glyph.left + glyph.width / 2) * fontSize,
+                        y: baseline + (glyph.top - glyph.height / 2) * fontSize,
+                        width: glyph.width * fontSize,
+                        height: glyph.height * fontSize,
+                    },
+                ];
+        });
+    });
+}
+//# sourceMappingURL=text.js.map

package/lib/renderers/three/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../../src/renderers/three/text/text.ts"],"names":[],"mappings":"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"}

package/lib/renderers/three/text/text.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text.test.d.ts.map

package/lib/renderers/three/text/text.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.test.d.ts","sourceRoot":"","sources":["../../../../src/renderers/three/text/text.test.ts"],"names":[],"mappings":""}

package/lib/renderers/three/text/text.test.js

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import { createGlyphAtlas, getGlyph, layoutText, RASTER_SIZE, SDF_BUFFER } from "./text.js";
+/** Glyphs of 20 px ink, 30 px of it above the baseline, a 24 px advance, filled with their char code */
+const rasterize = (char) => {
+    const [glyphWidth, glyphHeight] = char === " " ? [0, 0] : [20, 40];
+    const [width, height] = [glyphWidth + 2 * SDF_BUFFER, glyphHeight + 2 * SDF_BUFFER];
+    return {
+        data: new Uint8ClampedArray(width * height).fill(char.charCodeAt(0)),
+        width,
+        height,
+        glyphWidth,
+        glyphHeight,
+        glyphLeft: 2,
+        glyphTop: 30,
+        glyphAdvance: 24,
+    };
+};
+const em = (px) => px / RASTER_SIZE;
+const round = (v) => Math.round(v * 1e4) / 1e4;
+describe("getGlyph", () => {
+    it("packs each glyph once, left to right, and writes its bitmap", () => {
+        const atlas = createGlyphAtlas(rasterize, 64);
+        const a = getGlyph(atlas, "A");
+        expect(getGlyph(atlas, "A")).toBe(a);
+        const b = getGlyph(atlas, "B");
+        const data = atlas.texture.image.data;
+        expect([data[0], data[28]]).toEqual([65, 66]);
+        expect(a.rect.map(round)).toEqual([0, round(48 / 64), round(28 / 64), round(-48 / 64)]);
+        expect(b.rect[0]).toBe(28 / 64);
+    });
+    it("starts a new row when a row is full", () => {
+        const atlas = createGlyphAtlas(rasterize, 128);
+        ["A", "B", "C", "D"].forEach((char) => getGlyph(atlas, char));
+        expect(getGlyph(atlas, "E").rect.slice(0, 2)).toEqual([0, 96 / 128]);
+    });
+    it("gives glyphs their bitmap's position and size in em, from the pen at the baseline", () => {
+        expect(getGlyph(createGlyphAtlas(rasterize, 64), "A")).toMatchObject({
+            left: em(2 - SDF_BUFFER),
+            top: em(30 + SDF_BUFFER),
+            width: em(28),
+            height: em(48),
+            advance: em(24),
+        });
+    });
+    it("leaves glyphs without ink out of the atlas", () => {
+        const atlas = createGlyphAtlas(rasterize, 64);
+        expect(getGlyph(atlas, " ").width).toBe(0);
+        expect(getGlyph(atlas, "A").rect[0]).toBe(0);
+    });
+});
+describe("layoutText", () => {
+    const atlas = createGlyphAtlas(rasterize, 256);
+    it("centers a line on the origin", () => {
+        const advance = 24 + 0.001 * 40;
+        const quads = layoutText(atlas, "AA", 40);
+        expect(quads.map((q) => round(q.x))).toEqual([round(-advance + 2 - SDF_BUFFER + 14), round(2 - SDF_BUFFER + 14)]);
+        expect(quads.map((q) => [round(q.width), round(q.height)])).toEqual([
+            [28, 48],
+            [28, 48],
+        ]);
+    });
+    it("stacks lines 1.5 font sizes apart, centered vertically as a block", () => {
+        // The block is 120 high; each baseline is half the 20 of leading and an ascent of 32 below its line's top, and the glyphs' centers 10 above it
+        expect(layoutText(atlas, "A\nA", 40).map((q) => round(q.y))).toEqual([28, -32]);
+    });
+    it("skips glyphs without ink but keeps their advance", () => {
+        expect(layoutText(atlas, "A A", 40)).toHaveLength(2);
+    });
+});
+//# sourceMappingURL=text.test.js.map

package/lib/renderers/three/text/text.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.test.js","sourceRoot":"","sources":["../../../../src/renderers/three/text/text.test.ts"],"names":[],"mappings":"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"}

package/lib/renderers/three/text.d.ts

@@ -0,0 +1,53 @@
+import { DataTexture, Matrix4 } from "three";
+import type { Part } from "./build.js";
+/** Text as signed distance field glyphs from the system font, packed into one atlas texture, so all text draws in one call */
+export declare const RASTER_SIZE = 40;
+export declare const SDF_BUFFER = 4;
+/** The distance field's value at the glyph's edge, from tiny-sdf's default cutoff of 0.25 */
+export declare const SDF_EDGE = 0.75;
+export type GlyphBitmap = {
+    readonly data: Uint8ClampedArray;
+    readonly width: number;
+    readonly height: number;
+    readonly glyphLeft: number;
+    readonly glyphTop: number;
+    readonly glyphAdvance: number;
+};
+export type Rasterize = (char: string) => GlyphBitmap;
+export type Glyph = {
+    /** The glyph's place in the atlas as a uv offset and scale, for a quad with uv (0, 0) at its bottom left */
+    readonly rect: readonly [number, number, number, number];
+    /** The bitmap's left and top edges and size, in em, from the pen at the baseline; no width for glyphs without ink */
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+    readonly advance: number;
+};
+export type GlyphAtlas = {
+    readonly texture: DataTexture;
+    readonly getGlyph: (char: string) => Glyph;
+    readonly dispose: () => void;
+};
+/** A quad of a laid out text, with its center and size in the text's units, centered on the origin */
+export type GlyphQuad = {
+    readonly glyph: Glyph;
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+};
+/** Rasterizes with the OS's built-in Helvetica or Arial, on a canvas created at first use */
+export declare function createSystemFontRasterizer(): Rasterize;
+export declare function createGlyphAtlas(rasterize?: Rasterize, size?: number): GlyphAtlas;
+/** Lays out the text centered on the origin, each line centered, as drei's Text did */
+export declare function layoutText(text: string, fontSize: number, getGlyph: (char: string) => Glyph): ReadonlyArray<GlyphQuad>;
+export type TextEntry = {
+    readonly text: string;
+    readonly fontSize: number;
+    /** The text's position and rotation, relative to its item's matrix */
+    readonly local: Matrix4;
+};
+/** All texts of a part as glyph quads of one instanced mesh, each slot a text */
+export declare function createTextPart(entries: ReadonlyArray<TextEntry>, atlas: GlyphAtlas): Part;
+//# sourceMappingURL=text.d.ts.map

package/lib/renderers/three/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/renderers/three/text.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,WAAW,EAKX,OAAO,EAKR,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEvC,8HAA8H;AAE9H,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B,6FAA6F;AAC7F,eAAO,MAAM,QAAQ,OAAO,CAAC;AAO7B,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,WAAW,CAAC;AAEtD,MAAM,MAAM,KAAK,GAAG;IAClB,4GAA4G;IAC5G,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACzD,qHAAqH;IACrH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC;IAC3C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,sGAAsG;AACtG,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,6FAA6F;AAC7F,wBAAgB,0BAA0B,IAAI,SAAS,CAMtD;AAED,wBAAgB,gBAAgB,CAAC,SAAS,GAAE,SAAwC,EAAE,IAAI,SAAO,GAAG,UAAU,CA+C7G;AAED,uFAAuF;AACvF,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,GAAG,aAAa,CAAC,SAAS,CAAC,CAuBtH;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,sEAAsE;IACtE,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,iFAAiF;AACjF,wBAAgB,cAAc,CAAC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CA8CzF"}