@bloopjs/toodle 0.1.2 → 0.1.4

package/dist/mod.js

@@ -17219,150 +17219,414 @@ class WebGPUBackend {
     return this.#renderPass;
   }
 }
-// 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
-  };
+// 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);
+  }
 }
-function transformPoint(point, matrix) {
-  const result = vec2.transformMat3([point.x, point.y], matrix);
-  return {
-    x: result[0],
-    y: result[1]
-  };
+
+// src/utils/error.ts
+var warnings = new Map;
+function warnOnce(key, msg) {
+  if (warnings.has(key)) {
+    return;
+  }
+  warnings.set(key, true);
+  console.warn(msg ?? key);
 }
 
-// src/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);
+// 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);
+      }
     }
-    for (const kid of node.kids) {
-      this.enqueue(kid);
+    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;
     }
   }
-  flush() {
-    this.nodes = [];
-    this.layers = [];
-    this.pipelines = [];
+  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;
   }
-  #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);
+  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 layer;
+    return char.xadvance;
   }
-  #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);
+  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;
     }
-    return pipeline;
   }
 }
 
-// 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;
-  }
-  set zoom(value) {
-    this.#zoom = value;
-    this.setDirty();
-  }
-  get rotation() {
-    return rad2deg(this.#rotation);
+// 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 = [];
   }
-  set rotation(value) {
-    this.#rotation = deg2rad(value);
-    this.setDirty();
+  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;
+    }
   }
-  get rotationRadians() {
-    return this.#rotation;
+  if (debug && debugData) {
+    console.table(debugData);
   }
-  set rotationRadians(value) {
-    this.#rotation = value;
-    this.setDirty();
+}
+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;
+      }
+    }
   }
