73a13f5 | plum | pyrossh

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

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

73a13f5 — Peter John 2026-11-02T17:23:10+05:30

plum_bridge: 16 texture slots per draw call (per-vertex slot, switch over 16 bindings)

Files changed (1) hide show

plum-game/web/plum_bridge.js +84 -40

plum-game/web/plum_bridge.js CHANGED Viewed

@@ -1,8 +1,9 @@
 // Own batching renderer for a Plum game: plum.wasm calls this file directly (no
 // second wasm module, no library). Every draw becomes quads or triangle fans
 // written into one CPU vertex/index array (camera applied on the CPU), flushed
-// with one buffer upload per frame and one draw call per run of the same texture.
+// 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
-// Untextured shapes sample a 1x1 white texture. The backend is WebGPU where the
+// texture is needed. Untextured shapes sample a 1x1 white texture. The backend is WebGPU where the
 // browser has it; there is no fallback (a page without navigator.gpu says so).
 //
 // Each std/Game draw extern appends vertices to the batcher directly.
@@ -226,9 +227,12 @@
   // --- batcher ----------------------------------------------------------------------
-  // One vertex is 20 bytes: x, y (clip space), u, v (f32) and rgba (u8x4).
+  // 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).
-  const VERT_WORDS = 5;
+  const VERT_WORDS = 6;
-  const VERT_BYTES = 20;
+  const VERT_BYTES = 24;
+  const SLOTS = 16;
+  const SMOOTH_BIT = 256;
   const MAX_SEGMENTS = 96;
   function clamp01(v) {
@@ -268,11 +272,14 @@
     let idx = new Uint32Array(icap);
     let vn = 0; // vertices used
     let inn = 0; // indices used
-    const batches = []; // pooled { tex, start, count }
+    const batches = []; // pooled { id, slots, n, start, count }
     let nb = 0;
     let cur = null;
+    let batchSeq = 0;
+    let slotBits = 0; // slot | smooth flag of the texture of the quad being written
+    let texSeq = 0;
-    const white = { w: 1, h: 1, white: true };
+    const white = { w: 1, h: 1, white: true, uid: texSeq++ };
-    const textures = []; // handle -> texture object { w, h, ... }
+    const textures = []; // handle -> texture object { w, h, uid, smooth, ... }
     let sw = 1;
     let sh = 1;
     const cam = { x: 0, y: 0, s: 1 };
@@ -300,15 +307,24 @@
       }
     }
+    // Puts `t` in a slot of the current batch; starts a new batch when all 16 slots
-    // Starts a new batch only when the texture changes.
+    // hold other textures. Sets slotBits for the vertices that follow.
     function useTex(t) {
-      if (cur && cur.tex === t) return;
+      if (!cur || (t.bid !== cur.id && cur.n === SLOTS)) {
-      cur = batches[nb];
+        cur = batches[nb];
-      if (!cur) batches.push((cur = { tex: t, start: 0, count: 0 }));
+        if (!cur) batches.push((cur = { id: 0, slots: new Array(SLOTS).fill(null), n: 0, start: 0, count: 0 }));
-      nb++;
+        nb++;
+        cur.id = ++batchSeq;
-      cur.tex = t;
+        cur.n = 0;
-      cur.start = inn;
+        cur.start = inn;
-      cur.count = 0;
+        cur.count = 0;
+      }
+      if (t.bid !== cur.id) {
+        t.bid = cur.id;
+        t.slot = cur.n;
+        cur.slots[cur.n++] = t;
+      }
+      slotBits = t.slot | (t.smooth ? SMOOTH_BIT : 0);
     }
     function vert(x, y, u, v, c) {
@@ -318,6 +334,7 @@
       f32[o + 2] = u;
       f32[o + 3] = v;
       u32[o + 4] = c;
+      u32[o + 5] = slotBits;
       vn++;
     }
