@bloopjs/toodle 0.0.100

package/src/text/FontPipeline.ts

@@ -0,0 +1,212 @@
+import type { MsdfFont } from "./MsdfFont";
+import msdfShader from "./text.wgsl";
+
+/**
+ * A webgpu pipeline for rendering blocks of text with a given font.
+ */
+export class FontPipeline {
+  constructor(
+    public pipeline: GPURenderPipeline,
+    public font: MsdfFont,
+    public fontBindGroup: GPUBindGroup,
+    public maxCharCount: number,
+  ) {}
+
+  static async create(
+    device: GPUDevice,
+    font: MsdfFont,
+    colorFormat: GPUTextureFormat,
+    maxCharCount: number,
+  ): Promise<FontPipeline> {
+    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());
+    // todo: don't double copy this
+    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();
+
+    // create a texture view
+    const fontBindGroup = device.createBindGroup({
+      layout: pipeline.getBindGroupLayout(0),
+      entries: [
+        // msdf texture
+        {
+          binding: 0,
+          resource: texture.createView(),
+        },
+        // msdf texture sampler
+        {
+          binding: 1,
+          resource: device.createSampler(sampler),
+        },
+        // buffer of character uv and offset data
+        {
+          binding: 2,
+          resource: {
+            buffer: charsGpuBuffer,
+          },
+        },
+        // buffer of font metadata, e.g. line height
+        {
+          binding: 3,
+          resource: {
+            buffer: fontDataBuffer,
+          },
+        },
+      ],
+    });
+    return new FontPipeline(pipeline, font, fontBindGroup, maxCharCount);
+  }
+}
+
+export function pipelinePromise(
+  device: GPUDevice,
+  colorFormat: GPUTextureFormat,
+  label: string,
+) {
+  const shader = device.createShaderModule({
+    label: `${label} shader`,
+    code: msdfShader,
+  });
+
+  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",
+    },
+  });
+}
+
+if (typeof GPUShaderStage === "undefined") {
+  // polyfill GPUShaderStage so that toodle can be imported in non-browser environments
+  // eg for automated testing
+  globalThis.GPUShaderStage = {
+    VERTEX: 1,
+    FRAGMENT: 2,
+    COMPUTE: 4,
+  };
+}
+
+const fontBindGroupLayout: GPUBindGroupLayoutDescriptor = {
+  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: {},
+    },
+  ],
+};
+
+const engineUniformBindGroupLayout: GPUBindGroupLayoutDescriptor = {
+  label: "Uniform bind group",
+  entries: [
+    {
+      binding: 0,
+      visibility: GPUShaderStage.VERTEX,
+      buffer: {},
+    },
+  ],
+};
+
+const sampler: GPUSamplerDescriptor = {
+  label: "MSDF text sampler",
+  minFilter: "linear",
+  magFilter: "linear",
+  mipmapFilter: "linear",
+  maxAnisotropy: 16,
+};
+
+const textUniformBindGroupLayout: GPUBindGroupLayoutDescriptor = {
+  label: "MSDF text block uniform",
+  entries: [
+    {
+      // text data - matrix, color, font size, characters
+      binding: 0,
+      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+      buffer: { type: "read-only-storage" },
+    },
+    {
+      binding: 1,
+      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+      buffer: { type: "read-only-storage" },
+    },
+  ],
+};

package/src/text/MsdfFont.ts