-  get x() {
-    return this.#position.x;
+  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 y() {
-    return this.#position.y;
+  function flushLine() {
+    lineWidths.push(textOffsetX);
+    line++;
+    maxWidth = Math.max(maxWidth, textOffsetX);
+    textOffsetX = 0;
+    textOffsetY -= font.lineHeight;
   }
-  set x(value) {
-    this.#position.x = 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();
   }
-  set y(value) {
-    this.#position.y = value;
-    this.setDirty();
+}
+function findLargestFontSize(font, text, size, formatting) {
+  if (!formatting.fontSize) {
+    throw new Error("fontSize is required for shrinkToFit");
   }
-  get matrix() {
-    if (this.#isDirty) {
-      this.#isDirty = false;
-      this.#matrix = createViewMatrix(this, this.#matrix);
-    }
-    return this.#matrix;
+  if (!formatting.shrinkToFit) {
+    throw new Error("shrinkToFit is required for findLargestFontSize");
   }
-  setDirty() {
-    this.#isDirty = true;
+  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;
+    }
   }
+  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
@@ -17706,1430 +17970,1533 @@ function reviver(key, value) {
   return value;
 }
 
-// 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/scene/TextNode.ts
+var DEFAULT_FONT_SIZE = 14;
 
-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;
+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.`);
     }
-    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");
+    const em2px = shader.font.lineHeight / (opts.fontSize ?? DEFAULT_FONT_SIZE);
+    if (!opts.shrinkToFit && !opts.size) {
+      opts.size = { width: width / em2px, height: height / em2px };
     }
-    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;
+    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;
   }
-  get region() {
-    return this.#region;
+  get text() {
+    return this.#text;
   }
-  get writeInstance() {
-    return this.#writeInstance;
+  get formatting() {
+    return this.#formatting;
   }
-  get flipX() {
-    return this.#flip.x === -1;
+  get font() {
+    return this.#font;
   }
-  set flipX(value) {
-    this.#flip.x = value ? -1 : 1;
+  set text(text) {
+    if (!text) {
+      throw new Error("text cannot be empty");
+    }
+    this.#text = text;
     this.setDirty();
   }
-  get flipY() {
-    return this.#flip.y === -1;
+  get tint() {
+    return this.#formatting.color || { r: 1, g: 1, b: 1, a: 1 };
   }
-  set flipY(value) {
-    this.#flip.y = value ? -1 : 1;
+  set tint(tint) {
+    this.#formatting.color = tint;
     this.setDirty();
   }
-  get cropOffset() {
-    return this.#cropOffset;
+  set formatting(formatting) {
+    this.#formatting = formatting;
+    this.setDirty();
   }
-  set cropOffset(value) {
-    this.#cropOffset = value;
+}
+
+// src/backends/webgl2/glsl/text.glsl.ts
+var vertexShader2 = `#version 300 es
+precision highp float;
+
+// Engine uniforms
+uniform mat3 u_viewProjection;
+
+// Per-text-block uniforms
+uniform mat3 u_textTransform;
+uniform vec4 u_textColor;
+uniform float u_fontSize;
+uniform float u_blockWidth;
+uniform float u_blockHeight;
+uniform float u_lineHeight;
+
+// Character data texture (RGBA32F, 2 texels per character)
+// Texel 0: texOffset.xy, texExtent.xy
+// Texel 1: size.xy, offset.xy
+uniform sampler2D u_charData;
+
+// Text buffer texture (RGBA32F, 1 texel per glyph)
+// Each texel: xy = glyph position, z = char index
+uniform sampler2D u_textBuffer;
+
+// Outputs to fragment shader
+out vec2 v_texcoord;
+
+// Quad vertex positions for a character (matches WGSL)
+const vec2 pos[4] = vec2[4](
+  vec2(0.0, -1.0),
+  vec2(1.0, -1.0),
+  vec2(0.0,  0.0),
+  vec2(1.0,  0.0)
+);
+
+void main() {
+  // gl_VertexID gives us 0-3 for the quad vertices
+  // gl_InstanceID gives us which glyph we're rendering
+  int vertexIndex = gl_VertexID;
+  int glyphIndex = gl_InstanceID;
+
+  // Fetch glyph data from text buffer texture
+  vec4 glyphData = texelFetch(u_textBuffer, ivec2(glyphIndex, 0), 0);
+  vec2 glyphPos = glyphData.xy;
+  int charIndex = int(glyphData.z);
+
+  // Fetch character metrics (2 texels per char)
+  // Texel 0: texOffset.x, texOffset.y, texExtent.x, texExtent.y
+  // Texel 1: size.x, size.y, offset.x, offset.y
+  vec4 charData0 = texelFetch(u_charData, ivec2(charIndex * 2, 0), 0);
+  vec4 charData1 = texelFetch(u_charData, ivec2(charIndex * 2 + 1, 0), 0);
+
+  vec2 texOffset = charData0.xy;
+  vec2 texExtent = charData0.zw;
+  vec2 charSize = charData1.xy;
+  vec2 charOffset = charData1.zw;
+
+  // Center text vertically; origin is mid-height
+  vec2 offset = vec2(0.0, -u_blockHeight / 2.0);
+
+  // Glyph position in ems (quad pos * size + per-char offset)
+  vec2 emPos = pos[vertexIndex] * charSize + charOffset + glyphPos - offset;
+  vec2 charPos = emPos * (u_fontSize / u_lineHeight);
+
+  // Transform position through model and view-projection matrices
+  vec3 worldPos = u_textTransform * vec3(charPos, 1.0);
+  vec3 clipPos = u_viewProjection * worldPos;
+
+  gl_Position = vec4(clipPos.xy, 0.0, 1.0);
+
+  // Calculate texture coordinates
+  v_texcoord = pos[vertexIndex] * vec2(1.0, -1.0);
+  v_texcoord *= texExtent;
+  v_texcoord += texOffset;
+}
+`;
+var fragmentShader2 = `#version 300 es
+precision highp float;
+
+// Font texture (MSDF atlas)
+uniform sampler2D u_fontTexture;
+
+// Text color
+uniform vec4 u_textColor;
+
+// Input from vertex shader
+in vec2 v_texcoord;
+
+// Output color
+out vec4 fragColor;
+
+// Signed distance function sampling for MSDF font rendering
+// Median of three: max(min(r,g), min(max(r,g), b))
+float sampleMsdf(vec2 texcoord) {
+  vec4 c = texture(u_fontTexture, texcoord);
+  return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
+}
+
+void main() {
+  // pxRange (AKA distanceRange) comes from the msdfgen tool
+  float pxRange = 4.0;
+  vec2 texSize = vec2(textureSize(u_fontTexture, 0));
+
+  // Anti-aliasing technique by Paul Houx
+  // https://github.com/Chlumsky/msdfgen/issues/22#issuecomment-234958005
+  float dx = texSize.x * length(vec2(dFdx(v_texcoord.x), dFdy(v_texcoord.x)));
+  float dy = texSize.y * length(vec2(dFdx(v_texcoord.y), dFdy(v_texcoord.y)));
+
+  float toPixels = pxRange * inversesqrt(dx * dx + dy * dy);
+  float sigDist = sampleMsdf(v_texcoord) - 0.5;
+  float pxDist = sigDist * toPixels;
+
+  float edgeWidth = 0.5;
+  float alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
+
+  if (alpha < 0.001) {
+    discard;
   }
-  get textureId() {
-    return this.#textureId;
+
+  fragColor = vec4(u_textColor.rgb, u_textColor.a * alpha);
+}
+`;
+
+// src/backends/webgl2/WebGLTextShader.ts
+class WebGLTextShader {
+  label = "text";
+  font;
+  maxCharCount;
+  #backend;
+  #pipeline;
+  #program;
+  #vao;
+  #cpuTextBuffer;
+  #cachedUniform = null;
+  #uViewProjection = null;
+  #uTextTransform = null;
+  #uTextColor = null;
+  #uFontSize = null;
+  #uBlockWidth = null;
+  #uBlockHeight = null;
+  #uLineHeight = null;
+  #uCharData = null;
+  #uTextBuffer = null;
+  #uFontTexture = null;
+  constructor(backend, pipeline) {
+    this.#backend = backend;
+    this.#pipeline = pipeline;
+    this.font = pipeline.font;
+    this.maxCharCount = pipeline.maxCharCount;
+    const gl = backend.gl;
+    const vs = this.#compileShader(gl, gl.VERTEX_SHADER, vertexShader2);
+    const fs = this.#compileShader(gl, gl.FRAGMENT_SHADER, fragmentShader2);
+    const program = gl.createProgram();
+    assert(program, "Failed to create WebGL program");
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      const info = gl.getProgramInfoLog(program);
+      throw new Error(`Failed to link text shader program: ${info}`);
+    }
+    this.#program = program;
+    this.#uViewProjection = gl.getUniformLocation(program, "u_viewProjection");
+    this.#uTextTransform = gl.getUniformLocation(program, "u_textTransform");
+    this.#uTextColor = gl.getUniformLocation(program, "u_textColor");
+    this.#uFontSize = gl.getUniformLocation(program, "u_fontSize");
+    this.#uBlockWidth = gl.getUniformLocation(program, "u_blockWidth");
+    this.#uBlockHeight = gl.getUniformLocation(program, "u_blockHeight");
+    this.#uLineHeight = gl.getUniformLocation(program, "u_lineHeight");
+    this.#uCharData = gl.getUniformLocation(program, "u_charData");
+    this.#uTextBuffer = gl.getUniformLocation(program, "u_textBuffer");
+    this.#uFontTexture = gl.getUniformLocation(program, "u_fontTexture");
+    const vao = gl.createVertexArray();
+    assert(vao, "Failed to create WebGL VAO");
+    this.#vao = vao;
+    this.#cpuTextBuffer = new Float32Array(this.maxCharCount * 4);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
   }
-  get isPrimitive() {
-    return this.#textureId === PRIMITIVE_TEXTURE;
+  startFrame(uniform) {
+    this.#cachedUniform = uniform;
   }
-  get isCircle() {
-    return this.#atlasCoords.atlasIndex === CIRCLE_INDEX;
+  processBatch(nodes) {
+    if (nodes.length === 0)
+      return 0;
+    const gl = this.#backend.gl;
+    const uniform = this.#cachedUniform;
+    if (!uniform) {
+      throw new Error("Tried to process batch but engine uniform is not set");
+    }
+    gl.useProgram(this.#program);
+    gl.bindVertexArray(this.#vao);
+    if (this.#uViewProjection) {
+      const m3 = uniform.viewProjectionMatrix;
+      const mat3x3 = new Float32Array([
+        m3[0],
+        m3[1],
+        m3[2],
+        m3[4],
+        m3[5],
+        m3[6],
+        m3[8],
+        m3[9],
+        m3[10]
+      ]);
+      gl.uniformMatrix3fv(this.#uViewProjection, false, mat3x3);
+    }
+    if (this.#uLineHeight) {
+      gl.uniform1f(this.#uLineHeight, this.#pipeline.lineHeight);
+    }
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.fontTexture);
+    if (this.#uFontTexture) {
+      gl.uniform1i(this.#uFontTexture, 0);
+    }
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.charDataTexture);
+    if (this.#uCharData) {
+      gl.uniform1i(this.#uCharData, 1);
+    }
+    gl.activeTexture(gl.TEXTURE2);
+    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.textBufferTexture);
+    if (this.#uTextBuffer) {
+      gl.uniform1i(this.#uTextBuffer, 2);
+    }
+    for (const node of nodes) {
+      if (!(node instanceof TextNode)) {
+        console.error(node);
+        throw new Error(`Tried to use WebGLTextShader on something that isn't a TextNode: ${node}`);
+      }
+      const text = node.text;
+      const formatting = node.formatting;
+      const measurements = measureText(this.font, text, formatting.wordWrap);
+      const size = node.size ?? measurements;
+      const fontSize = formatting.shrinkToFit ? findLargestFontSize(this.font, text, size, formatting) : formatting.fontSize;
+      const actualFontSize = fontSize || DEFAULT_FONT_SIZE;
+      shapeText(this.font, text, size, actualFontSize, formatting, this.#cpuTextBuffer, 0);
+      this.#pipeline.updateTextBuffer(this.#cpuTextBuffer, measurements.printedCharCount);
+      if (this.#uTextTransform) {
+        const m3 = node.matrix;
+        const mat3x3 = new Float32Array([
+          m3[0],
+          m3[1],
+          m3[2],
+          m3[4],
+          m3[5],
+          m3[6],
+          m3[8],
+          m3[9],
+          m3[10]
+        ]);
+        gl.uniformMatrix3fv(this.#uTextTransform, false, mat3x3);
+      }
+      if (this.#uTextColor) {
+        const tint = node.tint;
+        gl.uniform4f(this.#uTextColor, tint.r, tint.g, tint.b, tint.a);
+      }
+      if (this.#uFontSize) {
+        gl.uniform1f(this.#uFontSize, actualFontSize);
+      }
+      if (this.#uBlockWidth) {
+        gl.uniform1f(this.#uBlockWidth, formatting.align === "center" ? 0 : measurements.width);
+      }
+      if (this.#uBlockHeight) {
+        gl.uniform1f(this.#uBlockHeight, measurements.height);
+      }
+      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, measurements.printedCharCount);
+    }
+    gl.bindVertexArray(null);
+    return nodes.length;
   }
-  extra = {
-    setAtlasCoords: (value) => {
-      this.#atlasCoords = value;
-    },
-    cropRatio: () => {
-      return this.#cropRatio;
-    },
-    atlasSize: () => {
-      return this.#atlasSize;
+  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}`);
     }
-  };
-}
-function writeQuadInstance(node, array, offset) {
-  if (!(node instanceof QuadNode)) {
-    throw new Error("QuadNode.writeInstance can only be called on QuadNodes");
+    return shader;
   }
-  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);
+  destroy() {
+    const gl = this.#backend.gl;
+    gl.deleteProgram(this.#program);
+    gl.deleteVertexArray(this.#vao);
+    this.#pipeline.destroy();
   }
-  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/scene/JumboQuadNode.ts
-var MAT3_SIZE = 12;
-var VEC4F_SIZE = 4;
+// src/backends/webgpu/wgsl/text.wgsl.ts
+var text_wgsl_default = `
+// Adapted from: https://webgpu.github.io/webgpu-samples/?sample=textRenderingMsdf
 
-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;
-  }
-}
-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;
-}
+// Quad vertex positions for a character
+const pos = array(
+  vec2f(0, -1),
+  vec2f(1, -1),
+  vec2f(0,  0),
+  vec2f(1,  0),
+);
 
-// 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);
-}
+// 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),
+);
 
-// 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;
-    }
-  }
-}
+// Vertex input from GPU
+struct VertexInput {
+  @builtin(vertex_index) vertex: u32,
+  @builtin(instance_index) instance: u32,
+};
 
