SDF、MSDF 与 Slug：GPU 文本渲染

如何在 SDF、MSDF、Slug、Texture Atlas 或 Rive 之间选择文本渲染算法？文字看起来很简单，直到你必须自己绘制它。字母不是图片，它是一组轮廓：直线和贝塞尔曲线的闭环，根据缠绕规则填充。在 CPU 上将其绘制为位图是一个已解决的问题。在 GPU 上以任何尺寸、任何 3D 变换清晰地绘制它，而文本每帧都会发生变化，但事实并非如此。大多数引擎通过提前将字形烘焙到纹理中并接受妥协来避开硬版本。 2017 年，Eric Lengyel 发布了一种名为 Slug 的算法，可以停止躲避。它直接从片段着色器中的轮廓渲染字形，没有纹理图集，也没有每帧镶嵌。 Lengyel 于 2019 年为其申请了专利，并于 2026 年 3 月 17 日将该专利奉献给了公共领域。这就是为什么我们构建了 Slughorn，即 Slug 技术的 C++20 实现，也是为什么我们现在可以谈论它的工作原理以及它的优势所在。这是关于 GPU 文本渲染实际工作原理的概览，从位图图集到 Slug，以及每种方法的适用范围。是什么让字形变得困难 每个可缩放字体都将每个字形存储为矢量轮廓。 TrueType 使用二次贝塞尔曲线，OpenType with CFF 使用三次曲线，并且两者都混合在直线段中。字母的内部是填充规则所说的内部，通常是非零缠绕规则：从像素发射光线，计算轮廓如何穿过它，如果缠绕数非零，则像素位于字形内部。字形是一组轮廓，而不是像素：实心点是曲线上的点，空心圆圈是贝塞尔曲线控制点。渲染器必须同时快速完成三件事：正确填充内部，产生干净的抗锯齿边缘，并保持清晰，无论字形在菜单中是 8 像素高，还是填充透视旋转的广告牌上的屏幕。在 CPU 上，您将每个字形以其目标大小光栅化一次，然后就完成了。在 GPU 上，您希望每帧以任意比例绘制数千个字形，理想情况下无需重新光栅化任何内容。这个限制是下面每种技术发挥作用的地方。方法 1：纹理图集（位图字形） 最古老且仍然最常见的方法。以一种尺寸将每个字形光栅化一次，形成称为图集的共享纹理，然后将每个屏幕上的字符绘制为对其插槽进行采样的纹理四边形。它速度快、便携，并且可以在任何带有纹理单元的东西上运行。这就是为什么它无处不在。问题在你扩展的那一刻就显现出来了。放大超过烘焙尺寸，字形会变成模糊或块状像素，因为您正在放大位图。收缩它，除非你烘烤 mip 级别，否则你会变得微光和掉落的茎。您想要清晰的每个尺寸都是另一张图集。每种语言都是另一个问题：拉丁语地图集很小，但中文、日文和韩文有数以万计的字形，将它们全部烘焙成几种大小是一场记忆灾难。位图不知道它是从透视角度查看的，因此放置在 3D 表面上的文本看起来很柔和。放大烘焙图集字形（左和中）与从轮廓渲染它（右）。方法 2：有符号距离场 (SDF) Valve 引入了支撑行业十年的修复方法。 Chris Green 2007 年的 SIGGRAPH 作品“改进了矢量纹理和特效的 Alpha 测试放大倍率”，存储的不是字形的像素，而是带符号的距离场：每个纹素保存到最近边缘的距离，内部为正，外部为负。在着色器中，您对该字段和阈值进行采样为零。由于距离插值平滑，因此您可以大幅放大小型 SDF 纹理，并且仍然获得清晰的边缘，并且可以通过软化阈值来获得廉价的抗锯齿效果。一种小纹理，分辨率在合理范围内独立，一种廉价的着色器。很长一段时间以来，这是清晰的 UI 文本和游戏 HUD 的默认设置，而且它仍然适用于有限的硬件。但 SDF 仍然是以固定分辨率采样的烘焙纹理，并且位于角点附近。尖角是距离场中的不连续性，双线性插值将其四舍五入。字母上的每个硬角，“A”的尖端，“K”的凹口，都会被软化。将放大倍率推得足够远，或者使字形足够小，使字段只有几个纹理像素宽，并且细茎会破裂并出现细节污点。带符号的距离场（左）和着色器从中恢复的清晰边缘（右）。方法 3：多通道符号距离场 (MSDF) Viktor Chlumsky 的工作来自他 2015 年的论文和 2018 年的论文“Improved Corners with Multi-Channel Signed Distance Fields”，修复了角点问题。 MSDF 不是存储一个距离通道，而是存储三个（红色、绿色和蓝色）距离通道，每个通道编码到所选边缘的不同子集的距离，以便尖角得以保留。在着色器中，您取三个通道的中值。中值技巧几乎完美地重建了角点，因此 MSDF 字形保持不变