@multiplekex/shallot 0.1.7 → 0.1.9

package/src/extras/text/index.ts

@@ -1,17 +1,58 @@
 import TinySDF from "@mapbox/tiny-sdf";
-import { MAX_ENTITIES, resource, type Plugin, type State, type System } from "../../core";
+import {
+    MAX_ENTITIES,
+    resource,
+    registerPostLoadHook,
+    type Plugin,
+    type State,
+    type System,
+    type PostLoadContext,
+} from "../../core";
 import { setTraits, type FieldAccessor } from "../../core/component";
+import { Compute, ComputePlugin } from "../../standard/compute";
 import {
-    Compute,
-    ComputePlugin,
-    type ComputeNode,
-    type ExecutionContext,
-} from "../../standard/compute";
-import { Render, RenderPlugin, DEPTH_FORMAT } from "../../standard/render";
+    Render,
+    RenderPlugin,
+    DEPTH_FORMAT,
+    registerDrawContributor,
+    type DrawContributor,
+    type DrawContext,
+} from "../../standard/render";
 import { Transform } from "../../standard/transforms";
 
 const MAX_GLYPHS = 50000;
 const GLYPH_FLOATS = 16;
+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;
+}
+
+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 const TextData = {
     data: new Float32Array(MAX_ENTITIES * 12),
@@ -83,22 +124,102 @@ function colorProxy(): TextProxy {
     });
 }
 
-export const Text: {
-    fontSize: TextProxy;
-    opacity: TextProxy;
-    visible: TextProxy;
-    anchorX: TextProxy;
-    anchorY: TextProxy;
-    color: TextProxy;
-} = {
+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;
+    }
+
+    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;
+        },
+    });
+}
+
+const textContent = new Map<number, string>();
+
+interface TextContentProxy {
+    [eid: number]: string | undefined;
+}
+
+function contentProxy(): TextContentProxy {
+    return new Proxy({} as TextContentProxy, {
+        get(_, prop) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return textContent.get(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            if (value === undefined || value === null) {
+                textContent.delete(eid);
+            } else {
+                textContent.set(eid, value);
+            }
+            return true;
+        },
+    });
+}
+
+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),
 };
 
