Repolode
Submit
pmndrs

pmndrs/glyph

A TypeScript typography engine for web graphics, covering font baking, Unicode shaping, paragraph layout and batched text rendering for three.js and WebGPU.

View on GitHub
Stars
404
Forks
7
Open issues
53
Last commit
8 hours ago

What is it?

Glyph is a typography engine for web graphics. It bakes fonts into glb files containing bitmap, MSDF, and/or Slug data through a CLI, so baked fonts load quickly without heavy runtime processing. It handles Unicode shaping including ligatures, bidirectional text and grapheme-aware boundaries, along with paragraph alignment, word wrap, clipping and ellipsis.

On the rendering side, Glyph provides batched text rendering for three.js through WebGPURenderer, with integrations for React Three Fiber and TresJS (Vue). Its core is framework-neutral, and a GlyphConfig API lets developers plug in their own renderer. TSL and TypeGPU shaders are exported for use in custom engines.

The project is pre-release, and its feature table marks some areas as partial, such as vertical CJK writing and text decorations beyond solid underline, overline and strikethrough. Color emoji and vertical writing are listed as future work.

Key features

  • 01Bakes fonts into glb files with bitmap, MSDF, and Slug data via a CLI.
  • 02Unicode shaping with ligatures, bidirectional text and complex scripts.
  • 03Paragraph layout with alignment, word wrap, clipping and ellipsis.
  • 04Batched text rendering for three.js using WebGPURenderer.
  • 05React Three Fiber and TresJS (Vue) integrations with font-loading hooks.
  • 06Framework-neutral GlyphConfig API for custom renderers.

Use cases

  • Rendering labels and HUD text in three.js scenes on WebGPU.
  • Building interactive 3D interfaces with React Three Fiber or TresJS.
  • Baking icon fonts into lookup tables keyed by glyph name.
  • Extracting glyph outlines for physics colliders or custom graphics.

Quick start

  1. 1

    Install the package and three.js

    pnpm add @pmndrs/glyph three
  2. 2

    Bake a font into a glb file with the glyph CLI

    pnpm glyph bake --input Inter-Regular.ttf --output Inter.font.glb --bitmap 32 --msdf --slug
  3. 3

    Create text with the three.js integration and render it in your scene

Things to know

  • Glyph is pre-release, so its features may change over time.
  • The classic WebGLRenderer is not supported; three.js requires WebGPURenderer.
  • Some features are partial, such as vertical CJK writing and double or wavy text decorations.

Topics

#typography#text-rendering#webgpu#threejs#fonts#msdf#unicode#typegpu

FAQ

What is glyph?
A TypeScript typography engine for web graphics, covering font baking, Unicode shaping, paragraph layout and batched text rendering for three.js and WebGPU. Glyph is a typography engine for web graphics. It bakes fonts into glb files containing bitmap, MSDF, and/or Slug data through a CLI, so baked fonts load quickly without heavy runtime processing. It handles Unicode shaping including ligatures, bidirectional text and grapheme-aware boundaries, along with paragraph alignment, word wrap, clipping and ellipsis.
Is glyph free to use? What license does it have?
glyph is open source under the MIT license. Check the license terms before using it in commercial products.
Is glyph still maintained?
Actively maintained. The last commit to glyph was on Oct 21, 2026.
What can I use glyph for?
Rendering labels and HUD text in three.js scenes on WebGPU. Building interactive 3D interfaces with React Three Fiber or TresJS. Baking icon fonts into lookup tables keyed by glyph name. Extracting glyph outlines for physics colliders or custom graphics.
How do I install glyph?
Install the package and three.js: pnpm add @pmndrs/glyph three Bake a font into a glb file with the glyph CLI: pnpm glyph bake --input Inter-Regular.ttf --output Inter.font.glb --bitmap 32 --msdf --slug Create text with the three.js integration and render it in your scene
Where can I get glyph?
The source code and installation instructions are on GitHub: https://github.com/pmndrs/glyph

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects