游戏字体渲染
游戏字体渲染
位图字体(Bitmap Font)
最简单的文本渲染方式是：点阵字体 (Dot-matrix-fonts) 也叫位图字体 (Bitmap-fonts)。
位图字体通过将所需的独特字形光栅化为单个纹理（称为 纹理图集(Texture atlas)），使用的时候再找到对应的字符的 UV，再绘制文本。
这种方法的缺点很明显：放大缩小的时候，会呈现像素化且模糊的效果。
这里有一些创建位图字体的工具：
Angelcode 的 bmfont – 这是位图格式的创建者。
Hiero – 这是一个 Java 开源工具。它与 Anglecode 的 bmfont 非常相似，但它允许您添加文本效果。
Glyphs Designer – 这是一款付费 MacOS 应用程序。
ShoeBox – 这是一个处理精灵的工具，包括位图字体。
矢量字体 (Vector Font)
矢量字体(Vector font)中每一个字形是通过数学曲线来描述的，它包含了字形边界上的关键点，连线的导数信息等，字体的渲染引擎通过读取这些数学矢量，然后进行一定的数学运算来进行渲染。这类字体的优点是字体实际尺寸可以任意缩放而不变形、变色。
字体文件中存放的是每个字符绘制的样条曲线控制点，可以使用 Glyph Inspector (在线字形查看器) 来查看对应字体文件中字符的信息：
不同字号，斜体、粗体的字模光栅化后都会存储在字体贴图中，其原理大致跟 Bitmap Font 类似，只是字符的贴图是通过加载矢量字体，动态增加到贴图中。
字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。
TTF：TrueType
TTF 文件基于 TrueType 规范字体技术。早些时候，它是由 Apple Computer，Inc for Mac OS 发起的，后来是由 Microsoft Windows 操作系统采用的。
TrueType 字体可在打印机和计算机屏幕上提供最佳的质量显示，而没有任何分辨率。所有最近的应用程序都可以使用 TTF 文件来处理字体。 TTF 字体文件是不含成本的，可以通过 Internet 获得。
它是 Windows 和 Mac 系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
EOT ：Embedded Open Type
EOT 文件格式包含一个单个嵌入式结构，该结构可以表示有关字体名称和支持字符的足够基本信息。此信息的包装迫使用户代理避免解压缩，解开包装或安装字体，如果它已经在计算机上安装。这些字体广泛用于网页。它是由 Microsoft 开发的，并得到其产品的支持，例如 PowerPoint 演示文稿.pps 文件。
OTF：OpenType
OTF 文件称为 OpenType 字体格式。 OTF 字体格式扩展了 TTF 格式的现有特征，并且比 TTF 更可具扩展性。它是由 Adobe 和 Microsoft 开发的。
OTF 结合了 TrueType 字体格式和 PostScript 的功能，这使 OTF 格式义务了多数写作系统和无关。
OpenType 字体格式由 Windows 2000 或更高版本和 Mac OS X 支持。
WOFF：Web Open Font Format
WOFF 字体格式压缩与字体数据相关的基于表的 SFNT 结构，这些结构用于各种字体类型，例如 Opentype 或 TrueType 格式。它充当各种字体类型的容器，可以构成字体的元数据和私人数据。 SFNT 文件被转换器转换为沃夫格式的文件，用户代理恢复了可与 Web 文档一起使用的编码文件。请注意，恢复的字体数据与输入字体格式完全匹配而不会丢失任何方面。
SVG：Scalable Vector Graphics
SVG 是由 W3C 制定的开放标准的图形格式。SVG 字体就是使用 SVG 技术来呈现字体，还有使用 gzip 压缩格式的 SVG 字体。
特别的 TTC 格式字体
TTC 字体是 TrueType 字体集成文件(.TTC 文件)，是在一单独文件结构中包含多种字体,以便更有效地共享轮廓数据,当多种字体共享同一笔画时,TTC 技术可有效地减小字体文件的大小。
TTC 是几个 TTF 合成的字库，安装后字体列表中会看到两个以上的字体。两个字体中大部分字都一样时，可以将两种字体做成一个 TTC 文件，常见的 TTC 字体，因为共享笔划数据，所以大多这个集合中的字体区别只是字符宽度不一样，以便适应不同的版面排版要求。
SDF Font
所谓的 SDF 就是 Signed Distance Field 的缩写，它是一种算法，翻译成中文叫做：有向距离场算法。
该算法，由 Valve 的 Chris Green 在 SIGGRAPH 2007 论文：《Improved Alpha-Tested Magnification for Vector Textures and Special Effects》 当中提出。当时主要用于渲染图片，之后被广泛的运用于其他技术领域中，比如它也常用于：光线追踪和体积渲染。字体渲染，只是其中的一个应用。
与位图字体非常相似，有符号距离场 ( SDF ) 字体也是纹理图集。但不是像位图字体那样将光栅化字形存储在纹理上，而是生成并存储字形的 SDF ，从而允许从低分辨率图像生成高分辨率形状。
SDF 上的每个像素都存储到最近表面的距离。当像素位于形状内部或外部时，该符号就会指示出来。如果符号为负，则该像素在内部；如果为正，则该像素位于外部。该视频很好地说明了这个概念。
由于 SDF 存储每个像素的距离，因此原始图片看起来像是原始字形的模糊版本。
如果想要输出去清晰的字符，您需要在 0.5 处（也就是字形的边界）对其进行 Alpha 测试。让我们以字母"A"来看看常规的 SDF 与常规的光栅化图像的比较：
正如我之前提到的， SDF 的一大好处是能够从低分辨率 SDF 渲染高分辨率形状。这意味着您可以创建 16pt 字体 SDF 并将文本缩放至 100pt 或更高，而不会损失太多清晰度。
SDF 擅长缩放，因为您几乎可以通过双线性插值完美地重建距离，这是一种奇特的方式来表示我们可以获取两点之间的值。在这种情况下，常规位图字体上的两个像素之间的双线性插值为我们提供了中间颜色，从而导致线性模糊。
在 SDF 上，两个像素之间的双线性插值提供了到最近边缘的中间距离。由于这两个像素距离与开始时相似，因此结果值不会丢失太多有关字形的信息。这也意味着 SDF 越大，信息就越准确，丢失的信息就越少。
然而，需要知道的是，如果像素之间的速率变化不是线性的（例如尖角的情况），则双线性插值会给出不准确的值，从而在将 SDF 缩放到远高于其原始大小时导致出现缺口或圆角。
SDF 生成算法
欧几里得距离转换 (Euclidean Distance Transform, EDT)
8 点有向按序欧几里得距离转换 (8-point Signed Sequential Euclidean Distance Transform, 8SSEDT)
4SSEDT
Chamfer3x3 DT
Dead Reckoning
目前 8SSEDT (8-points Signed Sequential Euclidean Distance Transform) 算法是比较流行的解法。
MSDF Font
多通道符号距离场 (Multi-channel Signed Distance Field, MSDF) 字体有点拗口，它是 SDF 的最新变体，能够通过使用所有三个颜色通道产生近乎完美的尖角。
多通道带符号距离场的字体纹理文件乍一看可能有点令人毛骨悚然：
使用所有三个颜色通道确实会产生较重的图像，但这就是 MSDF 比常规 SDF 具有更好的质量空间比的原因。下图显示了放大至 50 像素的字体的 SDF 和 MSDF 之间的差异。
与常规 SDF 一样，MSDF 存储到最近边缘的距离，但每当发现尖角时就会更改颜色通道。
参考资料
版权声明: 本文为 InfoQ 作者【喵个咪】的原创文章。
原文链接:【http://xie.infoq.cn/article/1c18549b13630f423df720118】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
还未添加个人签名 2022-06-01 加入
还未添加个人简介
评论