slug-font-rendering
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSlug Font Rendering Algorithm
Slug字体渲染算法
Skill by 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
Blog (updates): A Decade of Slug
License: MIT — Patent dedicated to public domain. Credit required if distributed.
Blog (updates): A Decade of Slug
License: MIT — Patent dedicated to public domain. Credit required if distributed.
来自ara.so的技能——2026每日技能合集。
Slug是Slug字体渲染算法的参考实现,这是一种GPU加速技术,可在任意缩放比例下渲染矢量字体和字形,并实现高质量抗锯齿效果。它通过将字形轮廓编码为二次Bézier曲线和线段列表,直接在片段着色器中计算覆盖率,无需预光栅化纹理。
What Slug Does
Slug的功能
- 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)
- 完全在GPU上渲染TrueType/OpenType字形
- 无需纹理图集或预光栅化处理
- 可缩放至任意分辨率且无质量损失
- 通过Bézier数学运算在每个片段上计算抗锯齿覆盖率
- 兼容所有支持可编程着色器的渲染API(D3D11/12、Vulkan、Metal,需通过转换)
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.mdSlug/
├── 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.mdInstallation / Integration
安装与集成
Slug is a reference implementation — you integrate the HLSL shaders into your own rendering pipeline.
Slug是参考实现——你需要将HLSL着色器整合到自己的渲染管线中。
Step 1: Clone the Repository
步骤1:克隆仓库
bash
git clone https://github.com/EricLengyel/Slug.gitbash
git clone https://github.com/EricLengyel/Slug.gitStep 2: Include the Shaders
步骤2:引入着色器
Copy the files into your shader directory and include them in your pipeline:
.hlslhlsl
#include "slug.hlsl"
#include "curve.hlsl"将文件复制到你的着色器目录,并在管线中引入:
.hlslhlsl
#include "slug.hlsl"
#include "curve.hlsl"Step 3: Prepare Glyph Data on the CPU
步骤3:在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
你必须将字体轮廓(TrueType/OTF)预处理为Slug的曲线缓冲区格式:
- 将字形轮廓分解为二次Bézier线段和直线段
- 将曲线数据上传至GPU缓冲区(结构化缓冲区或纹理缓冲区)
- 为每个字形预计算“波段”元数据,以启用波段优化
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)
- 字形轮廓位于字体单位中(通常每个em为0–2048或0–1000单位)
- 片段着色器通过插值顶点属性接收字形空间中的位置
- 覆盖率通过统计Y方向上的曲线交叉符号(环绕数)来计算
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
};GPU缓冲区中的每个曲线条目存储以下内容:
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).
字形边界框被划分为水平波段。每个波段仅存储与其相交的曲线,将每个片段的计算量从O(所有曲线)降低至O(局部曲线)。
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) : SV_Target
{
float coverage = ComputeGlyphCoverage(
input.glyphCoord,
CurveBuffer,
input.bandOffset,
input.curveCount
);
// Premultiplied alpha output
float4 color = float4(textColor.rgb * coverage, coverage);
return color;
}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) : SV_Target
{
float coverage = ComputeGlyphCoverage(
input.glyphCoord,
CurveBuffer,
input.bandOffset,
input.curveCount
);
// Premultiplied alpha output
float4 color = float4(textColor.rgb * coverage, coverage);
return color;
}Quadratic Bézier Coverage Computation
二次Bézier覆盖率计算
The heart of the algorithm — computing signed coverage from a quadratic Bézier:
hlsl
// Evaluate whether a quadratic bezier contributes to coverage at point p
// p0: start, p1: control, p2: end
// Returns signed coverage contribution
float QuadraticBezierCoverage(float2 p, float2 p0, float2 p1, float2 p2)
{
// Transform to canonical space
float2 a = p1 - p0;
float2 b = p0 - 2.0 * p1 + p2;
// Find t values where bezier Y == p.y
float2 delta = p - p0;
float A = b.y;
float B = a.y;
float C = p0.y - p.y;
float coverage = 0.0;
if (abs(A) > 1e-6)
{
float disc = B * B - A * C;
if (disc >= 0.0)
{
float sqrtDisc = sqrt(disc);
float t0 = (-B - sqrtDisc) / A;
float t1 = (-B + sqrtDisc) / A;
// For each valid t in [0,1], compute x and check winding
if (t0 >= 0.0 && t0 <= 1.0)
{
float x = (A * t0 + 2.0 * B) * t0 + p0.x + delta.x;
// ... accumulate signed coverage
}
if (t1 >= 0.0 && t1 <= 1.0)
{
float x = (A * t1 + 2.0 * B) * t1 + p0.x + delta.x;
// ... accumulate signed coverage
}
}
}
else
{
// Degenerate to linear case
float t = -C / (2.0 * B);
if (t >= 0.0 && t <= 1.0)
{
float x = 2.0 * a.x * t + p0.x;
// ... accumulate signed coverage
}
}
return coverage;
}算法核心——通过二次Bézier曲线计算符号覆盖率:
hlsl
// Evaluate whether a quadratic bezier contributes to coverage at point p
// p0: start, p1: control, p2: end
// Returns signed coverage contribution
float QuadraticBezierCoverage(float2 p, float2 p0, float2 p1, float2 p2)
{
// Transform to canonical space
float2 a = p1 - p0;
float2 b = p0 - 2.0 * p1 + p2;
// Find t values where bezier Y == p.y
float2 delta = p - p0;
float A = b.y;
float B = a.y;
float C = p0.y - p.y;
float coverage = 0.0;
if (abs(A) > 1e-6)
{
float disc = B * B - A * C;
if (disc >= 0.0)
{
float sqrtDisc = sqrt(disc);
float t0 = (-B - sqrtDisc) / A;
float t1 = (-B + sqrtDisc) / A;
// For each valid t in [0,1], compute x and check winding
if (t0 >= 0.0 && t0 <= 1.0)
{
float x = (A * t0 + 2.0 * B) * t0 + p0.x + delta.x;
// ... accumulate signed coverage
}
if (t1 >= 0.0 && t1 <= 1.0)
{
float x = (A * t1 + 2.0 * B) * t1 + p0.x + delta.x;
// ... accumulate signed coverage
}
}
}
else
{
// Degenerate to linear case
float t = -C / (2.0 * B);
if (t >= 0.0 && t <= 1.0)
{
float x = 2.0 * a.x * t + p0.x;
// ... accumulate signed coverage
}
}
return coverage;
}Line Segment Coverage
直线段覆盖率
hlsl
// Signed coverage contribution of a line segment from p0 to p1
float LineCoverage(float2 p, float2 p0, float2 p1)
{
// Check Y range
float minY = min(p0.y, p1.y);
float maxY = max(p0.y, p1.y);
if (p.y < minY || p.y >= maxY)
return 0.0;
// Interpolate X at p.y
float t = (p.y - p0.y) / (p1.y - p0.y);
float x = lerp(p0.x, p1.x, t);
// Winding: +1 if p is to the left (inside), -1 if right
float dir = (p1.y > p0.y) ? 1.0 : -1.0;
return (p.x <= x) ? dir : 0.0;
}hlsl
// Signed coverage contribution of a line segment from p0 to p1
float LineCoverage(float2 p, float2 p0, float2 p1)
{
// Check Y range
float minY = min(p0.y, p1.y);
float maxY = max(p0.y, p1.y);
if (p.y < minY || p.y >= maxY)
return 0.0;
// Interpolate X at p.y
float t = (p.y - p0.y) / (p1.y - p0.y);
float x = lerp(p0.x, p1.x, t);
// Winding: +1 if p is to the left (inside), -1 if right
float dir = (p1.y > p0.y) ? 1.0 : -1.0;
return (p.x <= x) ? dir : 0.0;
}Anti-Aliasing with Partial Coverage
基于部分覆盖率的抗锯齿
For smooth edges, use the distance to the nearest curve for sub-pixel anti-aliasing:
hlsl
// Compute AA coverage using partial pixel coverage
// windingNumber: integer winding from coverage pass
// distToEdge: signed distance to nearest curve (in pixels)
float AntiAliasedCoverage(int windingNumber, float distToEdge)
{
// Non-zero winding rule
bool inside = (windingNumber != 0);
// Smooth transition at edges using clamp
float edgeCoverage = clamp(distToEdge + 0.5, 0.0, 1.0);
return inside ? edgeCoverage : (1.0 - edgeCoverage);
}为实现平滑边缘,使用到最近曲线的距离进行亚像素抗锯齿:
hlsl
// Compute AA coverage using partial pixel coverage
// windingNumber: integer winding from coverage pass
// distToEdge: signed distance to nearest curve (in pixels)
float AntiAliasedCoverage(int windingNumber, float distToEdge)
{
// Non-zero winding rule
bool inside = (windingNumber != 0);
// Smooth transition at edges using clamp
float edgeCoverage = clamp(distToEdge + 0.5, 0.0, 1.0);
return inside ? edgeCoverage : (1.0 - edgeCoverage);
}Vertex Shader Pattern
顶点着色器模式
hlsl
struct VS_Input
{
float2 position : POSITION; // Glyph quad corner in screen/world space
float2 glyphCoord : TEXCOORD0; // Corresponding glyph-space coordinate
uint bandOffset : TEXCOORD1; // Offset into curve buffer for this glyph
uint curveCount : TEXCOORD2; // Number of curves in band
};
struct VS_Output
{
float4 position : SV_Position;
float2 glyphCoord : TEXCOORD0;
nointerpolation uint bandOffset : TEXCOORD1;
nointerpolation uint curveCount : TEXCOORD2;
};
VS_Output VS_Slug(VS_Input input)
{
VS_Output output;
output.position = mul(float4(input.position, 0.0, 1.0), WorldViewProjection);
output.glyphCoord = input.glyphCoord;
output.bandOffset = input.bandOffset;
output.curveCount = input.curveCount;
return output;
}hlsl
struct VS_Input
{
float2 position : POSITION; // Glyph quad corner in screen/world space
float2 glyphCoord : TEXCOORD0; // Corresponding glyph-space coordinate
uint bandOffset : TEXCOORD1; // Offset into curve buffer for this glyph
uint curveCount : TEXCOORD2; // Number of curves in band
};
struct VS_Output
{
float4 position : SV_Position;
float2 glyphCoord : TEXCOORD0;
nointerpolation uint bandOffset : TEXCOORD1;
nointerpolation uint curveCount : TEXCOORD2;
};
VS_Output VS_Slug(VS_Input input)
{
VS_Output output;
output.position = mul(float4(input.position, 0.0, 1.0), WorldViewProjection);
output.glyphCoord = input.glyphCoord;
output.bandOffset = input.bandOffset;
output.curveCount = input.curveCount;
return output;
}CPU-Side Data Preparation (Pseudocode)
CPU端数据准备(伪代码)
cpp
// 1. Load font file and extract glyph outlines
FontOutline outline = LoadGlyphOutline(font, glyphIndex);
// 2. Decompose to quadratic Beziers (TrueType is already quadratic)
// OTF cubic curves must be approximated/split into quadratics
std::vector<SlugCurve> curves = DecomposeToQuadratics(outline);
// 3. Compute bands
float bandHeight = outline.bounds.height / NUM_BANDS;
std::vector<BandData> bands = ComputeBands(curves, NUM_BANDS, bandHeight);
// 4. Upload to GPU
UploadStructuredBuffer(curveBuffer, curves.data(), curves.size());
UploadStructuredBuffer(bandBuffer, bands.data(), bands.size());
// 5. Per glyph instance: store bandOffset and curveCount per band
// in vertex data so the fragment shader can index directlycpp
// 1. Load font file and extract glyph outlines
FontOutline outline = LoadGlyphOutline(font, glyphIndex);
// 2. Decompose to quadratic Beziers (TrueType is already quadratic)
// OTF cubic curves must be approximated/split into quadratics
std::vector<SlugCurve> curves = DecomposeToQuadratics(outline);
// 3. Compute bands
float bandHeight = outline.bounds.height / NUM_BANDS;
std::vector<BandData> bands = ComputeBands(curves, NUM_BANDS, bandHeight);
// 4. Upload to GPU
UploadStructuredBuffer(curveBuffer, curves.data(), curves.size());
UploadStructuredBuffer(bandBuffer, bands.data(), bands.size());
// 5. Per glyph instance: store bandOffset and curveCount per band
// in vertex data so the fragment shader can index directlyRender State Requirements
渲染状态要求
hlsl
// Blend state: premultiplied alpha
BlendState SlugBlend
{
BlendEnable = TRUE;
SrcBlend = ONE; // Premultiplied
DestBlend = INV_SRC_ALPHA;
BlendOp = ADD;
SrcBlendAlpha = ONE;
DestBlendAlpha = INV_SRC_ALPHA;
BlendOpAlpha = ADD;
};
// Depth: typically write disabled for text overlay
DepthStencilState SlugDepth
{
DepthEnable = FALSE;
DepthWriteMask = ZERO;
};
// Rasterizer: no backface culling (glyph quads are 2D)
RasterizerState SlugRaster
{
CullMode = NONE;
FillMode = SOLID;
};hlsl
// Blend state: premultiplied alpha
BlendState SlugBlend
{
BlendEnable = TRUE;
SrcBlend = ONE; // Premultiplied
DestBlend = INV_SRC_ALPHA;
BlendOp = ADD;
SrcBlendAlpha = ONE;
DestBlendAlpha = INV_SRC_ALPHA;
BlendOpAlpha = ADD;
};
// Depth: typically write disabled for text overlay
DepthStencilState SlugDepth
{
DepthEnable = FALSE;
DepthWriteMask = ZERO;
};
// Rasterizer: no backface culling (glyph quads are 2D)
RasterizerState SlugRaster
{
CullMode = NONE;
FillMode = SOLID;
};Common Patterns
常见模式
Rendering a String
渲染字符串
cpp
// For each glyph in string:
for (auto& glyph : string.glyphs)
{
// Emit a quad (2 triangles) covering the glyph bounding box
// Each vertex carries:
// - screen position
// - glyph-space coordinate (the same corner in font units)
// - bandOffset + curveCount for the fragment shader
float2 min = glyph.screenMin;
float2 max = glyph.screenMax;
float2 glyphMin = glyph.fontMin;
float2 glyphMax = glyph.fontMax;
EmitQuad(min, max, glyphMin, glyphMax,
glyph.bandOffset, glyph.curveCount);
}cpp
// For each glyph in string:
for (auto& glyph : string.glyphs)
{
// Emit a quad (2 triangles) covering the glyph bounding box
// Each vertex carries:
// - screen position
// - glyph-space coordinate (the same corner in font units)
// - bandOffset + curveCount for the fragment shader
float2 min = glyph.screenMin;
float2 max = glyph.screenMax;
float2 glyphMin = glyph.fontMin;
float2 glyphMax = glyph.fontMax;
EmitQuad(min, max, glyphMin, glyphMax,
glyph.bandOffset, glyph.curveCount);
}Scaling Text
缩放文本
Scaling is handled entirely on the CPU side by transforming the screen-space quad. The glyph-space coordinates stay constant — the fragment shader always works in font units.
cpp
float scale = desiredPixelSize / font.unitsPerEm;
float2 screenMin = origin + glyph.fontMin * scale;
float2 screenMax = origin + glyph.fontMax * scale;缩放完全在CPU端处理,只需变换屏幕空间的四边形。字形空间坐标保持不变——片段着色器始终在字体单位中工作。
cpp
float scale = desiredPixelSize / font.unitsPerEm;
float2 screenMin = origin + glyph.fontMin * scale;
float2 screenMax = origin + glyph.fontMax * scale;Troubleshooting
故障排除
| Problem | Cause | Fix |
|---|---|---|
| Glyph appears hollow/inverted | Winding order reversed | Check contour orientation; TrueType uses clockwise for outer contours |
| Jagged edges | Anti-aliasing not applied | Ensure distance-to-edge is computed and used in final coverage |
| Performance poor | Band optimization not active | Verify per-fragment curve count is small (< ~20); increase band count |
| Cubic curves not rendering | OTF cubic Béziers unsupported natively | Split cubics into quadratic approximations on CPU |
| Artifacts at glyph overlap | Curves not clipped to band | Clip curve Y range to band extents before upload |
| Black box instead of glyph | Blend state wrong | Use premultiplied alpha blend (ONE, INV_SRC_ALPHA) |
| Missing glyphs | Band offset incorrect | Validate bandOffset indexing aligns with buffer layout |
| 问题 | 原因 | 解决方法 |
|---|---|---|
| 字形显示为空心/反转 | 环绕顺序颠倒 | 检查轮廓方向;TrueType外轮廓使用顺时针方向 |
| 边缘锯齿严重 | 未启用抗锯齿 | 确保计算到边缘的距离并用于最终覆盖率计算 |
| 性能不佳 | 未启用波段优化 | 验证每个片段的曲线数量较少(<约20条);增加波段数量 |
| 三次曲线无法渲染 | 原生不支持OTF三次Bézier曲线 | 在CPU端将三次曲线分解为二次近似曲线 |
| 字形重叠处出现伪影 | 曲线未裁剪至波段范围 | 上传前将曲线Y范围裁剪至波段边界 |
| 显示为黑块而非字形 | 混合状态错误 | 使用预乘alpha混合模式(ONE, INV_SRC_ALPHA) |
| 字形缺失 | 波段偏移错误 | 验证bandOffset索引与缓冲区布局一致 |
Credits & Attribution
致谢与署名
Per the license: if you distribute software using this code, you must give credit to Eric Lengyel and the Slug algorithm.
Suggested attribution:
Font rendering uses the Slug Algorithm by Eric Lengyel (https://jcgt.org/published/0006/02/02/)
根据许可证要求:如果你分发使用此代码的软件,必须注明Eric Lengyel与Slug算法的出处。
推荐署名格式:
字体渲染使用Eric Lengyel开发的Slug算法(https://jcgt.org/published/0006/02/02/)