Text Rendering

type Lookups = {
  atlas: {
    fontSize: number;
    height: number;
    positions: Array<Vec2>;
    sizes: Array<Vec2>;
    width: number;
  };
  fonts: Array<{
    ascender: number;
    buffer: ArrayBuffer;
    capHeight: number;
    glyphs: Map<number, Glyph>;
    kern: KerningFunction;
    name: string;
    ttf: TTF;
    unitsPerEm: number;
  }>;
  uvs: Map<string, Vec4>;
};

// Alphabet is a string containing all characters that should be included in
// the atlas.
const alphabet = "AaBbCc…";

const [interTTF, interBoldTTF] = await Promise.all(
  ["/Inter.ttf", "/Inter-SemiBold.ttf"].map((url) =>
    fetch(url).then((response) => response.arrayBuffer()),
  ),
);

const lookups = prepareLookups(
  // Declare all fonts that should be included.
  [
    {
      buffer: interTTF,
      name: "Inter",
      ttf: parseTTF(interTTF),
    },
    {
      buffer: interBoldTTF,
      name: "InterBold",
      ttf: parseTTF(interBoldTTF),
    },
  ],
  // Render at 150px size. The size of the font atlas will be determined by
  // packShelves() algorithm.
  { alphabet, fontSize: 150 },
);

// Generate _one_ font atlas texture for all fonts. In future it would make
// sense to allow splitting for projects that use many fonts.
const fontAtlas = await renderFontAtlas(lookups, { useSDF: true });