@bloopjs/toodle 0.1.2 → 0.1.3

package/dist/mod.js

@@ -17219,1917 +17219,1932 @@ 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);
+// src/backends/webgl2/WebGLTextShader.ts
+class WebGLTextShader {
+  label = "text";
+  font;
+  maxCharCount;
+  constructor(font, maxCharCount) {
+    this.font = font;
+    this.maxCharCount = maxCharCount;
+  }
+  startFrame(_uniform) {}
+  processBatch(_nodes) {
+    throw new Error("Text rendering is not supported in WebGL mode. Use WebGPU backend for text rendering.");
+  }
+  endFrame() {}
 }
-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/webgpu/wgsl/text.wgsl.ts
+var text_wgsl_default = `
+// Adapted from: https://webgpu.github.io/webgpu-samples/?sample=textRenderingMsdf
+
+// Quad vertex positions for a character
+const pos = array(
+  vec2f(0, -1),
+  vec2f(1, -1),
+  vec2f(0,  0),
+  vec2f(1,  0),
+);
+
+// Debug colors for visualization
+const debugColors = array(
+  vec4f(1, 0, 0, 1),
+  vec4f(0, 1, 0, 1),
+  vec4f(0, 0, 1, 1),
+  vec4f(1, 1, 1, 1),
+);
+
+// Vertex input from GPU
+struct VertexInput {
+  @builtin(vertex_index) vertex: u32,
+  @builtin(instance_index) instance: u32,
+};
+
+// Output from vertex shader to fragment shader
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f,
+  @location(1) debugColor: vec4f,
+  @location(2) @interpolate(flat) instanceIndex: u32,
+};
+
+// Metadata for a single character glyph
+struct Char {
+  texOffset: vec2f, // Offset to top-left in MSDF texture (pixels)
+  texExtent: vec2f, // Size in texture (pixels)
+  size: vec2f,      // Glyph size in ems
+  offset: vec2f,    // Position offset in ems
+};
+
+// Metadata for a text block
+struct TextBlockDescriptor {
+  transform: mat3x3f,   // Text transform matrix (model matrix)
+  color: vec4f,         // Text color
+  fontSize: f32,        // Font size
+  blockWidth: f32,      // Total width of text block
+  blockHeight: f32,     // Total height of text block
+  bufferPosition: f32   // Index and length in textBuffer
+};
+
+// Font bindings
+@group(0) @binding(0) var fontTexture: texture_2d<f32>;
+@group(0) @binding(1) var fontSampler: sampler;
+@group(0) @binding(2) var<storage> chars: array<Char>;
+@group(0) @binding(3) var<uniform> fontData: vec4f; // Contains line height (x)
+
+// Text bindings
+@group(1) @binding(0) var<storage> texts: array<TextBlockDescriptor>;
+@group(1) @binding(1) var<storage> textBuffer: array<vec4f>; // Each vec4: xy = glyph pos, z = char index
+
+// Global uniforms
+@group(2) @binding(0) var<uniform> viewProjectionMatrix: mat3x3f;
+
+// Vertex shader
+@vertex
+fn vertexMain(input: VertexInput) -> VertexOutput {
+  // Because the instance index is used for character indexing, we are
+  // overloading the vertex index to store the instance of the text metadata.
+  //
+  // I.e...
+  // Vertex 0-4 = Instance 0, Vertex 0-4
+  // Vertex 4-8 = Instance 1, Vertex 0-4
+  // Vertex 8-12 = Instance 2, Vertex 0-4
+  let vertexIndex = input.vertex % 4;
+  let textIndex = input.vertex / 4;
+
+  let text = texts[textIndex];
+  let textElement = textBuffer[u32(text.bufferPosition) + input.instance];
+  let char = chars[u32(textElement.z)];
+
+  let lineHeight = fontData.x;
+  let textWidth = text.blockWidth;
+  let textHeight = text.blockHeight;
+
+  // Center text vertically; origin is mid-height
+  let offset = vec2f(0, -textHeight / 2);
+
+  // Glyph position in ems (quad pos * size + per-char offset)
+  let emPos = pos[vertexIndex] * char.size + char.offset + textElement.xy - offset;
+  let charPos = emPos * (text.fontSize / lineHeight);
+
+  var output: VertexOutput;
+  let transformedPosition = viewProjectionMatrix * text.transform * vec3f(charPos, 1);
+
+  output.position = vec4f(transformedPosition, 1);
+  output.texcoord = pos[vertexIndex] * vec2f(1, -1);
+  output.texcoord *= char.texExtent;
+  output.texcoord += char.texOffset;
+  output.debugColor = debugColors[vertexIndex];
+  output.instanceIndex = textIndex;
+  return output;
+
+  // To debug - hardcode quad in bottom right quarter of the screen:
+  // output.position = vec4f(pos[input.vertex], 0, 1);
 }
-function transformPoint(point, matrix) {
-  const result = vec2.transformMat3([point.x, point.y], matrix);
-  return {
-    x: result[0],
-    y: result[1]
-  };
+
+// Signed distance function sampling for MSDF font rendering
+fn sampleMsdf(texcoord: vec2f) -> f32 {
+  let c = textureSample(fontTexture, fontSampler, texcoord);
+  return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
 }
 
-// src/scene/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/math/angle.ts
-function deg2rad(degrees) {
-  return degrees * (Math.PI / 180);
-}
-function rad2deg(radians) {
-  return radians * (180 / Math.PI);
+  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/scene/Camera.ts
-class Camera {
-  #position = { x: 0, y: 0 };
-  #zoom = 1;
-  #rotation = 0;
-  #isDirty = true;
-  #matrix = mat3.create();
-  get zoom() {
-    return this.#zoom;
+// 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;
   }
-  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;
+  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);
   }
 }
-
-// src/scene/SceneNode.ts
-class SceneNode {
-  static nextId = 1;
-  id;
-  label;
-  #isActive = true;
-  #layer = null;
-  #parent = null;
-  #key = null;
-  #kids = [];
-  #transform;
-  #matrix = mat3.identity();
-  #renderComponent = null;
-  #size = null;
-  #positionProxy;
-  #scaleProxy;
-  #cache = null;
-  constructor(opts) {
-    this.id = opts?.id ?? SceneNode.nextId++;
-    if (opts?.rotation && opts?.rotationRadians) {
-      throw new Error(`Cannot set both rotation and rotationRadians for node ${opts?.label ?? this.id}`);
-    }
-    this.#transform = {
-      position: opts?.position ?? { x: 0, y: 0 },
-      scale: { x: 1, y: 1 },
-      size: opts?.size ?? { width: 1, height: 1 },
-      rotation: opts?.rotationRadians ?? 0
-    };
-    if (opts?.scale)
-      this.scale = opts.scale;
-    if (opts?.rotation)
-      this.rotation = opts.rotation;
-    this.#matrix = mat3.identity();
-    this.#renderComponent = opts?.render ?? null;
-    this.#layer = opts?.layer ?? null;
-    this.#isActive = opts?.isActive ?? true;
-    this.label = opts?.label ?? undefined;
-    this.#size = opts?.size ?? null;
-    this.#key = opts?.key ?? null;
-    for (const kid of opts?.kids ?? []) {
-      this.add(kid);
-    }
-    const self = this;
-    this.#positionProxy = {
-      get x() {
-        return self.#transform.position.x;
-      },
-      set x(value) {
-        self.#transform.position.x = value;
-        self.setDirty();
-      },
-      get y() {
-        return self.#transform.position.y;
-      },
-      set y(value) {
-        self.#transform.position.y = value;
-        self.setDirty();
-      }
-    };
-    this.#scaleProxy = {
-      get x() {
-        return self.#transform.scale.x;
-      },
-      set x(value) {
-        self.#transform.scale.x = value;
-        self.setDirty();
-      },
-      get y() {
-        return self.#transform.scale.y;
-      },
-      set y(value) {
-        self.#transform.scale.y = value;
-        self.setDirty();
-      }
-    };
-  }
-  add(kid, index) {
-    kid.#parent = this;
-    if (index === undefined) {
-      this.#kids.push(kid);
-    } else {
-      this.#kids.splice(index, 0, kid);
+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"
     }
-    kid.setDirty();
-    return kid;
-  }
-  get kids() {
-    return this.#kids;
-  }
-  get children() {
-    return this.#kids;
-  }
-  get transform() {
-    return this.#transform;
-  }
-  get key() {
-    return this.#key ?? "";
-  }
-  get parent() {
-    return this.#parent;
-  }
-  set position(value) {
-    this.#transform.position = value;
-    this.setDirty();
-  }
-  get position() {
-    return this.#positionProxy;
-  }
-  set x(value) {
-    this.#transform.position.x = value;
-    this.setDirty();
-  }
-  get x() {
-    return this.#transform.position.x;
-  }
-  set y(value) {
-    this.#transform.position.y = value;
-    this.setDirty();
-  }
-  get y() {
-    return this.#transform.position.y;
-  }
-  set rotation(value) {
-    this.#transform.rotation = deg2rad(value);
-    this.setDirty();
-  }
-  get rotation() {
-    return rad2deg(this.#transform.rotation);
-  }
-  get rotationRadians() {
-    return this.#transform.rotation;
-  }
-  set rotationRadians(value) {
-    this.#transform.rotation = value;
-    this.setDirty();
-  }
-  get scale() {
-    return this.#scaleProxy;
-  }
-  set scale(value) {
-    if (typeof value === "number") {
-      this.#transform.scale = { x: value, y: value };
-    } else {
-      this.#transform.scale = value;
+  });
+}
+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: {}
     }
-    this.setDirty();
-  }
-  set size(value) {
-    this.#size = value;
-    this.setDirty();
-  }
-  get size() {
-    return this.#size;
-  }
-  get aspectRatio() {
-    if (!this.#size) {
-      console.warn("Attempted to get aspect ratio of a node with no ideal size");
-      return 1;
+  ]
+};
+var engineUniformBindGroupLayout = {
+  label: "Uniform bind group",
+  entries: [
+    {
+      binding: 0,
+      visibility: GPUShaderStage.VERTEX,
+      buffer: {}
     }
-    return this.#size.width / this.#size.height;
-  }
-  get isActive() {
-    if (!this.#cache?.isActive) {
-      this.#cache ??= {};
-      let parent = this;
-      let isActive = this.#isActive;
-      while (isActive && parent.#parent) {
-        parent = parent.#parent;
-        isActive = isActive && parent.#isActive;
-      }
-      this.#cache.isActive = isActive;
+  ]
+};
+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" }
     }
-    return this.#cache.isActive;
-  }
-  set isActive(value) {
-    this.#isActive = value;
-    this.setDirty();
+  ]
+};
+// src/utils/error.ts
+var warnings = new Map;
+function warnOnce(key, msg) {
+  if (warnings.has(key)) {
+    return;
   }
-  get layer() {
-    if (this.#layer != null) {
-      return this.#layer;
-    }
-    if (!this.#cache?.layer) {
-      this.#cache ??= {};
-      let parent = this;
-      while (parent.#parent) {
-        parent = parent.#parent;
-        if (parent.hasExplicitLayer) {
-          this.#cache.layer = parent.#layer;
-          return this.#cache.layer;
+  warnings.set(key, true);
+  console.warn(msg ?? key);
+}
+
+// src/text/MsdfFont.ts
+class MsdfFont {
+  id;
+  json;
+  imageBitmap;
+  name;
+  charset;
+  charCount;
+  lineHeight;
+  charBuffer;
+  #kernings;
+  #chars;
+  #fallbackCharCode;
+  constructor(id, json, imageBitmap) {
+    this.id = id;
+    this.json = json;
+    this.imageBitmap = imageBitmap;
+    const charArray = Object.values(json.chars);
+    this.charCount = charArray.length;
+    this.lineHeight = json.common.lineHeight;
+    this.charset = json.info.charset;
+    this.name = json.info.face;
+    this.#kernings = new Map;
+    if (json.kernings) {
+      for (const kearning of json.kernings) {
+        let charKerning = this.#kernings.get(kearning.first);
+        if (!charKerning) {
+          charKerning = new Map;
+          this.#kernings.set(kearning.first, charKerning);
         }
+        charKerning.set(kearning.second, kearning.amount);
       }
-      this.#cache.layer = 0;
     }
-    return this.#cache.layer;
-  }
-  get hasExplicitLayer() {
-    return this.#layer != null;
-  }
-  set layer(value) {
-    this.#layer = value;
-    this.setDirty();
-  }
-  get renderComponent() {
-    return this.#renderComponent;
-  }
-  get matrix() {
-    if (!this.#cache?.matrix) {
-      this.#cache ??= {};
-      if (this.#parent) {
-        mat3.clone(this.#parent.matrix, this.#matrix);
-      } else {
-        mat3.identity(this.#matrix);
-      }
-      this.#cache.matrix = createModelMatrix(this.transform, this.#matrix);
+    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;
     }
-    return this.#cache.matrix;
   }
-  get bounds() {
-    if (!this.#cache?.bounds) {
-      this.#cache ??= {};
-      const height = this.size?.height ?? 0;
-      const width = this.size?.width ?? 0;
-      const corners = [
-        vec2.transformMat3([-width / 2, height / 2], this.matrix),
-        vec2.transformMat3([width / 2, height / 2], this.matrix),
-        vec2.transformMat3([-width / 2, -height / 2], this.matrix),
-        vec2.transformMat3([width / 2, -height / 2], this.matrix)
-      ];
-      const center = vec2.transformMat3([0, 0], this.matrix);
-      const xValues = corners.map((c3) => c3[0]);
-      const yValues = corners.map((c3) => c3[1]);
-      this.#cache.bounds = {
-        x: center[0],
-        y: center[1],
-        left: Math.min(xValues[0], xValues[1], xValues[2], xValues[3]),
-        right: Math.max(xValues[0], xValues[1], xValues[2], xValues[3]),
-        top: Math.max(yValues[0], yValues[1], yValues[2], yValues[3]),
-        bottom: Math.min(yValues[0], yValues[1], yValues[2], yValues[3])
-      };
+  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 this.#cache.bounds;
-  }
-  setBounds(bounds) {
-    if (bounds.left !== undefined)
-      this.left = bounds.left;
-    if (bounds.right !== undefined)
-      this.right = bounds.right;
-    if (bounds.top !== undefined)
-      this.top = bounds.top;
-    if (bounds.bottom !== undefined)
-      this.bottom = bounds.bottom;
-    if (bounds.x !== undefined)
-      this.centerX = bounds.x;
-    if (bounds.y !== undefined)
-      this.centerY = bounds.y;
-    return this;
-  }
-  set left(value) {
-    this.#adjustWorldPosition([value - this.bounds.left, 0]);
-  }
-  set bottom(value) {
-    this.#adjustWorldPosition([0, value - this.bounds.bottom]);
-  }
-  set top(value) {
-    this.#adjustWorldPosition([0, value - this.bounds.top]);
-  }
-  set right(value) {
-    this.#adjustWorldPosition([value - this.bounds.right, 0]);
-  }
-  set centerX(value) {
-    this.#adjustWorldPosition([value - this.bounds.x, 0]);
+    return char;
   }
-  set centerY(value) {
-    this.#adjustWorldPosition([0, value - this.bounds.y]);
+  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;
   }
-  delete() {
-    this.#parent?.remove(this);
-    for (const child of this.#kids) {
-      child.delete();
+  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`);
     }