@@ -0,0 +1,190 @@
+// MsdfFont has the cpu data for a font
+
+// The kerning map stores a spare map of character ID pairs with an associated
+// X offset that should be applied to the character spacing when the second
+// character ID is rendered after the first.
+import { warnOnce } from "../utils/error";
+
+export type KerningMap = Map<number, Map<number, number>>;
+
+export interface MsdfChar {
+  id: number;
+  index: number;
+  char: string;
+  width: number;
+  height: number;
+  xoffset: number;
+  yoffset: number;
+  xadvance: number;
+  chnl: number;
+  x: number;
+  y: number;
+  page: number;
+  charIndex: number;
+}
+
+export class MsdfFont {
+  /** the name of the font */
+  name: string;
+  /** the set of available characters in the font texture */
+  charset: string[];
+  charCount: number;
+  lineHeight: number;
+
+  /** a binary buffer of character data for loading into the gpu */
+  charBuffer: Float32Array;
+
+  #kernings: KerningMap;
+  #chars: Map<number, MsdfChar>;
+  #fallbackCharCode?: number;
+
+  constructor(
+    public id: string,
+    public json: MsdfFontJson,
+    public 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<number, number>();
+          this.#kernings.set(kearning.first, charKerning);
+        }
+        charKerning.set(kearning.second, kearning.amount);
+      }
+    }
+
+    this.#chars = new Map<number, MsdfChar>();
+    const charCount = Object.values(json.chars).length;
+    this.charBuffer = new Float32Array(charCount * 8);
+    let offset = 0;
+    const u = 1 / json.common.scaleW;
+    const v = 1 / json.common.scaleH;
+
+    for (const [i, char] of json.chars.entries()) {
+      this.#chars.set(char.id, char);
+      this.#chars.get(char.id)!.charIndex = i;
+      this.charBuffer[offset] = char.x * u; // texOffset.x
+      this.charBuffer[offset + 1] = char.y * v; // texOffset.y
+      this.charBuffer[offset + 2] = char.width * u; // texExtent.x
+      this.charBuffer[offset + 3] = char.height * v; // texExtent.y
+      this.charBuffer[offset + 4] = char.width; // size.x
+      this.charBuffer[offset + 5] = char.height; // size.y
+      this.charBuffer[offset + 6] = char.xoffset; // offset.x
+      this.charBuffer[offset + 7] = -char.yoffset; // offset.y
+      offset += 8;
+    }
+  }
+
+  getChar(charCode: number): MsdfChar {
+    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;
+  }
+
+  // Gets the distance in pixels a line should advance for a given character code. If the upcoming
+  // character code is given any kerning between the two characters will be taken into account.
+  getXAdvance(charCode: number, nextCharCode = -1): number {
+    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;
+  }
+
+  static async create(id: string, fontJsonUrl: URL): Promise<MsdfFont> {
+    const response = await fetch(fontJsonUrl);
+    const json = (await response.json()) as MsdfFontJson;
+
+    const i = fontJsonUrl.href.lastIndexOf("/");
+    const baseUrl = i !== -1 ? fontJsonUrl.href.substring(0, i + 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 fallbackCharacter(character: string) {
+    const charCode: number = 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;
+    }
+  }
+}
+
+type MsdfFontJson = {
+  pages: string[];
+  chars: MsdfChar[];
+  info: {
+    face: string;
+    size: string;
+    bold: number;
+    italic: number;
+    charset: string[];
+    unicode: number;
+    stretchH: number;
+    smooth: number;
+    aa: number;
+    padding: number[];
+    spacing: number[];
+  };
+  common: {
+    lineHeight: number;
+    base: number;
+    scaleW: number;
+    scaleH: number;
+    pages: number;
+    packed: number;
+    alphaChnl: number;
+    redChnl: number;
+    greenChnl: number;
+    blueChnl: number;
+  };
+  distanceField: { fieldType: string; distanceRange: number };
+  kernings: Kerning[];
+};
+
+type Kerning = { first: number; second: number; amount: number };
+
+export enum WhitespaceKeyCodes {
+  HorizontalTab = 9,
+  Newline = 10,
+  CarriageReturn = 13,
+  Space = 32,
+}

package/src/text/TextFormatting.ts

@@ -0,0 +1,28 @@
+import type { Color } from "../coreTypes/Color";
+
+export interface TextFormatting {
+  /*Horizontal alignment of the text, defaults to center*/
+  align?: "left" | "right" | "center";
+  /*Font size in pixels. 10 means that a character with an em height of 1 will be 10 pixels high.*/
+  fontSize?: number;
+  /*RGBA color of the text, defaults to white.*/
+  color?: Color;
+
+  /*Options for word wrapping.*/
+  wordWrap?: WordWrapOptions;
+
+  /*Options for shrinking the text to fit within the bounds.*/
+  shrinkToFit?: ShrinkToFitOptions;
+}
+
+export type WordWrapOptions = {
+  emWidth: number;
+  breakOn?: "word" | "character";
+};
+
+export type ShrinkToFitOptions = {
+  minFontSize: number;
+  maxFontSize?: number;
+  maxLines?: number;
+  padding?: number;
+};

package/src/text/TextNode.ts

@@ -0,0 +1,82 @@
+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";
+
+export const DEFAULT_FONT_SIZE = 14;
+
+export class TextNode extends SceneNode {
+  #text: string;
+  #formatting: TextFormatting;
+  #font: MsdfFont;
+
+  constructor(shader: TextShader, text: string, opts: TextOptions = {}) {
+    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.idealSize) {
+      opts.idealSize = { 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;
+  }
+
+  get text() {
+    return this.#text;
+  }
+
+  get formatting() {
+    return this.#formatting;
+  }
+
+  get font() {
+    return this.#font;
+  }
+
+  set text(text: string) {
+    if (!text) {
+      throw new Error("text cannot be empty");
+    }
+    this.#text = text;
+    this.setDirty();
+  }
+
+  get tint() {
+    return this.#formatting.color || { r: 1, g: 1, b: 1, a: 1 };
+  }
+
+  set tint(tint: Color) {
+    this.#formatting.color = tint;
+    this.setDirty();
+  }
+
+  set formatting(formatting: TextFormatting) {
+    this.#formatting = formatting;
+    this.setDirty();
+  }
+}
+
+export type TextOptions = Omit<NodeOptions, "render"> & TextFormatting;