-// 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;
-    }
-  }
-  if (debug && debugData) {
-    console.table(debugData);
-  }
-}
-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;
-      }
-    }
-  }
-  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();
-    }
-    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;
-    }
-  }
-  return low;
-}
+// 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,
+};
 
-// src/text/TextNode.ts
-var DEFAULT_FONT_SIZE = 14;
+// 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
+};
 
-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.`);
-    }
-    const em2px = shader.font.lineHeight / (opts.fontSize ?? DEFAULT_FONT_SIZE);
-    if (!opts.shrinkToFit && !opts.size) {
-      opts.size = { width: width / em2px, height: height / em2px };
-    }
-    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;
-  }
-  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");
-    }
-    this.#text = text;
-    this.setDirty();
-  }
-  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();
-  }
-}
+// 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
+};
 
-// src/backends/webgpu/wgsl/pixel-scraping.wgsl.ts
-var pixel_scraping_wgsl_default = `
-// ==============================
-// === BOUNDING BOX PASS =======
-// ==============================
+// 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
 
-// Input texture from which to compute the non-transparent bounding box
-@group(0) @binding(0)
-var input_texture: texture_2d<f32>;
+// Global uniforms
+@group(2) @binding(0) var<uniform> viewProjectionMatrix: mat3x3f;
 
-// Atomic bounding box storage structure
-struct bounding_box_atomic {
-    min_x: atomic<u32>,
-    min_y: atomic<u32>,
-    max_x: atomic<u32>,
-    max_y: atomic<u32>,
-};
+// 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;
 
-// Storage buffer to hold atomic bounding box updates
-@group(0) @binding(1)
-var<storage, read_write> bounds: bounding_box_atomic;
+  let text = texts[textIndex];
+  let textElement = textBuffer[u32(text.bufferPosition) + input.instance];
+  let char = chars[u32(textElement.z)];
 
-// Compute shader to find the bounding box of non-transparent pixels
-@compute @workgroup_size(8, 8)
-fn find_bounds(@builtin(global_invocation_id) gid: vec3<u32>) {
-    let size = textureDimensions(input_texture).xy;
-    if (gid.x >= size.x || gid.y >= size.y) {
-        return;
-    }
+  let lineHeight = fontData.x;
+  let textWidth = text.blockWidth;
+  let textHeight = text.blockHeight;
 
-    let pixel = textureLoad(input_texture, vec2<i32>(gid.xy), 0);
-    if (pixel.a > 0.0) {
-        atomicMin(&bounds.min_x, gid.x);
-        atomicMin(&bounds.min_y, gid.y);
-        atomicMax(&bounds.max_x, gid.x);
-        atomicMax(&bounds.max_y, gid.y);
-    }
-}
+  // Center text vertically; origin is mid-height
+  let offset = vec2f(0, -textHeight / 2);
 
-// ==============================
-// === CROP + OUTPUT PASS ======
-// ==============================
+  // 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);
 
-// Input texture from which cropped data is read
-@group(0) @binding(0)
-var input_texture_crop: texture_2d<f32>;
+  var output: VertexOutput;
+  let transformedPosition = viewProjectionMatrix * text.transform * vec3f(charPos, 1);
 
-// Output texture where cropped image is written
-@group(0) @binding(1)
-var output_texture: texture_storage_2d<rgba8unorm, write>;
+  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;
 
-// Bounding box passed in as a uniform (not atomic anymore)
-struct bounding_box_uniform {
-    min_x: u32,
-    min_y: u32,
-    max_x: u32,
-    max_y: u32,
-};
+  // To debug - hardcode quad in bottom right quarter of the screen:
+  // output.position = vec4f(pos[input.vertex], 0, 1);
+}
 
-@group(0) @binding(2)
-var<uniform> bounds_uniform: bounding_box_uniform;
+// 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));
+}
 
-// Struct to store both original and cropped texture dimensions
-struct image_dimensions {
-    original_width: u32,
-    original_height: u32,
-    cropped_width: u32,
-    cropped_height: u32,
-};
+// 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];
 
-// Storage buffer to output the result dimensions
-@group(0) @binding(3)
-var<storage, read_write> dimensions_out: image_dimensions;
+  // pxRange (AKA distanceRange) comes from the msdfgen tool.
+  let pxRange = 4.0;
+  let texSize = vec2f(textureDimensions(fontTexture, 0));
 
