@bloopjs/toodle 0.1.6 → 0.1.7

package/dist/mod.js

@@ -1,14 +1,3 @@
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: (newValue) => all[name] = () => newValue
-    });
-};
-
 // src/limits.ts
 var DEFAULT_LIMITS = {
   instanceCount: 1024 * 2,
@@ -3445,18 +3434,6 @@ var {
   vec4: vec4n
 } = wgpuMatrixAPI(ZeroArray, Array, Array, Array, Array, Array);
 
-// src/backends/mod.ts
-var exports_mod = {};
-__export(exports_mod, {
-  isWebGPUAvailable: () => isWebGPUAvailable,
-  isWebGL2Available: () => isWebGL2Available,
-  detectBackend: () => detectBackend,
-  defaultGLSLFragmentShader: () => defaultFragmentShader,
-  WebGPUBackend: () => WebGPUBackend,
-  WebGLBackend: () => WebGLBackend,
-  PostProcessDefaults: () => PostProcessDefaults
-});
-
 // src/backends/detection.ts
 async function detectBackend() {
   if (typeof navigator !== "undefined" && "gpu" in navigator) {
@@ -3469,21 +3446,13 @@ async function detectBackend() {
   }
   return "webgl2";
 }
-function isWebGPUAvailable() {
-  return typeof navigator !== "undefined" && "gpu" in navigator;
-}
-function isWebGL2Available() {
-  if (typeof document === "undefined") {
-    return false;
-  }
-  try {
-    const canvas = document.createElement("canvas");
-    const gl = canvas.getContext("webgl2");
-    return gl !== null;
-  } catch {
-    return false;
+// src/utils/assert.ts
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
   }
 }
+
 // src/backends/webgl2/glsl/quad.glsl.ts
 var vertexShader = `#version 300 es
 precision highp float;
@@ -3588,13 +3557,6 @@ void main() {
   }
 }
 `;
-var defaultFragmentShader = fragmentShader;
-// src/utils/assert.ts
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
 
 // src/backends/webgl2/WebGLQuadShader.ts
 var INSTANCE_FLOATS = 28;
@@ -3754,7 +3716,7 @@ class WebGLQuadShader {
 }
 
 // src/backends/webgl2/WebGLBackend.ts
-class WebGLBackend {
+class WebGLBackend2 {
   type = "webgl2";
   limits;
   atlasSize;
@@ -3784,7 +3746,7 @@ class WebGLBackend {
       ...DEFAULT_LIMITS,
       ...options.limits
     };
-    const backend = new WebGLBackend(gl, canvas, limits);
+    const backend = new WebGLBackend2(gl, canvas, limits);
     backend.createTextureAtlas("default", {
       format: options.format ?? "rgba8unorm",
       layers: limits.textureArrayLayers,
@@ -3873,58 +3835,6 @@ class WebGLBackend {
     return this.getTextureAtlas("default")?.format ?? "rgba8unorm";
   }
 }
-// src/backends/webgpu/postprocess/mod.ts
-var PostProcessDefaults = {
-  sampler(device) {
-    return device.createSampler({
-      label: "toodle post process sampler",
-      magFilter: "linear",
-      minFilter: "linear",
-      mipmapFilter: "linear",
-      addressModeU: "clamp-to-edge",
-      addressModeV: "clamp-to-edge"
-    });
-  },
-  vertexBufferLayout(_device) {
-    return {
-      arrayStride: 4 * 4,
-      attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }]
-    };
-  },
-  vertexShader(device) {
-    return device.createShaderModule({
-      label: "toodle post process vertex shader",
-      code: `
-  struct VertexOut {
-    @builtin(position) position: vec4<f32>,
-    @location(0) uv: vec2<f32>,
-  };
-
-  const enginePosLookup = array(vec2f(-1, 1), vec2f(-1, -1), vec2f(1, 1), vec2f(1, -1));
-  const engineUvLookup = array(vec2f(0, 0), vec2f(0, 1), vec2f(1, 0), vec2f(1, 1));
-
-  @vertex
-  fn vs_main(@builtin(vertex_index) vertexIndex: u32) -> VertexOut {
-    var out: VertexOut;
-    out.position = vec4(enginePosLookup[vertexIndex], 0.0, 1.0);
-    out.uv = engineUvLookup[vertexIndex];
-    return out;
-  }
-      `
-    });
-  },
-  pipelineDescriptor(device) {
-    return {
-      label: "toodle post process pipeline descriptor",
-      layout: "auto",
-      primitive: { topology: "triangle-strip" },
-      vertex: {
-        buffers: [PostProcessDefaults.vertexBufferLayout(device)],
-        module: PostProcessDefaults.vertexShader(device)
-      }
-    };
-  }
-};
 // node_modules/webgpu-utils/dist/1.x/webgpu-utils.module.js
 var roundUpToMultipleOf = (v, multiple) => ((v + multiple - 1) / multiple | 0) * multiple;
 function keysOf(obj) {
@@ -17031,7 +16941,7 @@ function convertBlendMode(mode) {
 }
 
 // src/backends/webgpu/WebGPUBackend.ts
-class WebGPUBackend {
+class WebGPUBackend2 {
   type = "webgpu";
   limits;
   atlasSize;
@@ -17076,7 +16986,7 @@ class WebGPUBackend {
       ...DEFAULT_LIMITS,
       ...options.limits
     };
-    const backend = new WebGPUBackend(device, context, presentationFormat, limits, canvas);
+    const backend = new WebGPUBackend2(device, context, presentationFormat, limits, canvas);
     backend.createTextureAtlas("default", {
       format: options.format ?? "rgba8unorm",
       layers: limits.textureArrayLayers,
@@ -17221,414 +17131,150 @@ class WebGPUBackend {
     return this.#renderPass;
   }
 }
-// src/backends/webgl2/WebGLFontPipeline.ts
-class WebGLFontPipeline {
-  font;
-  fontTexture;
-  charDataTexture;
-  textBufferTexture;
-  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);
-  }
-  destroy() {
-    const gl = this.#gl;
-    gl.deleteTexture(this.fontTexture);
-    gl.deleteTexture(this.charDataTexture);
-    gl.deleteTexture(this.textBufferTexture);
-  }
+// src/math/matrix.ts
+function createProjectionMatrix(resolution, dst) {
+  const { width, height } = resolution;
+  return mat3.scaling([2 / width, 2 / height], dst);
 }
-
-// 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);
+function createViewMatrix(camera, target) {
+  const matrix = mat3.identity(target);
+  mat3.scale(matrix, [camera.zoom, camera.zoom], matrix);
+  mat3.rotate(matrix, camera.rotationRadians, matrix);
+  mat3.translate(matrix, [-camera.x, -camera.y], matrix);
+  return matrix;
+}
+function createModelMatrix(transform, base) {
+  mat3.translate(base, [transform.position.x, transform.position.y], base);
+  mat3.rotate(base, transform.rotation, base);
+  mat3.scale(base, [transform.scale.x, transform.scale.y], base);
+  return base;
+}
+function convertScreenToWorld(screenCoordinates, camera, projectionMatrix, resolution) {
+  const inverseViewProjectionMatrix = mat3.mul(mat3.inverse(camera.matrix), mat3.inverse(projectionMatrix));
+  const normalizedDeviceCoordinates = {
+    x: 2 * screenCoordinates.x / resolution.width - 1,
+    y: 1 - 2 * screenCoordinates.y / resolution.height
+  };
+  return transformPoint(normalizedDeviceCoordinates, inverseViewProjectionMatrix);
+}
+function convertWorldToScreen(worldCoordinates, camera, projectionMatrix, resolution) {
+  const viewProjectionMatrix = mat3.mul(projectionMatrix, camera.matrix);
+  const ndcPoint = transformPoint(worldCoordinates, viewProjectionMatrix);
+  return {
+    x: (ndcPoint.x + 1) * resolution.width / 2,
+    y: (1 - ndcPoint.y) * resolution.height / 2
+  };
+}
+function transformPoint(point, matrix) {
+  const result = vec2.transformMat3([point.x, point.y], matrix);
+  return {
+    x: result[0],
+    y: result[1]
+  };
 }
 
-// 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);
-      }
+// src/scene/Batcher.ts
+class Batcher {
+  nodes = [];
+  layers = [];
+  pipelines = [];
+  enqueue(node) {
+    if (node.renderComponent && node.isActive) {
+      this.nodes.push(node);
+      const z3 = node.layer;
+      const layer = this.#findOrCreateLayer(z3);
+      const pipeline = this.#findOrCreatePipeline(layer, node.renderComponent.shader);
+      pipeline.nodes.push(node);
     }
-    this.#chars = new Map;
-    const charCount = Object.values(json.chars).length;
-    this.charBuffer = new Float32Array(charCount * 8);
-    let offset = 0;
-    const u3 = 1 / json.common.scaleW;
-    const v3 = 1 / json.common.scaleH;
-    for (const [i3, char] of json.chars.entries()) {
-      this.#chars.set(char.id, char);
-      this.#chars.get(char.id).charIndex = i3;
-      this.charBuffer[offset] = char.x * u3;
-      this.charBuffer[offset + 1] = char.y * v3;
-      this.charBuffer[offset + 2] = char.width * u3;
-      this.charBuffer[offset + 3] = char.height * v3;
-      this.charBuffer[offset + 4] = char.width;
-      this.charBuffer[offset + 5] = char.height;
-      this.charBuffer[offset + 6] = char.xoffset;
-      this.charBuffer[offset + 7] = -char.yoffset;
-      offset += 8;
+    for (const kid of node.kids) {
+      this.enqueue(kid);
     }
   }
-  getChar(charCode) {
-    const char = this.#chars.get(charCode);
-    if (!char) {
-      const fallbackCharacter = this.#chars.get(this.#fallbackCharCode ?? this.#chars.keys().toArray()[0]);
-      warnOnce(`unknown_char_${this.name}`, `Couldn't find character ${charCode} in characters for font ${this.name} -- defaulting to first available character "${fallbackCharacter.char}"`);
-      return fallbackCharacter;
+  flush() {
+    this.nodes = [];
+    this.layers = [];
+    this.pipelines = [];
+  }
+  #findOrCreateLayer(z3) {
+    let layer = this.layers.find((l3) => l3.z === z3);
+    if (!layer) {
+      layer = { z: z3, pipelines: [] };
+      this.layers.push(layer);
+      this.layers.sort((a3, b3) => a3.z - b3.z);
     }
-    return char;
+    return layer;
   }
-  getXAdvance(charCode, nextCharCode = -1) {
-    const char = this.getChar(charCode);
-    if (nextCharCode >= 0) {
-      const kerning = this.#kernings.get(charCode);
-      if (kerning) {
-        return char.xadvance + (kerning.get(nextCharCode) ?? 0);
-      }
-    }
-    return char.xadvance;
-  }
-  static async create(id, fontJsonUrl) {
-    const response = await fetch(fontJsonUrl);
-    const json = await response.json();
-    const i3 = fontJsonUrl.href.lastIndexOf("/");
-    const baseUrl = i3 !== -1 ? fontJsonUrl.href.substring(0, i3 + 1) : undefined;
-    if (json.pages.length < 1) {
-      throw new Error(`Can't create an msdf font without a reference to the page url in the json`);
-    }
-    if (json.pages.length > 1) {
-      throw new Error(`Can't create an msdf font with more than one page`);
-    }
-    const textureUrl = baseUrl + json.pages[0];
-    const textureResponse = await fetch(textureUrl);
-    const bitmap = await createImageBitmap(await textureResponse.blob());
-    return new MsdfFont(id, json, bitmap);
-  }
-  set fallbackCharacter(character) {
-    const charCode = character.charCodeAt(0);
-    if (this.#chars.has(charCode)) {
-      this.#fallbackCharCode = charCode;
-    } else {
-      const fallbackCode = this.#chars.keys().toArray()[0];
-      console.warn(`${character} character does not exist in font ${this.name} defaulting to "${this.#chars.get(fallbackCode)?.char}".`);
-      this.#fallbackCharCode = fallbackCode;
+  #findOrCreatePipeline(layer, shader) {
+    let pipeline = layer.pipelines.find((p3) => p3.shader === shader);
+    if (!pipeline) {
+      pipeline = { shader, nodes: [] };
+      layer.pipelines.push(pipeline);
+      this.pipelines.push(pipeline);
     }
+    return pipeline;
   }
 }
 
-// src/text/shaping.ts
-var TAB_SPACES = 4;
-function shapeText(font, text, blockSize, fontSize, formatting, textArray, initialFloatOffset = 0, debug = false) {
-  let offset = initialFloatOffset;
-  const measurements = measureText(font, text, formatting.wordWrap);
-  const alignment = formatting.align || "left";
-  const em2px = fontSize / font.lineHeight;
-  const hackHasExplicitBlock = blockSize.width !== measurements.width;
-  let debugData = null;
-  if (debug) {
-    debugData = [];
+// src/math/angle.ts
+function deg2rad(degrees) {
+  return degrees * (Math.PI / 180);
+}
+function rad2deg(radians) {
+  return radians * (180 / Math.PI);
+}
+
+// src/scene/Camera.ts
+class Camera {
+  #position = { x: 0, y: 0 };
+  #zoom = 1;
+  #rotation = 0;
+  #isDirty = true;
+  #matrix = mat3.create();
+  get zoom() {
+    return this.#zoom;
   }
-  for (const word of measurements.words) {
-    for (const glyph of word.glyphs) {
-      let lineOffset = 0;
-      if (alignment === "center") {
-        lineOffset = measurements.width * -0.5 - (measurements.width - measurements.lineWidths[glyph.line]) * -0.5;
-      } else if (alignment === "right") {
-        const blockSizeEm = blockSize.width / em2px;
-        const delta = measurements.width - measurements.lineWidths[glyph.line];
-        lineOffset = (hackHasExplicitBlock ? blockSizeEm / 2 : measurements.width / 2) - measurements.width + delta;
-      } else if (alignment === "left") {
-        const blockSizeEm = blockSize.width / em2px;
-        lineOffset = hackHasExplicitBlock ? -blockSizeEm / 2 : -measurements.width / 2;
-      }
-      if (debug && debugData) {
-        debugData.push({
-          line: glyph.line,
-          word: word.glyphs.map((g3) => g3.char.char).join(""),
-          glyph: glyph.char.char,
-          startX: word.startX,
-          glyphX: glyph.offset[0],
-          advance: glyph.char.xadvance,
-          lineOffset,
-          startY: word.startY,
-          glyphY: glyph.offset[1]
-        });
-      }
-      textArray[offset] = word.startX + glyph.offset[0] + lineOffset;
-      textArray[offset + 1] = word.startY + glyph.offset[1];
-      textArray[offset + 2] = glyph.char.charIndex;
-      offset += 4;
-    }
+  set zoom(value) {
+    this.#zoom = value;
+    this.setDirty();
   }
-  if (debug && debugData) {
-    console.table(debugData);
+  get rotation() {
+    return rad2deg(this.#rotation);
   }
-}
-function measureText(font, text, wordWrap) {
-  let maxWidth = 0;
-  const lineWidths = [];
-  let textOffsetX = 0;
-  let textOffsetY = 0;
-  let line = 0;
-  let printedCharCount = 0;
-  let nextCharCode = text.charCodeAt(0);
-  let word = { glyphs: [], width: 0, startX: 0, startY: 0 };
-  const words = [];
-  for (let i3 = 0;i3 < text.length; i3++) {
-    const isLastLetter = i3 === text.length - 1;
-    const charCode = nextCharCode;
-    nextCharCode = i3 < text.length - 1 ? text.charCodeAt(i3 + 1) : -1;
-    switch (charCode) {
-      case 9 /* HorizontalTab */:
-        insertSpaces(TAB_SPACES);
-        break;
-      case 10 /* Newline */:
-        flushLine();
-        flushWord();
-        break;
-      case 13 /* CarriageReturn */:
-        break;
-      case 32 /* Space */:
-        insertSpaces(1);
-        break;
-      default: {
-        const advance = font.getXAdvance(charCode, nextCharCode);
-        if (wordWrap && wordWrap.breakOn === "character" && textOffsetX + advance > wordWrap.emWidth) {
-          if (word.startX === 0) {
-            flushWord();
-          } else {
-            lineWidths.push(textOffsetX - word.width);
-            line++;
-            maxWidth = Math.max(maxWidth, textOffsetX);
-            textOffsetX = word.width;
-            textOffsetY -= font.lineHeight;
-            word.startX = 0;
-            word.startY = textOffsetY;
-            word.glyphs.forEach((g3) => {
-              g3.line = line;
-            });
-          }
-        }
-        word.glyphs.push({
-          char: font.getChar(charCode),
-          offset: [word.width, 0],
-          line
-        });
-        if (isLastLetter) {
-          flushWord();
-        }
-        word.width += advance;
-        textOffsetX += advance;
-      }
-    }
+  set rotation(value) {
+    this.#rotation = deg2rad(value);
+    this.setDirty();
   }
-  lineWidths.push(textOffsetX);
-  maxWidth = Math.max(maxWidth, textOffsetX);
-  const lineCount = lineWidths.length;
-  return {
-    width: maxWidth,
-    height: lineCount * font.lineHeight,
-    lineWidths,
-    lineCount,
-    printedCharCount,
-    words
-  };
-  function flushWord() {
-    printedCharCount += word.glyphs.length;
-    words.push(word);
-    word = {
-      glyphs: [],
-      width: 0,
-      startX: textOffsetX,
-      startY: textOffsetY
-    };
+  get rotationRadians() {
+    return this.#rotation;
   }
-  function flushLine() {
-    lineWidths.push(textOffsetX);
-    line++;
-    maxWidth = Math.max(maxWidth, textOffsetX);
-    textOffsetX = 0;
-    textOffsetY -= font.lineHeight;
+  set rotationRadians(value) {
+    this.#rotation = value;
+    this.setDirty();
   }
-  function insertSpaces(spaces) {
-    if (spaces < 1)
-      spaces = 1;
-    textOffsetX += font.getXAdvance(32 /* Space */) * spaces;
-    if (wordWrap?.breakOn === "word" && textOffsetX >= wordWrap.emWidth) {
-      flushLine();
-    }
-    flushWord();
+  get x() {
+    return this.#position.x;
   }
-}
-function findLargestFontSize(font, text, size, formatting) {
-  if (!formatting.fontSize) {
-    throw new Error("fontSize is required for shrinkToFit");
+  get y() {
+    return this.#position.y;
   }
-  if (!formatting.shrinkToFit) {
-    throw new Error("shrinkToFit is required for findLargestFontSize");
+  set x(value) {
+    this.#position.x = value;
+    this.setDirty();
   }
-  const minSize = formatting.shrinkToFit.minFontSize;
-  const maxSize = formatting.shrinkToFit.maxFontSize ?? formatting.fontSize;
-  const maxLines = formatting.shrinkToFit.maxLines ?? Number.POSITIVE_INFINITY;
-  const threshold = 0.5;
-  let low = minSize;
-  let high = maxSize;
-  while (high - low > threshold) {
-    const testSize = (low + high) / 2;
-    const testMeasure = measureText(font, text, formatting.wordWrap);
-    const padding = formatting.shrinkToFit.padding ?? 0;
-    const scaledWidth = testMeasure.width * (testSize / font.lineHeight);
-    const scaledHeight = testMeasure.height * (testSize / font.lineHeight);
-    const fitsWidth = scaledWidth <= size.width - size.width * padding;
-    const fitsHeight = scaledHeight <= size.height - size.height * padding;
-    const fitsLines = testMeasure.lineCount <= maxLines;
-    if (fitsWidth && fitsHeight && fitsLines) {
-      low = testSize;
-    } else {
-      high = testSize;
+  set y(value) {
+    this.#position.y = value;
+    this.setDirty();
+  }
+  get matrix() {
+    if (this.#isDirty) {
+      this.#isDirty = false;
+      this.#matrix = createViewMatrix(this, this.#matrix);
     }
+    return this.#matrix;
+  }
+  setDirty() {
+    this.#isDirty = true;
   }
-  return low;
-}
-
-// src/math/angle.ts
-function deg2rad(degrees) {
-  return degrees * (Math.PI / 180);
-}
-function rad2deg(radians) {
-  return radians * (180 / Math.PI);
-}
-
-// src/math/matrix.ts
-function createProjectionMatrix(resolution, dst) {
-  const { width, height } = resolution;
-  return mat3.scaling([2 / width, 2 / height], dst);
-}
-function createViewMatrix(camera, target) {
-  const matrix = mat3.identity(target);
-  mat3.scale(matrix, [camera.zoom, camera.zoom], matrix);
-  mat3.rotate(matrix, camera.rotationRadians, matrix);
-  mat3.translate(matrix, [-camera.x, -camera.y], matrix);
-  return matrix;
-}
-function createModelMatrix(transform, base) {
-  mat3.translate(base, [transform.position.x, transform.position.y], base);
-  mat3.rotate(base, transform.rotation, base);
-  mat3.scale(base, [transform.scale.x, transform.scale.y], base);
-  return base;
-}
-function convertScreenToWorld(screenCoordinates, camera, projectionMatrix, resolution) {
-  const inverseViewProjectionMatrix = mat3.mul(mat3.inverse(camera.matrix), mat3.inverse(projectionMatrix));
-  const normalizedDeviceCoordinates = {
-    x: 2 * screenCoordinates.x / resolution.width - 1,
-    y: 1 - 2 * screenCoordinates.y / resolution.height
-  };
-  return transformPoint(normalizedDeviceCoordinates, inverseViewProjectionMatrix);
-}
-function convertWorldToScreen(worldCoordinates, camera, projectionMatrix, resolution) {
-  const viewProjectionMatrix = mat3.mul(projectionMatrix, camera.matrix);
-  const ndcPoint = transformPoint(worldCoordinates, viewProjectionMatrix);
-  return {
-    x: (ndcPoint.x + 1) * resolution.width / 2,
-    y: (1 - ndcPoint.y) * resolution.height / 2
-  };
-}
-function transformPoint(point, matrix) {
-  const result = vec2.transformMat3([point.x, point.y], matrix);
-  return {
-    x: result[0],
-    y: result[1]
-  };
 }
 
 // src/scene/SceneNode.ts
@@ -17972,1163 +17618,1304 @@ function reviver(key, value) {
   return value;
 }
 
-// src/scene/TextNode.ts
-var DEFAULT_FONT_SIZE = 14;
+// src/scene/QuadNode.ts
+var PRIMITIVE_TEXTURE = "__primitive__";
+var RESERVED_PRIMITIVE_INDEX_START = 1000;
+var CIRCLE_INDEX = 1001;
+var DEFAULT_REGION = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0
+};
 
-class TextNode extends SceneNode {
-  #text;
-  #formatting;
-  #font;
-  constructor(shader, text, opts = {}) {
-    const { width, height } = measureText(shader.font, text, opts.wordWrap);
-    if (text.length > shader.maxCharCount) {
-      throw new Error(`Text: ${text} exceeds ${shader.maxCharCount} characters. Try using fewer characters or increase the limit in Toodle.attach.`);
+class QuadNode extends SceneNode {
+  assetManager;
+  #color;
+  #atlasCoords;
+  #region;
+  #matrixPool;
+  #flip;
+  #cropOffset;
+  #cropRatio;
+  #atlasSize;
+  #textureId;
+  #writeInstance;
+  constructor(options, matrixPool) {
+    assert(options.shader, "QuadNode requires a shader to be explicitly provided");
+    assert(options.size, "QuadNode requires a size to be explicitly provided");
+    assert(options.atlasCoords, "QuadNode requires atlas coords to be explicitly provided");
+    options.render ??= {
+      shader: options.shader,
+      writeInstance: writeQuadInstance
+    };
+    super(options);
+    assert(options.assetManager, "QuadNode requires an asset manager");
+    this.assetManager = options.assetManager;
+    if (options.atlasCoords && options.atlasCoords.atlasIndex >= RESERVED_PRIMITIVE_INDEX_START) {
+      this.#textureId = PRIMITIVE_TEXTURE;
+      this.#region = DEFAULT_REGION;
+      this.#atlasSize = DEFAULT_REGION;
+    } else {
+      assert(options.textureId, "QuadNode requires texture id to be explicitly provided");
+      this.#textureId = options.textureId;
+      assert(options.region, "QuadNode requires a region to be explicitly provided");
+      this.#region = options.region;
+      assert(options.atlasSize, "QuadNode requires atlas size to be explicitly provided");
+      this.#atlasSize = options.atlasSize;
     }
-    const em2px = shader.font.lineHeight / (opts.fontSize ?? DEFAULT_FONT_SIZE);
-    if (!opts.shrinkToFit && !opts.size) {
-      opts.size = { width: width / em2px, height: height / em2px };
+    this.#atlasCoords = options.atlasCoords;
+    this.#color = options.color ?? { r: 1, g: 1, b: 1, a: 1 };
+    this.#matrixPool = matrixPool;
+    this.#flip = { x: options.flipX ? -1 : 1, y: options.flipY ? -1 : 1 };
+    this.#cropOffset = options.cropOffset ?? { x: 0, y: 0 };
+    this.#cropRatio = !this.#atlasCoords.uvScaleCropped ? { width: 1, height: 1 } : {
+      width: this.#atlasCoords.uvScaleCropped.width / this.#atlasCoords.uvScale.width,
+      height: this.#atlasCoords.uvScaleCropped.height / this.#atlasCoords.uvScale.height
+    };
+    this.#writeInstance = options.writeInstance;
+  }
+  get color() {
+    return this.#color;
+  }
+  set color(value) {
+    this.#color = value;
+  }
+  get size() {
+    const size = super.size;
+    if (!size) {
+      throw new Error("QuadNode requires a size");
     }
-    super({
-      ...opts,
-      render: {
-        shader,
-        writeInstance: (_node, _array, _offset) => {
-          throw new Error("not implemented - needs access to text uniform buffer, dimensions and a model matrix");
-        }
-      }
-    });
-    this.#font = shader.font;
-    this.#text = text;
-    this.#formatting = opts;
+    return size;
   }
-  get text() {
-    return this.#text;
+  set size(val) {
+    super.size = val;
   }
-  get formatting() {
-    return this.#formatting;
+  get matrixWithSize() {
+    const matrix = mat3.clone(this.matrix, this.#matrixPool.get());
+    mat3.scale(matrix, [this.size.width * this.#flip.x, this.size.height * this.#flip.y], matrix);
+    return matrix;
   }
-  get font() {
-    return this.#font;
+  get atlasCoords() {
+    return this.#atlasCoords;
   }
-  set text(text) {
-    if (!text) {
-      throw new Error("text cannot be empty");
-    }
-    this.#text = text;
-    this.setDirty();
+  get region() {
+    return this.#region;
   }
-  get tint() {
-    return this.#formatting.color || { r: 1, g: 1, b: 1, a: 1 };
+  get writeInstance() {
+    return this.#writeInstance;
   }
-  set tint(tint) {
-    this.#formatting.color = tint;
+  get flipX() {
+    return this.#flip.x === -1;
+  }
+  set flipX(value) {
+    this.#flip.x = value ? -1 : 1;
     this.setDirty();
   }
-  set formatting(formatting) {
-    this.#formatting = formatting;
+  get flipY() {
+    return this.#flip.y === -1;
+  }
+  set flipY(value) {
+    this.#flip.y = value ? -1 : 1;
     this.setDirty();
   }
+  get cropOffset() {
+    return this.#cropOffset;
+  }
+  set cropOffset(value) {
+    this.#cropOffset = value;
+  }
+  get textureId() {
+    return this.#textureId;
+  }
+  get isPrimitive() {
+    return this.#textureId === PRIMITIVE_TEXTURE;
+  }
+  get isCircle() {
+    return this.#atlasCoords.atlasIndex === CIRCLE_INDEX;
+  }
+  extra = {
+    setAtlasCoords: (value) => {
+      this.#atlasCoords = value;
+    },
+    cropRatio: () => {
+      return this.#cropRatio;
+    },
+    atlasSize: () => {
+      return this.#atlasSize;
+    }
+  };
+}
+function writeQuadInstance(node, array, offset) {
+  if (!(node instanceof QuadNode)) {
+    throw new Error("QuadNode.writeInstance can only be called on QuadNodes");
+  }
+  array.set(node.matrixWithSize, offset);
+  array.set([node.color.r, node.color.g, node.color.b, node.color.a], offset + 12);
+  const region = node.region;
+  if (node.textureId === PRIMITIVE_TEXTURE) {
+    array.set([
+      node.atlasCoords.uvOffset.x,
+      node.atlasCoords.uvOffset.y,
+      node.atlasCoords.uvScale.width,
+      node.atlasCoords.uvScale.height
+    ], offset + 16);
+  } else {
+    const atlasSize = node.extra.atlasSize();
+    array.set([
+      node.atlasCoords.uvOffset.x + region.x / atlasSize.width,
+      node.atlasCoords.uvOffset.y + region.y / atlasSize.height,
+      region.width / atlasSize.width,
+      region.height / atlasSize.height
+    ], offset + 16);
+  }
+  array.set([
+    node.cropOffset.x / 2 / (node.atlasCoords.originalSize.width || 1),
+    node.cropOffset.y / 2 / (node.atlasCoords.originalSize.height || 1),
+    node.extra.cropRatio().width,
+    node.extra.cropRatio().height
+  ], offset + 20);
+  new DataView(array.buffer).setUint32(array.byteOffset + (offset + 24) * Float32Array.BYTES_PER_ELEMENT, node.atlasCoords.atlasIndex, true);
+  node.writeInstance?.(array, offset + 28);
+  return 1;
 }
 
-// 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)
-);
+// src/scene/JumboQuadNode.ts
+var MAT3_SIZE = 12;
+var VEC4F_SIZE = 4;
 
-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;
+class JumboQuadNode extends QuadNode {
+  #tiles;
+  #matrixPool;
+  constructor(options, matrixPool) {
+    assert(options.shader, "JumboQuadNode requires a shader to be explicitly provided");
+    assert(options.tiles && options.tiles.length > 0, "JumboQuadNode requires at least one tile to be provided");
+    options.render ??= {
+      shader: options.shader,
+      writeInstance: writeJumboQuadInstance
+    };
+    super({
+      ...options,
+      atlasCoords: options.tiles[0].atlasCoords
+    }, matrixPool);
+    this.#matrixPool = matrixPool;
+    this.#tiles = [];
+    for (const tile of options.tiles) {
+      assert(tile.atlasCoords, "JumboQuadNode requires atlas coords to be provided");
+      assert(tile.size, "JumboQuadNode requires a size to be provided");
+      this.#tiles.push({
+        textureId: tile.textureId,
+        offset: tile.offset,
+        size: tile.size,
+        atlasCoords: tile.atlasCoords
+      });
+    }
+  }
+  get atlasCoords() {
+    throw new Error("JumboQuadNode does not have a single atlas coords");
+  }
+  get tiles() {
+    return this.#tiles;
+  }
+  getTileMatrix(tile) {
+    const matrix = mat3.clone(this.matrix, this.#matrixPool.get());
+    const originalSize = {
+      width: Math.max(...this.#tiles.map((t3) => t3.offset.x + t3.size.width)),
+      height: Math.max(...this.#tiles.map((t3) => t3.offset.y + t3.size.height))
+    };
+    const proportionalSize = {
+      width: this.size.width / originalSize.width,
+      height: this.size.height / originalSize.height
+    };
+    const centerOffset = {
+      x: tile.offset.x + tile.size.width / 2 - originalSize.width / 2,
+      y: -(tile.offset.y + tile.size.height / 2 - originalSize.height / 2)
+    };
+    mat3.translate(matrix, [
+      centerOffset.x * proportionalSize.width,
+      centerOffset.y * proportionalSize.height
+    ], matrix);
+    mat3.scale(matrix, [
+      tile.size.width * proportionalSize.width * (this.flipX ? -1 : 1),
+      tile.size.height * proportionalSize.height * (this.flipY ? -1 : 1)
+    ], matrix);
+    return matrix;
+  }
 }
-`;
-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));
+function writeJumboQuadInstance(node, array, offset) {
+  if (!(node instanceof JumboQuadNode)) {
+    throw new Error("JumboQuadNode.writeJumboQuadInstance can only be called on JumboQuadNodes");
+  }
+  let tileOffset = 0;
+  for (const tile of node.tiles) {
+    const coord = tile.atlasCoords;
+    const matrix = node.getTileMatrix(tile);
+    array.set(matrix, offset + tileOffset);
+    tileOffset += MAT3_SIZE;
+    array.set([node.color.r, node.color.g, node.color.b, node.color.a], offset + tileOffset);
+    tileOffset += VEC4F_SIZE;
+    array.set([
+      coord.uvOffset.x,
+      coord.uvOffset.y,
+      coord.uvScale.width,
+      coord.uvScale.height
+    ], offset + tileOffset);
+    tileOffset += VEC4F_SIZE;
+    const cropRatio = !coord.uvScaleCropped ? { width: 1, height: 1 } : {
+      width: coord.uvScaleCropped.width / coord.uvScale.width,
+      height: coord.uvScaleCropped.height / coord.uvScale.height
+    };
+    array.set([
+      tile.atlasCoords.cropOffset.x / 2 / (tile.atlasCoords.originalSize.width || 1),
+      tile.atlasCoords.cropOffset.y / 2 / (tile.atlasCoords.originalSize.height || 1),
+      cropRatio.width,
+      cropRatio.height
+    ], offset + tileOffset);
+    tileOffset += VEC4F_SIZE;
+    new DataView(array.buffer).setUint32(array.byteOffset + (offset + tileOffset) * Float32Array.BYTES_PER_ELEMENT, coord.atlasIndex, true);
+    tileOffset += VEC4F_SIZE;
+  }
+  node.writeInstance?.(array, offset + tileOffset);
+  return node.tiles.length;
 }
 
-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;
+// 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);
+}
 
-  fragColor = vec4(u_textColor.rgb, u_textColor.a * alpha);
+// 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);
+      }
+    }
+    this.#chars = new Map;
+    const charCount = Object.values(json.chars).length;
+    this.charBuffer = new Float32Array(charCount * 8);
+    let offset = 0;
+    const u3 = 1 / json.common.scaleW;
+    const v3 = 1 / json.common.scaleH;
+    for (const [i3, char] of json.chars.entries()) {
+      this.#chars.set(char.id, char);
+      this.#chars.get(char.id).charIndex = i3;
+      this.charBuffer[offset] = char.x * u3;
+      this.charBuffer[offset + 1] = char.y * v3;
+      this.charBuffer[offset + 2] = char.width * u3;
+      this.charBuffer[offset + 3] = char.height * v3;
+      this.charBuffer[offset + 4] = char.width;
+      this.charBuffer[offset + 5] = char.height;
+      this.charBuffer[offset + 6] = char.xoffset;
+      this.charBuffer[offset + 7] = -char.yoffset;
+      offset += 8;
+    }
+  }
+  getChar(charCode) {
+    const char = this.#chars.get(charCode);
+    if (!char) {
+      const fallbackCharacter = this.#chars.get(this.#fallbackCharCode ?? this.#chars.keys().toArray()[0]);
+      warnOnce(`unknown_char_${this.name}`, `Couldn't find character ${charCode} in characters for font ${this.name} -- defaulting to first available character "${fallbackCharacter.char}"`);
+      return fallbackCharacter;
+    }
+    return char;
+  }
+  getXAdvance(charCode, nextCharCode = -1) {
+    const char = this.getChar(charCode);
+    if (nextCharCode >= 0) {
+      const kerning = this.#kernings.get(charCode);
+      if (kerning) {
+        return char.xadvance + (kerning.get(nextCharCode) ?? 0);
+      }
+    }
+    return char.xadvance;
+  }
+  static async create(id, fontJsonUrl) {
+    const response = await fetch(fontJsonUrl);
+    const json = await response.json();
+    const i3 = fontJsonUrl.href.lastIndexOf("/");
+    const baseUrl = i3 !== -1 ? fontJsonUrl.href.substring(0, i3 + 1) : undefined;
+    if (json.pages.length < 1) {
+      throw new Error(`Can't create an msdf font without a reference to the page url in the json`);
+    }
+    if (json.pages.length > 1) {
+      throw new Error(`Can't create an msdf font with more than one page`);
+    }
+    const textureUrl = baseUrl + json.pages[0];
+    const textureResponse = await fetch(textureUrl);
+    const bitmap = await createImageBitmap(await textureResponse.blob());
+    return new MsdfFont(id, json, bitmap);
+  }
+  set fallbackCharacter(character) {
+    const charCode = character.charCodeAt(0);
+    if (this.#chars.has(charCode)) {
+      this.#fallbackCharCode = charCode;
+    } else {
+      const fallbackCode = this.#chars.keys().toArray()[0];
+      console.warn(`${character} character does not exist in font ${this.name} defaulting to "${this.#chars.get(fallbackCode)?.char}".`);
+      this.#fallbackCharCode = fallbackCode;
+    }
+  }
 }
-`;
 
-// src/backends/webgl2/WebGLTextShader.ts
-class WebGLTextShader {
-  label = "text";
-  code = fragmentShader2;
-  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}`);
+// src/text/shaping.ts
+var TAB_SPACES = 4;
+function shapeText(font, text, blockSize, fontSize, formatting, textArray, initialFloatOffset = 0, debug = false) {
+  let offset = initialFloatOffset;
+  const measurements = measureText(font, text, formatting.wordWrap);
+  const alignment = formatting.align || "left";
+  const em2px = fontSize / font.lineHeight;
+  const hackHasExplicitBlock = blockSize.width !== measurements.width;
+  let debugData = null;
+  if (debug) {
+    debugData = [];
+  }
+  for (const word of measurements.words) {
+    for (const glyph of word.glyphs) {
+      let lineOffset = 0;
+      if (alignment === "center") {
+        lineOffset = measurements.width * -0.5 - (measurements.width - measurements.lineWidths[glyph.line]) * -0.5;
+      } else if (alignment === "right") {
+        const blockSizeEm = blockSize.width / em2px;
+        const delta = measurements.width - measurements.lineWidths[glyph.line];
+        lineOffset = (hackHasExplicitBlock ? blockSizeEm / 2 : measurements.width / 2) - measurements.width + delta;
+      } else if (alignment === "left") {
+        const blockSizeEm = blockSize.width / em2px;
+        lineOffset = hackHasExplicitBlock ? -blockSizeEm / 2 : -measurements.width / 2;
+      }
+      if (debug && debugData) {
+        debugData.push({
+          line: glyph.line,
+          word: word.glyphs.map((g3) => g3.char.char).join(""),
+          glyph: glyph.char.char,
+          startX: word.startX,
+          glyphX: glyph.offset[0],
+          advance: glyph.char.xadvance,
+          lineOffset,
+          startY: word.startY,
+          glyphY: glyph.offset[1]
+        });
+      }
+      textArray[offset] = word.startX + glyph.offset[0] + lineOffset;
+      textArray[offset + 1] = word.startY + glyph.offset[1];
+      textArray[offset + 2] = glyph.char.charIndex;
+      offset += 4;
     }
-    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;
+  if (debug && debugData) {
+    console.table(debugData);
   }
-  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);
+}
+function measureText(font, text, wordWrap) {
+  let maxWidth = 0;
+  const lineWidths = [];
+  let textOffsetX = 0;
+  let textOffsetY = 0;
+  let line = 0;
+  let printedCharCount = 0;
+  let nextCharCode = text.charCodeAt(0);
+  let word = { glyphs: [], width: 0, startX: 0, startY: 0 };
+  const words = [];
+  for (let i3 = 0;i3 < text.length; i3++) {
+    const isLastLetter = i3 === text.length - 1;
+    const charCode = nextCharCode;
+    nextCharCode = i3 < text.length - 1 ? text.charCodeAt(i3 + 1) : -1;
+    switch (charCode) {
+      case 9 /* HorizontalTab */:
+        insertSpaces(TAB_SPACES);
+        break;
+      case 10 /* Newline */:
+        flushLine();
+        flushWord();
+        break;
+      case 13 /* CarriageReturn */:
+        break;
+      case 32 /* Space */:
+        insertSpaces(1);
+        break;
+      default: {
+        const advance = font.getXAdvance(charCode, nextCharCode);
+        if (wordWrap && wordWrap.breakOn === "character" && textOffsetX + advance > wordWrap.emWidth) {
+          if (word.startX === 0) {
+            flushWord();
+          } else {
+            lineWidths.push(textOffsetX - word.width);
+            line++;
+            maxWidth = Math.max(maxWidth, textOffsetX);
+            textOffsetX = word.width;
+            textOffsetY -= font.lineHeight;
+            word.startX = 0;
+            word.startY = textOffsetY;
+            word.glyphs.forEach((g3) => {
+              g3.line = line;
+            });
+          }
+        }
+        word.glyphs.push({
+          char: font.getChar(charCode),
+          offset: [word.width, 0],
+          line
+        });
+        if (isLastLetter) {
+          flushWord();
+        }
+        word.width += advance;
+        textOffsetX += advance;
+      }
     }
-    if (this.#uLineHeight) {
-      gl.uniform1f(this.#uLineHeight, this.#pipeline.lineHeight);
+  }
+  lineWidths.push(textOffsetX);
+  maxWidth = Math.max(maxWidth, textOffsetX);
+  const lineCount = lineWidths.length;
+  return {
+    width: maxWidth,
+    height: lineCount * font.lineHeight,
+    lineWidths,
+    lineCount,
+    printedCharCount,
+    words
+  };
+  function flushWord() {
+    printedCharCount += word.glyphs.length;
+    words.push(word);
+    word = {
+      glyphs: [],
+      width: 0,
+      startX: textOffsetX,
+      startY: textOffsetY
+    };
+  }
+  function flushLine() {
+    lineWidths.push(textOffsetX);
+    line++;
+    maxWidth = Math.max(maxWidth, textOffsetX);
+    textOffsetX = 0;
+    textOffsetY -= font.lineHeight;
+  }
+  function insertSpaces(spaces) {
+    if (spaces < 1)
+      spaces = 1;
+    textOffsetX += font.getXAdvance(32 /* Space */) * spaces;
+    if (wordWrap?.breakOn === "word" && textOffsetX >= wordWrap.emWidth) {
+      flushLine();
     }
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.fontTexture);
-    if (this.#uFontTexture) {
-      gl.uniform1i(this.#uFontTexture, 0);
+    flushWord();
+  }
+}
+function findLargestFontSize(font, text, size, formatting) {
+  if (!formatting.fontSize) {
+    throw new Error("fontSize is required for shrinkToFit");
+  }
+  if (!formatting.shrinkToFit) {
+    throw new Error("shrinkToFit is required for findLargestFontSize");
+  }
+  const minSize = formatting.shrinkToFit.minFontSize;
+  const maxSize = formatting.shrinkToFit.maxFontSize ?? formatting.fontSize;
+  const maxLines = formatting.shrinkToFit.maxLines ?? Number.POSITIVE_INFINITY;
+  const threshold = 0.5;
+  let low = minSize;
+  let high = maxSize;
+  while (high - low > threshold) {
+    const testSize = (low + high) / 2;
+    const testMeasure = measureText(font, text, formatting.wordWrap);
+    const padding = formatting.shrinkToFit.padding ?? 0;
+    const scaledWidth = testMeasure.width * (testSize / font.lineHeight);
+    const scaledHeight = testMeasure.height * (testSize / font.lineHeight);
+    const fitsWidth = scaledWidth <= size.width - size.width * padding;
+    const fitsHeight = scaledHeight <= size.height - size.height * padding;
+    const fitsLines = testMeasure.lineCount <= maxLines;
+    if (fitsWidth && fitsHeight && fitsLines) {
+      low = testSize;
+    } else {
+      high = testSize;
     }
-    gl.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.charDataTexture);
-    if (this.#uCharData) {
-      gl.uniform1i(this.#uCharData, 1);
+  }
+  return low;
+}
+
+// src/scene/TextNode.ts
+var DEFAULT_FONT_SIZE = 14;
+
+class TextNode extends SceneNode {
+  #text;
+  #formatting;
+  #font;
+  constructor(shader, text, opts = {}) {
+    const { width, height } = measureText(shader.font, text, opts.wordWrap);
+    if (text.length > shader.maxCharCount) {
+      throw new Error(`Text: ${text} exceeds ${shader.maxCharCount} characters. Try using fewer characters or increase the limit in Toodle.attach.`);
     }
-    gl.activeTexture(gl.TEXTURE2);
-    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.textBufferTexture);
-    if (this.#uTextBuffer) {
-      gl.uniform1i(this.#uTextBuffer, 2);
+    const em2px = shader.font.lineHeight / (opts.fontSize ?? DEFAULT_FONT_SIZE);
+    if (!opts.shrinkToFit && !opts.size) {
+      opts.size = { width: width / em2px, height: height / em2px };
     }
-    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);
+    super({
+      ...opts,
+      render: {
+        shader,
+        writeInstance: (_node, _array, _offset) => {
+          throw new Error("not implemented - needs access to text uniform buffer, dimensions and a model matrix");
+        }
       }
-      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, measurements.printedCharCount);
+    });
+    this.#font = shader.font;
+    this.#text = text;
+    this.#formatting = opts;
+  }
+  get text() {
+    return this.#text;
+  }
+  get formatting() {
+    return this.#formatting;
+  }
+  get font() {
+    return this.#font;
+  }
+  set text(text) {
+    if (!text) {
+      throw new Error("text cannot be empty");
     }
-    gl.bindVertexArray(null);
-    return nodes.length;
+    this.#text = text;
+    this.setDirty();
   }
-  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}`);
+  get tint() {
+    return this.#formatting.color || { r: 1, g: 1, b: 1, a: 1 };
+  }
+  set tint(tint) {
+    this.#formatting.color = tint;
+    this.setDirty();
+  }
+  set formatting(formatting) {
+    this.#formatting = formatting;
+    this.setDirty();
+  }
+}
+
+// src/backends/webgl2/WebGLFontPipeline.ts
+class WebGLFontPipeline2 {
+  font;
+  fontTexture;
+  charDataTexture;
+  textBufferTexture;
+  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];
     }
-    return shader;
+    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 WebGLFontPipeline2(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);
   }
   destroy() {
-    const gl = this.#backend.gl;
-    gl.deleteProgram(this.#program);
-    gl.deleteVertexArray(this.#vao);
-    this.#pipeline.destroy();
+    const gl = this.#gl;
+    gl.deleteTexture(this.fontTexture);
+    gl.deleteTexture(this.charDataTexture);
+    gl.deleteTexture(this.textBufferTexture);
   }
 }
 
-// src/backends/webgpu/wgsl/text.wgsl.ts
-var text_wgsl_default = `
-// Adapted from: https://webgpu.github.io/webgpu-samples/?sample=textRenderingMsdf
+// src/backends/webgl2/glsl/text.glsl.ts
+var vertexShader2 = `#version 300 es
+precision highp float;
 
-// Quad vertex positions for a character
-const pos = array(
-  vec2f(0, -1),
-  vec2f(1, -1),
-  vec2f(0,  0),
-  vec2f(1,  0),
-);
+// Engine uniforms
+uniform mat3 u_viewProjection;
 
-// 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),
-);
+// 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;
 
-// Vertex input from GPU
-struct VertexInput {
-  @builtin(vertex_index) vertex: u32,
-  @builtin(instance_index) instance: u32,
-};
+// Character data texture (RGBA32F, 2 texels per character)
+// Texel 0: texOffset.xy, texExtent.xy
+// Texel 1: size.xy, offset.xy
+uniform sampler2D u_charData;
 
-// 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,
-};
+// Text buffer texture (RGBA32F, 1 texel per glyph)
+// Each texel: xy = glyph position, z = char index
+uniform sampler2D u_textBuffer;
 
-// 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
-};
+// Outputs to fragment shader
+out vec2 v_texcoord;
 
-// 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
-};
+// 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)
+);
 
-// 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)
+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;
 
-// 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
+  // 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);
 
-// Global uniforms
-@group(2) @binding(0) var<uniform> viewProjectionMatrix: mat3x3f;
+  // 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);
 
-// 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;
+  vec2 texOffset = charData0.xy;
+  vec2 texExtent = charData0.zw;
+  vec2 charSize = charData1.xy;
+  vec2 charOffset = charData1.zw;
 
-  let text = texts[textIndex];
-  let textElement = textBuffer[u32(text.bufferPosition) + input.instance];
-  let char = chars[u32(textElement.z)];
+  // Center text vertically; origin is mid-height
+  vec2 offset = vec2(0.0, -u_blockHeight / 2.0);
 
-  let lineHeight = fontData.x;
-  let textWidth = text.blockWidth;
-  let textHeight = text.blockHeight;
+  // 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);
 
-  // Center text vertically; origin is mid-height
-  let offset = vec2f(0, -textHeight / 2);
+  // 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;
 
-  // 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);
+// Font texture (MSDF atlas)
+uniform sampler2D u_fontTexture;
 
-  var output: VertexOutput;
-  let transformedPosition = viewProjectionMatrix * text.transform * vec3f(charPos, 1);
+// Text color
+uniform vec4 u_textColor;
 
-  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;
+// Input from vertex shader
+in vec2 v_texcoord;
 
-  // To debug - hardcode quad in bottom right quarter of the screen:
-  // output.position = vec4f(pos[input.vertex], 0, 1);
-}
+// Output color
+out vec4 fragColor;
 
 // Signed distance function sampling for MSDF font rendering
-fn sampleMsdf(texcoord: vec2f) -> f32 {
-  let c = textureSample(fontTexture, fontSampler, texcoord);
+// 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));
 }
 
-// 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));
+void main() {
+  // pxRange (AKA distanceRange) comes from the msdfgen tool
+  float pxRange = 4.0;
+  vec2 texSize = vec2(textureSize(u_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)));
+  // 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)));
 
-  let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
-  let sigDist = sampleMsdf(input.texcoord) - 0.5;
-  let pxDist = sigDist * toPixels;
+  float toPixels = pxRange * inversesqrt(dx * dx + dy * dy);
+  float sigDist = sampleMsdf(v_texcoord) - 0.5;
+  float pxDist = sigDist * toPixels;
 
-  let edgeWidth = 0.5;
-  let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
+  float edgeWidth = 0.5;
+  float 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);
+  fragColor = vec4(u_textColor.rgb, u_textColor.a * alpha);
 }
 `;
 
-// 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");
-if (!struct) {
-  throw new Error("FormattedText struct not found");
-}
-var textDescriptorInstanceSize = struct.size;
-
-class WebGPUTextShader {
+// src/backends/webgl2/WebGLTextShader.ts
+class WebGLTextShader2 {
   label = "text";
-  code = text_wgsl_default;
+  code = fragmentShader2;
+  font;
+  maxCharCount;
   #backend;
   #pipeline;
-  #bindGroups = [];
-  #font;
-  #maxCharCount;
-  #engineUniformsBuffer;
-  #descriptorBuffer;
-  #textBlockBuffer;
-  #cpuDescriptorBuffer;
-  #cpuTextBlockBuffer;
-  #instanceIndex = 0;
-  #textBlockOffset = 0;
-  constructor(backend, pipeline, font, _colorFormat, instanceCount) {
+  #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;
-    const device = backend.device;
-    this.#font = font;
-    this.#pipeline = pipeline.pipeline;
-    this.#maxCharCount = pipeline.maxCharCount;
-    this.#descriptorBuffer = device.createBuffer({
-      label: "msdf text descriptor buffer",
-      size: textDescriptorInstanceSize * instanceCount,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    });
-    this.#cpuDescriptorBuffer = new Float32Array(instanceCount * textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT);
-    this.#cpuTextBlockBuffer = new Float32Array(instanceCount * this.maxCharCount * 4);
-    this.#engineUniformsBuffer = device.createBuffer({
-      label: "msdf view projection matrix",
-      size: Float32Array.BYTES_PER_ELEMENT * 12,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-    this.#textBlockBuffer = device.createBuffer({
-      label: "msdf text buffer",
-      size: instanceCount * this.maxCharCount * 4 * Float32Array.BYTES_PER_ELEMENT,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    });
-    this.#bindGroups.push(pipeline.fontBindGroup);
-    this.#bindGroups.push(device.createBindGroup({
-      label: "msdf text bind group",
-      layout: pipeline.pipeline.getBindGroupLayout(1),
-      entries: [
-        {
-          binding: 0,
-          resource: { buffer: this.#descriptorBuffer }
-        },
-        {
-          binding: 1,
-          resource: { buffer: this.#textBlockBuffer }
-        }
-      ]
-    }));
-    const engineUniformsBindGroup = device.createBindGroup({
-      label: "msdf text uniforms bind group",
-      layout: pipeline.pipeline.getBindGroupLayout(2),
-      entries: [
-        {
-          binding: 0,
-          resource: { buffer: this.#engineUniformsBuffer }
-        }
-      ]
-    });
-    this.#bindGroups.push(engineUniformsBindGroup);
+    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) {
-    const device = this.#backend.device;
-    device.queue.writeBuffer(this.#engineUniformsBuffer, 0, uniform.viewProjectionMatrix);
-    this.#instanceIndex = 0;
-    this.#textBlockOffset = 0;
+    this.#cachedUniform = uniform;
   }
   processBatch(nodes) {
     if (nodes.length === 0)
       return 0;
-    const renderPass = this.#backend.renderPass;
-    renderPass.setPipeline(this.#pipeline);
-    for (let i3 = 0;i3 < this.#bindGroups.length; i3++) {
-      renderPass.setBindGroup(i3, this.#bindGroups[i3]);
+    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 WebGPUTextShader on something that isn't a TextNode: ${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 textBlockSize = 4 * text.length;
-      const textDescriptorOffset = this.#instanceIndex * textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT;
-      this.#cpuDescriptorBuffer.set(node.matrix, textDescriptorOffset);
-      this.#cpuDescriptorBuffer.set([node.tint.r, node.tint.g, node.tint.b, node.tint.a], textDescriptorOffset + 12);
+      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 fontSize = formatting.shrinkToFit ? findLargestFontSize(this.font, text, size, formatting) : formatting.fontSize;
       const actualFontSize = fontSize || DEFAULT_FONT_SIZE;
-      this.#cpuDescriptorBuffer[textDescriptorOffset + 16] = actualFontSize;
-      this.#cpuDescriptorBuffer[textDescriptorOffset + 17] = formatting.align === "center" ? 0 : measurements.width;
-      this.#cpuDescriptorBuffer[textDescriptorOffset + 18] = measurements.height;
-      this.#cpuDescriptorBuffer[textDescriptorOffset + 19] = this.#textBlockOffset / 4;
-      shapeText(this.#font, text, size, actualFontSize, formatting, this.#cpuTextBlockBuffer, this.#textBlockOffset);
-      this.#backend.device.queue.writeBuffer(this.#descriptorBuffer, textDescriptorOffset * Float32Array.BYTES_PER_ELEMENT, this.#cpuDescriptorBuffer, textDescriptorOffset, textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT);
-      this.#backend.device.queue.writeBuffer(this.#textBlockBuffer, this.#textBlockOffset * Float32Array.BYTES_PER_ELEMENT, this.#cpuTextBlockBuffer, this.#textBlockOffset, textBlockSize);
-      this.#textBlockOffset += textBlockSize;
-      renderPass.draw(4, measurements.printedCharCount, 4 * this.#instanceIndex, 0);
-      this.#instanceIndex++;
-    }
-    return nodes.length;
-  }
-  endFrame() {}
-  get font() {
-    return this.#font;
-  }
-  get maxCharCount() {
-    return this.#maxCharCount;
-  }
-}
-
-// src/scene/Batcher.ts
-class Batcher {
-  nodes = [];
-  layers = [];
-  pipelines = [];
-  enqueue(node) {
-    if (node.renderComponent && node.isActive) {
-      this.nodes.push(node);
-      const z3 = node.layer;
-      const layer = this.#findOrCreateLayer(z3);
-      const pipeline = this.#findOrCreatePipeline(layer, node.renderComponent.shader);
-      pipeline.nodes.push(node);
-    }
-    for (const kid of node.kids) {
-      this.enqueue(kid);
-    }
-  }
-  flush() {
-    this.nodes = [];
-    this.layers = [];
-    this.pipelines = [];
-  }
-  #findOrCreateLayer(z3) {
-    let layer = this.layers.find((l3) => l3.z === z3);
-    if (!layer) {
-      layer = { z: z3, pipelines: [] };
-      this.layers.push(layer);
-      this.layers.sort((a3, b3) => a3.z - b3.z);
-    }
-    return layer;
-  }
-  #findOrCreatePipeline(layer, shader) {
-    let pipeline = layer.pipelines.find((p3) => p3.shader === shader);
-    if (!pipeline) {
-      pipeline = { shader, nodes: [] };
-      layer.pipelines.push(pipeline);
-      this.pipelines.push(pipeline);
+      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);
     }
-    return pipeline;
-  }
-}
-
-// src/scene/Camera.ts
-class Camera {
-  #position = { x: 0, y: 0 };
-  #zoom = 1;
-  #rotation = 0;
-  #isDirty = true;
-  #matrix = mat3.create();
-  get zoom() {
-    return this.#zoom;
-  }
-  set zoom(value) {
-    this.#zoom = value;
-    this.setDirty();
-  }
-  get rotation() {
-    return rad2deg(this.#rotation);
-  }
-  set rotation(value) {
-    this.#rotation = deg2rad(value);
-    this.setDirty();
-  }
-  get rotationRadians() {
-    return this.#rotation;
-  }
-  set rotationRadians(value) {
-    this.#rotation = value;
-    this.setDirty();
-  }
-  get x() {
-    return this.#position.x;
-  }
-  get y() {
-    return this.#position.y;
-  }
-  set x(value) {
-    this.#position.x = value;
-    this.setDirty();
-  }
-  set y(value) {
-    this.#position.y = value;
-    this.setDirty();
+    gl.bindVertexArray(null);
+    return nodes.length;
   }
-  get matrix() {
-    if (this.#isDirty) {
-      this.#isDirty = false;
-      this.#matrix = createViewMatrix(this, this.#matrix);
+  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 this.#matrix;
+    return shader;
   }
-  setDirty() {
-    this.#isDirty = true;
+  destroy() {
+    const gl = this.#backend.gl;
+    gl.deleteProgram(this.#program);
+    gl.deleteVertexArray(this.#vao);
+    this.#pipeline.destroy();
   }
 }
 
-// src/scene/QuadNode.ts
-var PRIMITIVE_TEXTURE = "__primitive__";
-var RESERVED_PRIMITIVE_INDEX_START = 1000;
-var CIRCLE_INDEX = 1001;
-var DEFAULT_REGION = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0
+// 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,
 };
 
-class QuadNode extends SceneNode {
-  assetManager;
-  #color;
-  #atlasCoords;
-  #region;
-  #matrixPool;
-  #flip;
-  #cropOffset;
-  #cropRatio;
-  #atlasSize;
-  #textureId;
-  #writeInstance;
-  constructor(options, matrixPool) {
-    assert(options.shader, "QuadNode requires a shader to be explicitly provided");
-    assert(options.size, "QuadNode requires a size to be explicitly provided");
-    assert(options.atlasCoords, "QuadNode requires atlas coords to be explicitly provided");
-    options.render ??= {
-      shader: options.shader,
-      writeInstance: writeQuadInstance
-    };
-    super(options);
-    assert(options.assetManager, "QuadNode requires an asset manager");
-    this.assetManager = options.assetManager;
-    if (options.atlasCoords && options.atlasCoords.atlasIndex >= RESERVED_PRIMITIVE_INDEX_START) {
-      this.#textureId = PRIMITIVE_TEXTURE;
-      this.#region = DEFAULT_REGION;
-      this.#atlasSize = DEFAULT_REGION;
-    } else {
-      assert(options.textureId, "QuadNode requires texture id to be explicitly provided");
-      this.#textureId = options.textureId;
-      assert(options.region, "QuadNode requires a region to be explicitly provided");
-      this.#region = options.region;
-      assert(options.atlasSize, "QuadNode requires atlas size to be explicitly provided");
-      this.#atlasSize = options.atlasSize;
-    }
-    this.#atlasCoords = options.atlasCoords;
-    this.#color = options.color ?? { r: 1, g: 1, b: 1, a: 1 };
-    this.#matrixPool = matrixPool;
-    this.#flip = { x: options.flipX ? -1 : 1, y: options.flipY ? -1 : 1 };
-    this.#cropOffset = options.cropOffset ?? { x: 0, y: 0 };
-    this.#cropRatio = !this.#atlasCoords.uvScaleCropped ? { width: 1, height: 1 } : {
-      width: this.#atlasCoords.uvScaleCropped.width / this.#atlasCoords.uvScale.width,
-      height: this.#atlasCoords.uvScaleCropped.height / this.#atlasCoords.uvScale.height
-    };
-    this.#writeInstance = options.writeInstance;
-  }
-  get color() {
-    return this.#color;
-  }
-  set color(value) {
-    this.#color = value;
-  }
-  get size() {
-    const size = super.size;
-    if (!size) {
-      throw new Error("QuadNode requires a size");
-    }
-    return size;
-  }
-  set size(val) {
-    super.size = val;
-  }
-  get matrixWithSize() {
-    const matrix = mat3.clone(this.matrix, this.#matrixPool.get());
-    mat3.scale(matrix, [this.size.width * this.#flip.x, this.size.height * this.#flip.y], matrix);
-    return matrix;
-  }
-  get atlasCoords() {
-    return this.#atlasCoords;
-  }
-  get region() {
-    return this.#region;
-  }
-  get writeInstance() {
-    return this.#writeInstance;
-  }
-  get flipX() {
-    return this.#flip.x === -1;
-  }
-  set flipX(value) {
-    this.#flip.x = value ? -1 : 1;
-    this.setDirty();
-  }
-  get flipY() {
-    return this.#flip.y === -1;
-  }
-  set flipY(value) {
-    this.#flip.y = value ? -1 : 1;
-    this.setDirty();
-  }
-  get cropOffset() {
-    return this.#cropOffset;
-  }
-  set cropOffset(value) {
-    this.#cropOffset = value;
-  }
-  get textureId() {
-    return this.#textureId;
-  }
-  get isPrimitive() {
-    return this.#textureId === PRIMITIVE_TEXTURE;
-  }
-  get isCircle() {
-    return this.#atlasCoords.atlasIndex === CIRCLE_INDEX;
-  }
-  extra = {
-    setAtlasCoords: (value) => {
-      this.#atlasCoords = value;
-    },
-    cropRatio: () => {
-      return this.#cropRatio;
-    },
-    atlasSize: () => {
-      return this.#atlasSize;
-    }
-  };
+// 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);
 }
-function writeQuadInstance(node, array, offset) {
-  if (!(node instanceof QuadNode)) {
-    throw new Error("QuadNode.writeInstance can only be called on QuadNodes");
-  }
-  array.set(node.matrixWithSize, offset);
-  array.set([node.color.r, node.color.g, node.color.b, node.color.a], offset + 12);
-  const region = node.region;
-  if (node.textureId === PRIMITIVE_TEXTURE) {
-    array.set([
-      node.atlasCoords.uvOffset.x,
-      node.atlasCoords.uvOffset.y,
-      node.atlasCoords.uvScale.width,
-      node.atlasCoords.uvScale.height
-    ], offset + 16);
-  } else {
-    const atlasSize = node.extra.atlasSize();
-    array.set([
-      node.atlasCoords.uvOffset.x + region.x / atlasSize.width,
-      node.atlasCoords.uvOffset.y + region.y / atlasSize.height,
-      region.width / atlasSize.width,
-      region.height / atlasSize.height
-    ], offset + 16);
-  }
-  array.set([
-    node.cropOffset.x / 2 / (node.atlasCoords.originalSize.width || 1),
-    node.cropOffset.y / 2 / (node.atlasCoords.originalSize.height || 1),
-    node.extra.cropRatio().width,
-    node.extra.cropRatio().height
-  ], offset + 20);
-  new DataView(array.buffer).setUint32(array.byteOffset + (offset + 24) * Float32Array.BYTES_PER_ELEMENT, node.atlasCoords.atlasIndex, true);
-  node.writeInstance?.(array, offset + 28);
-  return 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));
 }
 
-// src/scene/JumboQuadNode.ts
-var MAT3_SIZE = 12;
-var VEC4F_SIZE = 4;
+// 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];
 
-class JumboQuadNode extends QuadNode {
-  #tiles;
-  #matrixPool;
-  constructor(options, matrixPool) {
-    assert(options.shader, "JumboQuadNode requires a shader to be explicitly provided");
-    assert(options.tiles && options.tiles.length > 0, "JumboQuadNode requires at least one tile to be provided");
-    options.render ??= {
-      shader: options.shader,
-      writeInstance: writeJumboQuadInstance
-    };
-    super({
-      ...options,
-      atlasCoords: options.tiles[0].atlasCoords
-    }, matrixPool);
-    this.#matrixPool = matrixPool;
-    this.#tiles = [];
-    for (const tile of options.tiles) {
-      assert(tile.atlasCoords, "JumboQuadNode requires atlas coords to be provided");
-      assert(tile.size, "JumboQuadNode requires a size to be provided");
-      this.#tiles.push({
-        textureId: tile.textureId,
-        offset: tile.offset,
-        size: tile.size,
-        atlasCoords: tile.atlasCoords
-      });
-    }
-  }
-  get atlasCoords() {
-    throw new Error("JumboQuadNode does not have a single atlas coords");
-  }
-  get tiles() {
-    return this.#tiles;
-  }
-  getTileMatrix(tile) {
-    const matrix = mat3.clone(this.matrix, this.#matrixPool.get());
-    const originalSize = {
-      width: Math.max(...this.#tiles.map((t3) => t3.offset.x + t3.size.width)),
-      height: Math.max(...this.#tiles.map((t3) => t3.offset.y + t3.size.height))
-    };
-    const proportionalSize = {
-      width: this.size.width / originalSize.width,
-      height: this.size.height / originalSize.height
-    };
-    const centerOffset = {
-      x: tile.offset.x + tile.size.width / 2 - originalSize.width / 2,
-      y: -(tile.offset.y + tile.size.height / 2 - originalSize.height / 2)
-    };
-    mat3.translate(matrix, [
-      centerOffset.x * proportionalSize.width,
-      centerOffset.y * proportionalSize.height
-    ], matrix);
-    mat3.scale(matrix, [
-      tile.size.width * proportionalSize.width * (this.flipX ? -1 : 1),
-      tile.size.height * proportionalSize.height * (this.flipY ? -1 : 1)
-    ], matrix);
-    return matrix;
+  // 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);
 }
-function writeJumboQuadInstance(node, array, offset) {
-  if (!(node instanceof JumboQuadNode)) {
-    throw new Error("JumboQuadNode.writeJumboQuadInstance can only be called on JumboQuadNodes");
+`;
+
+// src/backends/webgpu/FontPipeline.ts
+class FontPipeline2 {
+  pipeline;
+  font;
+  fontBindGroup;
+  maxCharCount;
+  constructor(pipeline, font, fontBindGroup, maxCharCount) {
+    this.pipeline = pipeline;
+    this.font = font;
+    this.fontBindGroup = fontBindGroup;
+    this.maxCharCount = maxCharCount;
   }
-  let tileOffset = 0;
-  for (const tile of node.tiles) {
-    const coord = tile.atlasCoords;
-    const matrix = node.getTileMatrix(tile);
-    array.set(matrix, offset + tileOffset);
-    tileOffset += MAT3_SIZE;
-    array.set([node.color.r, node.color.g, node.color.b, node.color.a], offset + tileOffset);
-    tileOffset += VEC4F_SIZE;
-    array.set([
-      coord.uvOffset.x,
-      coord.uvOffset.y,
-      coord.uvScale.width,
-      coord.uvScale.height
-    ], offset + tileOffset);
-    tileOffset += VEC4F_SIZE;
-    const cropRatio = !coord.uvScaleCropped ? { width: 1, height: 1 } : {
-      width: coord.uvScaleCropped.width / coord.uvScale.width,
-      height: coord.uvScaleCropped.height / coord.uvScale.height
-    };
-    array.set([
-      tile.atlasCoords.cropOffset.x / 2 / (tile.atlasCoords.originalSize.width || 1),
-      tile.atlasCoords.cropOffset.y / 2 / (tile.atlasCoords.originalSize.height || 1),
-      cropRatio.width,
-      cropRatio.height
-    ], offset + tileOffset);
-    tileOffset += VEC4F_SIZE;
-    new DataView(array.buffer).setUint32(array.byteOffset + (offset + tileOffset) * Float32Array.BYTES_PER_ELEMENT, coord.atlasIndex, true);
-    tileOffset += VEC4F_SIZE;
+  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 FontPipeline2(pipeline, font, fontBindGroup, maxCharCount);
   }
-  node.writeInstance?.(array, offset + tileOffset);
-  return node.tiles.length;
 }
+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/wgsl/pixel-scraping.wgsl.ts
 var pixel_scraping_wgsl_default = `
@@ -19503,6 +19290,130 @@ function createPipelines(device, label) {
   };
 }
 
+// src/backends/webgpu/WebGPUTextShader.ts
+var deets = new _t2(text_wgsl_default);
+var struct = deets.structs.find((s3) => s3.name === "TextBlockDescriptor");
+if (!struct) {
+  throw new Error("FormattedText struct not found");
+}
+var textDescriptorInstanceSize = struct.size;
+
+class WebGPUTextShader2 {
+  label = "text";
+  code = text_wgsl_default;
+  #backend;
+  #pipeline;
+  #bindGroups = [];
+  #font;
+  #maxCharCount;
+  #engineUniformsBuffer;
+  #descriptorBuffer;
+  #textBlockBuffer;
+  #cpuDescriptorBuffer;
+  #cpuTextBlockBuffer;
+  #instanceIndex = 0;
+  #textBlockOffset = 0;
+  constructor(backend, pipeline, font, _colorFormat, instanceCount) {
+    this.#backend = backend;
+    const device = backend.device;
+    this.#font = font;
+    this.#pipeline = pipeline.pipeline;
+    this.#maxCharCount = pipeline.maxCharCount;
+    this.#descriptorBuffer = device.createBuffer({
+      label: "msdf text descriptor buffer",
+      size: textDescriptorInstanceSize * instanceCount,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    this.#cpuDescriptorBuffer = new Float32Array(instanceCount * textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT);
+    this.#cpuTextBlockBuffer = new Float32Array(instanceCount * this.maxCharCount * 4);
+    this.#engineUniformsBuffer = device.createBuffer({
+      label: "msdf view projection matrix",
+      size: Float32Array.BYTES_PER_ELEMENT * 12,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.#textBlockBuffer = device.createBuffer({
+      label: "msdf text buffer",
+      size: instanceCount * this.maxCharCount * 4 * Float32Array.BYTES_PER_ELEMENT,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    this.#bindGroups.push(pipeline.fontBindGroup);
+    this.#bindGroups.push(device.createBindGroup({
+      label: "msdf text bind group",
+      layout: pipeline.pipeline.getBindGroupLayout(1),
+      entries: [
+        {
+          binding: 0,
+          resource: { buffer: this.#descriptorBuffer }
+        },
+        {
+          binding: 1,
+          resource: { buffer: this.#textBlockBuffer }
+        }
+      ]
+    }));
+    const engineUniformsBindGroup = device.createBindGroup({
+      label: "msdf text uniforms bind group",
+      layout: pipeline.pipeline.getBindGroupLayout(2),
+      entries: [
+        {
+          binding: 0,
+          resource: { buffer: this.#engineUniformsBuffer }
+        }
+      ]
+    });
+    this.#bindGroups.push(engineUniformsBindGroup);
+  }
+  startFrame(uniform) {
+    const device = this.#backend.device;
+    device.queue.writeBuffer(this.#engineUniformsBuffer, 0, uniform.viewProjectionMatrix);
+    this.#instanceIndex = 0;
+    this.#textBlockOffset = 0;
+  }
+  processBatch(nodes) {
+    if (nodes.length === 0)
+      return 0;
+    const renderPass = this.#backend.renderPass;
+    renderPass.setPipeline(this.#pipeline);
+    for (let i3 = 0;i3 < this.#bindGroups.length; i3++) {
+      renderPass.setBindGroup(i3, this.#bindGroups[i3]);
+    }
+    for (const node of nodes) {
+      if (!(node instanceof TextNode)) {
+        console.error(node);
+        throw new Error(`Tried to use WebGPUTextShader 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 textBlockSize = 4 * text.length;
+      const textDescriptorOffset = this.#instanceIndex * textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT;
+      this.#cpuDescriptorBuffer.set(node.matrix, textDescriptorOffset);
+      this.#cpuDescriptorBuffer.set([node.tint.r, node.tint.g, node.tint.b, node.tint.a], textDescriptorOffset + 12);
+      const size = node.size ?? measurements;
+      const fontSize = formatting.shrinkToFit ? findLargestFontSize(this.#font, text, size, formatting) : formatting.fontSize;
+      const actualFontSize = fontSize || DEFAULT_FONT_SIZE;
+      this.#cpuDescriptorBuffer[textDescriptorOffset + 16] = actualFontSize;
+      this.#cpuDescriptorBuffer[textDescriptorOffset + 17] = formatting.align === "center" ? 0 : measurements.width;
+      this.#cpuDescriptorBuffer[textDescriptorOffset + 18] = measurements.height;
+      this.#cpuDescriptorBuffer[textDescriptorOffset + 19] = this.#textBlockOffset / 4;
+      shapeText(this.#font, text, size, actualFontSize, formatting, this.#cpuTextBlockBuffer, this.#textBlockOffset);
+      this.#backend.device.queue.writeBuffer(this.#descriptorBuffer, textDescriptorOffset * Float32Array.BYTES_PER_ELEMENT, this.#cpuDescriptorBuffer, textDescriptorOffset, textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT);
+      this.#backend.device.queue.writeBuffer(this.#textBlockBuffer, this.#textBlockOffset * Float32Array.BYTES_PER_ELEMENT, this.#cpuTextBlockBuffer, this.#textBlockOffset, textBlockSize);
+      this.#textBlockOffset += textBlockSize;
+      renderPass.draw(4, measurements.printedCharCount, 4 * this.#instanceIndex, 0);
+      this.#instanceIndex++;
+    }
+    return nodes.length;
+  }
+  endFrame() {}
+  get font() {
+    return this.#font;
+  }
+  get maxCharCount() {
+    return this.#maxCharCount;
+  }
+}
+
 // src/textures/Bundles.ts
 class Bundles {
   #bundles = new Map;
@@ -19720,6 +19631,8 @@ class Bundles {
     const rightCrop = frame.sourceSize.w - frame.spriteSourceSize.x - frame.spriteSourceSize.w;
     const topCrop = frame.spriteSourceSize.y;
     const bottomCrop = frame.sourceSize.h - frame.spriteSourceSize.y - frame.spriteSourceSize.h;
+    const halfTexelX = 0.5 / atlasWidth;
+    const halfTexelY = 0.5 / atlasHeight;
     return {
       cropOffset: {
         x: leftCrop - rightCrop,
@@ -19730,16 +19643,16 @@ class Bundles {
         height: frame.sourceSize.h
       },
       uvOffset: {
-        x: frame.frame.x / atlasWidth,
-        y: frame.frame.y / atlasHeight
+        x: frame.frame.x / atlasWidth + halfTexelX,
+        y: frame.frame.y / atlasHeight + halfTexelY
       },
       uvScale: {
         width: frame.sourceSize.w / atlasWidth,
         height: frame.sourceSize.h / atlasHeight
       },
       uvScaleCropped: {
-        width: frame.frame.w / atlasWidth,
-        height: frame.frame.h / atlasHeight
+        width: (frame.frame.w - 1) / atlasWidth,
+        height: (frame.frame.h - 1) / atlasHeight
       }
     };
   }
@@ -19849,18 +19762,19 @@ async function packBitmapsToAtlas(images, textureSize, device) {
         height: space.height - texture.height
       });
     }
+    const halfTexel = 0.5 / textureSize;
     atlasRegionMap.set(id, {
       uvOffset: {
-        x: space.x / textureSize,
-        y: space.y / textureSize
+        x: space.x / textureSize + halfTexel,
+        y: space.y / textureSize + halfTexel
       },
       uvScale: {
         width: originalSize.width / textureSize,
         height: originalSize.height / textureSize
       },
       uvScaleCropped: {
-        width: texture.width / textureSize,
-        height: texture.height / textureSize
+        width: (texture.width - 1) / textureSize,
+        height: (texture.height - 1) / textureSize
       },
       cropOffset: offset,
       originalSize
@@ -20174,13 +20088,13 @@ class AssetManager {
       const webgpuBackend = this.#backend;
       const device = webgpuBackend.device;
       const presentationFormat = webgpuBackend.presentationFormat;
-      const fontPipeline = await FontPipeline.create(device, font, presentationFormat, limits.maxTextLength);
-      const textShader = new WebGPUTextShader(webgpuBackend, fontPipeline, font, presentationFormat, limits.instanceCount);
+      const fontPipeline = await FontPipeline2.create(device, font, presentationFormat, limits.maxTextLength);
+      const textShader = new WebGPUTextShader2(webgpuBackend, fontPipeline, font, presentationFormat, limits.instanceCount);
       this.#fonts.set(id, textShader);
     } else {
       const webglBackend = this.#backend;
-      const fontPipeline = WebGLFontPipeline.create(webglBackend.gl, font, limits.maxTextLength);
-      const textShader = new WebGLTextShader(webglBackend, fontPipeline);
+      const fontPipeline = WebGLFontPipeline2.create(webglBackend.gl, font, limits.maxTextLength);
+      const textShader = new WebGLTextShader2(webglBackend, fontPipeline);
       this.#fonts.set(id, textShader);
     }
     return id;
@@ -20323,13 +20237,6 @@ class AssetManager {
   }
 }
 
-// src/utils/mod.ts
-var exports_mod2 = {};
-__export(exports_mod2, {
-  assert: () => assert,
-  Pool: () => Pool
-});
-
 // src/utils/pool.ts
 class Pool {
   #items = [];
@@ -20351,6 +20258,7 @@ class Pool {
     this.#index = 0;
   }
 }
+
 // src/Toodle.ts
 class Toodle {
   assets;
@@ -20687,11 +20595,11 @@ class Toodle {
     }
     let backend;
     if (backendType === "webgpu") {
-      backend = await WebGPUBackend.create(canvas, {
+      backend = await WebGPUBackend2.create(canvas, {
         limits: options?.limits
       });
     } else {
-      backend = await WebGLBackend.create(canvas, {
+      backend = await WebGLBackend2.create(canvas, {
         limits: options?.limits
       });
     }
@@ -20709,204 +20617,20 @@ class Toodle {
     return this.#backend;
   }
 }
-// src/colors/mod.ts
-var exports_mod3 = {};
-__export(exports_mod3, {
-  web: () => web
-});
-var web = Object.freeze({
-  aliceBlue: { r: 0.941176, g: 0.972549, b: 1, a: 1 },
-  antiqueWhite: { r: 0.980392, g: 0.921569, b: 0.843137, a: 1 },
-  aqua: { r: 0, g: 1, b: 1, a: 1 },
-  aquamarine: { r: 0.498039, g: 1, b: 0.831373, a: 1 },
-  azure: { r: 0.941176, g: 1, b: 1, a: 1 },
-  beige: { r: 0.960784, g: 0.960784, b: 0.862745, a: 1 },
-  bisque: { r: 1, g: 0.894118, b: 0.768627, a: 1 },
-  black: { r: 0, g: 0, b: 0, a: 1 },
-  blanchedAlmond: { r: 1, g: 0.921569, b: 0.803922, a: 1 },
-  blue: { r: 0, g: 0, b: 1, a: 1 },
-  blueViolet: { r: 0.541176, g: 0.168627, b: 0.886275, a: 1 },
-  brown: { r: 0.647059, g: 0.164706, b: 0.164706, a: 1 },
-  burlywood: { r: 0.870588, g: 0.721569, b: 0.529412, a: 1 },
-  cadetBlue: { r: 0.372549, g: 0.619608, b: 0.627451, a: 1 },
-  chartreuse: { r: 0.498039, g: 1, b: 0, a: 1 },
-  chocolate: { r: 0.823529, g: 0.411765, b: 0.117647, a: 1 },
-  coral: { r: 1, g: 0.498039, b: 0.313726, a: 1 },
-  cornflowerBlue: { r: 0.392157, g: 0.584314, b: 0.929412, a: 1 },
-  cornsilk: { r: 1, g: 0.972549, b: 0.862745, a: 1 },
-  crimson: { r: 0.862745, g: 0.0784314, b: 0.235294, a: 1 },
-  cyan: { r: 0, g: 1, b: 1, a: 1 },
-  darkBlue: { r: 0, g: 0, b: 0.545098, a: 1 },
-  darkCyan: { r: 0, g: 0.545098, b: 0.545098, a: 1 },
-  darkGoldenrod: { r: 0.721569, g: 0.52549, b: 0.0431373, a: 1 },
-  darkGray: { r: 0.662745, g: 0.662745, b: 0.662745, a: 1 },
-  darkGreen: { r: 0, g: 0.392157, b: 0, a: 1 },
-  darkKhaki: { r: 0.741176, g: 0.717647, b: 0.419608, a: 1 },
-  darkMagenta: { r: 0.545098, g: 0, b: 0.545098, a: 1 },
-  darkOliveGreen: { r: 0.333333, g: 0.419608, b: 0.184314, a: 1 },
-  darkOrange: { r: 1, g: 0.54902, b: 0, a: 1 },
-  darkOrchid: { r: 0.6, g: 0.196078, b: 0.8, a: 1 },
-  darkRed: { r: 0.545098, g: 0, b: 0, a: 1 },
-  darkSalmon: { r: 0.913725, g: 0.588235, b: 0.478431, a: 1 },
-  darkSeaGreen: { r: 0.560784, g: 0.737255, b: 0.560784, a: 1 },
-  darkSlateBlue: { r: 0.282353, g: 0.239216, b: 0.545098, a: 1 },
-  darkSlateGray: { r: 0.184314, g: 0.309804, b: 0.309804, a: 1 },
-  darkTurquoise: { r: 0, g: 0.807843, b: 0.819608, a: 1 },
-  darkViolet: { r: 0.580392, g: 0, b: 0.827451, a: 1 },
-  deepPink: { r: 1, g: 0.0784314, b: 0.576471, a: 1 },
-  deepSkyBlue: { r: 0, g: 0.74902, b: 1, a: 1 },
-  dimGray: { r: 0.411765, g: 0.411765, b: 0.411765, a: 1 },
-  dodgerBlue: { r: 0.117647, g: 0.564706, b: 1, a: 1 },
-  firebrick: { r: 0.698039, g: 0.133333, b: 0.133333, a: 1 },
-  floralWhite: { r: 1, g: 0.980392, b: 0.941176, a: 1 },
-  forestGreen: { r: 0.133333, g: 0.545098, b: 0.133333, a: 1 },
-  fuchsia: { r: 1, g: 0, b: 1, a: 1 },
-  gainsboro: { r: 0.862745, g: 0.862745, b: 0.862745, a: 1 },
-  ghostWhite: { r: 0.972549, g: 0.972549, b: 1, a: 1 },
-  gold: { r: 1, g: 0.843137, b: 0, a: 1 },
-  goldenrod: { r: 0.854902, g: 0.647059, b: 0.12549, a: 1 },
-  gray: { r: 0.745098, g: 0.745098, b: 0.745098, a: 1 },
-  green: { r: 0, g: 1, b: 0, a: 1 },
-  greenYellow: { r: 0.678431, g: 1, b: 0.184314, a: 1 },
-  honeydew: { r: 0.941176, g: 1, b: 0.941176, a: 1 },
-  hotPink: { r: 1, g: 0.411765, b: 0.705882, a: 1 },
-  indigo: { r: 0.294118, g: 0, b: 0.509804, a: 1 },
-  ivory: { r: 1, g: 1, b: 0.941176, a: 1 },
-  khaki: { r: 0.941176, g: 0.901961, b: 0.54902, a: 1 },
-  lavender: { r: 0.901961, g: 0.901961, b: 0.980392, a: 1 },
-  lavenderBlush: { r: 1, g: 0.941176, b: 0.960784, a: 1 },
-  lawnGreen: { r: 0.486275, g: 0.988235, b: 0, a: 1 },
-  lemonChiffon: { r: 1, g: 0.980392, b: 0.803922, a: 1 },
-  lightBlue: { r: 0.678431, g: 0.847059, b: 0.901961, a: 1 },
-  lightCoral: { r: 0.941176, g: 0.501961, b: 0.501961, a: 1 },
-  lightCyan: { r: 0.878431, g: 1, b: 1, a: 1 },
-  lightGoldenrod: { r: 0.980392, g: 0.980392, b: 0.823529, a: 1 },
-  lightGray: { r: 0.827451, g: 0.827451, b: 0.827451, a: 1 },
-  lightGreen: { r: 0.564706, g: 0.933333, b: 0.564706, a: 1 },
-  lightPink: { r: 1, g: 0.713726, b: 0.756863, a: 1 },
-  lightSalmon: { r: 1, g: 0.627451, b: 0.478431, a: 1 },
-  lightSeaGreen: { r: 0.12549, g: 0.698039, b: 0.666667, a: 1 },
-  lightSkyBlue: { r: 0.529412, g: 0.807843, b: 0.980392, a: 1 },
-  lightSlateGray: { r: 0.466667, g: 0.533333, b: 0.6, a: 1 },
-  lightSteelBlue: { r: 0.690196, g: 0.768627, b: 0.870588, a: 1 },
-  lightYellow: { r: 1, g: 1, b: 0.878431, a: 1 },
-  lime: { r: 0, g: 1, b: 0, a: 1 },
-  limeGreen: { r: 0.196078, g: 0.803922, b: 0.196078, a: 1 },
-  linen: { r: 0.980392, g: 0.941176, b: 0.901961, a: 1 },
-  magenta: { r: 1, g: 0, b: 1, a: 1 },
-  maroon: { r: 0.690196, g: 0.188235, b: 0.376471, a: 1 },
-  mediumAquamarine: { r: 0.4, g: 0.803922, b: 0.666667, a: 1 },
-  mediumBlue: { r: 0, g: 0, b: 0.803922, a: 1 },
-  mediumOrchid: { r: 0.729412, g: 0.333333, b: 0.827451, a: 1 },
-  mediumPurple: { r: 0.576471, g: 0.439216, b: 0.858824, a: 1 },
-  mediumSeaGreen: { r: 0.235294, g: 0.701961, b: 0.443137, a: 1 },
-  mediumSlateBlue: { r: 0.482353, g: 0.407843, b: 0.933333, a: 1 },
-  mediumSpringGreen: { r: 0, g: 0.980392, b: 0.603922, a: 1 },
-  mediumTurquoise: { r: 0.282353, g: 0.819608, b: 0.8, a: 1 },
-  mediumVioletRed: { r: 0.780392, g: 0.0823529, b: 0.521569, a: 1 },
-  midnightBlue: { r: 0.0980392, g: 0.0980392, b: 0.439216, a: 1 },
-  mintCream: { r: 0.960784, g: 1, b: 0.980392, a: 1 },
-  mistyRose: { r: 1, g: 0.894118, b: 0.882353, a: 1 },
-  moccasin: { r: 1, g: 0.894118, b: 0.709804, a: 1 },
-  navyBlue: { r: 0, g: 0, b: 0.501961, a: 1 },
-  oldLace: { r: 0.992157, g: 0.960784, b: 0.901961, a: 1 },
-  olive: { r: 0.501961, g: 0.501961, b: 0, a: 1 },
-  oliveDrab: { r: 0.419608, g: 0.556863, b: 0.137255, a: 1 },
-  orange: { r: 1, g: 0.647059, b: 0, a: 1 },
-  orangeRed: { r: 1, g: 0.270588, b: 0, a: 1 },
-  orchid: { r: 0.854902, g: 0.439216, b: 0.839216, a: 1 },
-  paleGoldenrod: { r: 0.933333, g: 0.909804, b: 0.666667, a: 1 },
-  paleGreen: { r: 0.596078, g: 0.984314, b: 0.596078, a: 1 },
-  paleTurquoise: { r: 0.686275, g: 0.933333, b: 0.933333, a: 1 },
-  paleVioletRed: { r: 0.858824, g: 0.439216, b: 0.576471, a: 1 },
-  papayaWhip: { r: 1, g: 0.937255, b: 0.835294, a: 1 },
-  peachPuff: { r: 1, g: 0.854902, b: 0.72549, a: 1 },
-  peru: { r: 0.803922, g: 0.521569, b: 0.247059, a: 1 },
-  pink: { r: 1, g: 0.752941, b: 0.796078, a: 1 },
-  plum: { r: 0.866667, g: 0.627451, b: 0.866667, a: 1 },
-  powderBlue: { r: 0.690196, g: 0.878431, b: 0.901961, a: 1 },
-  purple: { r: 0.627451, g: 0.12549, b: 0.941176, a: 1 },
-  rebeccaPurple: { r: 0.4, g: 0.2, b: 0.6, a: 1 },
-  red: { r: 1, g: 0, b: 0, a: 1 },
-  rosyBrown: { r: 0.737255, g: 0.560784, b: 0.560784, a: 1 },
-  royalBlue: { r: 0.254902, g: 0.411765, b: 0.882353, a: 1 },
-  saddleBrown: { r: 0.545098, g: 0.270588, b: 0.0745098, a: 1 },
-  salmon: { r: 0.980392, g: 0.501961, b: 0.447059, a: 1 },
-  sandyBrown: { r: 0.956863, g: 0.643137, b: 0.376471, a: 1 },
-  seaGreen: { r: 0.180392, g: 0.545098, b: 0.341176, a: 1 },
-  seashell: { r: 1, g: 0.960784, b: 0.933333, a: 1 },
-  sienna: { r: 0.627451, g: 0.321569, b: 0.176471, a: 1 },
-  silver: { r: 0.752941, g: 0.752941, b: 0.752941, a: 1 },
-  skyBlue: { r: 0.529412, g: 0.807843, b: 0.921569, a: 1 },
-  slateBlue: { r: 0.415686, g: 0.352941, b: 0.803922, a: 1 },
-  slateGray: { r: 0.439216, g: 0.501961, b: 0.564706, a: 1 },
-  snow: { r: 1, g: 0.980392, b: 0.980392, a: 1 },
-  springGreen: { r: 0, g: 1, b: 0.498039, a: 1 },
-  steelBlue: { r: 0.27451, g: 0.509804, b: 0.705882, a: 1 },
-  tan: { r: 0.823529, g: 0.705882, b: 0.54902, a: 1 },
-  teal: { r: 0, g: 0.501961, b: 0.501961, a: 1 },
-  thistle: { r: 0.847059, g: 0.74902, b: 0.847059, a: 1 },
-  tomato: { r: 1, g: 0.388235, b: 0.278431, a: 1 },
-  transparent: { r: 1, g: 1, b: 1, a: 0 },
-  turquoise: { r: 0.25098, g: 0.878431, b: 0.815686, a: 1 },
-  violet: { r: 0.933333, g: 0.509804, b: 0.933333, a: 1 },
-  webGray: { r: 0.501961, g: 0.501961, b: 0.501961, a: 1 },
-  webGreen: { r: 0, g: 0.501961, b: 0, a: 1 },
-  webMaroon: { r: 0.501961, g: 0, b: 0, a: 1 },
-  webPurple: { r: 0.501961, g: 0, b: 0.501961, a: 1 },
-  wheat: { r: 0.960784, g: 0.870588, b: 0.701961, a: 1 },
-  white: { r: 1, g: 1, b: 1, a: 1 },
-  whiteSmoke: { r: 0.960784, g: 0.960784, b: 0.960784, a: 1 },
-  yellow: { r: 1, g: 1, b: 0, a: 1 },
-  yellowGreen: { r: 0.603922, g: 0.803922, b: 0.196078, a: 1 }
-});
-// src/math/mod.ts
-var exports_mod4 = {};
-__export(exports_mod4, {
-  transformPoint: () => transformPoint,
-  rad2deg: () => rad2deg,
-  deg2rad: () => deg2rad,
-  createViewMatrix: () => createViewMatrix,
-  createProjectionMatrix: () => createProjectionMatrix,
-  createModelMatrix: () => createModelMatrix,
-  convertWorldToScreen: () => convertWorldToScreen,
-  convertScreenToWorld: () => convertScreenToWorld
-});
-// src/scene/mod.ts
-var exports_mod5 = {};
-__export(exports_mod5, {
-  TextNode: () => TextNode,
-  SceneNode: () => SceneNode,
-  QuadNode: () => QuadNode,
-  DEFAULT_FONT_SIZE: () => DEFAULT_FONT_SIZE,
-  Camera: () => Camera
-});
-// src/screen/mod.ts
-var exports_mod6 = {};
-// src/text/mod.ts
-var exports_mod7 = {};
-__export(exports_mod7, {
-  TextShader: () => WebGPUTextShader
-});
-// src/textures/mod.ts
-var exports_mod8 = {};
-__export(exports_mod8, {
-  Bundles: () => Bundles
-});
 export {
-  exports_mod2 as Utils,
+  Utils,
   Toodle,
-  exports_mod8 as Textures,
-  exports_mod7 as Text,
-  exports_mod6 as Screen,
-  exports_mod5 as Scene,
-  exports_mod4 as GfxMath,
+  Textures,
+  Text,
+  Screen,
+  Scene,
+  GfxMath,
   DEFAULT_LIMITS,
-  exports_mod3 as Colors,
-  Bundles,
-  exports_mod as Backends,
-  AssetManager
+  Colors,
+  Bundles2 as Bundles,
+  Backends,
+  AssetManager2 as AssetManager
 };
 
-//# debugId=8FA83A386B693B6064756E2164756E21
+//# debugId=F5D1111C12CFF04864756E2164756E21
 //# sourceMappingURL=mod.js.map