@multiplekex/shallot 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@multiplekex/shallot",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/extras/lines/index.ts

@@ -189,7 +189,8 @@ struct FragmentOutput {
 @fragment
 fn fs(input: VertexOutput) -> FragmentOutput {
     let dist = abs(input.dist);
-    let aa = 1.0 - smoothstep(input.halfWidth - 0.5, input.halfWidth + 0.5, dist);
+    let aaWidth = fwidth(input.dist);
+    let aa = 1.0 - smoothstep(input.halfWidth - aaWidth, input.halfWidth + aaWidth, dist);
     var out: FragmentOutput;
     out.color = vec4(input.color.rgb, input.color.a * aa);
     out.mask = select(0.0, 1.0, aa > 0.01);

package/src/extras/text/index.ts

@@ -27,12 +27,14 @@ import { Transform } from "../../standard/transforms";
 
 const MAX_GLYPHS = 50000;
 const GLYPH_FLOATS = 16;
-const SDF_SIZE = 64;
-const SDF_EXPONENT = 9;
-
+const SDF_SIZE = 96;
+const SDF_EXPONENT = 6;
 const fontUrls: string[] = [];
 const loadedFonts: (Font | null)[] = [];
 
+export const DEFAULT_FONT =
+    "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf";
+
 export function font(url: string): number {
     const id = fontUrls.length;
     fontUrls.push(url);
@@ -44,12 +46,12 @@ export function getFont(id: number): Font | null {
     return loadedFonts[id] ?? null;
 }
 
-export function clearFonts(): void {
+export function resetFonts(): void {
     fontUrls.length = 0;
     loadedFonts.length = 0;
 }
 
-async function loadAllFonts(): Promise<void> {
+async function loadFonts(): Promise<void> {
     await Promise.all(
         fontUrls.map(async (url, id) => {
             loadedFonts[id] = await loadFont(url);
@@ -252,6 +254,7 @@ function createGlyphAtlas(device: GPUDevice, font: Font): GlyphAtlas {
         device,
         sdfSize: SDF_SIZE,
         exponent: SDF_EXPONENT,
+        curveSubdivisions: 24,
     });
 
     return {
@@ -499,17 +502,8 @@ struct FragmentOutput {
 fn fs(input: VertexOutput) -> FragmentOutput {
     let sdfValue = textureSample(atlasTexture, atlasSampler, input.uv).r;
 
-    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 maxDimension = max(input.glyphDimensions.x, input.glyphDimensions.y);
-    let absDist = normalizedDist * maxDimension;
-    let signedDist = select(-absDist, absDist, isOutside);
-
-    let aaDist = length(fwidth(input.localUV * input.glyphDimensions)) * 0.5;
-    let alpha = smoothstep(aaDist, -aaDist, signedDist);
+    let aaWidth = fwidth(sdfValue) * 0.707;
+    let alpha = smoothstep(0.5 - aaWidth, 0.5 + aaWidth, sdfValue);
 
     if alpha < 0.01 {
         discard;
@@ -578,7 +572,8 @@ export interface TextConfig {
     atlas: GPUTextureView;
     sampler: GPUSampler;
     matrices: GPUBuffer;
-    getCount: () => number;
+    fontIndex: number;
+    getRange: () => { start: number; count: number };
 }
 
 function createTextDraw(config: TextConfig): Draw {
@@ -586,14 +581,14 @@ function createTextDraw(config: TextConfig): Draw {
     let bindGroup: GPUBindGroup | null = null;
 
     return {
-        id: "text",
+        id: `text-${config.fontIndex}`,
         pass: Pass.Overlay,
-        order: 2,
+        order: 2 + config.fontIndex,
 
         execute() {},
 
         draw(pass: GPURenderPassEncoder, ctx: SharedPassContext) {
-            const count = config.getCount();
+            const { start, count } = config.getRange();
             if (count === 0) return;
 
             if (!pipeline) {
@@ -615,21 +610,45 @@ function createTextDraw(config: TextConfig): Draw {
 
             pass.setPipeline(pipeline);
             pass.setBindGroup(0, bindGroup);
-            pass.draw(count * 6);
+            pass.draw(count * 6, 1, start * 6, 0);
         },
     };
 }
 
+export interface FontRange {
+    start: number;
+    count: number;
+}
+
 export interface Glyphs {
     atlases: GlyphAtlas[];
     sampler: GPUSampler;
     buffer: GPUBuffer;
     staging: Float32Array;
-    count: number;
+    ranges: FontRange[];
 }
 
 export const Glyphs = resource<Glyphs>("glyphs");
 
+interface PendingGlyph {
+    eid: number;
+    fontId: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    texelWidth: number;
+    texelHeight: number;
+    u0: number;
+    v0: number;
+    u1: number;
+    v1: number;
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+
 const TextSystem: System = {
     group: "draw",
 
@@ -639,10 +658,10 @@ const TextSystem: System = {
         if (!compute || !text) return;
 
         const { device } = compute;
-        const { atlases, staging } = text;
+        const { atlases, staging, ranges } = text;
         const stagingU32 = new Uint32Array(staging.buffer);
 
-        let glyphCount = 0;
+        const glyphsByFont: PendingGlyph[][] = atlases.map(() => []);
 
         for (const eid of state.query([Text, Transform])) {
             if (!Text.visible[eid]) continue;
@@ -652,6 +671,7 @@ const TextSystem: System = {
 
             const fontId = Text.font[eid];
             const atlas = atlases[fontId] ?? atlases[0];
+            const actualFontId = atlases[fontId] ? fontId : 0;
             if (!atlas) continue;
 
             ensureString(atlas, content);
@@ -671,14 +691,42 @@ const TextSystem: System = {
             const a = Text.opacity[eid];
 
             for (const glyph of layout.glyphs) {
+                glyphsByFont[actualFontId].push({
+                    eid,
+                    fontId: actualFontId,
+                    x: offsetX + glyph.x,
+                    y: offsetY + glyph.y,
+                    width: glyph.width,
+                    height: glyph.height,
+                    texelWidth: glyph.texelWidth,
+                    texelHeight: glyph.texelHeight,
+                    u0: glyph.u0,
+                    v0: glyph.v0,
+                    u1: glyph.u1,
+                    v1: glyph.v1,
+                    r,
+                    g,
+                    b,
+                    a,
+                });
+            }
+        }
+
+        let glyphCount = 0;
+        for (let fontIdx = 0; fontIdx < atlases.length; fontIdx++) {
+            const fontGlyphs = glyphsByFont[fontIdx];
+            ranges[fontIdx].start = glyphCount;
+            ranges[fontIdx].count = fontGlyphs.length;
+
+            for (const glyph of fontGlyphs) {
                 if (glyphCount >= MAX_GLYPHS) break;
 
                 const offset = glyphCount * GLYPH_FLOATS;
 
-                staging[offset + 0] = offsetX + glyph.x;
-                staging[offset + 1] = offsetY + glyph.y;
+                staging[offset + 0] = glyph.x;
+                staging[offset + 1] = glyph.y;
                 staging[offset + 2] = 0;
-                stagingU32[offset + 3] = eid;
+                stagingU32[offset + 3] = glyph.eid;
 
                 staging[offset + 4] = glyph.width;
                 staging[offset + 5] = glyph.height;
@@ -690,17 +738,15 @@ const TextSystem: System = {
                 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;
+                staging[offset + 12] = glyph.r;
+                staging[offset + 13] = glyph.g;
+                staging[offset + 14] = glyph.b;
+                staging[offset + 15] = glyph.a;
 
                 glyphCount++;
             }
         }
 
-        text.count = glyphCount;
-
         if (glyphCount > 0) {
             device.queue.writeBuffer(
                 text.buffer,
@@ -726,10 +772,15 @@ export const TextPlugin: Plugin = {
         if (!compute || !render) return;
 
         if (fontUrls.length === 0) {
-            return;
+            font(DEFAULT_FONT);
         }
 
-        await loadAllFonts();
+        try {
+            await loadFonts();
+        } catch (e) {
+            console.warn("[TextPlugin] Failed to load fonts:", e);
+            return;
+        }
 
         const { device } = compute;
 
@@ -749,6 +800,8 @@ export const TextPlugin: Plugin = {
             minFilter: "linear",
         });
 
+        const ranges: FontRange[] = atlases.map(() => ({ start: 0, count: 0 }));
+
         const textState: Glyphs = {
             atlases,
             sampler,
@@ -758,21 +811,25 @@ export const TextPlugin: Plugin = {
                 usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
             }),
             staging: new Float32Array(MAX_GLYPHS * GLYPH_FLOATS),
-            count: 0,
+            ranges,
         };
 
         state.setResource(Glyphs, textState);
 
-        registerDraw(
-            state,
-            createTextDraw({
-                scene: render.scene,
-                glyphs: textState.buffer,
-                atlas: atlases[0].textureView,
-                sampler,
-                matrices: render.matrices,
-                getCount: () => textState.count,
-            })
-        );
+        for (let i = 0; i < atlases.length; i++) {
+            const fontIndex = i;
+            registerDraw(
+                state,
+                createTextDraw({
+                    scene: render.scene,
+                    glyphs: textState.buffer,
+                    atlas: atlases[i].textureView,
+                    sampler,
+                    matrices: render.matrices,
+                    fontIndex,
+                    getRange: () => ranges[fontIndex],
+                })
+            );
+        }
     },
 };

package/src/standard/tween/tween.ts

@@ -206,7 +206,7 @@ export function ensureResolved(state: State, tweenEid: number): void {
     const elapsed = Tween.elapsed[tweenEid];
     const duration = Tween.duration[tweenEid];
 
-    if (elapsed >= duration) return;
+    if (duration > 0 && elapsed >= duration) return;
 
     const targetEid = state.getFirstRelationTarget(tweenEid, TweenTarget);
     const binding = getFieldAccessor(tweenEid);