-// Compute shader to crop the input texture to the bounding box and output it
-@compute @workgroup_size(8, 8)
-fn crop_and_output(@builtin(global_invocation_id) gid: vec3<u32>) {
-    let size = textureDimensions(input_texture_crop).xy;
+  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 crop_width = bounds_uniform.max_x - bounds_uniform.min_x + 1u;
-    let crop_height = bounds_uniform.max_y - bounds_uniform.min_y + 1u;
+  let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
+  let sigDist = sampleMsdf(input.texcoord) - 0.5;
+  let pxDist = sigDist * toPixels;
 
-    if (gid.x >= crop_width || gid.y >= crop_height) {
-        return;
-    }
+  let edgeWidth = 0.5;
+  let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
 
-    let src_coord = vec2<i32>(
-        i32(bounds_uniform.min_x + gid.x),
-        i32(bounds_uniform.min_y + gid.y)
-    );
+  if (alpha < 0.001) {
+    discard;
+  }
 
-    let dst_coord = vec2<i32>(i32(gid.x), i32(gid.y));
-    let pixel = textureLoad(input_texture_crop, src_coord, 0);
-    textureStore(output_texture, dst_coord, pixel);
+  let msdfColor = vec4f(text.color.rgb, text.color.a * alpha);
+  return msdfColor;
 
-    // Output dimensions from workgroup (0,0) only
-    if (gid.x == 0u && gid.y == 0u) {
-        dimensions_out.original_width = size.x;
-        dimensions_out.original_height = size.y;
-        dimensions_out.cropped_width = crop_width;
-        dimensions_out.cropped_height = crop_height;
+  // Debug options:
+  // return text.color;
+  // return input.debugColor;
+  // return vec4f(1, 0, 1, 1); // hardcoded magenta
+  // return textureSample(fontTexture, fontSampler, input.texcoord);
+}
+`;
+
+// src/backends/webgpu/FontPipeline.ts
+class FontPipeline {
+  pipeline;
+  font;
+  fontBindGroup;
+  maxCharCount;
+  constructor(pipeline, font, fontBindGroup, maxCharCount) {
+    this.pipeline = pipeline;
+    this.font = font;
+    this.fontBindGroup = fontBindGroup;
+    this.maxCharCount = maxCharCount;
+  }
+  static async create(device, font, colorFormat, maxCharCount) {
+    const pipeline = await pipelinePromise(device, colorFormat, font.name);
+    const texture = device.createTexture({
+      label: `MSDF font ${font.name}`,
+      size: [font.imageBitmap.width, font.imageBitmap.height, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    device.queue.copyExternalImageToTexture({ source: font.imageBitmap }, { texture }, [font.imageBitmap.width, font.imageBitmap.height]);
+    const charsGpuBuffer = device.createBuffer({
+      label: `MSDF font ${font.name} character layout buffer`,
+      size: font.charCount * Float32Array.BYTES_PER_ELEMENT * 8,
+      usage: GPUBufferUsage.STORAGE,
+      mappedAtCreation: true
+    });
+    const charsArray = new Float32Array(charsGpuBuffer.getMappedRange());
+    charsArray.set(font.charBuffer, 0);
+    charsGpuBuffer.unmap();
+    const fontDataBuffer = device.createBuffer({
+      label: `MSDF font ${font.name} metadata buffer`,
+      size: Float32Array.BYTES_PER_ELEMENT * 4,
+      usage: GPUBufferUsage.UNIFORM,
+      mappedAtCreation: true
+    });
+    const fontDataArray = new Float32Array(fontDataBuffer.getMappedRange());
+    fontDataArray[0] = font.lineHeight;
+    fontDataBuffer.unmap();
+    const fontBindGroup = device.createBindGroup({
+      layout: pipeline.getBindGroupLayout(0),
+      entries: [
+        {
+          binding: 0,
+          resource: texture.createView()
+        },
+        {
+          binding: 1,
+          resource: device.createSampler(sampler)
+        },
+        {
+          binding: 2,
+          resource: {
+            buffer: charsGpuBuffer
+          }
+        },
+        {
+          binding: 3,
+          resource: {
+            buffer: fontDataBuffer
+          }
+        }
+      ]
+    });
+    return new FontPipeline(pipeline, font, fontBindGroup, maxCharCount);
+  }
+}
+function pipelinePromise(device, colorFormat, label) {
+  const shader = device.createShaderModule({
+    label: `${label} shader`,
+    code: text_wgsl_default
+  });
+  return device.createRenderPipelineAsync({
+    label: `${label} pipeline`,
+    layout: device.createPipelineLayout({
+      bindGroupLayouts: [
+        device.createBindGroupLayout(fontBindGroupLayout),
+        device.createBindGroupLayout(textUniformBindGroupLayout),
+        device.createBindGroupLayout(engineUniformBindGroupLayout)
+      ]
+    }),
+    vertex: {
+      module: shader,
+      entryPoint: "vertexMain"
+    },
+    fragment: {
+      module: shader,
+      entryPoint: "fragmentMain",
+      targets: [
+        {
+          format: colorFormat,
+          blend: {
+            color: {
+              srcFactor: "src-alpha",
+              dstFactor: "one-minus-src-alpha"
+            },
+            alpha: {
+              srcFactor: "one",
+              dstFactor: "one"
+            }
+          }
+        }
+      ]
+    },
+    primitive: {
+      topology: "triangle-strip",
+      stripIndexFormat: "uint32"
     }
+  });
 }
-
-// ==============================
-// === MISSING TEXTURE FILL ====
-// ==============================
-
-// Output texture to draw a fallback checkerboard
-@group(0) @binding(0)
-var checker_texture: texture_storage_2d<rgba8unorm, write>;
-
-// Compute shader to fill a texture with a purple & green checkerboard
-@compute @workgroup_size(8, 8)
-fn missing_texture(@builtin(global_invocation_id) id: vec3<u32>) {
-    let size = textureDimensions(checker_texture);
-    if (id.x >= size.x || id.y >= size.y) {
-        return;
+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: {}
     }
-
-    let checker_size = 25u;
-    let on_color = ((id.x / checker_size + id.y / checker_size) % 2u) == 0u;
-
-    let color = select(
-        vec4<f32>(0.5, 0.0, 0.5, 1.0), // Purple
-        vec4<f32>(0.0, 1.0, 0.0, 1.0), // Green
-        on_color
-    );
-
-    textureStore(checker_texture, vec2<i32>(id.xy), color);
+  ]
+};
+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");
 }
-`;
-
-// src/backends/webgpu/TextureComputeShader.ts
-var BOUNDING_BOX_SIZE = 4 * Uint32Array.BYTES_PER_ELEMENT;
-var WORKGROUP_SIZE = 8;
-var MAX_BOUND = 4294967295;
-var MIN_BOUND = 0;
+var textDescriptorInstanceSize = struct.size;
 
-class TextureComputeShader {
-  #device;
-  #boundingBuffer;
-  #cropPipeline;
-  #boundPipeline;
-  #missingTexturePipeline;
-  constructor(device, cropPipeline, boundPipeline, missingTexturePipeline) {
-    this.#device = device;
-    this.#boundPipeline = boundPipeline;
-    this.#cropPipeline = cropPipeline;
-    this.#missingTexturePipeline = missingTexturePipeline;
-    this.#boundingBuffer = this.#device.createBuffer({
-      size: BOUNDING_BOX_SIZE,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-    });
-  }
-  static create(device) {
-    const pipelines = createPipelines(device, "TextureComputeShader");
-    return new TextureComputeShader(device, pipelines.cropPipeline, pipelines.boundPipeline, pipelines.missingTexturePipeline);
-  }
-  async processTexture(textureWrapper) {
-    const boundsBindGroup = this.#boundsBindGroup(textureWrapper.texture);
-    const commandEncoder = this.#device.createCommandEncoder();
-    const passEncoder = commandEncoder.beginComputePass();
-    const dispatchX = Math.ceil(textureWrapper.texture.width / WORKGROUP_SIZE);
-    const dispatchY = Math.ceil(textureWrapper.texture.height / WORKGROUP_SIZE);
-    const boundsInit = new Uint32Array([
-      MAX_BOUND,
-      MAX_BOUND,
-      MIN_BOUND,
-      MIN_BOUND
-    ]);
-    this.#device.queue.writeBuffer(this.#boundingBuffer, 0, boundsInit.buffer, 0, BOUNDING_BOX_SIZE);
-    passEncoder.setPipeline(this.#boundPipeline);
-    passEncoder.setBindGroup(0, boundsBindGroup);
-    passEncoder.dispatchWorkgroups(dispatchX, dispatchY);
-    passEncoder.end();
-    this.#device.queue.submit([commandEncoder.finish()]);
-    const { texelX, texelY, texelWidth, texelHeight, computeBuffer } = await this.#getBoundingBox();
-    if (texelX === MAX_BOUND || texelY === MAX_BOUND) {
-      return await this.#createMissingTexture(textureWrapper.texture);
-    }
-    const croppedTexture = await this.#cropTexture(texelWidth, texelHeight, computeBuffer, textureWrapper.texture);
-    const leftCrop = texelX;
-    const rightCrop = textureWrapper.originalSize.width - texelX - texelWidth;
-    const topCrop = texelY;
-    const bottomCrop = textureWrapper.originalSize.height - texelY - texelHeight;
-    textureWrapper = {
-      texture: croppedTexture,
-      cropOffset: { x: leftCrop - rightCrop, y: bottomCrop - topCrop },
-      originalSize: textureWrapper.originalSize
-    };
-    return textureWrapper;
-  }
-  async#getBoundingBox() {
-    const readBuffer = this.#device.createBuffer({
-      label: "AABB Compute Buffer",
-      size: BOUNDING_BOX_SIZE,
-      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+class WebGPUTextShader {
+  label = "text";
+  #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
     });
