@bloopjs/toodle 0.1.2 → 0.1.4

package/dist/{text → scene}/TextNode.d.ts

@@ -1,12 +1,12 @@
+import type { ITextShader } from "../backends/ITextShader";
 import type { Color } from "../coreTypes/Color";
-import { type NodeOptions, SceneNode } from "../scene/SceneNode";
-import type { MsdfFont } from "./MsdfFont";
-import type { TextFormatting } from "./TextFormatting";
-import type { TextShader } from "./TextShader";
+import type { MsdfFont } from "../text/MsdfFont";
+import type { TextFormatting } from "../text/TextFormatting";
+import { type NodeOptions, SceneNode } from "./SceneNode";
 export declare const DEFAULT_FONT_SIZE = 14;
 export declare class TextNode extends SceneNode {
     #private;
-    constructor(shader: TextShader, text: string, opts?: TextOptions);
+    constructor(shader: ITextShader, text: string, opts?: TextOptions);
     get text(): string;
     get formatting(): TextFormatting;
     get font(): MsdfFont;

package/dist/scene/TextNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextNode.d.ts","sourceRoot":"","sources":["../../src/scene/TextNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,KAAK,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE1D,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,qBAAa,QAAS,SAAQ,SAAS;;gBAKzB,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,GAAE,WAAgB;IAgCrE,IAAI,IAAI,IAYO,MAAM,CAVpB;IAED,IAAI,UAAU,IAyBa,cAAc,CAvBxC;IAED,IAAI,IAAI,aAEP;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAMpB;IAED,IAAI,IAAI,IAIO,KAAK,CAFnB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAGnB;IAED,IAAI,UAAU,CAAC,UAAU,EAAE,cAAc,EAGxC;CACF;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,cAAc,CAAC"}

package/dist/scene/mod.d.ts

@@ -2,4 +2,5 @@ export * from "./Camera";
 export * from "./QuadNode";
 export * from "./RenderComponent";
 export * from "./SceneNode";
+export * from "./TextNode";
 //# sourceMappingURL=mod.d.ts.map

package/dist/scene/mod.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../src/scene/mod.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../src/scene/mod.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}

package/dist/text/mod.d.ts

@@ -1,4 +1,2 @@
-export type { TextOptions } from "./TextNode";
-export { TextNode } from "./TextNode";
-export { TextShader } from "./TextShader";
+export { WebGPUTextShader as TextShader } from "../backends/webgpu/WebGPUTextShader";
 //# sourceMappingURL=mod.d.ts.map

package/dist/text/mod.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../src/text/mod.ts"],"names":[],"mappings":"AAKA,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../src/text/mod.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,IAAI,UAAU,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/textures/AssetManager.d.ts

@@ -1,9 +1,9 @@
 import type { IRenderBackend } from "../backends/IRenderBackend";
+import type { ITextShader } from "../backends/ITextShader";
 import type { Size } from "../coreTypes/Size";
 import type { Vec2 } from "../coreTypes/Vec2";
 import { QuadNode } from "../scene/QuadNode";
 import type { SceneNode } from "../scene/SceneNode";
-import { TextShader } from "../text/TextShader";
 import { Bundles } from "./Bundles";
 import type { AtlasBundleOpts, AtlasCoords, CpuTextureAtlas, TextureBundleOpts } from "./types";
 export type TextureId = string;
