HeadlinesBriefing favicon HeadlinesBriefing.com

SDF vs MSDF vs Slug:GPU文本渲染指南

Hacker News •
×

如何在SDF、MSDF、Slug、纹理图集或Rive之间选择文本渲染算法?文本看起来简单,直到您必须自己绘制它。字母是一组轮廓:直线和贝塞尔曲线的闭合循环,根据缠绕规则填充。在CPU上将其绘制到位图是已解决的问题。在GPU上,以任何大小、任何3D变换下清晰绘制,同时文本每帧变化,这并非易事。

大多数引擎通过预先将字形烘焙到纹理中来回避难题。在2017年,Eric Lengyel发布了Slug,它直接在片段着色器中从轮廓渲染字形,无需纹理图集,也无需每帧细分。Lengyel在2019年为其申请了专利,并于2026年3月17日将该专利献给公共领域。本指南涵盖了GPU文本渲染的工作原理,从位图图集到Slug。

方法1,纹理图集,将每个字形一次栅格化到共享纹理中。它速度很快,但在缩放时会出现问题:放大超过烘焙尺寸,字形会变得模糊。每个您想要清晰的尺寸都需要另一个图集,而中文、日文和韩文等语言会导致内存灾难。方法2,有符号距离场(SDF),存储到最近边缘的距离。由于距离平滑插值,您可以将小型SDF纹理大幅放大并获得清晰的边缘。长期以来,这一直是清晰UI文本的默认选择,但SDF仍然是烘焙纹理。