-    const copyEncoder = this.#device.createCommandEncoder();
-    copyEncoder.copyBufferToBuffer(this.#boundingBuffer, 0, readBuffer, 0, BOUNDING_BOX_SIZE);
-    this.#device.queue.submit([copyEncoder.finish()]);
-    await readBuffer.mapAsync(GPUMapMode.READ);
-    const computeBuffer = new Uint32Array(readBuffer.getMappedRange().slice(0));
-    readBuffer.unmap();
-    const [minX, minY, maxX, maxY] = computeBuffer;
-    return {
-      texelX: minX,
-      texelY: minY,
-      texelWidth: maxX - minX + 1,
-      texelHeight: maxY - minY + 1,
-      computeBuffer
-    };
-  }
-  async#cropTexture(croppedWidth, croppedHeight, computeBuffer, inputTexture) {
-    const boundsUniform = this.#device.createBuffer({
-      label: "Cropping Bounds Uniform Buffer",
-      size: BOUNDING_BOX_SIZE,
+    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.#device.queue.writeBuffer(boundsUniform, 0, computeBuffer);
-    const outputTexture = this.#device.createTexture({
-      label: "Cropped Texture",
-      size: [croppedWidth, croppedHeight],
-      format: "rgba8unorm",
-      usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC
-    });
-    const dimensionsOutBuffer = this.#device.createBuffer({
-      label: "Cropping Dimensions Output Buffer",
-      size: BOUNDING_BOX_SIZE,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-    });
-    const bindGroup = this.#croppingBindGroup(inputTexture, outputTexture, boundsUniform, dimensionsOutBuffer);
-    const encoder = this.#device.createCommandEncoder();
-    const pass = encoder.beginComputePass();
-    pass.setPipeline(this.#cropPipeline);
-    pass.setBindGroup(0, bindGroup);
-    pass.dispatchWorkgroups(Math.ceil(croppedWidth / WORKGROUP_SIZE), Math.ceil(croppedHeight / WORKGROUP_SIZE));
-    pass.end();
-    this.#device.queue.submit([encoder.finish()]);
-    return outputTexture;
-  }
-  async#createMissingTexture(inputTexture) {
-    const placeholder = this.#device.createTexture({
-      label: "Missing Placeholder Texture",
-      size: [inputTexture.width, inputTexture.height],
-      format: "rgba8unorm",
-      usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING
-    });
-    const encoder = this.#device.createCommandEncoder();
-    const pass = encoder.beginComputePass();
-    pass.setPipeline(this.#missingTexturePipeline);
-    pass.setBindGroup(0, this.#missingTextureBindGroup(placeholder));
-    pass.dispatchWorkgroups(placeholder.width / 8, placeholder.height / 8);
-    pass.end();
-    this.#device.queue.submit([encoder.finish()]);
-    return {
-      texture: placeholder,
-      cropOffset: { x: 0, y: 0 },
-      originalSize: { width: inputTexture.width, height: inputTexture.height }
-    };
-  }
-  #boundsBindGroup(inputTexture) {
-    return this.#device.createBindGroup({
-      layout: this.#boundPipeline.getBindGroupLayout(0),
+    });
+    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: inputTexture.createView() },
-        { binding: 1, resource: { buffer: this.#boundingBuffer } }
+        {
+          binding: 0,
+          resource: { buffer: this.#descriptorBuffer }
+        },
+        {
+          binding: 1,
+          resource: { buffer: this.#textBlockBuffer }
+        }
       ]
-    });
-  }
-  #croppingBindGroup(inputTexture, outputTexture, boundsUniform, dimensionsOutBuffer) {
-    return this.#device.createBindGroup({
-      layout: this.#cropPipeline.getBindGroupLayout(0),
+    }));
+    const engineUniformsBindGroup = device.createBindGroup({
+      label: "msdf text uniforms bind group",
+      layout: pipeline.pipeline.getBindGroupLayout(2),
       entries: [
-        { binding: 0, resource: inputTexture.createView() },
-        { binding: 1, resource: outputTexture.createView() },
-        { binding: 2, resource: { buffer: boundsUniform } },
-        { binding: 3, resource: { buffer: dimensionsOutBuffer } }
+        {
+          binding: 0,
+          resource: { buffer: this.#engineUniformsBuffer }
+        }
       ]
     });
+    this.#bindGroups.push(engineUniformsBindGroup);
   }
-  #missingTextureBindGroup(outputTexture) {
-    return this.#device.createBindGroup({
-      layout: this.#missingTexturePipeline.getBindGroupLayout(0),
-      entries: [{ binding: 0, resource: outputTexture.createView() }]
-    });
+  startFrame(uniform) {
+    const device = this.#backend.device;
+    device.queue.writeBuffer(this.#engineUniformsBuffer, 0, uniform.viewProjectionMatrix);
+    this.#instanceIndex = 0;
+    this.#textBlockOffset = 0;
   }
-}
-function createPipelines(device, label) {
-  const shader = device.createShaderModule({
-    label: `${label} Shader`,
-    code: pixel_scraping_wgsl_default
-  });
-  const findBoundsBindGroupLayout = device.createBindGroupLayout({
-    label: "Bounds Detection Layout",
-    entries: [
-      {
-        binding: 0,
-        visibility: GPUShaderStage.COMPUTE,
-        texture: { sampleType: "float", viewDimension: "2d" }
-      },
-      {
-        binding: 1,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "storage" }
-      }
-    ]
-  });
-  const cropBindGroupLayout = device.createBindGroupLayout({
-    label: "Cropping Layout",
-    entries: [
-      { binding: 0, visibility: GPUShaderStage.COMPUTE, texture: {} },
-      {
-        binding: 1,
-        visibility: GPUShaderStage.COMPUTE,
-        storageTexture: {
-          access: "write-only",
-          format: "rgba8unorm",
-          viewDimension: "2d"
-        }
-      },
-      {
-        binding: 2,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "uniform" }
-      },
-      {
-        binding: 3,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "storage" }
-      }
-    ]
-  });
-  const missingTextureBindGroupLayout = device.createBindGroupLayout({
-    label: "Missing Texture Layout",
-    entries: [
-      {
-        binding: 0,
-        visibility: GPUShaderStage.COMPUTE,
-        storageTexture: {
-          access: "write-only",
-          format: "rgba8unorm",
-          viewDimension: "2d"
-        }
+  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}`);
       }
-    ]
-  });
-  return {
-    boundPipeline: device.createComputePipeline({
-      label: `${label} - Find Bounds Pipeline`,
-      layout: device.createPipelineLayout({
-        bindGroupLayouts: [findBoundsBindGroupLayout]
-      }),
-      compute: { module: shader, entryPoint: "find_bounds" }
-    }),
-    cropPipeline: device.createComputePipeline({
-      label: `${label} - Crop Pipeline`,
-      layout: device.createPipelineLayout({
-        bindGroupLayouts: [cropBindGroupLayout]
-      }),
-      compute: { module: shader, entryPoint: "crop_and_output" }
-    }),
-    missingTexturePipeline: device.createComputePipeline({
-      label: `${label} - Missing Texture Pipeline`,
-      layout: device.createPipelineLayout({
-        bindGroupLayouts: [missingTextureBindGroupLayout]
-      }),
-      compute: { module: shader, entryPoint: "missing_texture" }
-    })
-  };
-}
-
-// src/text/text.wgsl.ts
-var text_wgsl_default = `
-// Adapted from: https://webgpu.github.io/webgpu-samples/?sample=textRenderingMsdf
-
-// Quad vertex positions for a character
-const pos = array(
-  vec2f(0, -1),
-  vec2f(1, -1),
-  vec2f(0,  0),
-  vec2f(1,  0),
-);
-
-// Debug colors for visualization
-const debugColors = array(
-  vec4f(1, 0, 0, 1),
-  vec4f(0, 1, 0, 1),
-  vec4f(0, 0, 1, 1),
-  vec4f(1, 1, 1, 1),
-);
-
-// Vertex input from GPU
-struct VertexInput {
-  @builtin(vertex_index) vertex: u32,
-  @builtin(instance_index) instance: u32,
-};
-
-// Output from vertex shader to fragment shader
-struct VertexOutput {
-  @builtin(position) position: vec4f,
-  @location(0) texcoord: vec2f,
-  @location(1) debugColor: vec4f,
-  @location(2) @interpolate(flat) instanceIndex: u32,
-};
-
-// Metadata for a single character glyph
-struct Char {
-  texOffset: vec2f, // Offset to top-left in MSDF texture (pixels)
-  texExtent: vec2f, // Size in texture (pixels)
-  size: vec2f,      // Glyph size in ems
-  offset: vec2f,    // Position offset in ems
-};
-
-// Metadata for a text block
-struct TextBlockDescriptor {
-  transform: mat3x3f,   // Text transform matrix (model matrix)
-  color: vec4f,         // Text color
-  fontSize: f32,        // Font size
-  blockWidth: f32,      // Total width of text block
-  blockHeight: f32,     // Total height of text block
-  bufferPosition: f32   // Index and length in textBuffer
-};
-
-// Font bindings
-@group(0) @binding(0) var fontTexture: texture_2d<f32>;
-@group(0) @binding(1) var fontSampler: sampler;
-@group(0) @binding(2) var<storage> chars: array<Char>;
-@group(0) @binding(3) var<uniform> fontData: vec4f; // Contains line height (x)
-
-// Text bindings
-@group(1) @binding(0) var<storage> texts: array<TextBlockDescriptor>;
-@group(1) @binding(1) var<storage> textBuffer: array<vec4f>; // Each vec4: xy = glyph pos, z = char index
-
-// Global uniforms
-@group(2) @binding(0) var<uniform> viewProjectionMatrix: mat3x3f;
-
-// Vertex shader
-@vertex
-fn vertexMain(input: VertexInput) -> VertexOutput {
-  // Because the instance index is used for character indexing, we are
-  // overloading the vertex index to store the instance of the text metadata.
-  //
-  // I.e...
-  // Vertex 0-4 = Instance 0, Vertex 0-4
-  // Vertex 4-8 = Instance 1, Vertex 0-4
-  // Vertex 8-12 = Instance 2, Vertex 0-4
-  let vertexIndex = input.vertex % 4;
-  let textIndex = input.vertex / 4;
-
-  let text = texts[textIndex];
-  let textElement = textBuffer[u32(text.bufferPosition) + input.instance];
-  let char = chars[u32(textElement.z)];
-
-  let lineHeight = fontData.x;
-  let textWidth = text.blockWidth;
-  let textHeight = text.blockHeight;
-
-  // Center text vertically; origin is mid-height
-  let offset = vec2f(0, -textHeight / 2);
-
-  // Glyph position in ems (quad pos * size + per-char offset)
-  let emPos = pos[vertexIndex] * char.size + char.offset + textElement.xy - offset;
-  let charPos = emPos * (text.fontSize / lineHeight);
-
-  var output: VertexOutput;
-  let transformedPosition = viewProjectionMatrix * text.transform * vec3f(charPos, 1);
-
-  output.position = vec4f(transformedPosition, 1);
-  output.texcoord = pos[vertexIndex] * vec2f(1, -1);
-  output.texcoord *= char.texExtent;
-  output.texcoord += char.texOffset;
-  output.debugColor = debugColors[vertexIndex];
-  output.instanceIndex = textIndex;
-  return output;
-
-  // To debug - hardcode quad in bottom right quarter of the screen:
-  // output.position = vec4f(pos[input.vertex], 0, 1);
+      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;
+  }
 }
 
-// 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/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);
+    }
+    return pipeline;
+  }
 }
 
