@bloopjs/toodle 0.1.2 → 0.1.3

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":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAM3D,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;AAEpD,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;;;;;;;;;;;OAWG;IACG,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,iBAAiB,SAAM;IAkC5D,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/toodle",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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/WebGLTextShader.ts

@@ -0,0 +1,35 @@
+import type { EngineUniform } from "../../coreTypes/EngineUniform";
+import type { SceneNode } from "../../scene/SceneNode";
+import type { MsdfFont } from "../../text/MsdfFont";
+import type { ITextShader } from "../ITextShader";
+
+/**
+ * WebGL text shader that supports font loading for measurement but not 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.
+ */
+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;
+  }
+
+  startFrame(_uniform: EngineUniform): void {
+    // No-op for measurement-only shader
+  }
+
+  processBatch(_nodes: SceneNode[]): number {
+    throw new Error(
+      "Text rendering is not supported in WebGL mode. Use WebGPU backend for text rendering.",
+    );
+  }
+
+  endFrame(): void {
+    // No-op for measurement-only shader
+  }
+}

package/src/backends/webgl2/mod.ts

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

package/src/{text → backends/webgpu}/FontPipeline.ts

@@ -1,5 +1,5 @@
-import type { MsdfFont } from "./MsdfFont";
-import msdfShader from "./text.wgsl";
+import type { MsdfFont } from "../../text/MsdfFont";
+import msdfShader from "./wgsl/text.wgsl";
 
 /**
  * A webgpu pipeline for rendering blocks of text with a given font.

package/src/{text/TextShader.ts → backends/webgpu/WebGPUTextShader.ts}

@@ -1,13 +1,17 @@
 import { WgslReflect } from "wgsl_reflect";
-import type { IBackendShader } from "../backends/IBackendShader";
-import type { WebGPUBackend } from "../backends/webgpu/WebGPUBackend";
-import type { EngineUniform } from "../coreTypes/EngineUniform";
-import type { SceneNode } from "../scene/SceneNode";
+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 type { ITextShader } from "../ITextShader";
 import type { FontPipeline } from "./FontPipeline";
-import type { MsdfFont } from "./MsdfFont";
-import { findLargestFontSize, measureText, shapeText } from "./shaping";
-import { DEFAULT_FONT_SIZE, TextNode } from "./TextNode";
-import msdfShader from "./text.wgsl";
+import type { WebGPUBackend } from "./WebGPUBackend";
+import msdfShader from "./wgsl/text.wgsl";
 
 const deets = new WgslReflect(msdfShader);
 const struct = deets.structs.find((s) => s.name === "TextBlockDescriptor");
@@ -16,7 +20,7 @@ if (!struct) {
 }
 const textDescriptorInstanceSize = struct.size;
 
-export class TextShader implements IBackendShader {
+export class WebGPUTextShader implements ITextShader {
   readonly label = "text";
 
   #backend: WebGPUBackend;
@@ -130,7 +134,7 @@ export class TextShader implements IBackendShader {
       if (!(node instanceof TextNode)) {
         console.error(node);
         throw new Error(
-          `Tried to use TextShader on something that isn't a TextNode: ${node}`,
+          `Tried to use WebGPUTextShader on something that isn't a TextNode: ${node}`,
         );
       }
       const text = node.text;

package/src/backends/webgpu/mod.ts

@@ -1,2 +1,4 @@
+export { FontPipeline } from "./FontPipeline";
 export { WebGPUBackend, type WebGPUBackendOptions } from "./WebGPUBackend";
 export { WebGPUQuadShader } from "./WebGPUQuadShader";
+export { WebGPUTextShader } from "./WebGPUTextShader";

package/src/mod.ts

@@ -4,7 +4,7 @@ export type * from "./coreTypes/mod";
 
 export type * from "./scene/QuadNode";
 export type * from "./scene/SceneNode";
-export type * from "./text/TextNode";
+export type * from "./scene/TextNode";
 export type * from "./backends/IBackendShader";
 export type * from "./backends/IRenderBackend";
 

package/src/{text → scene}/TextNode.ts

@@ -1,9 +1,9 @@
+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 { measureText } from "./shaping";
-import type { TextFormatting } from "./TextFormatting";
-import type { TextShader } from "./TextShader";
+import type { MsdfFont } from "../text/MsdfFont";
+import { measureText } from "../text/shaping";
+import type { TextFormatting } from "../text/TextFormatting";
+import { type NodeOptions, SceneNode } from "./SceneNode";
 
 export const DEFAULT_FONT_SIZE = 14;
 
@@ -12,7 +12,7 @@ export class TextNode extends SceneNode {
   #formatting: TextFormatting;
   #font: MsdfFont;
 
-  constructor(shader: TextShader, text: string, opts: TextOptions = {}) {
+  constructor(shader: ITextShader, text: string, opts: TextOptions = {}) {
     const { width, height } = measureText(shader.font, text, opts.wordWrap);
 
     if (text.length > shader.maxCharCount) {

package/src/scene/mod.ts

@@ -2,3 +2,4 @@ export * from "./Camera";
 export * from "./QuadNode";
 export * from "./RenderComponent";
 export * from "./SceneNode";
+export * from "./TextNode";

package/src/text/mod.ts

@@ -2,7 +2,4 @@
 // https://tchayen.com/drawing-text-in-webgpu-using-just-the-font-file
 // https://github.com/Chlumsky/msdfgen/issues/22#issuecomment-234958005
 // https://github.com/pixijs/pixijs/blob/dev/src/scene/text-bitmap/utils/getBitmapTextLayout.ts#L20
-
-export type { TextOptions } from "./TextNode";
-export { TextNode } from "./TextNode";
-export { TextShader } from "./TextShader";
+export { WebGPUTextShader as TextShader } from "../backends/webgpu/WebGPUTextShader";

package/src/textures/AssetManager.ts

@@ -1,14 +1,16 @@
 import type { IRenderBackend } from "../backends/IRenderBackend";
+import type { ITextShader } from "../backends/ITextShader";
+import { WebGLTextShader } from "../backends/webgl2/WebGLTextShader";
+import { FontPipeline } from "../backends/webgpu/FontPipeline";
 import { TextureComputeShader } from "../backends/webgpu/TextureComputeShader";
 import type { WebGPUBackend } from "../backends/webgpu/WebGPUBackend";
+import { WebGPUTextShader } from "../backends/webgpu/WebGPUTextShader";
 import type { Size } from "../coreTypes/Size";
 import type { Vec2 } from "../coreTypes/Vec2";
 import { JumboQuadNode } from "../scene/JumboQuadNode";
 import { QuadNode } from "../scene/QuadNode";
 import type { SceneNode } from "../scene/SceneNode";
-import { FontPipeline } from "../text/FontPipeline";
 import { MsdfFont } from "../text/MsdfFont";
-import { TextShader } from "../text/TextShader";
 import { Bundles } from "./Bundles";
 import type {
   AtlasBundleOpts,
@@ -34,7 +36,7 @@ export class AssetManager {
   readonly bundles: Bundles;
   #backend: IRenderBackend;
   #atlasId: string;
-  #fonts: Map<string, TextShader> = new Map();
+  #fonts: Map<string, ITextShader> = new Map();
   #cropComputeShader: TextureComputeShader | null = null;
   #availableIndices: Set<number> = new Set();
 
@@ -310,43 +312,48 @@ export class AssetManager {
   }
 
   /**
-   * 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.
    */
   async loadFont(id: string, url: 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 as WebGPUBackend;
-    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 as WebGPUBackend,
-      fontPipeline,
-      font,
-      presentationFormat,
-      limits.instanceCount,
-    );
-    this.#fonts.set(id, textShader);
+    if (this.#backend.type === "webgpu") {
+      const webgpuBackend = this.#backend as WebGPUBackend;
+      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 {
+      // WebGL: font loaded for measurement, but rendering will throw
+      const textShader = new WebGLTextShader(font, limits.maxTextLength);
+      this.#fonts.set(id, textShader);
+    }
+
     return id;
   }
 

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

