@multiplekex/shallot 0.1.0

package/src/extras/text/index.ts

@@ -0,0 +1,641 @@
+import TinySDF from "@mapbox/tiny-sdf";
+import { MAX_ENTITIES, resource, type Plugin, type State, type System } from "../../core";
+import { setTraits, type FieldAccessor } from "../../core/component";
+import {
+    Compute,
+    ComputePlugin,
+    type ComputeNode,
+    type ExecutionContext,
+} from "../../standard/compute";
+import { Render, RenderPlugin } from "../../standard/render";
+import { Transform } from "../../standard/transforms";
+
+const MAX_GLYPHS = 50000;
+const GLYPH_FLOATS = 16;
+
+export const TextData = {
+    data: new Float32Array(MAX_ENTITIES * 12),
+};
+
+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;
+
+    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);
+        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;
+        },
+    });
+}
+
+export const Text: {
+    fontSize: TextProxy;
+    opacity: TextProxy;
+    visible: TextProxy;
+    anchorX: TextProxy;
+    anchorY: TextProxy;
+    color: TextProxy;
+} = {
+    fontSize: textProxy(0),
+    opacity: textProxy(1),
+    visible: textProxy(2),
+    anchorX: textProxy(3),
+    anchorY: textProxy(4),
+    color: colorProxy(),
+};
+
+setTraits(Text, {
+    defaults: () => ({
+        fontSize: 1,
+        opacity: 1,
+        visible: 1,
+        anchorX: 0,
+        anchorY: 0,
+        color: 0xffffff,
+    }),
+    accessors: {
+        fontSize: Text.fontSize,
+        opacity: Text.opacity,
+        visible: Text.visible,
+        anchorX: Text.anchorX,
+        anchorY: Text.anchorY,
+        color: Text.color,
+    },
+});
+
+interface GlyphMetrics {
+    width: number;
+    height: number;
+    glyphWidth: number;
+    glyphHeight: number;
+    glyphTop: number;
+    glyphLeft: number;
+    advance: number;
+    u0: number;
+    v0: number;
+    u1: number;
+    v1: number;
+}
+
+interface GlyphAtlas {
+    texture: GPUTexture;
+    textureView: GPUTextureView;
+    width: number;
+    height: number;
+    glyphs: Map<string, GlyphMetrics>;
+    rowHeight: number;
+    cursorX: number;
+    cursorY: number;
+    sdf: TinySDF;
+    sdfFontSize: number;
+}
+
+function createGlyphAtlas(device: GPUDevice): GlyphAtlas {
+    const width = 1024;
+    const height = 1024;
+    const fontSize = 32;
+
+    const texture = device.createTexture({
+        size: { width, height },
+        format: "r8unorm",
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+        label: "glyphAtlas",
+    });
+
+    const sdf = new TinySDF({
+        fontSize,
+        fontFamily: "monospace",
+        fontWeight: "normal",
+        fontStyle: "normal",
+        buffer: 3,
+        radius: 8,
+        cutoff: 0.5,
+    });
+
+    return {
+        texture,
+        textureView: texture.createView(),
+        width,
+        height,
+        glyphs: new Map(),
+        rowHeight: 0,
+        cursorX: 0,
+        cursorY: 0,
+        sdf,
+        sdfFontSize: fontSize,
+    };
+}
+
+function ensureGlyph(device: GPUDevice, atlas: GlyphAtlas, char: string): GlyphMetrics {
+    const existing = atlas.glyphs.get(char);
+    if (existing) return existing;
+
+    const glyph = atlas.sdf.draw(char);
+
+    if (atlas.cursorX + glyph.width > atlas.width) {
+        atlas.cursorX = 0;
+        atlas.cursorY += atlas.rowHeight;
+        atlas.rowHeight = 0;
+    }
+
+    if (atlas.cursorY + glyph.height > atlas.height) {
+        throw new Error("Glyph atlas full");
+    }
+
+    const glyphData = new Uint8Array(glyph.data.length);
+    glyphData.set(glyph.data);
+
+    device.queue.writeTexture(
+        {
+            texture: atlas.texture,
+            origin: { x: atlas.cursorX, y: atlas.cursorY },
+        },
+        glyphData,
+        { bytesPerRow: glyph.width },
+        { width: glyph.width, height: glyph.height }
+    );
+
+    const metrics: GlyphMetrics = {
+        width: glyph.width,
+        height: glyph.height,
+        glyphWidth: glyph.glyphWidth,
+        glyphHeight: glyph.glyphHeight,
+        glyphTop: glyph.glyphTop,
+        glyphLeft: glyph.glyphLeft,
+        advance: glyph.glyphAdvance,
+        u0: atlas.cursorX / atlas.width,
+        v0: atlas.cursorY / atlas.height,
+        u1: (atlas.cursorX + glyph.width) / atlas.width,
+        v1: (atlas.cursorY + glyph.height) / atlas.height,
+    };
+
+    atlas.glyphs.set(char, metrics);
+    atlas.cursorX += glyph.width;
+    atlas.rowHeight = Math.max(atlas.rowHeight, glyph.height);
+
+    return metrics;
+}
+
+function ensureString(device: GPUDevice, atlas: GlyphAtlas, text: string): void {
+    for (const char of text) {
+        ensureGlyph(device, atlas, char);
+    }
+}
+
+interface LayoutGlyph {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    u0: number;
+    v0: number;
+    u1: number;
+    v1: number;
+}
+
+interface LayoutResult {
+    glyphs: LayoutGlyph[];
+    width: number;
+    height: number;
+}
+
+function layoutText(text: string, atlas: GlyphAtlas, fontSize: number): LayoutResult {
+    const glyphs: LayoutGlyph[] = [];
+    const scale = fontSize / atlas.sdfFontSize;
+
+    let cursorX = 0;
+    let maxHeight = 0;
+
+    for (const char of text) {
+        const metrics = atlas.glyphs.get(char);
+        if (!metrics) continue;
+
+        const glyphW = metrics.glyphWidth * scale;
+        const glyphH = metrics.glyphHeight * scale;
+        const advance = metrics.advance * scale;
+
+        const x = cursorX + metrics.glyphLeft * scale;
+        const y = (metrics.glyphTop - metrics.glyphHeight) * scale;
+
+        glyphs.push({
+            x,
+            y,
+            width: glyphW,
+            height: glyphH,
+            u0: metrics.u0,
+            v0: metrics.v0,
+            u1: metrics.u1,
+            v1: metrics.v1,
+        });
+
+        cursorX += advance;
+        maxHeight = Math.max(maxHeight, glyphH);
+    }
+
+    return {
+        glyphs,
+        width: cursorX,
+        height: maxHeight,
+    };
+}
+
+const textShader = /* wgsl */ `
+struct Scene {
+    viewProj: mat4x4<f32>,
+    cameraWorld: mat4x4<f32>,
+}
+
+struct GlyphInstance {
+    posX: f32,
+    posY: f32,
+    posZ: f32,
+    _pad0: f32,
+    width: f32,
+    height: f32,
+    _pad1: vec2<f32>,
+    u0: f32,
+    v0: f32,
+    u1: f32,
+    v1: f32,
+    color: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> scene: Scene;
+@group(0) @binding(1) var<storage, read> glyphs: array<GlyphInstance>;
+@group(0) @binding(2) var atlasTexture: texture_2d<f32>;
+@group(0) @binding(3) var atlasSampler: sampler;
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+    @location(1) color: vec4<f32>,
+}
+
+const SDF_SMOOTHING: f32 = 0.1;
+
+@vertex
+fn vs(@builtin(vertex_index) vid: u32) -> VertexOutput {
+    let glyphIdx = vid / 6u;
+    let cornerIdx = vid % 6u;
+
+    let glyph = glyphs[glyphIdx];
+
+    var localPos: vec2<f32>;
+    var uv: vec2<f32>;
+
+    switch cornerIdx {
+        case 0u: {
+            localPos = vec2(0.0, 0.0);
+            uv = vec2(glyph.u0, glyph.v1);
+        }
+        case 1u: {
+            localPos = vec2(1.0, 0.0);
+            uv = vec2(glyph.u1, glyph.v1);
+        }
+        case 2u: {
+            localPos = vec2(1.0, 1.0);
+            uv = vec2(glyph.u1, glyph.v0);
+        }
+        case 3u: {
+            localPos = vec2(0.0, 0.0);
+            uv = vec2(glyph.u0, glyph.v1);
+        }
+        case 4u: {
+            localPos = vec2(1.0, 1.0);
+            uv = vec2(glyph.u1, glyph.v0);
+        }
+        case 5u: {
+            localPos = vec2(0.0, 1.0);
+            uv = vec2(glyph.u0, glyph.v0);
+        }
+        default: {
+            localPos = vec2(0.0);
+            uv = vec2(0.0);
+        }
+    }
+
+    let worldPos = vec3(
+        glyph.posX + localPos.x * glyph.width,
+        glyph.posY + localPos.y * glyph.height,
+        glyph.posZ
+    );
+
+    var out: VertexOutput;
+    out.position = scene.viewProj * vec4(worldPos, 1.0);
+    out.uv = uv;
+    out.color = glyph.color;
+    return out;
+}
+
+@fragment
+fn fs(input: VertexOutput) -> @location(0) vec4<f32> {
+    let sdfValue = textureSample(atlasTexture, atlasSampler, input.uv).r;
+    let alpha = smoothstep(0.5 - SDF_SMOOTHING, 0.5 + SDF_SMOOTHING, sdfValue);
+
+    if alpha < 0.01 {
+        discard;
+    }
+
+    return vec4(input.color.rgb, input.color.a * alpha);
+}
+`;
+
+function createTextPipeline(device: GPUDevice, format: GPUTextureFormat): GPURenderPipeline {
+    const module = device.createShaderModule({ code: textShader });
+
+    return device.createRenderPipeline({
+        layout: "auto",
+        vertex: {
+            module,
+            entryPoint: "vs",
+        },
+        fragment: {
+            module,
+            entryPoint: "fs",
+            targets: [
+                {
+                    format,
+                    blend: {
+                        color: {
+                            srcFactor: "src-alpha",
+                            dstFactor: "one-minus-src-alpha",
+                            operation: "add",
+                        },
+                        alpha: {
+                            srcFactor: "one",
+                            dstFactor: "one-minus-src-alpha",
+                            operation: "add",
+                        },
+                    },
+                },
+            ],
+        },
+        primitive: {
+            topology: "triangle-list",
+            cullMode: "none",
+        },
+    });
+}
+
+export interface TextConfig {
+    scene: GPUBuffer;
+    glyphs: GPUBuffer;
+    atlas: GPUTextureView;
+    sampler: GPUSampler;
+    getCount: () => number;
+}
+
+export function createTextNode(config: TextConfig): ComputeNode {
+    let pipeline: GPURenderPipeline | null = null;
+    let bindGroup: GPUBindGroup | null = null;
+
+    return {
+        id: "text",
+        phase: "overlay",
+        inputs: [],
+        outputs: [],
+
+        execute(ctx: ExecutionContext) {
+            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);
+            }
+
+            if (!bindGroup) {
+                bindGroup = device.createBindGroup({
+                    layout: pipeline.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 0, resource: { buffer: config.scene } },
+                        { binding: 1, resource: { buffer: config.glyphs } },
+                        { binding: 2, resource: config.atlas },
+                        { binding: 3, resource: config.sampler },
+                    ],
+                });
+            }
+
+            const pass = encoder.beginRenderPass({
+                colorAttachments: [
+                    {
+                        view: targetView,
+                        loadOp: "load" as const,
+                        storeOp: "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;
+    staging: Float32Array;
+    count: number;
+}
+
+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",
+
+    update(state: State) {
+        const compute = Compute.from(state);
+        const text = TextResource.from(state);
+        if (!compute || !text) return;
+
+        const { device } = compute;
+        const { atlas, staging, content } = text;
+
+        let glyphCount = 0;
+
+        for (const eid of state.query([Text, Transform])) {
+            if (!Text.visible[eid]) continue;
+
+            const textContent = content.get(eid);
+            if (!textContent) continue;
+
+            ensureString(device, atlas, textContent);
+
+            const fontSize = Text.fontSize[eid];
+            const layout = layoutText(textContent, atlas, fontSize);
+
+            const anchorX = Text.anchorX[eid];
+            const anchorY = Text.anchorY[eid];
+            const offsetX = -layout.width * anchorX;
+            const offsetY = -layout.height * anchorY;
+
+            const baseX = Transform.posX[eid] + offsetX;
+            const baseY = Transform.posY[eid] + offsetY;
+            const baseZ = Transform.posZ[eid];
+
+            const color = Text.color[eid];
+            const r = ((color >> 16) & 0xff) / 255;
+            const g = ((color >> 8) & 0xff) / 255;
+            const b = (color & 0xff) / 255;
+            const a = Text.opacity[eid];
+
+            for (const glyph of layout.glyphs) {
+                if (glyphCount >= MAX_GLYPHS) break;
+
+                const offset = glyphCount * GLYPH_FLOATS;
+
+                staging[offset + 0] = baseX + glyph.x;
+                staging[offset + 1] = baseY + glyph.y;
+                staging[offset + 2] = baseZ;
+                staging[offset + 3] = 0;
+
+                staging[offset + 4] = glyph.width;
+                staging[offset + 5] = glyph.height;
+                staging[offset + 6] = 0;
+                staging[offset + 7] = 0;
+
+                staging[offset + 8] = glyph.u0;
+                staging[offset + 9] = glyph.v0;
+                staging[offset + 10] = glyph.u1;
+                staging[offset + 11] = glyph.v1;
+
+                staging[offset + 12] = r;
+                staging[offset + 13] = g;
+                staging[offset + 14] = b;
+                staging[offset + 15] = a;
+
+                glyphCount++;
+            }
+        }
+
+        text.count = glyphCount;
+
+        if (glyphCount > 0) {
+            device.queue.writeBuffer(
+                text.buffer,
+                0,
+                staging.buffer,
+                0,
+                glyphCount * GLYPH_FLOATS * 4
+            );
+        }
+    },
+};
+
+export const TextPlugin: Plugin = {
+    systems: [TextSystem],
+    components: { Text },
+    dependencies: [ComputePlugin, RenderPlugin],
+
+    initialize(state: State) {
+        const compute = Compute.from(state);
+        const render = Render.from(state);
+        if (!compute || !render) return;
+
+        const { device } = compute;
+
+        const atlas = createGlyphAtlas(device);
+        const sampler = device.createSampler({
+            magFilter: "linear",
+            minFilter: "linear",
+        });
+
+        const textState: TextState = {
+            content: new Map(),
+            atlas,
+            sampler,
+            buffer: device.createBuffer({
+                label: "glyphs",
+                size: MAX_GLYPHS * GLYPH_FLOATS * 4,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+            }),
+            staging: new Float32Array(MAX_GLYPHS * GLYPH_FLOATS),
+            count: 0,
+        };
+
+        state.setResource(TextResource, textState);
+
+        compute.graph.add(
+            createTextNode({
+                scene: render.scene,
+                glyphs: textState.buffer,
+                atlas: atlas.textureView,
+                sampler,
+                getCount: () => textState.count,
+            })
+        );
+    },
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./core";
+export * from "./standard";
+export * from "./extras";