@@ -352,6 +369,7 @@
     const self = {
       textures,
+      newTextureId: () => texSeq++,
       white,
       cam,
       clearColor,
@@ -480,26 +498,48 @@
   // A backend: { name, createTexture(source, w, h, smooth) -> { w, h, ...gpu fields },
   // setSmooth(tex, smooth), destroyTexture(tex), submit(batcher, w, h) -> draw calls issued }.
+  // Sixteen texture bindings (0-15) picked by a switch on the vertex's slot, then a
+  // nearest (16) and a linear (17) sampler. A binding array is not in core WebGPU,
+  // so this is the portable form. textureSampleLevel is used because the switch is
+  // not uniform control flow.
-  const WGSL = `
+  function makeWGSL() {
+    let decl = "";
+    let cases = "";
+    for (let i = 0; i < SLOTS; i++) {
+      decl += `@group(0) @binding(${i}) var t${i}: texture_2d<f32>;\n`;
+      cases += `    case ${i}u: { if (lin) { return textureSampleLevel(t${i}, ls, uv, 0.0); } return textureSampleLevel(t${i}, ns, uv, 0.0); }\n`;
+    }
+    return `
 struct VOut {
   @builtin(position) p: vec4f,
   @location(0) uv: vec2f,
   @location(1) c: vec4f,
+  @location(2) @interpolate(flat) slot: u32,
 };
-@vertex fn vs(@location(0) p: vec2f, @location(1) uv: vec2f, @location(2) c: vec4f) -> VOut {
+@vertex fn vs(@location(0) p: vec2f, @location(1) uv: vec2f, @location(2) c: vec4f, @location(3) slot: u32) -> VOut {
   var o: VOut;
   o.p = vec4f(p, 0.0, 1.0);
   o.uv = uv;
   o.c = c;
+  o.slot = slot;
   return o;
 }
-@group(0) @binding(0) var tex: texture_2d<f32>;
+${decl}@group(0) @binding(16) var ns: sampler;
-@group(0) @binding(1) var smp: sampler;
+@group(0) @binding(17) var ls: sampler;
+fn pick(slot: u32, uv: vec2f) -> vec4f {
+  let lin = (slot & ${SMOOTH_BIT}u) != 0u;
+  switch (slot & 255u) {
+${cases}    default: { return vec4f(1.0); }
+  }
+}
 @fragment fn fs(i: VOut) -> @location(0) vec4f {
-  return textureSample(tex, smp, i.uv) * i.c;
+  return pick(i.slot, i.uv) * i.c;
 }`;
+  }
+  const WGSL = makeWGSL();
-  async function makeWebGPU(canvas, white) {
+  async function makeWebGPU(canvas, b) {
+    const white = b.white;
     if (!navigator.gpu) return null;
     const adapter = await navigator.gpu.requestAdapter();
     if (!adapter) return null;
@@ -520,6 +560,7 @@ struct VOut {
             { shaderLocation: 0, format: "float32x2", offset: 0 },
             { shaderLocation: 1, format: "float32x2", offset: 8 },
             { shaderLocation: 2, format: "unorm8x4", offset: 16 },
+            { shaderLocation: 3, format: "uint32", offset: 20 },
           ],
         }],
       },
@@ -544,16 +585,22 @@ struct VOut {
     let ibuf = null;
     let isize = 0;
+    // Bind groups by the textures of a draw's slots (unused slots hold the white texture).
+    const groups = new Map();
-    function bind(t) {
+    function bindGroup(batch, white) {
+      let key = "";
+      for (let i = 0; i < SLOTS; i++) key += (i < batch.n ? batch.slots[i].uid : white.uid) + ",";
+      let bg = groups.get(key);
+      if (!bg) {
+        const entries = [];
+        for (let i = 0; i < SLOTS; i++) entries.push({ binding: i, resource: (i < batch.n ? batch.slots[i] : white).view });
+        entries.push({ binding: 16, resource: nearest }, { binding: 17, resource: linear });
-      t.bg = device.createBindGroup({
+        bg = device.createBindGroup({ layout, entries });
-        layout,
+        groups.set(key, bg);
+      }
-        entries: [
+      return bg;
-          { binding: 0, resource: t.view },
-          { binding: 1, resource: t.smooth ? linear : nearest },
-        ],
-      });
     }
-    function createTexture(source, w, h, smooth) {
+    function createTexture(source, w, h, smooth, uid) {
       const gpu = device.createTexture({
         size: [w, h],
         format: "rgba8unorm",
@@ -562,21 +609,18 @@ struct VOut {
       if (source && source.data) device.queue.writeTexture({ texture: gpu }, source.data, { bytesPerRow: w * 4 }, [w, h]);
       else if (source) device.queue.copyExternalImageToTexture({ source }, { texture: gpu }, [w, h]);
       else device.queue.writeTexture({ texture: gpu }, new Uint8Array([255, 255, 255, 255]), { bytesPerRow: 4 }, [1, 1]);
-      const t = { w, h, gpu, view: gpu.createView(), smooth: !!smooth, bg: null };
+      return { w, h, uid, gpu, view: gpu.createView(), smooth: !!smooth, bid: 0, slot: 0 };
-      bind(t);
-      return t;
     }
-    Object.assign(white, createTexture(null, 1, 1, false));
+    Object.assign(white, createTexture(null, 1, 1, false, white.uid));
     return {
       name: "gpu-webgpu",
-      createTexture,
+      createTexture: (source, w, h, smooth) => createTexture(source, w, h, smooth, b.newTextureId()),
       setSmooth(t, smooth) {
-        if (t.smooth === !!smooth) return;
         t.smooth = !!smooth;
-        bind(t);
       },
       destroyTexture(t) {
+        groups.clear();
         t.gpu.destroy();
       },
       submit(b) {
@@ -612,7 +656,7 @@ struct VOut {
           pass.setIndexBuffer(ibuf, "uint32");
           for (let i = 0; i < b.batchCount; i++) {
             const bt = b.batches[i];
-            pass.setBindGroup(0, bt.tex.bg);
+            pass.setBindGroup(0, bindGroup(bt, white));
             pass.drawIndexed(bt.count, 1, bt.start);
           }
         }
@@ -691,7 +735,7 @@ struct VOut {
     const text = makeTextCache(() => backend);
     const b = makeBatcher({ textTexture: text.textTexture });
     try {
-      backend = await makeWebGPU(canvas, b.white);
+      backend = await makeWebGPU(canvas, b);
     } catch (e) {
       console.error("WebGPU failed to start:", e);
     }