@bloopjs/toodle 0.1.3 → 0.1.4

package/dist/mod.js

@@ -17219,386 +17219,120 @@ class WebGPUBackend {
     return this.#renderPass;
   }
 }
-// src/backends/webgl2/WebGLTextShader.ts
-class WebGLTextShader {
-  label = "text";
+// src/backends/webgl2/WebGLFontPipeline.ts
+class WebGLFontPipeline {
   font;
+  fontTexture;
+  charDataTexture;
+  textBufferTexture;
   maxCharCount;
-  constructor(font, maxCharCount) {
+  lineHeight;
+  #gl;
+  constructor(gl, font, fontTexture, charDataTexture, textBufferTexture, maxCharCount) {
+    this.#gl = gl;
     this.font = font;
+    this.fontTexture = fontTexture;
+    this.charDataTexture = charDataTexture;
+    this.textBufferTexture = textBufferTexture;
     this.maxCharCount = maxCharCount;
+    this.lineHeight = font.lineHeight;
+  }
+  static create(gl, font, maxCharCount) {
+    const fontTexture = gl.createTexture();
+    assert(fontTexture, "Failed to create font texture");
+    gl.bindTexture(gl.TEXTURE_2D, fontTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, font.imageBitmap);
+    const charDataTexture = gl.createTexture();
+    assert(charDataTexture, "Failed to create char data texture");
+    gl.bindTexture(gl.TEXTURE_2D, charDataTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const charCount = font.charCount;
+    const charTextureWidth = charCount * 2;
+    const charTextureData = new Float32Array(charTextureWidth * 4);
+    for (let i3 = 0;i3 < charCount; i3++) {
+      const srcOffset = i3 * 8;
+      const dstOffset0 = i3 * 2 * 4;
+      const dstOffset1 = (i3 * 2 + 1) * 4;
+      charTextureData[dstOffset0] = font.charBuffer[srcOffset];
+      charTextureData[dstOffset0 + 1] = font.charBuffer[srcOffset + 1];
+      charTextureData[dstOffset0 + 2] = font.charBuffer[srcOffset + 2];
+      charTextureData[dstOffset0 + 3] = font.charBuffer[srcOffset + 3];
+      charTextureData[dstOffset1] = font.charBuffer[srcOffset + 4];
+      charTextureData[dstOffset1 + 1] = font.charBuffer[srcOffset + 5];
+      charTextureData[dstOffset1 + 2] = font.charBuffer[srcOffset + 6];
+      charTextureData[dstOffset1 + 3] = font.charBuffer[srcOffset + 7];
+    }
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, charTextureWidth, 1, 0, gl.RGBA, gl.FLOAT, charTextureData);
+    const textBufferTexture = gl.createTexture();
+    assert(textBufferTexture, "Failed to create text buffer texture");
+    gl.bindTexture(gl.TEXTURE_2D, textBufferTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, maxCharCount, 1, 0, gl.RGBA, gl.FLOAT, null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return new WebGLFontPipeline(gl, font, fontTexture, charDataTexture, textBufferTexture, maxCharCount);
+  }
+  updateTextBuffer(data, glyphCount) {
+    const gl = this.#gl;
+    gl.bindTexture(gl.TEXTURE_2D, this.textBufferTexture);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, glyphCount, 1, gl.RGBA, gl.FLOAT, data);
   }
-  startFrame(_uniform) {}
-  processBatch(_nodes) {
-    throw new Error("Text rendering is not supported in WebGL mode. Use WebGPU backend for text rendering.");
+  destroy() {
+    const gl = this.#gl;
+    gl.deleteTexture(this.fontTexture);
+    gl.deleteTexture(this.charDataTexture);
+    gl.deleteTexture(this.textBufferTexture);
   }
-  endFrame() {}
-}
-
-// src/backends/webgpu/wgsl/text.wgsl.ts
-var text_wgsl_default = `
-// Adapted from: https://webgpu.github.io/webgpu-samples/?sample=textRenderingMsdf
-
-// Quad vertex positions for a character
-const pos = array(
-  vec2f(0, -1),
-  vec2f(1, -1),
-  vec2f(0,  0),
-  vec2f(1,  0),
-);
-
-// Debug colors for visualization
-const debugColors = array(
-  vec4f(1, 0, 0, 1),
-  vec4f(0, 1, 0, 1),
-  vec4f(0, 0, 1, 1),
-  vec4f(1, 1, 1, 1),
-);
-
-// Vertex input from GPU
-struct VertexInput {
-  @builtin(vertex_index) vertex: u32,
-  @builtin(instance_index) instance: u32,
-};
-
-// Output from vertex shader to fragment shader
-struct VertexOutput {
-  @builtin(position) position: vec4f,
-  @location(0) texcoord: vec2f,
-  @location(1) debugColor: vec4f,
-  @location(2) @interpolate(flat) instanceIndex: u32,
-};
-
-// Metadata for a single character glyph
-struct Char {
-  texOffset: vec2f, // Offset to top-left in MSDF texture (pixels)
-  texExtent: vec2f, // Size in texture (pixels)
-  size: vec2f,      // Glyph size in ems
-  offset: vec2f,    // Position offset in ems
-};
-
-// Metadata for a text block
-struct TextBlockDescriptor {
-  transform: mat3x3f,   // Text transform matrix (model matrix)
-  color: vec4f,         // Text color
-  fontSize: f32,        // Font size
-  blockWidth: f32,      // Total width of text block
-  blockHeight: f32,     // Total height of text block
-  bufferPosition: f32   // Index and length in textBuffer
-};
-
-// Font bindings
-@group(0) @binding(0) var fontTexture: texture_2d<f32>;
-@group(0) @binding(1) var fontSampler: sampler;
-@group(0) @binding(2) var<storage> chars: array<Char>;
-@group(0) @binding(3) var<uniform> fontData: vec4f; // Contains line height (x)
-
-// Text bindings
-@group(1) @binding(0) var<storage> texts: array<TextBlockDescriptor>;
-@group(1) @binding(1) var<storage> textBuffer: array<vec4f>; // Each vec4: xy = glyph pos, z = char index
-
-// Global uniforms
-@group(2) @binding(0) var<uniform> viewProjectionMatrix: mat3x3f;
-
-// Vertex shader
-@vertex
-fn vertexMain(input: VertexInput) -> VertexOutput {
-  // Because the instance index is used for character indexing, we are
-  // overloading the vertex index to store the instance of the text metadata.
-  //
-  // I.e...
-  // Vertex 0-4 = Instance 0, Vertex 0-4
-  // Vertex 4-8 = Instance 1, Vertex 0-4
-  // Vertex 8-12 = Instance 2, Vertex 0-4
-  let vertexIndex = input.vertex % 4;
-  let textIndex = input.vertex / 4;
-
-  let text = texts[textIndex];
-  let textElement = textBuffer[u32(text.bufferPosition) + input.instance];
-  let char = chars[u32(textElement.z)];
-
-  let lineHeight = fontData.x;
-  let textWidth = text.blockWidth;
-  let textHeight = text.blockHeight;
-
-  // Center text vertically; origin is mid-height
-  let offset = vec2f(0, -textHeight / 2);
-
-  // Glyph position in ems (quad pos * size + per-char offset)
-  let emPos = pos[vertexIndex] * char.size + char.offset + textElement.xy - offset;
-  let charPos = emPos * (text.fontSize / lineHeight);
-
-  var output: VertexOutput;
-  let transformedPosition = viewProjectionMatrix * text.transform * vec3f(charPos, 1);
-
-  output.position = vec4f(transformedPosition, 1);
-  output.texcoord = pos[vertexIndex] * vec2f(1, -1);
-  output.texcoord *= char.texExtent;
-  output.texcoord += char.texOffset;
-  output.debugColor = debugColors[vertexIndex];
-  output.instanceIndex = textIndex;
-  return output;
-
-  // To debug - hardcode quad in bottom right quarter of the screen:
-  // output.position = vec4f(pos[input.vertex], 0, 1);
-}
-
-// Signed distance function sampling for MSDF font rendering
-fn sampleMsdf(texcoord: vec2f) -> f32 {
-  let c = textureSample(fontTexture, fontSampler, texcoord);
-  return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
 }
 
-// Fragment shader
-// Anti-aliasing technique by Paul Houx
-// more details here:
-// https://github.com/Chlumsky/msdfgen/issues/22#issuecomment-234958005
-@fragment
-fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
-  let text = texts[input.instanceIndex];
-
-  // pxRange (AKA distanceRange) comes from the msdfgen tool.
-  let pxRange = 4.0;
-  let texSize = vec2f(textureDimensions(fontTexture, 0));
-
-  let dx = texSize.x * length(vec2f(dpdxFine(input.texcoord.x), dpdyFine(input.texcoord.x)));
-  let dy = texSize.y * length(vec2f(dpdxFine(input.texcoord.y), dpdyFine(input.texcoord.y)));
-
-  let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
-  let sigDist = sampleMsdf(input.texcoord) - 0.5;
-  let pxDist = sigDist * toPixels;
-
-  let edgeWidth = 0.5;
-  let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
-
-  if (alpha < 0.001) {
-    discard;
+// src/utils/error.ts
+var warnings = new Map;
+function warnOnce(key, msg) {
+  if (warnings.has(key)) {
+    return;
   }
-
-  let msdfColor = vec4f(text.color.rgb, text.color.a * alpha);
-  return msdfColor;
-
-  // Debug options:
-  // return text.color;
-  // return input.debugColor;
-  // return vec4f(1, 0, 1, 1); // hardcoded magenta
-  // return textureSample(fontTexture, fontSampler, input.texcoord);
+  warnings.set(key, true);
+  console.warn(msg ?? key);
 }
-`;
 
-// src/backends/webgpu/FontPipeline.ts
-class FontPipeline {
-  pipeline;
-  font;
-  fontBindGroup;
-  maxCharCount;
-  constructor(pipeline, font, fontBindGroup, maxCharCount) {
-    this.pipeline = pipeline;
-    this.font = font;
-    this.fontBindGroup = fontBindGroup;
-    this.maxCharCount = maxCharCount;
-  }
-  static async create(device, font, colorFormat, maxCharCount) {
-    const pipeline = await pipelinePromise(device, colorFormat, font.name);
-    const texture = device.createTexture({
-      label: `MSDF font ${font.name}`,
-      size: [font.imageBitmap.width, font.imageBitmap.height, 1],
-      format: "rgba8unorm",
-      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
-    });
-    device.queue.copyExternalImageToTexture({ source: font.imageBitmap }, { texture }, [font.imageBitmap.width, font.imageBitmap.height]);
-    const charsGpuBuffer = device.createBuffer({
-      label: `MSDF font ${font.name} character layout buffer`,
-      size: font.charCount * Float32Array.BYTES_PER_ELEMENT * 8,
-      usage: GPUBufferUsage.STORAGE,
-      mappedAtCreation: true
-    });
-    const charsArray = new Float32Array(charsGpuBuffer.getMappedRange());
-    charsArray.set(font.charBuffer, 0);
-    charsGpuBuffer.unmap();
-    const fontDataBuffer = device.createBuffer({
-      label: `MSDF font ${font.name} metadata buffer`,
-      size: Float32Array.BYTES_PER_ELEMENT * 4,
-      usage: GPUBufferUsage.UNIFORM,
-      mappedAtCreation: true
-    });
-    const fontDataArray = new Float32Array(fontDataBuffer.getMappedRange());
-    fontDataArray[0] = font.lineHeight;
-    fontDataBuffer.unmap();
-    const fontBindGroup = device.createBindGroup({
-      layout: pipeline.getBindGroupLayout(0),
-      entries: [
-        {
-          binding: 0,
-          resource: texture.createView()
-        },
-        {
-          binding: 1,
-          resource: device.createSampler(sampler)
-        },
-        {
-          binding: 2,
-          resource: {
-            buffer: charsGpuBuffer
-          }
-        },
-        {
-          binding: 3,
-          resource: {
-            buffer: fontDataBuffer
-          }
-        }
-      ]
-    });
-    return new FontPipeline(pipeline, font, fontBindGroup, maxCharCount);
-  }
-}
-function pipelinePromise(device, colorFormat, label) {
-  const shader = device.createShaderModule({
-    label: `${label} shader`,
-    code: text_wgsl_default
-  });
-  return device.createRenderPipelineAsync({
-    label: `${label} pipeline`,
-    layout: device.createPipelineLayout({
-      bindGroupLayouts: [
-        device.createBindGroupLayout(fontBindGroupLayout),
-        device.createBindGroupLayout(textUniformBindGroupLayout),
-        device.createBindGroupLayout(engineUniformBindGroupLayout)
-      ]
-    }),
-    vertex: {
-      module: shader,
-      entryPoint: "vertexMain"
-    },
-    fragment: {
-      module: shader,
-      entryPoint: "fragmentMain",
-      targets: [
-        {
-          format: colorFormat,
-          blend: {
-            color: {
-              srcFactor: "src-alpha",
-              dstFactor: "one-minus-src-alpha"
-            },
-            alpha: {
-              srcFactor: "one",
-              dstFactor: "one"
-            }
-          }
-        }
-      ]
-    },
-    primitive: {
-      topology: "triangle-strip",
-      stripIndexFormat: "uint32"
-    }
-  });
-}
-if (typeof GPUShaderStage === "undefined") {
-  globalThis.GPUShaderStage = {
-    VERTEX: 1,
-    FRAGMENT: 2,
-    COMPUTE: 4
-  };
-}
-var fontBindGroupLayout = {
-  label: "MSDF font group layout",
-  entries: [
-    {
-      binding: 0,
-      visibility: GPUShaderStage.FRAGMENT,
-      texture: {}
-    },
-    {
-      binding: 1,
-      visibility: GPUShaderStage.FRAGMENT,
-      sampler: {}
-    },
-    {
-      binding: 2,
-      visibility: GPUShaderStage.VERTEX,
-      buffer: { type: "read-only-storage" }
-    },
-    {
-      binding: 3,
-      visibility: GPUShaderStage.VERTEX,
-      buffer: {}
-    }
-  ]
-};
-var engineUniformBindGroupLayout = {
-  label: "Uniform bind group",
-  entries: [
-    {
-      binding: 0,
-      visibility: GPUShaderStage.VERTEX,
-      buffer: {}
-    }
-  ]
-};
-var sampler = {
-  label: "MSDF text sampler",
-  minFilter: "linear",
-  magFilter: "linear",
-  mipmapFilter: "linear",
-  maxAnisotropy: 16
-};
-var textUniformBindGroupLayout = {
-  label: "MSDF text block uniform",
-  entries: [
-    {
-      binding: 0,
-      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-      buffer: { type: "read-only-storage" }
-    },
-    {
-      binding: 1,
-      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-      buffer: { type: "read-only-storage" }
-    }
-  ]
-};
-// src/utils/error.ts
-var warnings = new Map;
-function warnOnce(key, msg) {
-  if (warnings.has(key)) {
-    return;
-  }
-  warnings.set(key, true);
-  console.warn(msg ?? key);
-}
-
-// src/text/MsdfFont.ts
-class MsdfFont {
-  id;
-  json;
-  imageBitmap;
-  name;
-  charset;
-  charCount;
-  lineHeight;
-  charBuffer;
-  #kernings;
-  #chars;
-  #fallbackCharCode;
-  constructor(id, json, imageBitmap) {
-    this.id = id;
-    this.json = json;
-    this.imageBitmap = imageBitmap;
-    const charArray = Object.values(json.chars);
-    this.charCount = charArray.length;
-    this.lineHeight = json.common.lineHeight;
-    this.charset = json.info.charset;
-    this.name = json.info.face;
-    this.#kernings = new Map;
-    if (json.kernings) {
-      for (const kearning of json.kernings) {
-        let charKerning = this.#kernings.get(kearning.first);
-        if (!charKerning) {
-          charKerning = new Map;
-          this.#kernings.set(kearning.first, charKerning);
+// src/text/MsdfFont.ts
+class MsdfFont {
+  id;
+  json;
+  imageBitmap;
+  name;
+  charset;
+  charCount;
+  lineHeight;
+  charBuffer;
+  #kernings;
+  #chars;
+  #fallbackCharCode;
+  constructor(id, json, imageBitmap) {
+    this.id = id;
+    this.json = json;
+    this.imageBitmap = imageBitmap;
+    const charArray = Object.values(json.chars);
+    this.charCount = charArray.length;
+    this.lineHeight = json.common.lineHeight;
+    this.charset = json.info.charset;
+    this.name = json.info.face;
+    this.#kernings = new Map;
+    if (json.kernings) {
+      for (const kearning of json.kernings) {
+        let charKerning = this.#kernings.get(kearning.first);
+        if (!charKerning) {
+          charKerning = new Map;
+          this.#kernings.set(kearning.first, charKerning);
         }
         charKerning.set(kearning.second, kearning.amount);
       }
@@ -18294,6 +18028,624 @@ class TextNode extends SceneNode {
   }
 }
 
+// src/backends/webgl2/glsl/text.glsl.ts
+var vertexShader2 = `#version 300 es
+precision highp float;
+
+// Engine uniforms
+uniform mat3 u_viewProjection;
+
+// Per-text-block uniforms
+uniform mat3 u_textTransform;
+uniform vec4 u_textColor;
+uniform float u_fontSize;
+uniform float u_blockWidth;
+uniform float u_blockHeight;
+uniform float u_lineHeight;
+
+// Character data texture (RGBA32F, 2 texels per character)
+// Texel 0: texOffset.xy, texExtent.xy
+// Texel 1: size.xy, offset.xy
+uniform sampler2D u_charData;
+
+// Text buffer texture (RGBA32F, 1 texel per glyph)
+// Each texel: xy = glyph position, z = char index
+uniform sampler2D u_textBuffer;
+
+// Outputs to fragment shader
+out vec2 v_texcoord;
+
+// Quad vertex positions for a character (matches WGSL)
+const vec2 pos[4] = vec2[4](
+  vec2(0.0, -1.0),
+  vec2(1.0, -1.0),
+  vec2(0.0,  0.0),
+  vec2(1.0,  0.0)
+);
+
+void main() {
+  // gl_VertexID gives us 0-3 for the quad vertices
+  // gl_InstanceID gives us which glyph we're rendering
+  int vertexIndex = gl_VertexID;
+  int glyphIndex = gl_InstanceID;
+
+  // Fetch glyph data from text buffer texture
+  vec4 glyphData = texelFetch(u_textBuffer, ivec2(glyphIndex, 0), 0);
+  vec2 glyphPos = glyphData.xy;
+  int charIndex = int(glyphData.z);
+
+  // Fetch character metrics (2 texels per char)
+  // Texel 0: texOffset.x, texOffset.y, texExtent.x, texExtent.y
+  // Texel 1: size.x, size.y, offset.x, offset.y
+  vec4 charData0 = texelFetch(u_charData, ivec2(charIndex * 2, 0), 0);
+  vec4 charData1 = texelFetch(u_charData, ivec2(charIndex * 2 + 1, 0), 0);
+
+  vec2 texOffset = charData0.xy;
+  vec2 texExtent = charData0.zw;
+  vec2 charSize = charData1.xy;
+  vec2 charOffset = charData1.zw;
+
+  // Center text vertically; origin is mid-height
+  vec2 offset = vec2(0.0, -u_blockHeight / 2.0);
+
+  // Glyph position in ems (quad pos * size + per-char offset)
+  vec2 emPos = pos[vertexIndex] * charSize + charOffset + glyphPos - offset;
+  vec2 charPos = emPos * (u_fontSize / u_lineHeight);
+
+  // Transform position through model and view-projection matrices
+  vec3 worldPos = u_textTransform * vec3(charPos, 1.0);
+  vec3 clipPos = u_viewProjection * worldPos;
+
+  gl_Position = vec4(clipPos.xy, 0.0, 1.0);
+
+  // Calculate texture coordinates
+  v_texcoord = pos[vertexIndex] * vec2(1.0, -1.0);
+  v_texcoord *= texExtent;
+  v_texcoord += texOffset;
+}
+`;
+var fragmentShader2 = `#version 300 es
+precision highp float;
+
+// Font texture (MSDF atlas)
+uniform sampler2D u_fontTexture;
+
+// Text color
+uniform vec4 u_textColor;
+
+// Input from vertex shader
+in vec2 v_texcoord;
+
+// Output color
+out vec4 fragColor;
+
+// Signed distance function sampling for MSDF font rendering
+// Median of three: max(min(r,g), min(max(r,g), b))
+float sampleMsdf(vec2 texcoord) {
+  vec4 c = texture(u_fontTexture, texcoord);
+  return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
+}
+
+void main() {
+  // pxRange (AKA distanceRange) comes from the msdfgen tool
+  float pxRange = 4.0;
+  vec2 texSize = vec2(textureSize(u_fontTexture, 0));
+
+  // Anti-aliasing technique by Paul Houx
+  // https://github.com/Chlumsky/msdfgen/issues/22#issuecomment-234958005
+  float dx = texSize.x * length(vec2(dFdx(v_texcoord.x), dFdy(v_texcoord.x)));
+  float dy = texSize.y * length(vec2(dFdx(v_texcoord.y), dFdy(v_texcoord.y)));
+
+  float toPixels = pxRange * inversesqrt(dx * dx + dy * dy);
+  float sigDist = sampleMsdf(v_texcoord) - 0.5;
+  float pxDist = sigDist * toPixels;
+
+  float edgeWidth = 0.5;
+  float alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
+
+  if (alpha < 0.001) {
+    discard;
+  }
+
+  fragColor = vec4(u_textColor.rgb, u_textColor.a * alpha);
+}
+`;
+
+// src/backends/webgl2/WebGLTextShader.ts
+class WebGLTextShader {
+  label = "text";
+  font;
+  maxCharCount;
+  #backend;
+  #pipeline;
+  #program;
+  #vao;
+  #cpuTextBuffer;
+  #cachedUniform = null;
+  #uViewProjection = null;
+  #uTextTransform = null;
+  #uTextColor = null;
+  #uFontSize = null;
+  #uBlockWidth = null;
+  #uBlockHeight = null;
+  #uLineHeight = null;
+  #uCharData = null;
+  #uTextBuffer = null;
+  #uFontTexture = null;
+  constructor(backend, pipeline) {
+    this.#backend = backend;
+    this.#pipeline = pipeline;
+    this.font = pipeline.font;
+    this.maxCharCount = pipeline.maxCharCount;
+    const gl = backend.gl;
+    const vs = this.#compileShader(gl, gl.VERTEX_SHADER, vertexShader2);
+    const fs = this.#compileShader(gl, gl.FRAGMENT_SHADER, fragmentShader2);
+    const program = gl.createProgram();
+    assert(program, "Failed to create WebGL program");
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      const info = gl.getProgramInfoLog(program);
+      throw new Error(`Failed to link text shader program: ${info}`);
+    }
+    this.#program = program;
+    this.#uViewProjection = gl.getUniformLocation(program, "u_viewProjection");
+    this.#uTextTransform = gl.getUniformLocation(program, "u_textTransform");
+    this.#uTextColor = gl.getUniformLocation(program, "u_textColor");
+    this.#uFontSize = gl.getUniformLocation(program, "u_fontSize");
+    this.#uBlockWidth = gl.getUniformLocation(program, "u_blockWidth");
+    this.#uBlockHeight = gl.getUniformLocation(program, "u_blockHeight");
+    this.#uLineHeight = gl.getUniformLocation(program, "u_lineHeight");
+    this.#uCharData = gl.getUniformLocation(program, "u_charData");
+    this.#uTextBuffer = gl.getUniformLocation(program, "u_textBuffer");
+    this.#uFontTexture = gl.getUniformLocation(program, "u_fontTexture");
+    const vao = gl.createVertexArray();
+    assert(vao, "Failed to create WebGL VAO");
+    this.#vao = vao;
+    this.#cpuTextBuffer = new Float32Array(this.maxCharCount * 4);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+  }
+  startFrame(uniform) {
+    this.#cachedUniform = uniform;
+  }
+  processBatch(nodes) {
+    if (nodes.length === 0)
+      return 0;
+    const gl = this.#backend.gl;
+    const uniform = this.#cachedUniform;
+    if (!uniform) {
+      throw new Error("Tried to process batch but engine uniform is not set");
+    }
+    gl.useProgram(this.#program);
+    gl.bindVertexArray(this.#vao);
+    if (this.#uViewProjection) {
+      const m3 = uniform.viewProjectionMatrix;
+      const mat3x3 = new Float32Array([
+        m3[0],
+        m3[1],
+        m3[2],
+        m3[4],
+        m3[5],
+        m3[6],
+        m3[8],
+        m3[9],
+        m3[10]
+      ]);
+      gl.uniformMatrix3fv(this.#uViewProjection, false, mat3x3);
+    }
+    if (this.#uLineHeight) {
+      gl.uniform1f(this.#uLineHeight, this.#pipeline.lineHeight);
+    }
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.fontTexture);
+    if (this.#uFontTexture) {
+      gl.uniform1i(this.#uFontTexture, 0);
+    }
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.charDataTexture);
+    if (this.#uCharData) {
+      gl.uniform1i(this.#uCharData, 1);
+    }
+    gl.activeTexture(gl.TEXTURE2);
+    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.textBufferTexture);
+    if (this.#uTextBuffer) {
+      gl.uniform1i(this.#uTextBuffer, 2);
+    }
+    for (const node of nodes) {
+      if (!(node instanceof TextNode)) {
+        console.error(node);
+        throw new Error(`Tried to use WebGLTextShader on something that isn't a TextNode: ${node}`);
+      }
+      const text = node.text;
+      const formatting = node.formatting;
+      const measurements = measureText(this.font, text, formatting.wordWrap);
+      const size = node.size ?? measurements;
+      const fontSize = formatting.shrinkToFit ? findLargestFontSize(this.font, text, size, formatting) : formatting.fontSize;
+      const actualFontSize = fontSize || DEFAULT_FONT_SIZE;
+      shapeText(this.font, text, size, actualFontSize, formatting, this.#cpuTextBuffer, 0);
+      this.#pipeline.updateTextBuffer(this.#cpuTextBuffer, measurements.printedCharCount);
+      if (this.#uTextTransform) {
+        const m3 = node.matrix;
+        const mat3x3 = new Float32Array([
+          m3[0],
+          m3[1],
+          m3[2],
+          m3[4],
+          m3[5],
+          m3[6],
+          m3[8],
+          m3[9],
+          m3[10]
+        ]);
+        gl.uniformMatrix3fv(this.#uTextTransform, false, mat3x3);
+      }
+      if (this.#uTextColor) {
+        const tint = node.tint;
+        gl.uniform4f(this.#uTextColor, tint.r, tint.g, tint.b, tint.a);
+      }
+      if (this.#uFontSize) {
+        gl.uniform1f(this.#uFontSize, actualFontSize);
+      }
+      if (this.#uBlockWidth) {
+        gl.uniform1f(this.#uBlockWidth, formatting.align === "center" ? 0 : measurements.width);
+      }
+      if (this.#uBlockHeight) {
+        gl.uniform1f(this.#uBlockHeight, measurements.height);
+      }
+      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, measurements.printedCharCount);
+    }
+    gl.bindVertexArray(null);
+    return nodes.length;
+  }
+  endFrame() {}
+  #compileShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    assert(shader, "Failed to create WebGL shader");
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      const info = gl.getShaderInfoLog(shader);
+      const typeStr = type === gl.VERTEX_SHADER ? "vertex" : "fragment";
+      gl.deleteShader(shader);
+      throw new Error(`Failed to compile ${typeStr} shader: ${info}`);
+    }
+    return shader;
+  }
+  destroy() {
+    const gl = this.#backend.gl;
+    gl.deleteProgram(this.#program);
+    gl.deleteVertexArray(this.#vao);
+    this.#pipeline.destroy();
+  }
+}
+
+// src/backends/webgpu/wgsl/text.wgsl.ts
+var text_wgsl_default = `
+// Adapted from: https://webgpu.github.io/webgpu-samples/?sample=textRenderingMsdf
+
+// Quad vertex positions for a character
+const pos = array(
+  vec2f(0, -1),
+  vec2f(1, -1),
+  vec2f(0,  0),
+  vec2f(1,  0),
+);
+
+// Debug colors for visualization
+const debugColors = array(
+  vec4f(1, 0, 0, 1),
+  vec4f(0, 1, 0, 1),
+  vec4f(0, 0, 1, 1),
+  vec4f(1, 1, 1, 1),
+);
+
+// Vertex input from GPU
+struct VertexInput {
+  @builtin(vertex_index) vertex: u32,
+  @builtin(instance_index) instance: u32,
+};
+
+// Output from vertex shader to fragment shader
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f,
+  @location(1) debugColor: vec4f,
+  @location(2) @interpolate(flat) instanceIndex: u32,
+};
+
+// Metadata for a single character glyph
+struct Char {
+  texOffset: vec2f, // Offset to top-left in MSDF texture (pixels)
+  texExtent: vec2f, // Size in texture (pixels)
+  size: vec2f,      // Glyph size in ems
+  offset: vec2f,    // Position offset in ems
+};
+
+// Metadata for a text block
+struct TextBlockDescriptor {
+  transform: mat3x3f,   // Text transform matrix (model matrix)
+  color: vec4f,         // Text color
+  fontSize: f32,        // Font size
+  blockWidth: f32,      // Total width of text block
+  blockHeight: f32,     // Total height of text block
+  bufferPosition: f32   // Index and length in textBuffer
+};
+
+// Font bindings
+@group(0) @binding(0) var fontTexture: texture_2d<f32>;
+@group(0) @binding(1) var fontSampler: sampler;
+@group(0) @binding(2) var<storage> chars: array<Char>;
+@group(0) @binding(3) var<uniform> fontData: vec4f; // Contains line height (x)
+
+// Text bindings
+@group(1) @binding(0) var<storage> texts: array<TextBlockDescriptor>;
+@group(1) @binding(1) var<storage> textBuffer: array<vec4f>; // Each vec4: xy = glyph pos, z = char index
+
+// Global uniforms
+@group(2) @binding(0) var<uniform> viewProjectionMatrix: mat3x3f;
+
+// Vertex shader
+@vertex
+fn vertexMain(input: VertexInput) -> VertexOutput {
+  // Because the instance index is used for character indexing, we are
+  // overloading the vertex index to store the instance of the text metadata.
+  //
+  // I.e...
+  // Vertex 0-4 = Instance 0, Vertex 0-4
+  // Vertex 4-8 = Instance 1, Vertex 0-4
+  // Vertex 8-12 = Instance 2, Vertex 0-4
+  let vertexIndex = input.vertex % 4;
+  let textIndex = input.vertex / 4;
+
+  let text = texts[textIndex];
+  let textElement = textBuffer[u32(text.bufferPosition) + input.instance];
+  let char = chars[u32(textElement.z)];
+
+  let lineHeight = fontData.x;
+  let textWidth = text.blockWidth;
+  let textHeight = text.blockHeight;
+
+  // Center text vertically; origin is mid-height
+  let offset = vec2f(0, -textHeight / 2);
+
+  // Glyph position in ems (quad pos * size + per-char offset)
+  let emPos = pos[vertexIndex] * char.size + char.offset + textElement.xy - offset;
+  let charPos = emPos * (text.fontSize / lineHeight);
+
+  var output: VertexOutput;
+  let transformedPosition = viewProjectionMatrix * text.transform * vec3f(charPos, 1);
+
+  output.position = vec4f(transformedPosition, 1);
+  output.texcoord = pos[vertexIndex] * vec2f(1, -1);
+  output.texcoord *= char.texExtent;
+  output.texcoord += char.texOffset;
+  output.debugColor = debugColors[vertexIndex];
+  output.instanceIndex = textIndex;
+  return output;
+
+  // To debug - hardcode quad in bottom right quarter of the screen:
+  // output.position = vec4f(pos[input.vertex], 0, 1);
+}
+
+// Signed distance function sampling for MSDF font rendering
+fn sampleMsdf(texcoord: vec2f) -> f32 {
+  let c = textureSample(fontTexture, fontSampler, texcoord);
+  return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
+}
+
+// Fragment shader
+// Anti-aliasing technique by Paul Houx
+// more details here:
+// https://github.com/Chlumsky/msdfgen/issues/22#issuecomment-234958005
+@fragment
+fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
+  let text = texts[input.instanceIndex];
+
+  // pxRange (AKA distanceRange) comes from the msdfgen tool.
+  let pxRange = 4.0;
+  let texSize = vec2f(textureDimensions(fontTexture, 0));
+
+  let dx = texSize.x * length(vec2f(dpdxFine(input.texcoord.x), dpdyFine(input.texcoord.x)));
+  let dy = texSize.y * length(vec2f(dpdxFine(input.texcoord.y), dpdyFine(input.texcoord.y)));
+
+  let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
+  let sigDist = sampleMsdf(input.texcoord) - 0.5;
+  let pxDist = sigDist * toPixels;
+
+  let edgeWidth = 0.5;
+  let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
+
+  if (alpha < 0.001) {
+    discard;
+  }
+
+  let msdfColor = vec4f(text.color.rgb, text.color.a * alpha);
+  return msdfColor;
+
+  // Debug options:
+  // return text.color;
+  // return input.debugColor;
+  // return vec4f(1, 0, 1, 1); // hardcoded magenta
+  // return textureSample(fontTexture, fontSampler, input.texcoord);
+}
+`;
+
+// src/backends/webgpu/FontPipeline.ts
+class FontPipeline {
+  pipeline;
+  font;
+  fontBindGroup;
+  maxCharCount;
+  constructor(pipeline, font, fontBindGroup, maxCharCount) {
+    this.pipeline = pipeline;
+    this.font = font;
+    this.fontBindGroup = fontBindGroup;
+    this.maxCharCount = maxCharCount;
+  }
+  static async create(device, font, colorFormat, maxCharCount) {
+    const pipeline = await pipelinePromise(device, colorFormat, font.name);
+    const texture = device.createTexture({
+      label: `MSDF font ${font.name}`,
+      size: [font.imageBitmap.width, font.imageBitmap.height, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    device.queue.copyExternalImageToTexture({ source: font.imageBitmap }, { texture }, [font.imageBitmap.width, font.imageBitmap.height]);
+    const charsGpuBuffer = device.createBuffer({
+      label: `MSDF font ${font.name} character layout buffer`,
+      size: font.charCount * Float32Array.BYTES_PER_ELEMENT * 8,
+      usage: GPUBufferUsage.STORAGE,
+      mappedAtCreation: true
+    });
+    const charsArray = new Float32Array(charsGpuBuffer.getMappedRange());
+    charsArray.set(font.charBuffer, 0);
+    charsGpuBuffer.unmap();
+    const fontDataBuffer = device.createBuffer({
+      label: `MSDF font ${font.name} metadata buffer`,
+      size: Float32Array.BYTES_PER_ELEMENT * 4,
+      usage: GPUBufferUsage.UNIFORM,
+      mappedAtCreation: true
+    });
+    const fontDataArray = new Float32Array(fontDataBuffer.getMappedRange());
+    fontDataArray[0] = font.lineHeight;
+    fontDataBuffer.unmap();
+    const fontBindGroup = device.createBindGroup({
+      layout: pipeline.getBindGroupLayout(0),
+      entries: [
+        {
+          binding: 0,
+          resource: texture.createView()
+        },
+        {
+          binding: 1,
+          resource: device.createSampler(sampler)
+        },
+        {
+          binding: 2,
+          resource: {
+            buffer: charsGpuBuffer
+          }
+        },
+        {
+          binding: 3,
+          resource: {
+            buffer: fontDataBuffer
+          }
+        }
+      ]
+    });
+    return new FontPipeline(pipeline, font, fontBindGroup, maxCharCount);
+  }
+}
+function pipelinePromise(device, colorFormat, label) {
+  const shader = device.createShaderModule({
+    label: `${label} shader`,
+    code: text_wgsl_default
+  });
+  return device.createRenderPipelineAsync({
+    label: `${label} pipeline`,
+    layout: device.createPipelineLayout({
+      bindGroupLayouts: [
+        device.createBindGroupLayout(fontBindGroupLayout),
+        device.createBindGroupLayout(textUniformBindGroupLayout),
+        device.createBindGroupLayout(engineUniformBindGroupLayout)
+      ]
+    }),
+    vertex: {
+      module: shader,
+      entryPoint: "vertexMain"
+    },
+    fragment: {
+      module: shader,
+      entryPoint: "fragmentMain",
+      targets: [
+        {
+          format: colorFormat,
+          blend: {
+            color: {
+              srcFactor: "src-alpha",
+              dstFactor: "one-minus-src-alpha"
+            },
+            alpha: {
+              srcFactor: "one",
+              dstFactor: "one"
+            }
+          }
+        }
+      ]
+    },
+    primitive: {
+      topology: "triangle-strip",
+      stripIndexFormat: "uint32"
+    }
+  });
+}
+if (typeof GPUShaderStage === "undefined") {
+  globalThis.GPUShaderStage = {
+    VERTEX: 1,
+    FRAGMENT: 2,
+    COMPUTE: 4
+  };
+}
+var fontBindGroupLayout = {
+  label: "MSDF font group layout",
+  entries: [
+    {
+      binding: 0,
+      visibility: GPUShaderStage.FRAGMENT,
+      texture: {}
+    },
+    {
+      binding: 1,
+      visibility: GPUShaderStage.FRAGMENT,
+      sampler: {}
+    },
+    {
+      binding: 2,
+      visibility: GPUShaderStage.VERTEX,
+      buffer: { type: "read-only-storage" }
+    },
+    {
+      binding: 3,
+      visibility: GPUShaderStage.VERTEX,
+      buffer: {}
+    }
+  ]
+};
+var engineUniformBindGroupLayout = {
+  label: "Uniform bind group",
+  entries: [
+    {
+      binding: 0,
+      visibility: GPUShaderStage.VERTEX,
+      buffer: {}
+    }
+  ]
+};
+var sampler = {
+  label: "MSDF text sampler",
+  minFilter: "linear",
+  magFilter: "linear",
+  mipmapFilter: "linear",
+  maxAnisotropy: 16
+};
+var textUniformBindGroupLayout = {
+  label: "MSDF text block uniform",
+  entries: [
+    {
+      binding: 0,
+      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+      buffer: { type: "read-only-storage" }
+    },
+    {
+      binding: 1,
+      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+      buffer: { type: "read-only-storage" }
+    }
+  ]
+};
 // src/backends/webgpu/WebGPUTextShader.ts
 var deets = new _t2(text_wgsl_default);
 var struct = deets.structs.find((s3) => s3.name === "TextBlockDescriptor");
@@ -19723,7 +20075,9 @@ class AssetManager {
       const textShader = new WebGPUTextShader(webgpuBackend, fontPipeline, font, presentationFormat, limits.instanceCount);
       this.#fonts.set(id, textShader);
     } else {
-      const textShader = new WebGLTextShader(font, limits.maxTextLength);
+      const webglBackend = this.#backend;
+      const fontPipeline = WebGLFontPipeline.create(webglBackend.gl, font, limits.maxTextLength);
+      const textShader = new WebGLTextShader(webglBackend, fontPipeline);
       this.#fonts.set(id, textShader);
     }
     return id;
@@ -20444,5 +20798,5 @@ export {
   AssetManager
 };
 
-//# debugId=7918C9E3F46FD35864756E2164756E21
+//# debugId=4A88BA8B6CA05C3D64756E2164756E21
 //# sourceMappingURL=mod.js.map