@bloopjs/toodle 0.1.3 → 0.1.4

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

@@ -1 +1 @@
-{"version":3,"file":"AssetManager.d.ts","sourceRoot":"","sources":["../../src/textures/AssetManager.ts"],"names":[],"mappings":"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"}
+{"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.3",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "dist",

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

@@ -1,35 +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 text shader that supports font loading for measurement but not rendering.
+ * WebGL 2 text shader for MSDF font rendering.
  *
- * This allows text measurement (via MsdfFont) on WebGL backend, but throws
- * an error if text rendering is attempted. For text rendering, use the WebGPU backend.
+ * 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;
 
-  constructor(font: MsdfFont, maxCharCount: number) {
-    this.font = font;
-    this.maxCharCount = maxCharCount;
+  #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 {
-    // No-op for measurement-only shader
+  startFrame(uniform: EngineUniform): void {
+    this.#cachedUniform = uniform;
   }
 
-  processBatch(_nodes: SceneNode[]): number {
-    throw new Error(
-      "Text rendering is not supported in WebGL mode. Use WebGPU backend for text rendering.",
-    );
+  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-op for measurement-only shader
+    // 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();
   }
 }

package/src/backends/webgl2/glsl/text.glsl.ts

@@ -0,0 +1,132 @@
+/**
+ * GLSL ES 3.0 port of the WGSL text shader for MSDF font rendering.
+ *
+ * Key differences from WebGPU version:
+ * - Uses texelFetch() to read from data textures instead of storage buffers
+ * - Character metrics stored in RGBA32F texture (8 floats per char = 2 texels)
+ * - Per-glyph positions stored in RGBA32F texture (vec4: xy = pos, z = charIndex)
+ * - Each TextNode is rendered separately with uniforms (no firstInstance)
+ */
+
+export const vertexShader = /*glsl*/ `#version 300 es
+precision highp float;
+
+// Engine uniforms
+uniform mat3 u_viewProjection;
+
+// Per-text-block uniforms
+uniform mat3 u_textTransform;
+uniform vec4 u_textColor;
+uniform float u_fontSize;
+uniform float u_blockWidth;
+uniform float u_blockHeight;
+uniform float u_lineHeight;
+
+// Character data texture (RGBA32F, 2 texels per character)
+// Texel 0: texOffset.xy, texExtent.xy
+// Texel 1: size.xy, offset.xy
+uniform sampler2D u_charData;
+
+// Text buffer texture (RGBA32F, 1 texel per glyph)
+// Each texel: xy = glyph position, z = char index
+uniform sampler2D u_textBuffer;
+
+// Outputs to fragment shader
+out vec2 v_texcoord;
+
+// Quad vertex positions for a character (matches WGSL)
+const vec2 pos[4] = vec2[4](
+  vec2(0.0, -1.0),
+  vec2(1.0, -1.0),
+  vec2(0.0,  0.0),
+  vec2(1.0,  0.0)
+);
+
+void main() {
+  // gl_VertexID gives us 0-3 for the quad vertices
+  // gl_InstanceID gives us which glyph we're rendering
+  int vertexIndex = gl_VertexID;
+  int glyphIndex = gl_InstanceID;
+
+  // Fetch glyph data from text buffer texture
+  vec4 glyphData = texelFetch(u_textBuffer, ivec2(glyphIndex, 0), 0);
+  vec2 glyphPos = glyphData.xy;
+  int charIndex = int(glyphData.z);
+
+  // Fetch character metrics (2 texels per char)
+  // Texel 0: texOffset.x, texOffset.y, texExtent.x, texExtent.y
+  // Texel 1: size.x, size.y, offset.x, offset.y
+  vec4 charData0 = texelFetch(u_charData, ivec2(charIndex * 2, 0), 0);
+  vec4 charData1 = texelFetch(u_charData, ivec2(charIndex * 2 + 1, 0), 0);
+
+  vec2 texOffset = charData0.xy;
+  vec2 texExtent = charData0.zw;
+  vec2 charSize = charData1.xy;
+  vec2 charOffset = charData1.zw;
+
+  // Center text vertically; origin is mid-height
+  vec2 offset = vec2(0.0, -u_blockHeight / 2.0);
+
+  // Glyph position in ems (quad pos * size + per-char offset)
+  vec2 emPos = pos[vertexIndex] * charSize + charOffset + glyphPos - offset;
+  vec2 charPos = emPos * (u_fontSize / u_lineHeight);
+
+  // Transform position through model and view-projection matrices
+  vec3 worldPos = u_textTransform * vec3(charPos, 1.0);
+  vec3 clipPos = u_viewProjection * worldPos;
+
+  gl_Position = vec4(clipPos.xy, 0.0, 1.0);
+
+  // Calculate texture coordinates
+  v_texcoord = pos[vertexIndex] * vec2(1.0, -1.0);
+  v_texcoord *= texExtent;
+  v_texcoord += texOffset;
+}
+`;
+
+export const fragmentShader = /*glsl*/ `#version 300 es
+precision highp float;
+
+// Font texture (MSDF atlas)
+uniform sampler2D u_fontTexture;
+
+// Text color
+uniform vec4 u_textColor;
+
+// Input from vertex shader
+in vec2 v_texcoord;
+
+// Output color
+out vec4 fragColor;
+
+// Signed distance function sampling for MSDF font rendering
+// Median of three: max(min(r,g), min(max(r,g), b))
+float sampleMsdf(vec2 texcoord) {
+  vec4 c = texture(u_fontTexture, texcoord);
+  return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
+}
+
+void main() {
+  // pxRange (AKA distanceRange) comes from the msdfgen tool
+  float pxRange = 4.0;
+  vec2 texSize = vec2(textureSize(u_fontTexture, 0));
+
+  // Anti-aliasing technique by Paul Houx
+  // https://github.com/Chlumsky/msdfgen/issues/22#issuecomment-234958005
+  float dx = texSize.x * length(vec2(dFdx(v_texcoord.x), dFdy(v_texcoord.x)));
+  float dy = texSize.y * length(vec2(dFdx(v_texcoord.y), dFdy(v_texcoord.y)));
+
+  float toPixels = pxRange * inversesqrt(dx * dx + dy * dy);
+  float sigDist = sampleMsdf(v_texcoord) - 0.5;
+  float pxDist = sigDist * toPixels;
+
+  float edgeWidth = 0.5;
+  float alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
+
+  if (alpha < 0.001) {
+    discard;
+  }
+
+  fragColor = vec4(u_textColor.rgb, u_textColor.a * alpha);
+}
+`;

package/src/backends/webgl2/mod.ts

@@ -1,3 +1,4 @@
 export { WebGLBackend, type WebGLBackendOptions } from "./WebGLBackend";
+export { WebGLFontPipeline } from "./WebGLFontPipeline";
 export { WebGLQuadShader } from "./WebGLQuadShader";
 export { WebGLTextShader } from "./WebGLTextShader";

package/src/textures/AssetManager.ts

@@ -1,5 +1,7 @@
 import type { IRenderBackend } from "../backends/IRenderBackend";
 import type { ITextShader } from "../backends/ITextShader";
+import type { WebGLBackend } from "../backends/webgl2/WebGLBackend";
+import { WebGLFontPipeline } from "../backends/webgl2/WebGLFontPipeline";
 import { WebGLTextShader } from "../backends/webgl2/WebGLTextShader";
 import { FontPipeline } from "../backends/webgpu/FontPipeline";
 import { TextureComputeShader } from "../backends/webgpu/TextureComputeShader";
@@ -349,8 +351,14 @@ export class AssetManager {
       );
       this.#fonts.set(id, textShader);
     } else {
-      // WebGL: font loaded for measurement, but rendering will throw
-      const textShader = new WebGLTextShader(font, limits.maxTextLength);
+      // WebGL: create font pipeline and text shader for rendering
+      const webglBackend = this.#backend as WebGLBackend;
+      const fontPipeline = WebGLFontPipeline.create(
+        webglBackend.gl,
+        font,
+        limits.maxTextLength,
+      );
+      const textShader = new WebGLTextShader(webglBackend, fontPipeline);
       this.#fonts.set(id, textShader);
     }