从零开始实现字体渲染
Hacker News 摘要原标题：Font Rendering from First Principles
字体渲染是一项经常被视为理所当然的技术，但其背后的复杂度远超想象。常用的开源字体引擎 FreeType 拥有超过 20 万行代码。作者通过从零开始实现一个字体渲染器，深入探讨了 TTF 文件规范、字形解析、栅格化以及有向距离场（SDF）渲染等核心技术。
为什么选择自行实现
• 建立深层理解：通过亲手实践，能更深刻地理解支撑互联网显示的底层技术。
• 优化直觉：了解渲染网页或图形界面所需的工作量，明确字体缓存和降低渲染耗时的重要性。
• 功能扩展：掌握基础后可以轻松实现程序化边框等高级功能。
• 编程乐趣：作为一种休闲编程挑战，探索其内在逻辑非常有趣。
TTF 文件格式
TTF 是 TrueType 字体格式，它是 OpenType（OTF）的基础。TTF 文件本质上提供了从字符码点（Codepoint）到字形（Glyph）信息的映射。
• 码点与 Unicode：字符的码点是指其在 Unicode 标准中的数字编号。作者主要关注拉丁字母，其码点可以通过 uint8_t 直接获取。
• 字形：字形是字母的抽象表示，包含了构成线条的点、曲线数据以及排版所需的度量参数（如基准线、间距等）。
• 关键数据表：
• glyf：存储字形的形状数据。
• loca：将字形索引映射到 glyf 表中的偏移量。
• cmap：将 Unicode 码点映射到字形索引。
• head：包含字形的全局信息。
• hhea 和 hmtx：描述字形的水平布局信息，如上升高度和前进宽度。
字形解析
TTF 字形由一系列轮廓组成，这些轮廓由二阶贝塞尔曲线（Quadratic Bezier curves）描述。
• 二阶贝塞尔曲线：由起点、终点和控制点组成。通过公式 (((1-t)^2) * P_start) + (2(1 - t)t * P_control) + ((t^2) * P_end) 计算，其中 t 的取值范围是 0 到 1。
• 轮廓方向：TTF 规范要求外壳轮廓必须是顺时针定义的，而内部的洞（如字母 B 中间的空隙）必须是逆时针定义的。这种顺序在栅格化时用于判断像素是在形状内部还是外部。
• 数据压缩与补全：为了节省空间，TTF 可能会省略部分点。如果流中出现两个连续的非曲线点，则需要在它们的中点处隐含地添加一个曲线点。
• 复合字形：一些字符（如带有重音符号的字母）由多个基础字形组合而成，通过变换参数将它们合并。
字形栅格化
将矢量形状转换为位图的过程遵循以下步骤：
1. 确定目标位置：在位图纹理集（Atlas）中为字形分配空间。
2. 空间映射：将目标位图的像素行（Y 值）线性映射到字形空间中。
3. 计算交点：解二阶贝塞尔方程，寻找字形轮廓与当前扫描线的水平交点。
4. 绕数统计：根据轮廓的方向（上升或下降）来增加或减少绕数，以此判断笔画的进入和退出。当绕数大于 0 时，表示处于形状内部，需要着色。
5. 局限性：直接栅格化由于缺乏抗锯齿且不支持复杂缩放，在小尺寸或放大时效果较差。
SDF 字形渲染
为了解决位图缩放模糊和锯齿问题，作者采用了有向距离场（SDF）技术。
• 什么是 SDF：SDF 是一种形状的函数表示，它不记录像素的开关状态，而是记录每个像素到形状边缘的最近距离。形状内部为负，外部为正。
• 生成过程：
1. 首先生成一个高分辨率的原始字形位图。
2. 对于目标 SDF 位图中的每个像素，在原始位图中搜索其周围一定范围（如 4 像素半径）内的最近边缘像素。
3. 将计算得到的距离映射到 [0, 255] 的字节范围内，存储在 SDF 纹理集中。
• 着色器处理：在渲染时，使用 OpenGL 着色器读取 SDF 纹理中的距离值。利用 smoothstep 函数根据阈值和平滑因子生成透明度通道（Alpha）。
• 优势：SDF 字形在任意分辨率下都能保持平滑的边缘，非常适合 3D 环境中的标志渲染或 2D 界面。虽然在大尺寸下可能会出现轻微的伪影，但整体效果远好于原始位图。
通过这套方案，作者成功在自己的渲染引擎中实现了高质量的 UI 组件显示，相关代码已在 GitHub 开源。