@@ -119,16 +119,19 @@ export declare class AssetManager {
      */
     unloadBundle(bundleId: BundleId): Promise<void>;
     /**
-     * Load a font to the gpu
+     * Load a font for text rendering (WebGPU) or measurement only (WebGL).
      *
      * @param id - The id of the font to load
-     * @param url - The url of the font to load
-     * @param fallbackCharacter - The character to use as a fallback if the font does not contain a character to be rendererd
+     * @param url - The url of the font JSON to load
+     * @param fallbackCharacter - The character to use as a fallback if the font does not contain a character to be rendered
      *
-     * @throws Error if using WebGL backend (fonts not supported in WebGL mode)
+     * @remarks
+     * On WebGPU backend, loads the full font for rendering.
+     * On WebGL backend, loads the font for text measurement only. Attempting to
+     * render text on WebGL will throw an error.
      */
     loadFont(id: string, url: URL, fallbackCharacter?: string): Promise<string>;
-    getFont(id: string): TextShader;
+    getFont(id: string): ITextShader;
     validateTextureReference(node: SceneNode | QuadNode): void;
     /**
      * Advanced and niche features

package/dist/textures/AssetManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetManager.d.ts","sourceRoot":"","sources":["../../src/textures/AssetManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAGjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,iBAAiB,EAElB,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC;AAC/B,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAC9B,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAE5B,MAAM,MAAM,mBAAmB,GAAG;IAChC,oGAAoG;IACpG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,qBAAa,YAAY;;IACvB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;gBAOd,OAAO,EAAE,cAAc,EAAE,OAAO,GAAE,mBAAwB;IAsBtE;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED;;;OAGG;IACH,IAAI,YAAY,IAAI,UAAU,CAE7B;IAED;;OAEG;IACH,IAAI,SAAS,IAAI,IAAI,CAGpB;IAED;;;;;OAKG;IACH,OAAO,CAAC,EAAE,EAAE,SAAS,GAAG,IAAI;IAU5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,EAAE,SAAS,GAAG,IAAI;IAYnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,EAAE,SAAS,GAAG,OAAO;IAUjC;;OAEG;IACH,IAAI,QAAQ,uCAEX;IAED;;OAEG;IACH,IAAI,UAAU,aAEb;IAED;;;;;;;;;;;;;;;;OAgBG;IACG,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAMtE;;;;;;;;;;;OAWG;IACG,WAAW,CACf,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,GAAG,GAAG,WAAW,EACtB,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC;;;;IA+CtC;;;;;;;;OAQG;IACG,cAAc,CAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,iBAAiB,GAAG,eAAe,GACxC,OAAO,CAAC,QAAQ,CAAC;IAcpB;;;;OAIG;IACG,UAAU,CAAC,QAAQ,EAAE,QAAQ;IAsBnC;;;;;OAKG;IACG,YAAY,CAAC,QAAQ,EAAE,QAAQ;IAkBrC;;;;;;;;OAQG;IACG,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,iBAAiB,SAAM;IAgC5D,OAAO,CAAC,EAAE,EAAE,MAAM;IASlB,wBAAwB,CAAC,IAAI,EAAE,SAAS,GAAG,QAAQ;IAoGnD;;OAEG;IACH,KAAK;sCAEyB,MAAM,EAAE;kCAKZ,MAAM,EAAE;QAIhC;;;;;;;WAOG;6BACkB,SAAS,UAAU,WAAW;QAInD;;;;;WAKG;6BACkB,SAAS,KAAG,WAAW,EAAE;QAI9C;;;;;WAKG;+BACoB,SAAS,KAAG,IAAI;QAIvC;;;;WAIG;;YAKC;;;eAGG;;YAEH;;eAEG;;YAEH;;eAEG;;;QAKP;;;WAGG;;QAaH;;;;;WAKG;2BACsB,eAAe;QAYxC;;;;WAIG;kCAC6B,MAAM;MAItC;IAqCF;;OAEG;IACH,OAAO;CAGR"}
+{"version":3,"file":"AssetManager.d.ts","sourceRoot":"","sources":["../../src/textures/AssetManager.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/toodle",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "dist",

package/src/Toodle.ts

@@ -21,8 +21,8 @@ import { Camera } from "./scene/Camera";
 import { JumboQuadNode, type JumboQuadOptions } from "./scene/JumboQuadNode";
 import { QuadNode, type QuadOptions } from "./scene/QuadNode";
 import { type NodeOptions, SceneNode } from "./scene/SceneNode";
+import { TextNode, type TextOptions } from "./scene/TextNode";
 import type { Resolution } from "./screen/resolution";
-import { TextNode, type TextOptions } from "./text/TextNode";
 import { AssetManager, type TextureId } from "./textures/AssetManager";
 import { Pool } from "./utils/mod";
 

package/src/backends/ITextShader.ts

@@ -0,0 +1,15 @@
+import type { MsdfFont } from "../text/MsdfFont";
+import type { IBackendShader } from "./IBackendShader";
+
+/**
+ * Backend-agnostic text shader interface.
+ *
+ * Extends IBackendShader with text-specific properties.
+ * Each backend provides its own implementation.
+ */
+export interface ITextShader extends IBackendShader {
+  /** The font used by this text shader */
+  readonly font: MsdfFont;
+  /** Maximum number of characters that can be rendered per text node */
+  readonly maxCharCount: number;
+}

package/src/backends/mod.ts

@@ -13,6 +13,7 @@ export type {
   BlendOperation,
   IRenderBackend,
 } from "./IRenderBackend";
+export type { ITextShader } from "./ITextShader";
 export type {
   ITextureAtlas,
   TextureAtlasFormat,

package/src/backends/webgl2/WebGLFontPipeline.ts

@@ -0,0 +1,173 @@
+import type { MsdfFont } from "../../text/MsdfFont";
+import { assert } from "../../utils/assert";
+
+/**
+ * Manages WebGL font resources for MSDF text rendering.
+ *
+ * Creates and manages:
+ * - Font atlas texture (MSDF image)
+ * - Character data texture (metrics as RGBA32F)
+ * - Text buffer texture (per-glyph positions)
+ */
+export class WebGLFontPipeline {
+  readonly font: MsdfFont;
+  readonly fontTexture: WebGLTexture;
+  readonly charDataTexture: WebGLTexture;
+  readonly textBufferTexture: WebGLTexture;
+  readonly maxCharCount: number;
+  readonly lineHeight: number;
+
+  #gl: WebGL2RenderingContext;
+
+  private constructor(
+    gl: WebGL2RenderingContext,
+    font: MsdfFont,
+    fontTexture: WebGLTexture,
+    charDataTexture: WebGLTexture,
+    textBufferTexture: WebGLTexture,
+    maxCharCount: number,
+  ) {
+    this.#gl = gl;
+    this.font = font;
+    this.fontTexture = fontTexture;
+    this.charDataTexture = charDataTexture;
+    this.textBufferTexture = textBufferTexture;
+    this.maxCharCount = maxCharCount;
+    this.lineHeight = font.lineHeight;
+  }
+
+  static create(
+    gl: WebGL2RenderingContext,
+    font: MsdfFont,
+    maxCharCount: number,
+  ): WebGLFontPipeline {
+    // Create font atlas texture
+    const fontTexture = gl.createTexture();
+    assert(fontTexture, "Failed to create font texture");
+
+    gl.bindTexture(gl.TEXTURE_2D, fontTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+    // Upload the MSDF font image
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      font.imageBitmap,
+    );
+
+    // Create character data texture (RGBA32F)
+    // Each character needs 8 floats = 2 RGBA texels
+    // charBuffer layout per char: texOffset.x, texOffset.y, texExtent.x, texExtent.y, size.x, size.y, offset.x, offset.y
+    const charDataTexture = gl.createTexture();
+    assert(charDataTexture, "Failed to create char data texture");
+
+    gl.bindTexture(gl.TEXTURE_2D, charDataTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+    // Convert charBuffer to texture format (2 texels per character)
+    const charCount = font.charCount;
+    const charTextureWidth = charCount * 2; // 2 texels per char
+    const charTextureData = new Float32Array(charTextureWidth * 4); // 4 components per texel
+
+    for (let i = 0; i < charCount; i++) {
+      const srcOffset = i * 8;
+      const dstOffset0 = i * 2 * 4; // First texel for this char
+      const dstOffset1 = (i * 2 + 1) * 4; // Second texel for this char
+
+      // Texel 0: texOffset.xy, texExtent.xy
+      charTextureData[dstOffset0] = font.charBuffer[srcOffset]; // texOffset.x
+      charTextureData[dstOffset0 + 1] = font.charBuffer[srcOffset + 1]; // texOffset.y
+      charTextureData[dstOffset0 + 2] = font.charBuffer[srcOffset + 2]; // texExtent.x
+      charTextureData[dstOffset0 + 3] = font.charBuffer[srcOffset + 3]; // texExtent.y
+
+      // Texel 1: size.xy, offset.xy
+      charTextureData[dstOffset1] = font.charBuffer[srcOffset + 4]; // size.x
+      charTextureData[dstOffset1 + 1] = font.charBuffer[srcOffset + 5]; // size.y
+      charTextureData[dstOffset1 + 2] = font.charBuffer[srcOffset + 6]; // offset.x
+      charTextureData[dstOffset1 + 3] = font.charBuffer[srcOffset + 7]; // offset.y
+    }
+
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA32F,
+      charTextureWidth,
+      1,
+      0,
+      gl.RGBA,
+      gl.FLOAT,
+      charTextureData,
+    );
+
+    // Create text buffer texture (RGBA32F)
+    // Each glyph needs 1 texel: xy = position, z = charIndex, w = unused
+    const textBufferTexture = gl.createTexture();
+    assert(textBufferTexture, "Failed to create text buffer texture");
+
+    gl.bindTexture(gl.TEXTURE_2D, textBufferTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+    // Allocate texture storage (will be filled per-frame)
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA32F,
+      maxCharCount,
+      1,
+      0,
+      gl.RGBA,
+      gl.FLOAT,
+      null,
+    );
+
+    gl.bindTexture(gl.TEXTURE_2D, null);
+
+    return new WebGLFontPipeline(
+      gl,
+      font,
+      fontTexture,
+      charDataTexture,
+      textBufferTexture,
+      maxCharCount,
+    );
+  }
+
+  /**
+   * Update the text buffer texture with glyph data.
+   */
+  updateTextBuffer(data: Float32Array, glyphCount: number): void {
+    const gl = this.#gl;
+    gl.bindTexture(gl.TEXTURE_2D, this.textBufferTexture);
+    gl.texSubImage2D(
+      gl.TEXTURE_2D,
+      0,
+      0,
+      0,
+      glyphCount,
+      1,
+      gl.RGBA,
+      gl.FLOAT,
+      data,
+    );
+    // Note: don't unbind here - the texture needs to stay bound for rendering
+  }
+
+  destroy(): void {
+    const gl = this.#gl;
+    gl.deleteTexture(this.fontTexture);
+    gl.deleteTexture(this.charDataTexture);
+    gl.deleteTexture(this.textBufferTexture);
+  }
+}

package/src/backends/webgl2/WebGLTextShader.ts

@@ -0,0 +1,275 @@
+import type { EngineUniform } from "../../coreTypes/EngineUniform";
+import type { SceneNode } from "../../scene/SceneNode";
+import { DEFAULT_FONT_SIZE, TextNode } from "../../scene/TextNode";
+import type { MsdfFont } from "../../text/MsdfFont";
+import {
+  findLargestFontSize,
+  measureText,
+  shapeText,
+} from "../../text/shaping";
+import { assert } from "../../utils/assert";
+import type { ITextShader } from "../ITextShader";
+import { fragmentShader, vertexShader } from "./glsl/text.glsl";
+import type { WebGLBackend } from "./WebGLBackend";
+import type { WebGLFontPipeline } from "./WebGLFontPipeline";
+
+/**
+ * WebGL 2 text shader for MSDF font rendering.
+ *
+ * Unlike WebGPU which batches all text into storage buffers, WebGL renders
+ * each TextNode separately since WebGL2 doesn't support firstInstance.
+ */
+export class WebGLTextShader implements ITextShader {
+  readonly label = "text";
+  readonly font: MsdfFont;
+  readonly maxCharCount: number;
+
+  #backend: WebGLBackend;
+  #pipeline: WebGLFontPipeline;
+  #program: WebGLProgram;
+  #vao: WebGLVertexArrayObject;
+  #cpuTextBuffer: Float32Array;
+  #cachedUniform: EngineUniform | null = null;
+
+  // Uniform locations
+  #uViewProjection: WebGLUniformLocation | null = null;
+  #uTextTransform: WebGLUniformLocation | null = null;
+  #uTextColor: WebGLUniformLocation | null = null;
+  #uFontSize: WebGLUniformLocation | null = null;
+  #uBlockWidth: WebGLUniformLocation | null = null;
+  #uBlockHeight: WebGLUniformLocation | null = null;
+  #uLineHeight: WebGLUniformLocation | null = null;
+  #uCharData: WebGLUniformLocation | null = null;
+  #uTextBuffer: WebGLUniformLocation | null = null;
+  #uFontTexture: WebGLUniformLocation | null = null;
+
+  constructor(backend: WebGLBackend, pipeline: WebGLFontPipeline) {
+    this.#backend = backend;
+    this.#pipeline = pipeline;
+    this.font = pipeline.font;
+    this.maxCharCount = pipeline.maxCharCount;
+
+    const gl = backend.gl;
+
+    // Compile shaders
+    const vs = this.#compileShader(gl, gl.VERTEX_SHADER, vertexShader);
+    const fs = this.#compileShader(gl, gl.FRAGMENT_SHADER, fragmentShader);
+
+    // Create program
+    const program = gl.createProgram();
+    assert(program, "Failed to create WebGL program");
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      const info = gl.getProgramInfoLog(program);
+      throw new Error(`Failed to link text shader program: ${info}`);
+    }
+
+    this.#program = program;
+
+    // Get uniform locations
+    this.#uViewProjection = gl.getUniformLocation(program, "u_viewProjection");
+    this.#uTextTransform = gl.getUniformLocation(program, "u_textTransform");
+    this.#uTextColor = gl.getUniformLocation(program, "u_textColor");
+    this.#uFontSize = gl.getUniformLocation(program, "u_fontSize");
+    this.#uBlockWidth = gl.getUniformLocation(program, "u_blockWidth");
+    this.#uBlockHeight = gl.getUniformLocation(program, "u_blockHeight");
+    this.#uLineHeight = gl.getUniformLocation(program, "u_lineHeight");
+    this.#uCharData = gl.getUniformLocation(program, "u_charData");
+    this.#uTextBuffer = gl.getUniformLocation(program, "u_textBuffer");
+    this.#uFontTexture = gl.getUniformLocation(program, "u_fontTexture");
+
+    // Create VAO (required for WebGL2 draw calls, even without vertex attributes)
+    const vao = gl.createVertexArray();
+    assert(vao, "Failed to create WebGL VAO");
+    this.#vao = vao;
+
+    // Allocate CPU buffer for text shaping
+    this.#cpuTextBuffer = new Float32Array(this.maxCharCount * 4);
+
+    // Cleanup shaders
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+  }
+
+  startFrame(uniform: EngineUniform): void {
+    this.#cachedUniform = uniform;
+  }
+
+  processBatch(nodes: SceneNode[]): number {
+    if (nodes.length === 0) return 0;
+
+    const gl = this.#backend.gl;
+    const uniform = this.#cachedUniform;
+    if (!uniform) {
+      throw new Error("Tried to process batch but engine uniform is not set");
+    }
+
+    gl.useProgram(this.#program);
+    gl.bindVertexArray(this.#vao);
+
+    // Set view projection matrix (extract 9 floats from padded mat3)
+    if (this.#uViewProjection) {
+      const m = uniform.viewProjectionMatrix;
+      const mat3x3 = new Float32Array([
+        m[0],
+        m[1],
+        m[2], // column 0
+        m[4],
+        m[5],
+        m[6], // column 1
+        m[8],
+        m[9],
+        m[10], // column 2
+      ]);
+      gl.uniformMatrix3fv(this.#uViewProjection, false, mat3x3);
+    }
+
+    // Set line height uniform
+    if (this.#uLineHeight) {
+      gl.uniform1f(this.#uLineHeight, this.#pipeline.lineHeight);
+    }
+
+    // Bind textures
+    // Texture unit 0: font atlas
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.fontTexture);
+    if (this.#uFontTexture) {
+      gl.uniform1i(this.#uFontTexture, 0);
+    }
+
+    // Texture unit 1: character data
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.charDataTexture);
+    if (this.#uCharData) {
+      gl.uniform1i(this.#uCharData, 1);
+    }
+
+    // Texture unit 2: text buffer
+    gl.activeTexture(gl.TEXTURE2);
+    gl.bindTexture(gl.TEXTURE_2D, this.#pipeline.textBufferTexture);
+    if (this.#uTextBuffer) {
+      gl.uniform1i(this.#uTextBuffer, 2);
+    }
+
+    // Render each TextNode separately
+    for (const node of nodes) {
+      if (!(node instanceof TextNode)) {
+        console.error(node);
+        throw new Error(
+          `Tried to use WebGLTextShader on something that isn't a TextNode: ${node}`,
+        );
+      }
+
+      const text = node.text;
+      const formatting = node.formatting;
+      const measurements = measureText(this.font, text, formatting.wordWrap);
+
+      // Calculate font size
+      const size = node.size ?? measurements;
+      const fontSize = formatting.shrinkToFit
+        ? findLargestFontSize(this.font, text, size, formatting)
+        : formatting.fontSize;
+      const actualFontSize = fontSize || DEFAULT_FONT_SIZE;
+
+      // Shape text into buffer
+      shapeText(
+        this.font,
+        text,
+        size,
+        actualFontSize,
+        formatting,
+        this.#cpuTextBuffer,
+        0,
+      );
+
+      // Upload glyph data to text buffer texture
+      this.#pipeline.updateTextBuffer(
+        this.#cpuTextBuffer,
+        measurements.printedCharCount,
+      );
+
+      // Set per-text uniforms
+      if (this.#uTextTransform) {
+        const m = node.matrix;
+        const mat3x3 = new Float32Array([
+          m[0],
+          m[1],
+          m[2], // column 0
+          m[4],
+          m[5],
+          m[6], // column 1
+          m[8],
+          m[9],
+          m[10], // column 2
+        ]);
+        gl.uniformMatrix3fv(this.#uTextTransform, false, mat3x3);
+      }
+
+      if (this.#uTextColor) {
+        const tint = node.tint;
+        gl.uniform4f(this.#uTextColor, tint.r, tint.g, tint.b, tint.a);
+      }
+
+      if (this.#uFontSize) {
+        gl.uniform1f(this.#uFontSize, actualFontSize);
+      }
+
+      if (this.#uBlockWidth) {
+        gl.uniform1f(
+          this.#uBlockWidth,
+          formatting.align === "center" ? 0 : measurements.width,
+        );
+      }
+
+      if (this.#uBlockHeight) {
+        gl.uniform1f(this.#uBlockHeight, measurements.height);
+      }
+
+      // Draw instanced: 4 vertices per glyph, one instance per character
+      gl.drawArraysInstanced(
+        gl.TRIANGLE_STRIP,
+        0,
+        4,
+        measurements.printedCharCount,
+      );
+    }
+
+    gl.bindVertexArray(null);
+    return nodes.length;
+  }
+
+  endFrame(): void {
+    // No cleanup needed
+  }
+
+  #compileShader(
+    gl: WebGL2RenderingContext,
+    type: number,
+    source: string,
+  ): WebGLShader {
+    const shader = gl.createShader(type);
+    assert(shader, "Failed to create WebGL shader");
+
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      const info = gl.getShaderInfoLog(shader);
+      const typeStr = type === gl.VERTEX_SHADER ? "vertex" : "fragment";
+      gl.deleteShader(shader);
+      throw new Error(`Failed to compile ${typeStr} shader: ${info}`);
+    }
+
+    return shader;
+  }
+
+  destroy(): void {
+    const gl = this.#backend.gl;
+    gl.deleteProgram(this.#program);
+    gl.deleteVertexArray(this.#vao);
+    this.#pipeline.destroy();
+  }
+}