@bloopjs/toodle 0.1.2 → 0.1.4

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,2 +1,4 @@
 export { WebGLBackend, type WebGLBackendOptions } from "./WebGLBackend";
+export { WebGLFontPipeline } from "./WebGLFontPipeline";
 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,18 @@
 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";
 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 +38,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 +314,54 @@ 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: 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);
+    }
+
     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"}