-// Fragment shader
-// Anti-aliasing technique by Paul Houx
-// more details here:
-// https://github.com/Chlumsky/msdfgen/issues/22#issuecomment-234958005
-@fragment
-fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
-  let text = texts[input.instanceIndex];
-
-  // pxRange (AKA distanceRange) comes from the msdfgen tool.
-  let pxRange = 4.0;
-  let texSize = vec2f(textureDimensions(fontTexture, 0));
-
-  let dx = texSize.x * length(vec2f(dpdxFine(input.texcoord.x), dpdyFine(input.texcoord.x)));
-  let dy = texSize.y * length(vec2f(dpdxFine(input.texcoord.y), dpdyFine(input.texcoord.y)));
-
-  let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
-  let sigDist = sampleMsdf(input.texcoord) - 0.5;
-  let pxDist = sigDist * toPixels;
-
-  let edgeWidth = 0.5;
-  let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
-
-  if (alpha < 0.001) {
-    discard;
+// src/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();
+  }
+  get matrix() {
+    if (this.#isDirty) {
+      this.#isDirty = false;
+      this.#matrix = createViewMatrix(this, this.#matrix);
+    }
+    return this.#matrix;
+  }
+  setDirty() {
+    this.#isDirty = true;
   }
-
-  let msdfColor = vec4f(text.color.rgb, text.color.a * alpha);
-  return msdfColor;
-
-  // Debug options:
-  // return text.color;
-  // return input.debugColor;
-  // return vec4f(1, 0, 1, 1); // hardcoded magenta
-  // return textureSample(fontTexture, fontSampler, input.texcoord);
 }
-`;
 
-// src/text/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;
+// 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 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;
   }
-  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);
+  set flipY(value) {
+    this.#flip.y = value ? -1 : 1;
+    this.setDirty();
   }
-}
-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"
+  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;
     },
-    fragment: {
-      module: shader,
-      entryPoint: "fragmentMain",
-      targets: [
-        {
-          format: colorFormat,
-          blend: {
-            color: {
-              srcFactor: "src-alpha",
-              dstFactor: "one-minus-src-alpha"
-            },
-            alpha: {
-              srcFactor: "one",
-              dstFactor: "one"
-            }
-          }
-        }
-      ]
+    cropRatio: () => {
+      return this.#cropRatio;
     },
-    primitive: {
-      topology: "triangle-strip",
-      stripIndexFormat: "uint32"
+    atlasSize: () => {
+      return this.#atlasSize;
     }
-  });
-}
-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: {}
+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/scene/JumboQuadNode.ts
+var MAT3_SIZE = 12;
+var VEC4F_SIZE = 4;
+
+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;
+  }
+}
+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;
+}
+
+// src/backends/webgpu/wgsl/pixel-scraping.wgsl.ts
+var pixel_scraping_wgsl_default = `
+// ==============================
+// === BOUNDING BOX PASS =======
+// ==============================
+
+// Input texture from which to compute the non-transparent bounding box
+@group(0) @binding(0)
+var input_texture: texture_2d<f32>;
+
+// Atomic bounding box storage structure
+struct bounding_box_atomic {
+    min_x: atomic<u32>,
+    min_y: atomic<u32>,
+    max_x: atomic<u32>,
+    max_y: atomic<u32>,
 };