-    this.#kids = [];
-    this.#isActive = false;
-    this.#layer = null;
-    this.#renderComponent = null;
+    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);
   }
-  remove(kid) {
-    const childIndex = this.#kids.findIndex((child) => child.id === kid.id);
-    if (childIndex <= -1) {
-      throw new Error(`${kid.label ?? kid.id} is not a child of ${this.label ?? this.id}`);
+  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;
     }
-    this.#kids.splice(childIndex, 1);
-    kid.#parent = null;
-    kid.setDirty();
   }
-  #adjustWorldPosition(delta) {
-    const inverseMatrix = mat3.inverse(this.#parent?.matrix ?? mat3.identity());
-    inverseMatrix[8] = inverseMatrix[9] = 0;
-    const localDelta = vec2.transformMat3(delta, inverseMatrix);
-    this.#transform.position.x += localDelta[0];
-    this.#transform.position.y += localDelta[1];
-    this.setDirty();
+}
+
+// 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 = [];
   }
-  setDirty() {
-    this.#cache = null;
-    this.#kids.forEach((kid) => kid.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;
+    }
   }
-  static parse(json) {
-    const obj = JSON.parse(json, reviver);
-    return new SceneNode(obj);
+  if (debug && debugData) {
+    console.table(debugData);
   }
-  toJSON() {
-    return {
-      id: this.id,
-      label: this.label,
-      transform: this.#transform,
-      layer: this.#layer,
-      isActive: this.#isActive,
-      kids: this.#kids,
-      render: this.#renderComponent
+}
+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 reviver(key, value) {
-  if (key === "kids") {
-    return value.map((kid) => new SceneNode(kid));
+  function flushLine() {
+    lineWidths.push(textOffsetX);
+    line++;
+    maxWidth = Math.max(maxWidth, textOffsetX);
+    textOffsetX = 0;
+    textOffsetY -= font.lineHeight;
   }
-  if (Array.isArray(value) && value.every((v3) => typeof v3 === "number")) {
-    if (value.length === 2) {
-      return value;
-    }
-    if (value.length === 3) {
-      return value;
+  function insertSpaces(spaces) {
+    if (spaces < 1)
+      spaces = 1;
+    textOffsetX += font.getXAdvance(32 /* Space */) * spaces;
+    if (wordWrap?.breakOn === "word" && textOffsetX >= wordWrap.emWidth) {
+      flushLine();
     }
-    if (value.length === 4) {
-      return value;
+    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 value;
+  return low;
 }
 
-// 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/math/angle.ts
+function deg2rad(degrees) {
+  return degrees * (Math.PI / 180);
+}
+function rad2deg(radians) {
+  return radians * (180 / Math.PI);
+}
 
-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;
+// 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
+class SceneNode {
+  static nextId = 1;
+  id;
+  label;
+  #isActive = true;
+  #layer = null;
+  #parent = null;
+  #key = null;
+  #kids = [];
+  #transform;
+  #matrix = mat3.identity();
+  #renderComponent = null;
+  #size = null;
+  #positionProxy;
+  #scaleProxy;
+  #cache = null;
+  constructor(opts) {
+    this.id = opts?.id ?? SceneNode.nextId++;
+    if (opts?.rotation && opts?.rotationRadians) {
+      throw new Error(`Cannot set both rotation and rotationRadians for node ${opts?.label ?? this.id}`);
     }
-    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.#transform = {
+      position: opts?.position ?? { x: 0, y: 0 },
+      scale: { x: 1, y: 1 },
+      size: opts?.size ?? { width: 1, height: 1 },
+      rotation: opts?.rotationRadians ?? 0
     };
-    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");
+    if (opts?.scale)
+      this.scale = opts.scale;
+    if (opts?.rotation)
+      this.rotation = opts.rotation;
+    this.#matrix = mat3.identity();
+    this.#renderComponent = opts?.render ?? null;
+    this.#layer = opts?.layer ?? null;
+    this.#isActive = opts?.isActive ?? true;
+    this.label = opts?.label ?? undefined;
+    this.#size = opts?.size ?? null;
+    this.#key = opts?.key ?? null;
+    for (const kid of opts?.kids ?? []) {
+      this.add(kid);
     }
-    return size;
-  }
-  set size(val) {
-    super.size = val;
-  }
-  get matrixWithSize() {
-    const matrix = mat3.clone(this.matrix, this.#matrixPool.get());
-    mat3.scale(matrix, [this.size.width * this.#flip.x, this.size.height * this.#flip.y], matrix);
-    return matrix;
-  }
-  get atlasCoords() {
-    return this.#atlasCoords;
-  }
-  get region() {
-    return this.#region;
-  }
-  get writeInstance() {
-    return this.#writeInstance;
-  }
-  get flipX() {
-    return this.#flip.x === -1;
-  }
-  set flipX(value) {
-    this.#flip.x = value ? -1 : 1;
-    this.setDirty();
-  }
-  get flipY() {
-    return this.#flip.y === -1;
-  }
-  set flipY(value) {
-    this.#flip.y = value ? -1 : 1;
-    this.setDirty();
-  }
-  get cropOffset() {
-    return this.#cropOffset;
-  }
-  set cropOffset(value) {
-    this.#cropOffset = value;
-  }
-  get textureId() {
-    return this.#textureId;
-  }
-  get isPrimitive() {
-    return this.#textureId === PRIMITIVE_TEXTURE;
-  }
-  get isCircle() {
-    return this.#atlasCoords.atlasIndex === CIRCLE_INDEX;
+    const self = this;
+    this.#positionProxy = {
+      get x() {
+        return self.#transform.position.x;
+      },
+      set x(value) {
+        self.#transform.position.x = value;
+        self.setDirty();
+      },
+      get y() {
+        return self.#transform.position.y;
+      },
+      set y(value) {
+        self.#transform.position.y = value;
+        self.setDirty();
+      }
+    };
+    this.#scaleProxy = {
+      get x() {
+        return self.#transform.scale.x;
+      },
+      set x(value) {
+        self.#transform.scale.x = value;
+        self.setDirty();
+      },
+      get y() {
+        return self.#transform.scale.y;
+      },
+      set y(value) {
+        self.#transform.scale.y = value;
+        self.setDirty();
+      }
+    };
   }
-  extra = {
-    setAtlasCoords: (value) => {
-      this.#atlasCoords = value;
-    },
-    cropRatio: () => {
-      return this.#cropRatio;
-    },
-    atlasSize: () => {
-      return this.#atlasSize;
+  add(kid, index) {
+    kid.#parent = this;
+    if (index === undefined) {
+      this.#kids.push(kid);
+    } else {
+      this.#kids.splice(index, 0, kid);
     }
-  };
-}
-function writeQuadInstance(node, array, offset) {
-  if (!(node instanceof QuadNode)) {
-    throw new Error("QuadNode.writeInstance can only be called on QuadNodes");
+    kid.setDirty();
+    return kid;
   }
-  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);
+  get kids() {
+    return this.#kids;
   }
-  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 children() {
+    return this.#kids;
   }
-  get atlasCoords() {
-    throw new Error("JumboQuadNode does not have a single atlas coords");
+  get transform() {
+    return this.#transform;
   }
-  get tiles() {
-    return this.#tiles;
+  get key() {
+    return this.#key ?? "";
   }
-  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;
+  get parent() {
+    return this.#parent;
   }
-}
-function writeJumboQuadInstance(node, array, offset) {
-  if (!(node instanceof JumboQuadNode)) {
-    throw new Error("JumboQuadNode.writeJumboQuadInstance can only be called on JumboQuadNodes");
+  set position(value) {
+    this.#transform.position = value;
+    this.setDirty();
   }
-  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;
+  get position() {
+    return this.#positionProxy;
   }
-  node.writeInstance?.(array, offset + tileOffset);
-  return node.tiles.length;
-}
-
-// src/utils/error.ts
-var warnings = new Map;
-function warnOnce(key, msg) {
-  if (warnings.has(key)) {
-    return;
+  set x(value) {
+    this.#transform.position.x = value;
+    this.setDirty();
   }
-  warnings.set(key, true);
-  console.warn(msg ?? key);
-}
-
-// src/text/MsdfFont.ts
-class MsdfFont {
-  id;
-  json;
-  imageBitmap;
-  name;
-  charset;
-  charCount;
-  lineHeight;
-  charBuffer;
-  #kernings;
-  #chars;
-  #fallbackCharCode;
-  constructor(id, json, imageBitmap) {
-    this.id = id;
-    this.json = json;
-    this.imageBitmap = imageBitmap;
-    const charArray = Object.values(json.chars);
-    this.charCount = charArray.length;
-    this.lineHeight = json.common.lineHeight;
-    this.charset = json.info.charset;
-    this.name = json.info.face;
-    this.#kernings = new Map;
-    if (json.kernings) {
-      for (const kearning of json.kernings) {
-        let charKerning = this.#kernings.get(kearning.first);
-        if (!charKerning) {
-          charKerning = new Map;
-          this.#kernings.set(kearning.first, charKerning);
-        }
-        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;
-    }
+  get x() {
+    return this.#transform.position.x;
   }
-  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;
+  set y(value) {
+    this.#transform.position.y = value;
+    this.setDirty();
   }
-  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;
+  get y() {
+    return this.#transform.position.y;
   }
-  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 rotation(value) {
+    this.#transform.rotation = deg2rad(value);
+    this.setDirty();
   }
-  set fallbackCharacter(character) {
-    const charCode = character.charCodeAt(0);
-    if (this.#chars.has(charCode)) {
-      this.#fallbackCharCode = charCode;
+  get rotation() {
+    return rad2deg(this.#transform.rotation);
+  }
+  get rotationRadians() {
+    return this.#transform.rotation;
+  }
+  set rotationRadians(value) {
+    this.#transform.rotation = value;
+    this.setDirty();
+  }
+  get scale() {
+    return this.#scaleProxy;
+  }
+  set scale(value) {
+    if (typeof value === "number") {
+      this.#transform.scale = { x: value, y: value };
     } 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;
+      this.#transform.scale = value;
     }
+    this.setDirty();
   }
-}
-
-// 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 size(value) {
+    this.#size = 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]
-        });
+  get size() {
+    return this.#size;
+  }
+  get aspectRatio() {
+    if (!this.#size) {
+      console.warn("Attempted to get aspect ratio of a node with no ideal size");
+      return 1;
+    }
+    return this.#size.width / this.#size.height;
+  }
+  get isActive() {
+    if (!this.#cache?.isActive) {
+      this.#cache ??= {};
+      let parent = this;
+      let isActive = this.#isActive;
+      while (isActive && parent.#parent) {
+        parent = parent.#parent;
+        isActive = isActive && parent.#isActive;
       }
-      textArray[offset] = word.startX + glyph.offset[0] + lineOffset;
-      textArray[offset + 1] = word.startY + glyph.offset[1];
-      textArray[offset + 2] = glyph.char.charIndex;
-      offset += 4;
+      this.#cache.isActive = isActive;
     }
+    return this.#cache.isActive;
   }
-  if (debug && debugData) {
-    console.table(debugData);
+  set isActive(value) {
+    this.#isActive = 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();
+  get layer() {
+    if (this.#layer != null) {
+      return this.#layer;
+    }
+    if (!this.#cache?.layer) {
+      this.#cache ??= {};
+      let parent = this;
+      while (parent.#parent) {
+        parent = parent.#parent;
+        if (parent.hasExplicitLayer) {
+          this.#cache.layer = parent.#layer;
+          return this.#cache.layer;
         }
-        word.width += advance;
-        textOffsetX += advance;
       }
+      this.#cache.layer = 0;
     }
+    return this.#cache.layer;
   }
-  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 hasExplicitLayer() {
+    return this.#layer != null;
   }
-  function flushLine() {
-    lineWidths.push(textOffsetX);
-    line++;
-    maxWidth = Math.max(maxWidth, textOffsetX);
-    textOffsetX = 0;
-    textOffsetY -= font.lineHeight;
+  set layer(value) {
+    this.#layer = 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();
+  get renderComponent() {
+    return this.#renderComponent;
+  }
+  get matrix() {
+    if (!this.#cache?.matrix) {
+      this.#cache ??= {};
+      if (this.#parent) {
+        mat3.clone(this.#parent.matrix, this.#matrix);
+      } else {
+        mat3.identity(this.#matrix);
+      }
+      this.#cache.matrix = createModelMatrix(this.transform, this.#matrix);
+    }
+    return this.#cache.matrix;
+  }
+  get bounds() {
+    if (!this.#cache?.bounds) {
+      this.#cache ??= {};
+      const height = this.size?.height ?? 0;
+      const width = this.size?.width ?? 0;
+      const corners = [
+        vec2.transformMat3([-width / 2, height / 2], this.matrix),
+        vec2.transformMat3([width / 2, height / 2], this.matrix),
+        vec2.transformMat3([-width / 2, -height / 2], this.matrix),
+        vec2.transformMat3([width / 2, -height / 2], this.matrix)
+      ];
+      const center = vec2.transformMat3([0, 0], this.matrix);
+      const xValues = corners.map((c3) => c3[0]);
+      const yValues = corners.map((c3) => c3[1]);
+      this.#cache.bounds = {
+        x: center[0],
+        y: center[1],
+        left: Math.min(xValues[0], xValues[1], xValues[2], xValues[3]),
+        right: Math.max(xValues[0], xValues[1], xValues[2], xValues[3]),
+        top: Math.max(yValues[0], yValues[1], yValues[2], yValues[3]),
+        bottom: Math.min(yValues[0], yValues[1], yValues[2], yValues[3])
+      };
     }
-    flushWord();
+    return this.#cache.bounds;
   }
-}
-function findLargestFontSize(font, text, size, formatting) {
-  if (!formatting.fontSize) {
-    throw new Error("fontSize is required for shrinkToFit");
+  setBounds(bounds) {
+    if (bounds.left !== undefined)
+      this.left = bounds.left;
+    if (bounds.right !== undefined)
+      this.right = bounds.right;
+    if (bounds.top !== undefined)
+      this.top = bounds.top;
+    if (bounds.bottom !== undefined)
+      this.bottom = bounds.bottom;
+    if (bounds.x !== undefined)
+      this.centerX = bounds.x;
+    if (bounds.y !== undefined)
+      this.centerY = bounds.y;
+    return this;
   }
-  if (!formatting.shrinkToFit) {
-    throw new Error("shrinkToFit is required for findLargestFontSize");
+  set left(value) {
+    this.#adjustWorldPosition([value - this.bounds.left, 0]);
   }
-  const minSize = formatting.shrinkToFit.minFontSize;
-  const maxSize = formatting.shrinkToFit.maxFontSize ?? formatting.fontSize;
-  const maxLines = formatting.shrinkToFit.maxLines ?? Number.POSITIVE_INFINITY;
-  const threshold = 0.5;
-  let low = minSize;
-  let high = maxSize;
-  while (high - low > threshold) {
-    const testSize = (low + high) / 2;
-    const testMeasure = measureText(font, text, formatting.wordWrap);
-    const padding = formatting.shrinkToFit.padding ?? 0;
-    const scaledWidth = testMeasure.width * (testSize / font.lineHeight);
-    const scaledHeight = testMeasure.height * (testSize / font.lineHeight);
-    const fitsWidth = scaledWidth <= size.width - size.width * padding;
-    const fitsHeight = scaledHeight <= size.height - size.height * padding;
-    const fitsLines = testMeasure.lineCount <= maxLines;
-    if (fitsWidth && fitsHeight && fitsLines) {
-      low = testSize;
-    } else {
-      high = testSize;
-    }
+  set bottom(value) {
+    this.#adjustWorldPosition([0, value - this.bounds.bottom]);
   }
-  return low;
-}
-
-// src/text/TextNode.ts
-var DEFAULT_FONT_SIZE = 14;
-
-class TextNode extends SceneNode {
-  #text;
-  #formatting;
-  #font;
-  constructor(shader, text, opts = {}) {
-    const { width, height } = measureText(shader.font, text, opts.wordWrap);
-    if (text.length > shader.maxCharCount) {
-      throw new Error(`Text: ${text} exceeds ${shader.maxCharCount} characters. Try using fewer characters or increase the limit in Toodle.attach.`);
-    }
-    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;
+  set top(value) {
+    this.#adjustWorldPosition([0, value - this.bounds.top]);
   }
-  get text() {
-    return this.#text;
+  set right(value) {
+    this.#adjustWorldPosition([value - this.bounds.right, 0]);
   }
-  get formatting() {
-    return this.#formatting;
+  set centerX(value) {
+    this.#adjustWorldPosition([value - this.bounds.x, 0]);
   }
-  get font() {
-    return this.#font;
+  set centerY(value) {
+    this.#adjustWorldPosition([0, value - this.bounds.y]);
   }
-  set text(text) {
-    if (!text) {
-      throw new Error("text cannot be empty");
+  delete() {
+    this.#parent?.remove(this);
+    for (const child of this.#kids) {
+      child.delete();
     }
-    this.#text = text;
-    this.setDirty();
+    this.#kids = [];
+    this.#isActive = false;
+    this.#layer = null;
+    this.#renderComponent = null;
   }
-  get tint() {
-    return this.#formatting.color || { r: 1, g: 1, b: 1, a: 1 };
+  remove(kid) {
+    const childIndex = this.#kids.findIndex((child) => child.id === kid.id);
+    if (childIndex <= -1) {
+      throw new Error(`${kid.label ?? kid.id} is not a child of ${this.label ?? this.id}`);
+    }
+    this.#kids.splice(childIndex, 1);
+    kid.#parent = null;
+    kid.setDirty();
   }
-  set tint(tint) {
-    this.#formatting.color = tint;
+  #adjustWorldPosition(delta) {
+    const inverseMatrix = mat3.inverse(this.#parent?.matrix ?? mat3.identity());
+    inverseMatrix[8] = inverseMatrix[9] = 0;
+    const localDelta = vec2.transformMat3(delta, inverseMatrix);
+    this.#transform.position.x += localDelta[0];
+    this.#transform.position.y += localDelta[1];
     this.setDirty();
   }
-  set formatting(formatting) {
-    this.#formatting = formatting;
-    this.setDirty();
+  setDirty() {
+    this.#cache = null;
+    this.#kids.forEach((kid) => kid.setDirty());
+  }
+  static parse(json) {
+    const obj = JSON.parse(json, reviver);
+    return new SceneNode(obj);
+  }
+  toJSON() {
+    return {
+      id: this.id,
+      label: this.label,
+      transform: this.#transform,
+      layer: this.#layer,
+      isActive: this.#isActive,
+      kids: this.#kids,
+      render: this.#renderComponent
+    };
   }
 }
-
-// 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>,
-};
-
-// 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);
+function reviver(key, value) {
+  if (key === "kids") {
+    return value.map((kid) => new SceneNode(kid));
+  }
+  if (Array.isArray(value) && value.every((v3) => typeof v3 === "number")) {
+    if (value.length === 2) {
+      return value;
     }
-}
-
-// ==============================
-// === 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,
-};
-
-@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,
-};
-
-// 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;
+    if (value.length === 3) {
+      return value;
     }
-
-    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;
+    if (value.length === 4) {
+      return value;
     }
+  }
+  return value;
 }
 
-// ==============================
-// === MISSING TEXTURE FILL ====
-// ==============================
-
-// Output texture to draw a fallback checkerboard
-@group(0) @binding(0)
-var checker_texture: texture_storage_2d<rgba8unorm, write>;
+// src/scene/TextNode.ts
+var DEFAULT_FONT_SIZE = 14;
 
-// 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;
+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.`);
     }
-
-    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
+    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;
   }
-  static create(device) {
-    const pipelines = createPipelines(device, "TextureComputeShader");
-    return new TextureComputeShader(device, pipelines.cropPipeline, pipelines.boundPipeline, pipelines.missingTexturePipeline);
+  get text() {
+    return this.#text;
   }
-  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);
+  get formatting() {
+    return this.#formatting;
+  }
+  get font() {
+    return this.#font;
+  }
+  set text(text) {
+    if (!text) {
+      throw new Error("text cannot be empty");
     }
-    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;
+    this.#text = text;
+    this.setDirty();
   }
-  async#getBoundingBox() {
-    const readBuffer = this.#device.createBuffer({
-      label: "AABB Compute Buffer",
-      size: BOUNDING_BOX_SIZE,
-      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
-    });
-    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
-    };
+  get tint() {
+    return this.#formatting.color || { r: 1, g: 1, b: 1, a: 1 };
   }
-  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.#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;
+  set tint(tint) {
+    this.#formatting.color = tint;
+    this.setDirty();
   }
-  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 }
-    };
+  set formatting(formatting) {
+    this.#formatting = formatting;
+    this.setDirty();
   }
-  #boundsBindGroup(inputTexture) {
-    return this.#device.createBindGroup({
-      layout: this.#boundPipeline.getBindGroupLayout(0),
+}
+
+// src/backends/webgpu/WebGPUTextShader.ts
+var deets = new _t2(text_wgsl_default);
+var struct = deets.structs.find((s3) => s3.name === "TextBlockDescriptor");
+if (!struct) {
+  throw new Error("FormattedText struct not found");
+}
+var textDescriptorInstanceSize = struct.size;
+
+class WebGPUTextShader {
+  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
+    });
+    this.#cpuDescriptorBuffer = new Float32Array(instanceCount * textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT);
+    this.#cpuTextBlockBuffer = new Float32Array(instanceCount * this.maxCharCount * 4);
+    this.#engineUniformsBuffer = device.createBuffer({
+      label: "msdf view projection matrix",
+      size: Float32Array.BYTES_PER_ELEMENT * 12,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.#textBlockBuffer = device.createBuffer({
+      label: "msdf text buffer",
+      size: instanceCount * this.maxCharCount * 4 * Float32Array.BYTES_PER_ELEMENT,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    this.#bindGroups.push(pipeline.fontBindGroup);
+    this.#bindGroups.push(device.createBindGroup({
+      label: "msdf text bind group",
+      layout: pipeline.pipeline.getBindGroupLayout(1),
       entries: [
-        { binding: 0, resource: 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 +19712,20 @@ 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 textShader = new WebGLTextShader(font, limits.maxTextLength);
+      this.#fonts.set(id, textShader);
+    }
     return id;
   }
   getFont(id) {
@@ -20394,8 +20411,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 +20422,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 +20444,5 @@ export {
   AssetManager
 };
 
-//# debugId=1537C686BF0E9F8164756E2164756E21
+//# debugId=7918C9E3F46FD35864756E2164756E21
 //# sourceMappingURL=mod.js.map