Slug Font Rendering
Implement GPU-accelerated Slug vector font rendering using reference HLSL shaders instead of bitmap font atlases.
Overview
Slug Font Rendering is an agent skill for the Build phase that guides GPU-accelerated vector font rendering with Slug reference HLSL shaders and Bézier-based coverage.
Install
npx skills add https://github.com/aradotso/trending-skills --skill slug-font-renderingWhat is this skill?
- Reference HLSL for the Slug font rendering algorithm (JCGT 2017)
- GPU vector TrueType/OpenType glyphs without pre-rasterized texture atlases
- Per-fragment anti-aliased coverage via quadratic Bézier and line segment math
- Arbitrary scale rendering with no resolution-dependent quality loss
- MIT-licensed reference; patent dedicated to public domain with attribution if distributed
- JCGT 2017 Slug algorithm reference
- Quadratic Bézier and line segment outline encoding
Adoption & trust: 1.2k installs on skills.sh; 31 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI or game text looks soft or expensive at scale because you rely on rasterized atlases or CPU outlines that do not hold up on high-DPI or zoomed views.
Who is it for?
Indie game devs and graphics programmers adding sharp dynamic text to custom engines or GPU-first apps.
Skip if: Simple web apps that only need system fonts or CSS—skip Slug unless you own the renderer stack.
When should I use this skill?
Triggers include Slug GPU font rendering, HLSL text shaders, vector glyph coverage, or Bézier font rendering on GPU.
What do I get? / Deliverables
You can implement or adapt Slug-style HLSL shader paths that render crisp scalable glyphs on the GPU without maintaining giant font textures.
- Slug-aligned HLSL shader integration plan
- Glyph outline and coverage rendering approach without atlases
Recommended Skills
Journey fit
How it compares
Shader and algorithm reference for custom renderers, not a drop-in web font or Skia/CSS text stack.
Common Questions / FAQ
Who is slug-font-rendering for?
Solo builders and small teams implementing custom GPU renderers, game engines, or native apps that need scalable anti-aliased text.
When should I use slug-font-rendering?
During Build frontend work when you are porting Slug HLSL, replacing font atlases, or debugging Bézier-based glyph coverage in your shader pipeline.
Is slug-font-rendering safe to install?
It is primarily documentation and shader references without prescribed shell or network actions; review the Security Audits panel on this page before installing.
SKILL.md
READMESKILL.md - Slug Font Rendering
# Slug Font Rendering Algorithm > Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection. Slug is a reference implementation of the Slug font rendering algorithm — a GPU-accelerated technique for rendering vector fonts and glyphs at arbitrary scales with high quality anti-aliasing. It works by encoding glyph outlines as lists of quadratic Bézier curves and line segments, then resolving coverage directly in fragment shaders without pre-rasterized textures. **Paper:** [JCGT 2017 — Slug Algorithm](https://jcgt.org/published/0006/02/02/) **Blog (updates):** [A Decade of Slug](https://terathon.com/blog/decade-slug.html) **License:** MIT — Patent dedicated to public domain. Credit required if distributed. --- ## What Slug Does - Renders TrueType/OpenType glyphs entirely on the GPU - No texture atlases or pre-rasterization needed - Scales to any resolution without quality loss - Anti-aliased coverage computed per-fragment using Bézier math - Works with any rendering API that supports programmable shaders (D3D11/12, Vulkan, Metal via translation) --- ## Repository Structure ``` Slug/ ├── slug.hlsl # Core fragment shader — coverage computation ├── band.hlsl # Band-based optimization for glyph rendering ├── curve.hlsl # Quadratic Bézier and line segment evaluation ├── README.md ``` --- ## Installation / Integration Slug is a **reference implementation** — you integrate the HLSL shaders into your own rendering pipeline. ### Step 1: Clone the Repository ```bash git clone https://github.com/EricLengyel/Slug.git ``` ### Step 2: Include the Shaders Copy the `.hlsl` files into your shader directory and include them in your pipeline: ```hlsl #include "slug.hlsl" #include "curve.hlsl" ``` ### Step 3: Prepare Glyph Data on the CPU You must preprocess font outlines (TrueType/OTF) into Slug's curve buffer format: - Decompose glyph contours into quadratic Bézier segments and line segments - Upload curve data to a GPU buffer (structured buffer or texture buffer) - Precompute per-glyph "band" metadata for the band optimization --- ## Core Concepts ### Glyph Coordinate System - Glyph outlines live in **font units** (typically 0–2048 or 0–1000 per em) - The fragment shader receives a position in glyph space via interpolated vertex attributes - Coverage is computed by counting signed curve crossings in the Y direction (winding number) ### Curve Data Format Each curve entry in the GPU buffer stores: ```hlsl // Line segment: p0, p1 // Quadratic Bézier: p0, p1 (control), p2 struct CurveRecord { float2 p0; // Start point float2 p1; // Control point (or end point for lines) float2 p2; // End point (unused for lines — flagged via type) // Type/flags encoded separately or in padding }; ``` ### Band Optimization The glyph bounding box is divided into horizontal **bands**. Each band stores only the curves that intersect it, reducing per-fragment work from O(all curves) to O(local curves). --- ## Key Shader Code & Patterns ### Fragment Shader Entry Point (Conceptual Integration) ```hlsl // Inputs from vertex shader struct PS_Input { float4 position : SV_Position; float2 glyphCoord : TEXCOORD0; // Position in glyph/font units // Band index or precomputed band data nointerpolation uint bandOffset : TEXCOORD1; nointerpolation uint curveCount : TEXCOORD2; }; // Glyph curve data buffer StructuredBuffer<float4> CurveBuffer : register(t0); float4 PS_Slug(PS_Input input) : S