Text

1// Headline outlines as THREE.Shape[] in world units, from a TTF via opentype.js (kerning applied); same
2// extrusion / bevel / rounding / SDF voxelisation as the SVG mark (shape/logo.ts extrudeShapes + voxelize).
3import * as THREE from "three/webgpu";
4import { SVGLoader } from "three/addons/loaders/SVGLoader.js";
5import opentype from "opentype.js";
6
7export type Typeface = opentype.Font;
8
9const fonts = new Map<string, Promise<Typeface>>();
10export function loadTypeface(url: string): Promise<Typeface> {
11  let p = fonts.get(url);
12  if (!p) {
13    p = fetch(url)
14      .then((r) => {
15        if (!r.ok) throw new Error(`typeface: ${r.status}`);
16        return r.arrayBuffer();
17      })
18      .then((buf) => opentype.parse(buf));
19    fonts.set(url, p);
20  }
21  return p;
22}
23
24/** Advance width of one line in world units for font size 1 (one em = 1). */
25export function lineWidth(font: Typeface, line: string, letterSpacing = 0) {
26  return font.getAdvanceWidth(line, 1, { kerning: true, letterSpacing } as any);
27}
28
29/**
30 * `lines` set at `size` (em in world units), every line centred, stacked `lineHeight` ems apart, the block
31 * centred on the origin (cap height centred on y = 0 for a single line). Returns shapes with holes resolved.
32 */
33export function textShapes(
34  font: Typeface,
35  lines: string[],
36  size: number,
37  lineHeight: number,
38  letterSpacing = 0,
39): THREE.Shape[] {
40  const scale = size / font.unitsPerEm;
41  const capHeight = ((font.tables as any)?.os2?.sCapHeight ?? font.ascender * 0.72) * scale;
42  const step = lineHeight * size;
43  const blockH = step * (lines.length - 1) + capHeight;
44  const shapes: THREE.Shape[] = [];
45  lines.forEach((line, i) => {
46    const w = font.getAdvanceWidth(line, size, { kerning: true, letterSpacing } as any);
47    const baseline = blockH / 2 - capHeight - i * step;
48    const path = font.getPath(line, -w / 2, 0, size, { kerning: true, letterSpacing } as any);
49    const sp = new THREE.ShapePath();
50    // opentype paths are y-down: flip into the y-up object space
51    const Y = (y: number) => baseline - y;
52    for (const c of path.commands) {
53      if (c.type === "M") sp.moveTo(c.x, Y(c.y));
54      else if (c.type === "L") sp.lineTo(c.x, Y(c.y));
55      else if (c.type === "Q") sp.quadraticCurveTo(c.x1, Y(c.y1), c.x, Y(c.y));
56      else if (c.type === "C") sp.bezierCurveTo(c.x1, Y(c.y1), c.x2, Y(c.y2), c.x, Y(c.y));
57      else if (c.type === "Z") sp.currentPath?.closePath();
58    }
59    shapes.push(...SVGLoader.createShapes(sp as any));
60  });
61  return shapes;
62}