@@ -1 +0,0 @@
-{"version":3,"file":"FontPipeline.d.ts","sourceRoot":"","sources":["../../src/text/FontPipeline.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAG3C;;GAEG;AACH,qBAAa,YAAY;IAEd,QAAQ,EAAE,iBAAiB;IAC3B,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,YAAY;IAC3B,YAAY,EAAE,MAAM;gBAHpB,QAAQ,EAAE,iBAAiB,EAC3B,IAAI,EAAE,QAAQ,EACd,aAAa,EAAE,YAAY,EAC3B,YAAY,EAAE,MAAM;WAGhB,MAAM,CACjB,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,QAAQ,EACd,WAAW,EAAE,gBAAgB,EAC7B,YAAY,EAAE,MAAM,GACnB,OAAO,CAAC,YAAY,CAAC;CAuEzB;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,SAAS,EACjB,WAAW,EAAE,gBAAgB,EAC7B,KAAK,EAAE,MAAM,8BA4Cd"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"TextNode.d.ts","sourceRoot":"","sources":["../../src/text/TextNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,KAAK,WAAW,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,qBAAa,QAAS,SAAQ,SAAS;;gBAKzB,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,GAAE,WAAgB;IAgCpE,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/text/TextShader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextShader.d.ts","sourceRoot":"","sources":["../../src/text/TextShader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAY3C,qBAAa,UAAW,YAAW,cAAc;;IAC/C,QAAQ,CAAC,KAAK,UAAU;gBAgBtB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,gBAAgB,EAC9B,aAAa,EAAE,MAAM;IAqEvB,UAAU,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAWxC,YAAY,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,MAAM;IAkGxC,QAAQ,IAAI,IAAI;IAIhB,IAAI,IAAI,aAEP;IAED,IAAI,YAAY,WAEf;CACF"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"text.wgsl.d.ts","sourceRoot":"","sources":["../../src/text/text.wgsl.ts"],"names":[],"mappings":";AAAA,wBAoJE"}