-var engineUniformBindGroupLayout = {
-  label: "Uniform bind group",
-  entries: [
-    {
-      binding: 0,
-      visibility: GPUShaderStage.VERTEX,
-      buffer: {}
+
+// Storage buffer to hold atomic bounding box updates
+@group(0) @binding(1)
+var<storage, read_write> bounds: bounding_box_atomic;
+
+// Compute shader to find the bounding box of non-transparent pixels
+@compute @workgroup_size(8, 8)
+fn find_bounds(@builtin(global_invocation_id) gid: vec3<u32>) {
+    let size = textureDimensions(input_texture).xy;
+    if (gid.x >= size.x || gid.y >= size.y) {
+        return;
     }
-  ]
+
+    let pixel = textureLoad(input_texture, vec2<i32>(gid.xy), 0);
+    if (pixel.a > 0.0) {
+        atomicMin(&bounds.min_x, gid.x);
+        atomicMin(&bounds.min_y, gid.y);
+        atomicMax(&bounds.max_x, gid.x);
+        atomicMax(&bounds.max_y, gid.y);
+    }
+}
+
+// ==============================
+// === CROP + OUTPUT PASS ======
+// ==============================
+
+// Input texture from which cropped data is read
+@group(0) @binding(0)
+var input_texture_crop: texture_2d<f32>;
+
+// Output texture where cropped image is written
+@group(0) @binding(1)
+var output_texture: texture_storage_2d<rgba8unorm, write>;
+
+// Bounding box passed in as a uniform (not atomic anymore)
+struct bounding_box_uniform {
+    min_x: u32,
+    min_y: u32,
+    max_x: u32,
+    max_y: u32,
 };
-var sampler = {
-  label: "MSDF text sampler",
-  minFilter: "linear",
-  magFilter: "linear",
-  mipmapFilter: "linear",
-  maxAnisotropy: 16
+
+@group(0) @binding(2)
+var<uniform> bounds_uniform: bounding_box_uniform;
+
+// Struct to store both original and cropped texture dimensions
+struct image_dimensions {
+    original_width: u32,
+    original_height: u32,
+    cropped_width: u32,
+    cropped_height: u32,
 };
-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" }
+
+// Storage buffer to output the result dimensions
+@group(0) @binding(3)
+var<storage, read_write> dimensions_out: image_dimensions;
+
+// Compute shader to crop the input texture to the bounding box and output it
+@compute @workgroup_size(8, 8)
+fn crop_and_output(@builtin(global_invocation_id) gid: vec3<u32>) {
+    let size = textureDimensions(input_texture_crop).xy;
+
+    let crop_width = bounds_uniform.max_x - bounds_uniform.min_x + 1u;
+    let crop_height = bounds_uniform.max_y - bounds_uniform.min_y + 1u;
+
+    if (gid.x >= crop_width || gid.y >= crop_height) {
+        return;
     }
-  ]
-};
 
-// src/text/TextShader.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");
+    let src_coord = vec2<i32>(
+        i32(bounds_uniform.min_x + gid.x),
+        i32(bounds_uniform.min_y + gid.y)
+    );
+
+    let dst_coord = vec2<i32>(i32(gid.x), i32(gid.y));
+    let pixel = textureLoad(input_texture_crop, src_coord, 0);
+    textureStore(output_texture, dst_coord, pixel);
+
+    // Output dimensions from workgroup (0,0) only
+    if (gid.x == 0u && gid.y == 0u) {
+        dimensions_out.original_width = size.x;
+        dimensions_out.original_height = size.y;
+        dimensions_out.cropped_width = crop_width;
+        dimensions_out.cropped_height = crop_height;
+    }
 }
-var textDescriptorInstanceSize = struct.size;
 
-class TextShader {
-  label = "text";
-  #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
+// ==============================
+// === MISSING TEXTURE FILL ====
+// ==============================
+
+// Output texture to draw a fallback checkerboard
+@group(0) @binding(0)
+var checker_texture: texture_storage_2d<rgba8unorm, write>;
+
+// Compute shader to fill a texture with a purple & green checkerboard
+@compute @workgroup_size(8, 8)
+fn missing_texture(@builtin(global_invocation_id) id: vec3<u32>) {
+    let size = textureDimensions(checker_texture);
+    if (id.x >= size.x || id.y >= size.y) {
+        return;
+    }
+
+    let checker_size = 25u;
+    let on_color = ((id.x / checker_size + id.y / checker_size) % 2u) == 0u;
+
+    let color = select(
+        vec4<f32>(0.5, 0.0, 0.5, 1.0), // Purple
+        vec4<f32>(0.0, 1.0, 0.0, 1.0), // Green
+        on_color
+    );
+
+    textureStore(checker_texture, vec2<i32>(id.xy), color);
+}
+`;
+
+// src/backends/webgpu/TextureComputeShader.ts
+var BOUNDING_BOX_SIZE = 4 * Uint32Array.BYTES_PER_ELEMENT;
+var WORKGROUP_SIZE = 8;
+var MAX_BOUND = 4294967295;
+var MIN_BOUND = 0;
+
+class TextureComputeShader {
+  #device;
+  #boundingBuffer;
+  #cropPipeline;
+  #boundPipeline;
+  #missingTexturePipeline;
+  constructor(device, cropPipeline, boundPipeline, missingTexturePipeline) {
+    this.#device = device;
+    this.#boundPipeline = boundPipeline;
+    this.#cropPipeline = cropPipeline;
+    this.#missingTexturePipeline = missingTexturePipeline;
+    this.#boundingBuffer = this.#device.createBuffer({
+      size: BOUNDING_BOX_SIZE,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
+    });
+  }
+  static create(device) {
+    const pipelines = createPipelines(device, "TextureComputeShader");
+    return new TextureComputeShader(device, pipelines.cropPipeline, pipelines.boundPipeline, pipelines.missingTexturePipeline);
+  }
+  async processTexture(textureWrapper) {
+    const boundsBindGroup = this.#boundsBindGroup(textureWrapper.texture);
+    const commandEncoder = this.#device.createCommandEncoder();
+    const passEncoder = commandEncoder.beginComputePass();
+    const dispatchX = Math.ceil(textureWrapper.texture.width / WORKGROUP_SIZE);
+    const dispatchY = Math.ceil(textureWrapper.texture.height / WORKGROUP_SIZE);
+    const boundsInit = new Uint32Array([
+      MAX_BOUND,
+      MAX_BOUND,
+      MIN_BOUND,
+      MIN_BOUND
+    ]);
+    this.#device.queue.writeBuffer(this.#boundingBuffer, 0, boundsInit.buffer, 0, BOUNDING_BOX_SIZE);
+    passEncoder.setPipeline(this.#boundPipeline);
+    passEncoder.setBindGroup(0, boundsBindGroup);
+    passEncoder.dispatchWorkgroups(dispatchX, dispatchY);
+    passEncoder.end();
+    this.#device.queue.submit([commandEncoder.finish()]);
+    const { texelX, texelY, texelWidth, texelHeight, computeBuffer } = await this.#getBoundingBox();
+    if (texelX === MAX_BOUND || texelY === MAX_BOUND) {
+      return await this.#createMissingTexture(textureWrapper.texture);
+    }
+    const croppedTexture = await this.#cropTexture(texelWidth, texelHeight, computeBuffer, textureWrapper.texture);
+    const leftCrop = texelX;
+    const rightCrop = textureWrapper.originalSize.width - texelX - texelWidth;
+    const topCrop = texelY;
+    const bottomCrop = textureWrapper.originalSize.height - texelY - texelHeight;
+    textureWrapper = {
+      texture: croppedTexture,
+      cropOffset: { x: leftCrop - rightCrop, y: bottomCrop - topCrop },
+      originalSize: textureWrapper.originalSize
+    };
+    return textureWrapper;
+  }
+  async#getBoundingBox() {
+    const readBuffer = this.#device.createBuffer({
+      label: "AABB Compute Buffer",
+      size: BOUNDING_BOX_SIZE,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
     });
-    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,
+    const copyEncoder = this.#device.createCommandEncoder();
+    copyEncoder.copyBufferToBuffer(this.#boundingBuffer, 0, readBuffer, 0, BOUNDING_BOX_SIZE);
+    this.#device.queue.submit([copyEncoder.finish()]);
+    await readBuffer.mapAsync(GPUMapMode.READ);
+    const computeBuffer = new Uint32Array(readBuffer.getMappedRange().slice(0));
+    readBuffer.unmap();
+    const [minX, minY, maxX, maxY] = computeBuffer;
+    return {
+      texelX: minX,
+      texelY: minY,
+      texelWidth: maxX - minX + 1,
+      texelHeight: maxY - minY + 1,
+      computeBuffer
+    };
+  }
+  async#cropTexture(croppedWidth, croppedHeight, computeBuffer, inputTexture) {
+    const boundsUniform = this.#device.createBuffer({
+      label: "Cropping Bounds Uniform Buffer",
+      size: BOUNDING_BOX_SIZE,
       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.#device.queue.writeBuffer(boundsUniform, 0, computeBuffer);
+    const outputTexture = this.#device.createTexture({
+      label: "Cropped Texture",
+      size: [croppedWidth, croppedHeight],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC
     });
-    this.#bindGroups.push(pipeline.fontBindGroup);
-    this.#bindGroups.push(device.createBindGroup({
-      label: "msdf text bind group",
-      layout: pipeline.pipeline.getBindGroupLayout(1),
+    const dimensionsOutBuffer = this.#device.createBuffer({
+      label: "Cropping Dimensions Output Buffer",
+      size: BOUNDING_BOX_SIZE,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+    });
+    const bindGroup = this.#croppingBindGroup(inputTexture, outputTexture, boundsUniform, dimensionsOutBuffer);
+    const encoder = this.#device.createCommandEncoder();
+    const pass = encoder.beginComputePass();
+    pass.setPipeline(this.#cropPipeline);
+    pass.setBindGroup(0, bindGroup);
+    pass.dispatchWorkgroups(Math.ceil(croppedWidth / WORKGROUP_SIZE), Math.ceil(croppedHeight / WORKGROUP_SIZE));
+    pass.end();
+    this.#device.queue.submit([encoder.finish()]);
+    return outputTexture;
+  }
+  async#createMissingTexture(inputTexture) {
+    const placeholder = this.#device.createTexture({
+      label: "Missing Placeholder Texture",
+      size: [inputTexture.width, inputTexture.height],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING
+    });
+    const encoder = this.#device.createCommandEncoder();
+    const pass = encoder.beginComputePass();
+    pass.setPipeline(this.#missingTexturePipeline);
+    pass.setBindGroup(0, this.#missingTextureBindGroup(placeholder));
+    pass.dispatchWorkgroups(placeholder.width / 8, placeholder.height / 8);
+    pass.end();
+    this.#device.queue.submit([encoder.finish()]);
+    return {
+      texture: placeholder,
+      cropOffset: { x: 0, y: 0 },
+      originalSize: { width: inputTexture.width, height: inputTexture.height }
+    };
+  }
+  #boundsBindGroup(inputTexture) {
+    return this.#device.createBindGroup({
+      layout: this.#boundPipeline.getBindGroupLayout(0),
       entries: [
-        {
-          binding: 0,
-          resource: { buffer: this.#descriptorBuffer }
-        },
-        {
-          binding: 1,
-          resource: { buffer: this.#textBlockBuffer }
-        }
+        { binding: 0, resource: inputTexture.createView() },
+        { binding: 1, resource: { buffer: this.#boundingBuffer } }
       ]
-    }));
-    const engineUniformsBindGroup = device.createBindGroup({
-      label: "msdf text uniforms bind group",
-      layout: pipeline.pipeline.getBindGroupLayout(2),
+    });
+  }
+  #croppingBindGroup(inputTexture, outputTexture, boundsUniform, dimensionsOutBuffer) {
+    return this.#device.createBindGroup({
+      layout: this.#cropPipeline.getBindGroupLayout(0),
       entries: [
-        {
-          binding: 0,
-          resource: { buffer: this.#engineUniformsBuffer }
-        }
+        { binding: 0, resource: inputTexture.createView() },
+        { binding: 1, resource: outputTexture.createView() },
+        { binding: 2, resource: { buffer: boundsUniform } },
+        { binding: 3, resource: { buffer: dimensionsOutBuffer } }
       ]
     });
-    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;
+  #missingTextureBindGroup(outputTexture) {
+    return this.#device.createBindGroup({
+      layout: this.#missingTexturePipeline.getBindGroupLayout(0),
+      entries: [{ binding: 0, resource: outputTexture.createView() }]
+    });
   }
-  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 TextShader on something that isn't a TextNode: ${node}`);
+}
+function createPipelines(device, label) {
+  const shader = device.createShaderModule({
+    label: `${label} Shader`,
+    code: pixel_scraping_wgsl_default
+  });
+  const findBoundsBindGroupLayout = device.createBindGroupLayout({
+    label: "Bounds Detection Layout",
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.COMPUTE,
+        texture: { sampleType: "float", viewDimension: "2d" }
+      },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "storage" }
       }
