tsl-slug

A reference implementation of the Slug algorithm using Three.js TSL (Three.js Shader Language) and WebGPU.

The Slug algorithm, originally developed by Eric Lengyel and presented at SIGGRAPH 2017, enables resolution-independent, GPU-accelerated rendering of Bezier curve-based font outlines — directly from raw glyph data, without rasterization or pre-baked textures.

This project reimplements the algorithm in TypeScript / TSL / WebGPU, and includes a self-contained TTF/OTF font parser with no external dependencies for font parsing.

Features

• GPU-accelerated glyph rendering via custom TSL fragment shader
• Built-in binary font parser supporting both TrueType (.ttf) and OpenType/CFF (.otf)
• Quadratic, cubic Bezier curve and line segment coverage computation
• Horizontal/vertical band-based spatial acceleration structure
• Interactive UI: load custom fonts, select characters, view metrics and path commands

Getting Started

Requires Node.js and pnpm.

pnpm install
pnpm dev

Open the URL shown in the terminal. A WebGPU-capable browser is required (Chrome 113+, Edge 113+, or Firefox Nightly with dom.webgpu.enabled).

Build

pnpm build     # Type-check + production build
pnpm preview   # Preview production build

How It Works

1. Font Parsing — The built-in parser reads the raw binary data of a TTF/OTF file, extracting glyph outlines from glyf (TrueType) or CFF (OpenType) tables via a full Type 2 CharString interpreter.
2. Path Extraction — Glyph contours are converted to SVG-style path commands (M/L/Q/C/Z), then parsed into typed curve segments (line, quadratic, cubic).
3. Data Packing — Curves are packed into GPU textures: a curve data texture (3 RGBA float texels per curve) and a band acceleration texture that spatially partitions curves for efficient lookup.
4. TSL Shader — A custom fragment shader written in Three.js TSL iterates over the band structure, solves quadratic/cubic equations per curve, and computes per-pixel coverage using winding number evaluation for crisp, resolution-independent rendering.

References

• Slug Library — Official Slug library by Eric Lengyel
• Slug Algorithm on GitHub — Original source and reference shaders
• Lengyel, E. (2017). GPU-Powered Font Rendering Directly from Glyph Outlines. Journal of Computer Graphics Techniques (JCGT), vol. 6, no. 2.

Reference materials (paper PDFs and HLSL shaders) are included in the /reference directory.

License

MIT