93abedf | plum | pyrossh

git clone https://git.pyrossh.dev/plum

A statically typed, imperative programming language inspired by rust, python

93abedf — Peter John 2026-11-02T17:27:08+05:30

plum_bridge: SDF glyph atlas text through the normal batch; text_sizes fixture

Files changed (2) hide show

plum-game/web-test/fixtures/text_sizes.plum +32 -0
plum-game/web/plum_bridge.js +193 -67

plum-game/web-test/fixtures/text_sizes.plum ADDED Viewed

@@ -0,0 +1,32 @@
+# Text at sizes 8, 16, 48 and 128, then the same line through a zoomed camera.
+# A counter and a moving bar keep the frame changing. The text comes from the SDF
+# glyph atlas, so every size and the zoomed copy must stay crisp.
+module text_sizes
+import std/Str
+import std/Int
+import std/Float
+import std/Vec2
+import std/Color
+import std/Game
+record Sizes(t: Int)
+export fun init() -> Sizes =
+  Sizes(t: 0)
+export fun update(g: Sizes, dt: Float) =
+  g.t = g.t + 1
+export fun draw(g: Sizes) =
+  clear(Color.rgb(0.08, 0.09, 0.14))
+  drawText("Size 8: The quick brown fox jumps over the lazy dog 0123456789", 10.0, 6.0, 8.0, Color.White)
+  drawText("Size 16: The quick brown fox jumps over the lazy dog", 10.0, 24.0, 16.0, Color.White)
+  drawText("Size 48: Quick brown fox", 10.0, 52.0, 48.0, Color.Yellow)
+  drawText("Size 128 Wg", 10.0, 112.0, 128.0, Color.rgb(0.5, 0.9, 1.0))
+  drawText("Latin-1: café naïve über ½ ©", 10.0, 250.0, 24.0, Color.White)
+  drawText("frame {g.t}", 700.0, 8.0, 16.0, Color.Green)
+  drawRect(Float(g.t % 400), 300.0, 60.0, 4.0, Color.Red)
+  setCamera(0.0, 0.0, 3.0)
+  drawText("Zoomed x3: size 16", 10.0, 112.0, 16.0, Color.White)
+  drawText("Zoomed x3: size 8", 10.0, 134.0, 8.0, Color.White)
+  resetCamera()

plum-game/web/plum_bridge.js CHANGED Viewed

@@ -3,8 +3,10 @@
 // written into one CPU vertex/index array (camera applied on the CPU), flushed
 // with one buffer upload per frame. A draw call binds up to 16 textures and each
 // vertex carries the slot of its texture, so the draw only ends when a 17th
-// texture is needed. Untextured shapes sample a 1x1 white texture. The backend is WebGPU where the
+// texture is needed. Untextured shapes sample a 1x1 white texture. Text is drawn
+// as glyph quads from one signed-distance-field atlas (see makeGlyphAtlas). The
+// backend is WebGPU where the browser has it; there is no fallback (a page
-// browser has it; there is no fallback (a page without navigator.gpu says so).
+// without navigator.gpu says so).
 //
 // Each std/Game draw extern appends vertices to the batcher directly.
 // Plum's `Str` is a GC struct JS can't read: it is read through the module's
@@ -228,11 +230,21 @@
   // --- batcher ----------------------------------------------------------------------
   // One vertex is 24 bytes: x, y (clip space), u, v (f32), rgba (u8x4) and a
-  // u32 holding the texture slot (bits 0-7) and the linear-filter flag (bit 8).
+  // u32 holding the texture slot (bits 0-7), the linear-filter flag (bit 8) and the
+  // SDF flag (bit 9).
   const VERT_WORDS = 6;
   const VERT_BYTES = 24;
   const SLOTS = 16;
   const SMOOTH_BIT = 256;
+  // Glyph atlas: glyphs are rasterised at GLYPH_BASE px with GLYPH_SPREAD px of
+  // distance field around them, into an ATLAS_W x ATLAS_H rgba texture (the
+  // distance is the alpha channel, 0.5 on the outline).
+  const GLYPH_BASE = 48;
+  const GLYPH_SPREAD = 6;
+  const GLYPH_PAD = GLYPH_SPREAD;
+  const ATLAS_W = 2048;
+  const ATLAS_H = 1024;
+  const SDF_BIT = 512; // the texture is the glyph atlas: alpha holds a distance field
   const MAX_SEGMENTS = 96;
   function clamp01(v) {
@@ -261,8 +273,8 @@
     return t;
   }
-  // env.textTexture(str, px) -> { w, h, pad } texture object for a text run
+  // env.glyph(codePoint) -> { adv, w, h, u0, v0, u1, v1, tex } (sizes in atlas
-  // (white glyphs on transparent, `pad` px of margin on every side), or null.
+  // pixels at GLYPH_BASE; w = 0 for a blank glyph), or null; env.atlas is its texture.
   function makeBatcher(env) {
     let vcap = 1 << 14;
     let icap = 1 << 15;
@@ -325,7 +337,7 @@
         t.slot = cur.n;
         cur.slots[cur.n++] = t;
       }
-      slotBits = t.slot | (t.smooth ? SMOOTH_BIT : 0);
+      slotBits = t.slot | (t.smooth ? SMOOTH_BIT : 0) | (t.sdf ? SDF_BIT : 0);
     }
     function vert(x, y, u, v, c) {
@@ -434,19 +446,23 @@
         }
         cur.count += n * 3;
       },
-      // `x, y` is the text's top-left. The run is rasterised at its on-screen
+      // `x, y` is the text's top-left. Each glyph is a quad of the SDF atlas scaled
-      // size in device pixels (size * camera scale * dpr), so it is drawn 1:1.
+      // by size / GLYPH_BASE, so the text stays sharp at any size, zoom or dpr.
       drawText(str, x, y, size, r, g, b, a) {
         if (!str) return;
+        const k = size / GLYPH_BASE;
-        const px = Math.max(1, Math.round(size * cam.s * dpr));
+        const c = packColor(r, g, b, a);
+        let pen = x;
+        for (const ch of str) {
-        const t = env.textTexture(str, px);
+          const gl = env.glyph(ch.codePointAt(0));
-        if (!t) return;
+          if (!gl) continue;
-        const s = cam.s * dpr;
+          if (gl.w > 0) {
-        const x0 = x - t.pad / s;
+            const x0 = pen - GLYPH_PAD * k;
-        const y0 = y - t.pad / s;
+            const y0 = y - GLYPH_PAD * k;
-        const x1 = x0 + t.w / s;
-        const y1 = y0 + t.h / s;
-        quad(t, x0, y0, x1, y0, x1, y1, x0, y1, 0, 0, 1, 1, packColor(r, g, b, a));
+            quad(env.atlas, x0, y0, x0 + gl.w * k, y0, x0 + gl.w * k, y0 + gl.h * k, x0, y0 + gl.h * k, gl.u0, gl.v0, gl.u1, gl.v1, c);
+          }
+          pen += gl.adv * k;
+        }
       },
       setCamera,
       resetCamera() {
@@ -535,7 +551,13 @@ ${cases}    default: { return vec4f(1.0); }
   }
 }
 @fragment fn fs(i: VOut) -> @location(0) vec4f {
+  let fw = max(fwidth(i.uv.x), fwidth(i.uv.y));
-  return pick(i.slot, i.uv) * i.c;
+  let texel = pick(i.slot, i.uv);
+  if ((i.slot & ${SDF_BIT}u) != 0u) {
+    let w = clamp(fw * ${ATLAS_W}.0 / ${2 * GLYPH_SPREAD}.0 * 0.75, 0.02, 0.5);
+    return vec4f(i.c.rgb, i.c.a * smoothstep(0.5 - w, 0.5 + w, texel.a));
+  }
+  return texel * i.c;
 }`;
   }
   const WGSL = makeWGSL();
@@ -651,6 +673,13 @@ ${cases}    default: { return vec4f(1.0); }
       return t;
     }
+    // Writes the pixels (rgba, w x h) of one rectangle of `t`; the caller keeps
+    // the full source in step so a restored device re-uploads it.
+    function writeRegion(t, x, y, w, h, rgba) {
+      if (recovering || !t.gpu) return;
+      device.queue.writeTexture({ texture: t.gpu, origin: [x, y] }, rgba, { bytesPerRow: w * 4 }, [w, h]);
+    }
     // Bind groups by the textures of a draw's slots (unused slots hold the white texture).
     function bindGroup(batch) {
       let key = "";
@@ -679,6 +708,7 @@ ${cases}    default: { return vec4f(1.0); }
     return {
       name: "gpu-webgpu",
       createTexture: (source, w, h, smooth) => createTexture(source, w, h, smooth, b.newTextureId()),
+      writeRegion,
       setSmooth(t, smooth) {
         t.smooth = !!smooth;
       },
@@ -736,54 +766,147 @@ ${cases}    default: { return vec4f(1.0); }
   // --- text -------------------------------------------------------------------------
+  // Squared euclidean distance transform of a w x h grid of starting squared
+  // distances (Felzenszwalb & Huttenlocher), written to `out`.
+  function edt(grid, w, h, out) {
-  const TEXT_PAD = 1;
+    const BIG = 1e20;
+    const n = Math.max(w, h);
+    const f = new Float64Array(n);
+    const d = new Float64Array(n);
-  const TEXT_CACHE_MAX = 512;
+    const v = new Int32Array(n);
-  // Rasterises (string, px) runs once into backend textures, LRU-evicted.
-  function makeTextCache(getBackend) {
+    const z = new Float64Array(n + 1);
-    const cache = new Map(); // "px|str" -> { tex, frame }; Map order = LRU order
+    const pass = (len) => {
-    let frameNo = 0;
+      let k = 0;
-    let scratch = null;
+      v[0] = 0;
-    let ctx2d = null;
+      z[0] = -BIG;
-    return {
+      z[1] = BIG;
-      textTexture(str, px) {
-        const key = px + "|" + str;
+      for (let q = 1; q < len; q++) {
-        let e = cache.get(key);
+        let sx;
-        if (e) {
+        for (;;) {
-          cache.delete(key);
-          cache.set(key, e);
-          e.frame = frameNo;
+          const p = v[k];
-          return e.tex;
-        }
-        if (!scratch) {
-          scratch = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(8, 8) : document.createElement("canvas");
-          ctx2d = scratch.getContext("2d", { willReadFrequently: false });
-        }
-        ctx2d.font = px + "px sans-serif";
-        const w = Math.min(4096, Math.ceil(ctx2d.measureText(str).width) + 2 * TEXT_PAD);
-        const h = Math.min(4096, Math.ceil(px * 1.4) + 2 * TEXT_PAD);
+          sx = (f[q] + q * q - (f[p] + p * p)) / (2 * q - 2 * p);
-        scratch.width = w;
-        scratch.height = h;
-        ctx2d.font = px + "px sans-serif";
-        ctx2d.textBaseline = "top";
-        ctx2d.fillStyle = "#fff";
-        ctx2d.fillText(str, TEXT_PAD, TEXT_PAD);
-        const tex = getBackend().createTexture(ctx2d.getImageData(0, 0, w, h), w, h, true);
-        tex.pad = TEXT_PAD;
-        cache.set(key, (e = { tex, frame: frameNo }));
-        return tex;
-      },
-      // Evicts least-recently-used runs not used this frame (their textures may be queued).
-      endFrame() {
-        frameNo++;
-        if (cache.size <= TEXT_CACHE_MAX) return;
+          if (sx <= z[k]) k--;
-        for (const [k, e] of cache) {
-          if (cache.size <= TEXT_CACHE_MAX || e.frame >= frameNo - 1) break;
-          getBackend().destroyTexture(e.tex);
-          cache.delete(k);
+          else break;
         }
+        k++;
+        v[k] = q;
+        z[k] = sx;
+        z[k + 1] = BIG;
-      },
+      }
+      k = 0;
+      for (let q = 0; q < len; q++) {
+        while (z[k + 1] < q) k++;
+        d[q] = (q - v[k]) * (q - v[k]) + f[v[k]];
+      }
     };
+    for (let x = 0; x < w; x++) {
+      for (let y = 0; y < h; y++) f[y] = grid[y * w + x];
+      pass(h);
+      for (let y = 0; y < h; y++) out[y * w + x] = d[y];
+    }
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) f[x] = out[y * w + x];
+      pass(w);
+      for (let x = 0; x < w; x++) out[y * w + x] = d[x];
+    }
+  }
+  // The glyph atlas: ASCII and Latin-1 are drawn at start-up with the page's
+  // sans-serif font, other characters when first used. The pixels are kept so a
+  // restored GPU device can upload them again. A glyph that no longer fits in the
+  // atlas draws as `?`.
+  function makeGlyphAtlas(getBackend, atlas) {
+    const data = new Uint8ClampedArray(ATLAS_W * ATLAS_H * 4);
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = data[i + 1] = data[i + 2] = 255;
+    }
+    atlas.source = { data };
+    const glyphs = new Map();
+    const scratch = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(8, 8) : document.createElement("canvas");
+    const c2d = scratch.getContext("2d", { willReadFrequently: true });
+    const font = GLYPH_BASE + "px sans-serif";
+    let px = 0;
+    let py = 0;
+    let rowH = 0;
+    let full = false;
+    function make(cp) {
+      const ch = String.fromCodePoint(cp);
+      c2d.font = font;
+      const adv = c2d.measureText(ch).width;
+      const w = Math.ceil(adv) + 2 * GLYPH_PAD;
+      const h = Math.ceil(GLYPH_BASE * 1.25) + 2 * GLYPH_PAD;
+      const blank = /^\s$/.test(ch);
+      const gl = { adv, w: blank ? 0 : w, h, u0: 0, v0: 0, u1: 0, v1: 0 };
+      if (blank) return gl;
+      if (px + w > ATLAS_W) {
+        px = 0;
+        py += rowH;
+        rowH = 0;
+      }
+      if (py + h > ATLAS_H) {
+        if (!full) console.warn("glyph atlas is full; further new characters draw as '?'");
+        full = true;
+        return null;
+      }
+      scratch.width = w;
+      scratch.height = h;
+      c2d.font = font;
+      c2d.textBaseline = "top";
+      c2d.fillStyle = "#fff";
+      c2d.fillText(ch, GLYPH_PAD, GLYPH_PAD);
+      const cov = c2d.getImageData(0, 0, w, h).data;
+      // Anti-aliased coverage places the outline between pixels: an edge pixel of
+      // coverage a is 0.5 - a pixels from it.
+      const BIG = 1e20;
+      const outer = new Float64Array(w * h); // squared distance outside the glyph
+      const inner = new Float64Array(w * h); // squared distance inside it
+      for (let i = 0; i < w * h; i++) {
+        const a = cov[i * 4 + 3] / 255;
+        if (a === 1) {
+          outer[i] = 0;
+          inner[i] = BIG;
+        } else if (a === 0) {
+          outer[i] = BIG;
+          inner[i] = 0;
+        } else {
+          const d = 0.5 - a;
+          outer[i] = d > 0 ? d * d : 0;
+          inner[i] = d > 0 ? 0 : d * d;
+        }
+      }
+      const dOut = new Float64Array(w * h);
+      const dIn = new Float64Array(w * h);
+      edt(outer, w, h, dOut);
+      edt(inner, w, h, dIn);
+      const cell = new Uint8ClampedArray(w * h * 4);
+      for (let i = 0; i < w * h; i++) {
+        const sd = Math.sqrt(dOut[i]) - Math.sqrt(dIn[i]); // > 0 outside
+        cell[i * 4] = cell[i * 4 + 1] = cell[i * 4 + 2] = 255;
+        cell[i * 4 + 3] = Math.round(Math.min(1, Math.max(0, 0.5 - sd / (2 * GLYPH_SPREAD))) * 255);
+      }
+      for (let y = 0; y < h; y++) data.set(cell.subarray(y * w * 4, (y + 1) * w * 4), ((py + y) * ATLAS_W + px) * 4);
+      getBackend().writeRegion(atlas, px, py, w, h, cell);
+      gl.u0 = px / ATLAS_W;
+      gl.v0 = py / ATLAS_H;
+      gl.u1 = (px + w) / ATLAS_W;
+      gl.v1 = (py + h) / ATLAS_H;
+      px += w;
+      rowH = Math.max(rowH, h);
+      return gl;
+    }
+    function glyph(cp) {
+      let g = glyphs.get(cp);
+      if (g === undefined) {
+        g = make(cp);
+        glyphs.set(cp, g);
+      }
+      return g || glyphs.get(63) || null;
+    }
+    for (let cp = 32; cp < 127; cp++) glyph(cp);
+    for (let cp = 160; cp < 256; cp++) glyph(cp);
+    return glyph;
   }
   // --- start-up --------------------------------------------------------------------
@@ -806,8 +929,8 @@ ${cases}    default: { return vec4f(1.0); }
       document.body.append(Object.assign(document.createElement("pre"), { textContent: text, style: "position:fixed;top:0;left:0;color:" + color + ";margin:8px;font-size:18px" }));
     let backend = null;
-    const text = makeTextCache(() => backend);
+    const env = { glyph: () => null, atlas: null };
-    const b = makeBatcher({ textTexture: text.textTexture });
+    const b = makeBatcher({ glyph: (cp) => env.glyph(cp), get atlas() { return env.atlas; } });
     try {
       backend = await makeWebGPU(canvas, b, (reason, restored) => {
         if (restored) {
@@ -826,6 +949,10 @@ ${cases}    default: { return vec4f(1.0); }
       message(msg, "#f55");
       return;
     }
+    // The atlas is a backend texture (smooth, SDF) built once the backend exists.
+    env.atlas = backend.createTexture(null, ATLAS_W, ATLAS_H, true);
+    env.atlas.sdf = true;
+    env.glyph = makeGlyphAtlas(() => backend, env.atlas);
     globalThis.plumRenderer = backend.name;
     console.log("plumRenderer: " + backend.name);
@@ -941,7 +1068,6 @@ ${cases}    default: { return vec4f(1.0); }
         const t2 = m ? performance.now() : 0;
         const draws = backend.submit(b);
         if (m) { m.n++; m.u += t1 - t0; m.d += t2 - t1; m.r += performance.now() - t2; m.dr += draws; }
-        text.endFrame();
       } catch (e) {
         console.error("frame failed:", e);
         return;