+interface PendingText {
+    readonly eid: number;
+    readonly content: string;
+}
+
+let pendingTextContent: PendingText[] = [];
+
+function parseTextAttrs(attrs: Record<string, string>): Record<string, string> {
+    if (attrs._value) {
+        const parsed: Record<string, string> = {};
+        for (const part of attrs._value.split(";")) {
+            const colonIdx = part.indexOf(":");
+            if (colonIdx === -1) continue;
+            const key = part.slice(0, colonIdx).trim();
+            const value = part.slice(colonIdx + 1).trim();
+            if (key && value) parsed[key] = value;
+        }
+        return parsed;
+    }
+    return attrs;
+}
+
+function finalizePendingText(_state: State, _context: PostLoadContext): void {
+    for (const pending of pendingTextContent) {
+        Text.content[pending.eid] = pending.content;
+    }
+    pendingTextContent = [];
+}
+
 setTraits(Text, {
     defaults: () => ({
         fontSize: 1,
@@ -108,6 +229,35 @@ setTraits(Text, {
         anchorY: 0,
         color: 0xffffff,
     }),
+    adapter: (attrs: Record<string, string>, eid: number) => {
+        const parsed = parseTextAttrs(attrs);
+        const result: Record<string, number> = {};
+
+        if (parsed.content) {
+            pendingTextContent.push({ eid, content: parsed.content });
+        }
+
+        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);
+        if (parsed.visible) result.visible = parseFloat(parsed.visible);
+        if (parsed["anchor-x"]) result.anchorX = parseFloat(parsed["anchor-x"]);
+        if (parsed.anchorX) result.anchorX = parseFloat(parsed.anchorX);
+        if (parsed["anchor-y"]) result.anchorY = parseFloat(parsed["anchor-y"]);
+        if (parsed.anchorY) result.anchorY = parseFloat(parsed.anchorY);
+        if (parsed.color) {
+            const colorStr = parsed.color;
+            if (colorStr.startsWith("0x") || colorStr.startsWith("0X")) {
+                result.color = parseInt(colorStr, 16);
+            } else if (colorStr.startsWith("#")) {
+                result.color = parseInt(colorStr.slice(1), 16);
+            } else {
+                result.color = parseInt(colorStr, 10);
+            }
+        }
+
+        return result;
+    },
     accessors: {
         fontSize: Text.fontSize,
         opacity: Text.opacity,
@@ -115,6 +265,9 @@ setTraits(Text, {
         anchorX: Text.anchorX,
         anchorY: Text.anchorY,
         color: Text.color,
+        colorR: Text.colorR,
+        colorG: Text.colorG,
+        colorB: Text.colorB,
     },
 });
 
@@ -146,9 +299,9 @@ interface GlyphAtlas {
 }
 
 function createGlyphAtlas(device: GPUDevice): GlyphAtlas {
-    const width = 1024;
-    const height = 1024;
-    const fontSize = 32;
+    const width = 2048;
+    const height = 2048;
+    const fontSize = 128;
 
     const texture = device.createTexture({
         size: { width, height },
@@ -159,11 +312,11 @@ function createGlyphAtlas(device: GPUDevice): GlyphAtlas {
 
     const sdf = new TinySDF({
         fontSize,
-        fontFamily: "monospace",
-        fontWeight: "normal",
+        fontFamily: customFontFamily ?? "system-ui, sans-serif",
+        fontWeight: customFontWeight,
         fontStyle: "normal",
-        buffer: 3,
-        radius: 8,
+        buffer: 16,
+        radius: 48,
         cutoff: 0.5,
     });
 
@@ -197,15 +350,14 @@ function ensureGlyph(device: GPUDevice, atlas: GlyphAtlas, char: string): GlyphM
         throw new Error("Glyph atlas full");
     }
 
-    const glyphData = new Uint8Array(glyph.data.length);
-    glyphData.set(glyph.data);
+    const glyphData = encodeExponentialSdf(new Uint8Array(glyph.data));
 
     device.queue.writeTexture(
         {
             texture: atlas.texture,
             origin: { x: atlas.cursorX, y: atlas.cursorY },
         },
-        glyphData,
+        glyphData as Uint8Array<ArrayBuffer>,
         { bytesPerRow: glyph.width },
         { width: glyph.width, height: glyph.height }
     );
@@ -242,6 +394,8 @@ interface LayoutGlyph {
     y: number;
     width: number;
     height: number;
+    texelWidth: number;
+    texelHeight: number;
     u0: number;
     v0: number;
     u1: number;
@@ -277,6 +431,8 @@ function layoutText(text: string, atlas: GlyphAtlas, fontSize: number): LayoutRe
             y,
             width: glyphW,
             height: glyphH,
+            texelWidth: metrics.width,
+            texelHeight: metrics.height,
             u0: metrics.u0,
             v0: metrics.v0,
             u1: metrics.u1,
@@ -298,6 +454,12 @@ 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>,
 }
 
 struct GlyphInstance {
@@ -307,7 +469,8 @@ struct GlyphInstance {
     entityId: u32,
     width: f32,
     height: f32,
-    _pad1: vec2<f32>,
+    texelWidth: f32,
+    texelHeight: f32,
     u0: f32,
     v0: f32,
     u1: f32,
@@ -325,10 +488,10 @@ struct VertexOutput {
     @builtin(position) position: vec4<f32>,
     @location(0) uv: vec2<f32>,
     @location(1) color: vec4<f32>,
+    @location(2) localUV: vec2<f32>,
+    @location(3) texelSize: vec2<f32>,
 }
 
-const SDF_SMOOTHING: f32 = 0.1;
-
 @vertex
 fn vs(@builtin(vertex_index) vid: u32) -> VertexOutput {
     let glyphIdx = vid / 6u;
@@ -383,23 +546,52 @@ fn vs(@builtin(vertex_index) vid: u32) -> VertexOutput {
     out.position = scene.viewProj * worldPos;
     out.uv = uv;
     out.color = glyph.color;
+    out.localUV = localPos;
+    out.texelSize = vec2(glyph.texelWidth, glyph.texelHeight);
     return out;
 }
 
+struct FragmentOutput {
+    @location(0) color: vec4<f32>,
+    @location(1) mask: f32,
+}
+
 @fragment
-fn fs(input: VertexOutput) -> @location(0) vec4<f32> {
+fn fs(input: VertexOutput) -> FragmentOutput {
     let sdfValue = textureSample(atlasTexture, atlasSampler, input.uv).r;
-    let alpha = smoothstep(0.5 - SDF_SMOOTHING, 0.5 + SDF_SMOOTHING, sdfValue);
+
+    // 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);
+
+    // Edge at signedDist = 0, positive offset = thicker text
+    let edgeOffset = 0.02;
+    let alpha = smoothstep(edgeOffset + smoothing, edgeOffset - smoothing, signedDist);
 
     if alpha < 0.01 {
         discard;
     }
 
-    return vec4(input.color.rgb, input.color.a * alpha);
+    var out: FragmentOutput;
+    out.color = vec4(input.color.rgb, input.color.a * alpha);
+    out.mask = select(0.0, 1.0, alpha > 0.01);
+    return out;
 }
 `;
 
-function createTextPipeline(device: GPUDevice, format: GPUTextureFormat): GPURenderPipeline {
+function createTextPipeline(
+    device: GPUDevice,
+    format: GPUTextureFormat,
+    maskFormat: GPUTextureFormat
+): GPURenderPipeline {
     const module = device.createShaderModule({ code: textShader });
 
     return device.createRenderPipeline({
@@ -427,6 +619,10 @@ function createTextPipeline(device: GPUDevice, format: GPUTextureFormat): GPURen
                         },
                     },
                 },
+                {
+                    format: maskFormat,
+                    writeMask: GPUColorWrite.RED,
+                },
             ],
         },
         primitive: {
@@ -450,29 +646,24 @@ export interface TextConfig {
     getCount: () => number;
 }
 
-export function createTextNode(config: TextConfig): ComputeNode {
+function createTextContributor(config: TextConfig): DrawContributor {
     let pipeline: GPURenderPipeline | null = null;
     let bindGroup: GPUBindGroup | null = null;
 
     return {
         id: "text",
-        phase: "transparent",
-        inputs: [],
-        outputs: [],
+        order: 2,
 
-        execute(ctx: ExecutionContext) {
+        draw(pass: GPURenderPassEncoder, ctx: DrawContext) {
             const count = config.getCount();
             if (count === 0) return;
 
-            const { device, encoder, format } = ctx;
-            const targetView = ctx.getTextureView("scene") ?? ctx.canvasView;
-
             if (!pipeline) {
-                pipeline = createTextPipeline(device, format);
+                pipeline = createTextPipeline(ctx.device, ctx.format, ctx.maskFormat);
             }
 
             if (!bindGroup) {
-                bindGroup = device.createBindGroup({
+                bindGroup = ctx.device.createBindGroup({
                     layout: pipeline.getBindGroupLayout(0),
                     entries: [
                         { binding: 0, resource: { buffer: config.scene } },
@@ -484,33 +675,14 @@ export function createTextNode(config: TextConfig): ComputeNode {
                 });
             }
 
-            const depthView = ctx.getTextureView("depth")!;
-
-            const pass = encoder.beginRenderPass({
-                colorAttachments: [
-                    {
-                        view: targetView,
-                        loadOp: "load" as const,
-                        storeOp: "store" as const,
-                    },
-                ],
-                depthStencilAttachment: {
-                    view: depthView,
-                    depthLoadOp: "load" as const,
-                    depthStoreOp: "store" as const,
-                },
-            });
-
             pass.setPipeline(pipeline);
             pass.setBindGroup(0, bindGroup);
             pass.draw(count * 6);
-            pass.end();
         },
     };
 }
 
 export interface TextState {
-    content: Map<number, string>;
     atlas: GlyphAtlas;
     sampler: GPUSampler;
     buffer: GPUBuffer;
@@ -520,17 +692,6 @@ export interface TextState {
 
 export const TextResource = resource<TextState>("text");
 
-export function setTextContent(state: State, eid: number, content: string): void {
-    const text = TextResource.from(state);
-    if (!text) return;
-    text.content.set(eid, content);
-}
-
-export function getTextContent(state: State, eid: number): string | undefined {
-    const text = TextResource.from(state);
-    return text?.content.get(eid);
-}
-
 const TextSystem: System = {
     group: "draw",
 
@@ -540,7 +701,7 @@ const TextSystem: System = {
         if (!compute || !text) return;
 
         const { device } = compute;
-        const { atlas, staging, content } = text;
+        const { atlas, staging } = text;
         const stagingU32 = new Uint32Array(staging.buffer);
 
         let glyphCount = 0;
@@ -548,13 +709,13 @@ const TextSystem: System = {
         for (const eid of state.query([Text, Transform])) {
             if (!Text.visible[eid]) continue;
 
-            const textContent = content.get(eid);
-            if (!textContent) continue;
+            const content = textContent.get(eid);
+            if (!content) continue;
 
-            ensureString(device, atlas, textContent);
+            ensureString(device, atlas, content);
 
             const fontSize = Text.fontSize[eid];
-            const layout = layoutText(textContent, atlas, fontSize);
+            const layout = layoutText(content, atlas, fontSize);
 
             const anchorX = Text.anchorX[eid];
             const anchorY = Text.anchorY[eid];
@@ -579,8 +740,8 @@ const TextSystem: System = {
 
                 staging[offset + 4] = glyph.width;
                 staging[offset + 5] = glyph.height;
-                staging[offset + 6] = 0;
-                staging[offset + 7] = 0;
+                staging[offset + 6] = glyph.texelWidth;
+                staging[offset + 7] = glyph.texelHeight;
 
                 staging[offset + 8] = glyph.u0;
                 staging[offset + 9] = glyph.v0;
@@ -616,6 +777,8 @@ export const TextPlugin: Plugin = {
     dependencies: [ComputePlugin, RenderPlugin],
 
     initialize(state: State) {
+        registerPostLoadHook(finalizePendingText);
+
         const compute = Compute.from(state);
         const render = Render.from(state);
         if (!compute || !render) return;
@@ -629,7 +792,6 @@ export const TextPlugin: Plugin = {
         });
 
         const textState: TextState = {
-            content: new Map(),
             atlas,
             sampler,
             buffer: device.createBuffer({
@@ -643,8 +805,9 @@ export const TextPlugin: Plugin = {
 
         state.setResource(TextResource, textState);
 
-        compute.graph.add(
-            createTextNode({
+        registerDrawContributor(
+            state,
+            createTextContributor({
                 scene: render.scene,
                 glyphs: textState.buffer,
                 atlas: atlas.textureView,

package/src/standard/compute/index.ts

@@ -1,5 +1,6 @@
 import { resource, type Plugin, type State, type System } from "../../core";
 import { ComputeGraph, type ExecutionContext, type ResourceId } from "./graph";
+import { createTimingCollector, type FrameTiming } from "./timing";
 
 export * from "./graph";
 export * from "./inspect";
@@ -42,7 +43,13 @@ export async function requestGPU(): Promise<GPUDevice> {
         throw new Error("No GPU adapter found");
     }
 
-    return adapter.requestDevice();
+    const maxTextureDimension2D = adapter.limits.maxTextureDimension2D;
+
+    return adapter.requestDevice({
+        requiredLimits: {
+            maxTextureDimension2D,
+        },
+    });
 }
 
 export interface ComputeResources {
@@ -57,6 +64,8 @@ export interface ComputeState {
     readonly format: GPUTextureFormat;
     readonly graph: ComputeGraph;
     readonly resources: ComputeResources;
+    lastFrameTiming: FrameTiming | null;
+    frameIndex: number;
 }
 
 export const Compute = resource<ComputeState>("compute");
@@ -116,11 +125,18 @@ export const ComputeSystem: System = {
             },
         };
 
+        const collector = createTimingCollector();
+
         for (const node of plan.sorted) {
+            collector.beginNode(node.id);
             node.execute(ctx);
+            collector.endNode(node.id);
         }
 
         device.queue.submit([encoder.finish()]);
+
+        compute.lastFrameTiming = collector.finish(compute.frameIndex);
+        compute.frameIndex++;
     },
 
     dispose() {
@@ -159,6 +175,14 @@ export const ComputePlugin: Plugin = {
             buffers: new Map(),
         };
 
-        state.setResource(Compute, { device, context, format, graph, resources });
+        state.setResource(Compute, {
+            device,
+            context,
+            format,
+            graph,
+            resources,
+            lastFrameTiming: null,
+            frameIndex: 0,
+        });
     },
 };

package/src/standard/compute/inspect.ts

@@ -1,4 +1,5 @@
 import type { ComputeNode, NodeId, Phase, ResourceId, ResourceRef } from "./graph";
+import type { FrameTiming } from "./timing";
 
 export interface NodeInfo {
     readonly id: NodeId;
@@ -147,12 +148,13 @@ function topoSortIds(nodes: readonly ComputeNode[]): NodeId[] {
     return sorted;
 }
 
-export function formatGraph(info: GraphInspection): string {
+export function formatGraph(info: GraphInspection, timing?: FrameTiming): string {
     const lines: string[] = [];
     lines.push("=== Compute Graph ===");
     lines.push("");
 
     const nodeMap = new Map(info.nodes.map((n) => [n.id, n]));
+    const timingMap = new Map(timing?.nodes.map((t) => [t.nodeId, t]));
 
     for (const phase of PHASE_ORDER) {
         const nodeIds = info.byPhase.get(phase) ?? [];
@@ -173,6 +175,18 @@ export function formatGraph(info: GraphInspection): string {
         lines.push(`  ${i + 1}. ${id}`);
     });
 
+    if (timing) {
+        lines.push("");
+        lines.push("Timing:");
+        for (const nodeId of info.executionOrder) {
+            const nodeTiming = timingMap.get(nodeId);
+            if (nodeTiming) {
+                lines.push(`  ${nodeId}: ${nodeTiming.cpuMs.toFixed(2)}ms`);
+            }
+        }
+        lines.push(`  Total: ${timing.totalCpuMs.toFixed(2)}ms`);
+    }
+
     return lines.join("\n");
 }
 

package/src/standard/render/camera.ts

@@ -79,13 +79,15 @@ export function uploadCamera(
     device: GPUDevice,
     buffer: GPUBuffer,
     eid: number,
-    aspect: number
+    width: number,
+    height: number
 ): void {
     const color = unpackColor(Camera.clearColor[eid]);
     clearColor.r = color.r;
     clearColor.g = color.g;
     clearColor.b = color.b;
 
+    const aspect = width / height;
     const proj =
         Camera.mode[eid] === CameraMode.Orthographic
             ? orthographic(Camera.size[eid], aspect, Camera.near[eid], Camera.far[eid])
@@ -96,4 +98,9 @@ export function uploadCamera(
 
     device.queue.writeBuffer(buffer, 0, viewProj as Float32Array<ArrayBuffer>);
     device.queue.writeBuffer(buffer, 64, world as Float32Array<ArrayBuffer>);
+    device.queue.writeBuffer(
+        buffer,
+        176,
+        new Float32Array([Camera.mode[eid], Camera.size[eid], width, height])
+    );
 }