-      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;
-  }
+    ]
+  });
+  const cropBindGroupLayout = device.createBindGroupLayout({
+    label: "Cropping Layout",
+    entries: [
+      { binding: 0, visibility: GPUShaderStage.COMPUTE, texture: {} },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.COMPUTE,
+        storageTexture: {
+          access: "write-only",
+          format: "rgba8unorm",
+          viewDimension: "2d"
+        }
+      },
+      {
+        binding: 2,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "uniform" }
+      },
+      {
+        binding: 3,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "storage" }
+      }
+    ]
+  });
+  const missingTextureBindGroupLayout = device.createBindGroupLayout({
+    label: "Missing Texture Layout",
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.COMPUTE,
+        storageTexture: {
+          access: "write-only",
+          format: "rgba8unorm",
+          viewDimension: "2d"
+        }
+      }
+    ]
+  });
+  return {
+    boundPipeline: device.createComputePipeline({
+      label: `${label} - Find Bounds Pipeline`,
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [findBoundsBindGroupLayout]
+      }),
+      compute: { module: shader, entryPoint: "find_bounds" }
+    }),
+    cropPipeline: device.createComputePipeline({
+      label: `${label} - Crop Pipeline`,
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [cropBindGroupLayout]
+      }),
+      compute: { module: shader, entryPoint: "crop_and_output" }
+    }),
+    missingTexturePipeline: device.createComputePipeline({
+      label: `${label} - Missing Texture Pipeline`,
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [missingTextureBindGroupLayout]
+      }),
+      compute: { module: shader, entryPoint: "missing_texture" }
+    })
+  };
 }
 
 // src/textures/Bundles.ts
@@ -19697,18 +20064,22 @@ class AssetManager {
     this.bundles.unloadBundle(bundleId);
   }
   async loadFont(id, url, fallbackCharacter = "_") {
-    if (this.#backend.type !== "webgpu") {
-      throw new Error("loadFont is only supported with WebGPU backend. Text rendering is not available in WebGL mode.");
-    }
-    const webgpuBackend = this.#backend;
-    const device = webgpuBackend.device;
-    const presentationFormat = webgpuBackend.presentationFormat;
     const limits = this.#backend.limits;
     const font = await MsdfFont.create(id, url);
     font.fallbackCharacter = fallbackCharacter;
-    const fontPipeline = await FontPipeline.create(device, font, presentationFormat, limits.maxTextLength);
-    const textShader = new TextShader(this.#backend, fontPipeline, font, presentationFormat, limits.instanceCount);
-    this.#fonts.set(id, textShader);
+    if (this.#backend.type === "webgpu") {
+      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);
+      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);
+      this.#fonts.set(id, textShader);
+    }
     return id;
   }
   getFont(id) {
@@ -20394,8 +20765,10 @@ __export(exports_mod4, {
 // 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
@@ -20403,8 +20776,7 @@ var exports_mod6 = {};
 // src/text/mod.ts
 var exports_mod7 = {};
 __export(exports_mod7, {
-  TextShader: () => TextShader,
-  TextNode: () => TextNode
+  TextShader: () => WebGPUTextShader
 });
 // src/textures/mod.ts
 var exports_mod8 = {};
@@ -20426,5 +20798,5 @@ export {
   AssetManager
 };
 
-//# debugId=1537C686BF0E9F8164756E2164756E21
+//# debugId=4A88BA8B6CA05C3D64756E2164756E21
 //# sourceMappingURL=mod.js.map