@multiplekex/shallot 0.1.12 → 0.2.0

package/src/extras/text/index.ts

@@ -1,142 +1,88 @@
-import TinySDF from "@mapbox/tiny-sdf";
+import { type Font, loadFont } from "./font";
+import { SDFGenerator } from "./sdf";
 import {
     MAX_ENTITIES,
     resource,
     registerPostLoadHook,
+    createFieldProxy,
     type Plugin,
     type State,
     type System,
     type PostLoadContext,
+    type FieldProxy,
 } from "../../core";
-import { setTraits, type FieldAccessor } from "../../core/component";
+import { setTraits } from "../../core/component";
 import { Compute, ComputePlugin } from "../../standard/compute";
 import {
     Render,
     RenderPlugin,
-    DEPTH_FORMAT,
     Pass,
     registerDraw,
     type Draw,
     type SharedPassContext,
 } from "../../standard/render";
+import { DEPTH_FORMAT } from "../../standard/render/scene";
+import { SCENE_STRUCT_WGSL } from "../../standard/render/shaders";
 import { Transform } from "../../standard/transforms";
 
 const MAX_GLYPHS = 50000;
 const GLYPH_FLOATS = 16;
+const SDF_SIZE = 64;
 const SDF_EXPONENT = 9;
-const SDF_CUTOFF = 0.5;
-
-let customFontFamily: string | null = null;
-let customFontWeight: string = "normal";
-
-function encodeExponentialSdf(linearData: Uint8Array): Uint8Array {
-    const encoded = new Uint8Array(linearData.length);
-    for (let i = 0; i < linearData.length; i++) {
-        // TinySDF outputs: 0=outside, 255=inside, cutoff*255=edge
-        // Convert to signed distance: positive=outside, negative=inside
-        const raw = linearData[i] / 255;
-        const signedDist = (SDF_CUTOFF - raw) / SDF_CUTOFF;
-
-        // Apply exponential encoding (Troika formula)
-        const absDist = Math.min(1, Math.abs(signedDist));
-        let alpha = Math.pow(1 - absDist, SDF_EXPONENT) / 2;
-        if (signedDist < 0) {
-            alpha = 1 - alpha;
-        }
-        encoded[i] = Math.round(Math.max(0, Math.min(255, alpha * 255)));
-    }
-    return encoded;
+
+const fontUrls: string[] = [];
+const loadedFonts: (Font | null)[] = [];
+
+export function font(url: string): number {
+    const id = fontUrls.length;
+    fontUrls.push(url);
+    loadedFonts.push(null);
+    return id;
+}
+
+export function getFont(id: number): Font | null {
+    return loadedFonts[id] ?? null;
 }
 
-export async function setTextFont(fontFamily: string, weight: number = 400): Promise<void> {
-    const fontSpec = `${weight} 128px "${fontFamily}"`;
-    await document.fonts.load(fontSpec);
-    customFontFamily = fontFamily;
-    customFontWeight = weight >= 600 ? "bold" : "normal";
+export function clearFonts(): void {
+    fontUrls.length = 0;
+    loadedFonts.length = 0;
+}
+
+async function loadAllFonts(): Promise<void> {
+    await Promise.all(
+        fontUrls.map(async (url, id) => {
+            loadedFonts[id] = await loadFont(url);
+        })
+    );
 }
 
 export const TextData = {
     data: new Float32Array(MAX_ENTITIES * 12),
+    fonts: new Uint32Array(MAX_ENTITIES),
 };
 
-interface TextProxy extends Array<number>, FieldAccessor {}
-
-function textProxy(offset: number): TextProxy {
-    const data = TextData.data;
-
-    function getValue(eid: number): number {
-        return data[eid * 12 + offset];
-    }
-
-    function setValue(eid: number, value: number): void {
-        data[eid * 12 + offset] = value;
-    }
-
-    return new Proxy([] as unknown as TextProxy, {
-        get(_, prop) {
-            if (prop === "get") return getValue;
-            if (prop === "set") return setValue;
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return undefined;
-            return getValue(eid);
-        },
-        set(_, prop, value) {
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return false;
-            setValue(eid, value);
-            return true;
-        },
-    });
-}
-
-function colorProxy(): TextProxy {
-    const data = TextData.data;
+const data = TextData.data;
+const fonts = TextData.fonts;
 
+function packedColorProxy(data: Float32Array, stride: number, offset: number): FieldProxy {
     function getValue(eid: number): number {
-        const offset = eid * 12 + 8;
-        const r = Math.round(data[offset] * 255);
-        const g = Math.round(data[offset + 1] * 255);
-        const b = Math.round(data[offset + 2] * 255);
+        const o = eid * stride + offset;
+        const r = Math.round(data[o] * 255);
+        const g = Math.round(data[o + 1] * 255);
+        const b = Math.round(data[o + 2] * 255);
         return (r << 16) | (g << 8) | b;
     }
 
     function setValue(eid: number, value: number): void {
-        const offset = eid * 12 + 8;
-        data[offset] = ((value >> 16) & 0xff) / 255;
-        data[offset + 1] = ((value >> 8) & 0xff) / 255;
-        data[offset + 2] = (value & 0xff) / 255;
-        data[offset + 3] = 1;
-    }
-
-    return new Proxy([] as unknown as TextProxy, {
-        get(_, prop) {
-            if (prop === "get") return getValue;
-            if (prop === "set") return setValue;
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return undefined;
-            return getValue(eid);
-        },
-        set(_, prop, value) {
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return false;
-            setValue(eid, value);
-            return true;
-        },
-    });
-}
-
-function colorChannelProxy(channelIndex: number): TextProxy {
-    const data = TextData.data;
-
-    function getValue(eid: number): number {
-        return data[eid * 12 + 8 + channelIndex];
-    }
-
-    function setValue(eid: number, value: number): void {
-        data[eid * 12 + 8 + channelIndex] = value;
+        const o = eid * stride + offset;
+        data[o] = ((value >> 16) & 0xff) / 255;
+        data[o + 1] = ((value >> 8) & 0xff) / 255;
+        data[o + 2] = (value & 0xff) / 255;
+        data[o + 3] = 1;
     }
 
-    return new Proxy([] as unknown as TextProxy, {
+    return new Proxy([] as unknown as FieldProxy, {
         get(_, prop) {
             if (prop === "get") return getValue;
             if (prop === "set") return setValue;
@@ -181,15 +127,16 @@ function contentProxy(): TextContentProxy {
 
 export const Text = {
     content: contentProxy(),
-    fontSize: textProxy(0),
-    opacity: textProxy(1),
-    visible: textProxy(2),
-    anchorX: textProxy(3),
-    anchorY: textProxy(4),
-    color: colorProxy(),
-    colorR: colorChannelProxy(0),
-    colorG: colorChannelProxy(1),
-    colorB: colorChannelProxy(2),
+    font: fonts,
+    fontSize: createFieldProxy(data, 12, 0),
+    opacity: createFieldProxy(data, 12, 1),
+    visible: createFieldProxy(data, 12, 2),
+    anchorX: createFieldProxy(data, 12, 3),
+    anchorY: createFieldProxy(data, 12, 4),
+    color: packedColorProxy(data, 12, 8),
+    colorR: createFieldProxy(data, 12, 8),
+    colorG: createFieldProxy(data, 12, 9),
+    colorB: createFieldProxy(data, 12, 10),
 };
 
 interface PendingText {
@@ -223,6 +170,7 @@ function finalizePendingText(_state: State, _context: PostLoadContext): void {
 
 setTraits(Text, {
     defaults: () => ({
+        font: 0,
         fontSize: 1,
         opacity: 1,
         visible: 1,
@@ -238,6 +186,7 @@ setTraits(Text, {
             pendingTextContent.push({ eid, content: parsed.content });
         }
 
+        if (parsed.font) result.font = parseInt(parsed.font, 10);
         if (parsed["font-size"]) result.fontSize = parseFloat(parsed["font-size"]);
         if (parsed.fontSize) result.fontSize = parseFloat(parsed.fontSize);
         if (parsed.opacity) result.opacity = parseFloat(parsed.opacity);
@@ -259,17 +208,6 @@ setTraits(Text, {
 
         return result;
     },
-    accessors: {
-        fontSize: Text.fontSize,
-        opacity: Text.opacity,
-        visible: Text.visible,
-        anchorX: Text.anchorX,
-        anchorY: Text.anchorY,
-        color: Text.color,
-        colorR: Text.colorR,
-        colorG: Text.colorG,
-        colorB: Text.colorB,
-    },
 });
 
 interface GlyphMetrics {
@@ -295,30 +233,25 @@ interface GlyphAtlas {
     rowHeight: number;
     cursorX: number;
     cursorY: number;
-    sdf: TinySDF;
-    sdfFontSize: number;
+    font: Font;
+    sdfGenerator: SDFGenerator;
 }
 
-function createGlyphAtlas(device: GPUDevice): GlyphAtlas {
+function createGlyphAtlas(device: GPUDevice, font: Font): GlyphAtlas {
     const width = 2048;
     const height = 2048;
-    const fontSize = 128;
 
     const texture = device.createTexture({
         size: { width, height },
         format: "r8unorm",
-        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
         label: "glyphAtlas",
     });
 
-    const sdf = new TinySDF({
-        fontSize,
-        fontFamily: customFontFamily ?? "system-ui, sans-serif",
-        fontWeight: customFontWeight,
-        fontStyle: "normal",
-        buffer: 16,
-        radius: 48,
-        cutoff: 0.5,
+    const sdfGenerator = new SDFGenerator({
+        device,
+        sdfSize: SDF_SIZE,
+        exponent: SDF_EXPONENT,
     });
 
     return {
@@ -330,63 +263,71 @@ function createGlyphAtlas(device: GPUDevice): GlyphAtlas {
         rowHeight: 0,
         cursorX: 0,
         cursorY: 0,
-        sdf,
-        sdfFontSize: fontSize,
+        font,
+        sdfGenerator,
     };
 }
 
-function ensureGlyph(device: GPUDevice, atlas: GlyphAtlas, char: string): GlyphMetrics {
+function ensureGlyph(atlas: GlyphAtlas, char: string): GlyphMetrics | null {
     const existing = atlas.glyphs.get(char);
     if (existing) return existing;
 
-    const glyph = atlas.sdf.draw(char);
+    const path = atlas.font.glyphPath(char);
+    const bounds = atlas.font.glyphBounds(char);
+    const advance = atlas.font.advance(char);
+
+    if (!path || !bounds) return null;
+
+    const [xMin, yMin, xMax, yMax] = bounds;
+    const unitsPerEm = atlas.font.unitsPerEm;
+
+    const padding = unitsPerEm * 0.1;
+    const paddedBounds: [number, number, number, number] = [
+        xMin - padding,
+        yMin - padding,
+        xMax + padding,
+        yMax + padding,
+    ];
+
+    const glyphWidth = paddedBounds[2] - paddedBounds[0];
+    const glyphHeight = paddedBounds[3] - paddedBounds[1];
 
-    if (atlas.cursorX + glyph.width > atlas.width) {
+    if (atlas.cursorX + SDF_SIZE > atlas.width) {
         atlas.cursorX = 0;
         atlas.cursorY += atlas.rowHeight;
         atlas.rowHeight = 0;
     }
 
-    if (atlas.cursorY + glyph.height > atlas.height) {
+    if (atlas.cursorY + SDF_SIZE > atlas.height) {
         throw new Error("Glyph atlas full");
     }
 
-    const glyphData = encodeExponentialSdf(new Uint8Array(glyph.data));
-
-    device.queue.writeTexture(
-        {
-            texture: atlas.texture,
-            origin: { x: atlas.cursorX, y: atlas.cursorY },
-        },
-        glyphData as Uint8Array<ArrayBuffer>,
-        { bytesPerRow: glyph.width },
-        { width: glyph.width, height: glyph.height }
-    );
+    atlas.sdfGenerator.generate(path, paddedBounds, atlas.texture, atlas.cursorX, atlas.cursorY);
 
     const metrics: GlyphMetrics = {
-        width: glyph.width,
-        height: glyph.height,
-        glyphWidth: glyph.glyphWidth,
-        glyphHeight: glyph.glyphHeight,
-        glyphTop: glyph.glyphTop,
-        glyphLeft: glyph.glyphLeft,
-        advance: glyph.glyphAdvance,
+        width: SDF_SIZE,
+        height: SDF_SIZE,
+        glyphWidth: glyphWidth / unitsPerEm,
+        glyphHeight: glyphHeight / unitsPerEm,
+        glyphTop: paddedBounds[3] / unitsPerEm,
+        glyphLeft: paddedBounds[0] / unitsPerEm,
+        advance: advance / unitsPerEm,
         u0: atlas.cursorX / atlas.width,
         v0: atlas.cursorY / atlas.height,
-        u1: (atlas.cursorX + glyph.width) / atlas.width,
-        v1: (atlas.cursorY + glyph.height) / atlas.height,
+        u1: (atlas.cursorX + SDF_SIZE) / atlas.width,
+        v1: (atlas.cursorY + SDF_SIZE) / atlas.height,
     };
 
     atlas.glyphs.set(char, metrics);
-    atlas.cursorX += glyph.width;
-    atlas.rowHeight = Math.max(atlas.rowHeight, glyph.height);
+    atlas.cursorX += SDF_SIZE;
+    atlas.rowHeight = Math.max(atlas.rowHeight, SDF_SIZE);
 
     return metrics;
 }
 
-function ensureString(device: GPUDevice, atlas: GlyphAtlas, text: string): void {
+function ensureString(atlas: GlyphAtlas, text: string): void {
     for (const char of text) {
-        ensureGlyph(device, atlas, char);
+        ensureGlyph(atlas, char);
     }
 }
 
@@ -411,15 +352,20 @@ interface LayoutResult {
 
 function layoutText(text: string, atlas: GlyphAtlas, fontSize: number): LayoutResult {
     const glyphs: LayoutGlyph[] = [];
-    const scale = fontSize / atlas.sdfFontSize;
+    const scale = fontSize;
 
     let cursorX = 0;
     let maxHeight = 0;
+    let prevChar: string | null = null;
 
     for (const char of text) {
         const metrics = atlas.glyphs.get(char);
         if (!metrics) continue;
 
+        if (prevChar) {
+            cursorX += atlas.font.kerning(prevChar, char) / atlas.font.unitsPerEm * scale;
+        }
+
         const glyphW = metrics.glyphWidth * scale;
         const glyphH = metrics.glyphHeight * scale;
         const advance = metrics.advance * scale;
@@ -442,6 +388,7 @@ function layoutText(text: string, atlas: GlyphAtlas, fontSize: number): LayoutRe
 
         cursorX += advance;
         maxHeight = Math.max(maxHeight, glyphH);
+        prevChar = char;
     }
 
     return {
@@ -452,16 +399,7 @@ function layoutText(text: string, atlas: GlyphAtlas, fontSize: number): LayoutRe
 }
 
 const textShader = /* wgsl */ `
-struct Scene {
-    viewProj: mat4x4<f32>,
-    cameraWorld: mat4x4<f32>,
-    ambientColor: vec4<f32>,
-    sunDirection: vec4<f32>,
-    sunColor: vec4<f32>,
-    cameraMode: f32,
-    cameraSize: f32,
-    viewport: vec2<f32>,
-}
+${SCENE_STRUCT_WGSL}
 
 struct GlyphInstance {
     posX: f32,
@@ -490,7 +428,7 @@ struct VertexOutput {
     @location(0) uv: vec2<f32>,
     @location(1) color: vec4<f32>,
     @location(2) localUV: vec2<f32>,
-    @location(3) texelSize: vec2<f32>,
+    @location(3) glyphDimensions: vec2<f32>,
 }
 
 @vertex
@@ -506,27 +444,27 @@ fn vs(@builtin(vertex_index) vid: u32) -> VertexOutput {
     switch cornerIdx {
         case 0u: {
             localPos = vec2(0.0, 0.0);
-            uv = vec2(glyph.u0, glyph.v1);
+            uv = vec2(glyph.u0, glyph.v0);
         }
         case 1u: {
             localPos = vec2(1.0, 0.0);
-            uv = vec2(glyph.u1, glyph.v1);
+            uv = vec2(glyph.u1, glyph.v0);
         }
         case 2u: {
             localPos = vec2(1.0, 1.0);
-            uv = vec2(glyph.u1, glyph.v0);
+            uv = vec2(glyph.u1, glyph.v1);
         }
         case 3u: {
             localPos = vec2(0.0, 0.0);
-            uv = vec2(glyph.u0, glyph.v1);
+            uv = vec2(glyph.u0, glyph.v0);
         }
         case 4u: {
             localPos = vec2(1.0, 1.0);
-            uv = vec2(glyph.u1, glyph.v0);
+            uv = vec2(glyph.u1, glyph.v1);
         }
         case 5u: {
             localPos = vec2(0.0, 1.0);
-            uv = vec2(glyph.u0, glyph.v0);
+            uv = vec2(glyph.u0, glyph.v1);
         }
         default: {
             localPos = vec2(0.0);
@@ -548,7 +486,7 @@ fn vs(@builtin(vertex_index) vid: u32) -> VertexOutput {
     out.uv = uv;
     out.color = glyph.color;
     out.localUV = localPos;
-    out.texelSize = vec2(glyph.texelWidth, glyph.texelHeight);
+    out.glyphDimensions = vec2(glyph.width, glyph.height);
     return out;
 }
 
@@ -561,21 +499,17 @@ struct FragmentOutput {
 fn fs(input: VertexOutput) -> FragmentOutput {
     let sdfValue = textureSample(atlasTexture, atlasSampler, input.uv).r;
 
-    // Decode exponential SDF (inverse of Troika-style encoding)
     let sdfExponent = 9.0;
     let isOutside = sdfValue < 0.5;
     let processedAlpha = select(1.0 - sdfValue, sdfValue, isOutside);
     let normalizedDist = 1.0 - pow(2.0 * processedAlpha, 1.0 / sdfExponent);
-    let signedDist = select(-normalizedDist, normalizedDist, isOutside);
 
-    // Troika-style AA using screen-space derivatives
-    let texelFootprint = fwidth(input.localUV * input.texelSize);
-    let aaRadius = length(texelFootprint) * 0.5;
-    let smoothing = clamp(aaRadius * 0.5, 0.01, 0.25);
+    let maxDimension = max(input.glyphDimensions.x, input.glyphDimensions.y);
+    let absDist = normalizedDist * maxDimension;
+    let signedDist = select(-absDist, absDist, isOutside);
 
-    // Edge at signedDist = 0, positive offset = thicker text
-    let edgeOffset = 0.02;
-    let alpha = smoothstep(edgeOffset + smoothing, edgeOffset - smoothing, signedDist);
+    let aaDist = length(fwidth(input.localUV * input.glyphDimensions)) * 0.5;
+    let alpha = smoothstep(aaDist, -aaDist, signedDist);
 
     if alpha < 0.01 {
         discard;
@@ -653,7 +587,7 @@ function createTextDraw(config: TextConfig): Draw {
 
     return {
         id: "text",
-        pass: Pass.Transparent,
+        pass: Pass.Overlay,
         order: 2,
 
         execute() {},
@@ -686,26 +620,26 @@ function createTextDraw(config: TextConfig): Draw {
     };
 }
 
-export interface TextState {
-    atlas: GlyphAtlas;
+export interface Glyphs {
+    atlases: GlyphAtlas[];
     sampler: GPUSampler;
     buffer: GPUBuffer;
     staging: Float32Array;
     count: number;
 }
 
-export const TextResource = resource<TextState>("text");
+export const Glyphs = resource<Glyphs>("glyphs");
 
 const TextSystem: System = {
     group: "draw",
 
     update(state: State) {
         const compute = Compute.from(state);
-        const text = TextResource.from(state);
+        const text = Glyphs.from(state);
         if (!compute || !text) return;
 
         const { device } = compute;
-        const { atlas, staging } = text;
+        const { atlases, staging } = text;
         const stagingU32 = new Uint32Array(staging.buffer);
 
         let glyphCount = 0;
@@ -716,7 +650,11 @@ const TextSystem: System = {
             const content = textContent.get(eid);
             if (!content) continue;
 
-            ensureString(device, atlas, content);
+            const fontId = Text.font[eid];
+            const atlas = atlases[fontId] ?? atlases[0];
+            if (!atlas) continue;
+
+            ensureString(atlas, content);
 
             const fontSize = Text.fontSize[eid];
             const layout = layoutText(content, atlas, fontSize);
@@ -780,23 +718,39 @@ export const TextPlugin: Plugin = {
     components: { Text },
     dependencies: [ComputePlugin, RenderPlugin],
 
-    initialize(state: State) {
+    async initialize(state: State) {
         registerPostLoadHook(finalizePendingText);
 
         const compute = Compute.from(state);
         const render = Render.from(state);
         if (!compute || !render) return;
 
+        if (fontUrls.length === 0) {
+            return;
+        }
+
+        await loadAllFonts();
+
         const { device } = compute;
 
-        const atlas = createGlyphAtlas(device);
+        const atlases: GlyphAtlas[] = [];
+        for (const loadedFont of loadedFonts) {
+            if (loadedFont) {
+                atlases.push(createGlyphAtlas(device, loadedFont));
+            }
+        }
+
+        if (atlases.length === 0) {
+            return;
+        }
+
         const sampler = device.createSampler({
             magFilter: "linear",
             minFilter: "linear",
         });
 
-        const textState: TextState = {
-            atlas,
+        const textState: Glyphs = {
+            atlases,
             sampler,
             buffer: device.createBuffer({
                 label: "glyphs",
@@ -807,14 +761,14 @@ export const TextPlugin: Plugin = {
             count: 0,
         };
 
-        state.setResource(TextResource, textState);
+        state.setResource(Glyphs, textState);
 
         registerDraw(
             state,
             createTextDraw({
                 scene: render.scene,
                 glyphs: textState.buffer,
-                atlas: atlas.textureView,
+                atlas: atlases[0].textureView,
                 sampler,
                 matrices: render.matrices,
                 getCount: () => textState.count,