SDF渲染是利用有符号距离场（每个像素存储到轮廓的带符号距离）实现无损放大的技术，因其渲染依赖距离函数而非位图，故放大时仅需线性插值与自适应阈值判断即可保持边缘清晰，避免锯齿。
什么是 SDF 渲染，为什么它能无损放大
SDF（Signed Distance Field）本质是把字形或图标预处理成一张灰度图，每个像素值表示该点到最近轮廓边界的有符号距离（正=在内部，负=在外部，零=在边界）。GPU 渲染时用简单的线性插值 + 阈值判断就能重建清晰边缘，不依赖原始分辨率。关键在于：放大的不是位图，而是「距离函数的近似」，所以只要采样足够，1000% 放大也无锯齿。
但注意：std::vector<float></float> 存原始 SDF 图像、用 glTexImage2D 上传为 GL_R32F 纹理是最常见起点；别用 GL_RGBA8 存——精度不够，放大后会出现带状伪影。
怎么生成高质量 SDF（不是用 Photoshop 拉伸）
真正可用的 SDF 必须满足两个条件：距离计算准确、边缘过渡平滑。直接用图像膨胀/腐蚀模拟距离场误差极大，尤其对锐角和细连笔。
推荐做法：
立即学习“C++免费学习笔记（深入）”；
- 用
msdfgen（命令行工具）生成多通道 SDF（MSDF），它对非均匀缩放和小字号更鲁棒 - 或用
stb_truetype+ 自研光栅化器，在 CPU 端对矢量轮廓做精确距离场计算（需实现point_to_segment_distance和边距裁剪） - 生成时务必设置足够大的「padding」（至少 8 像素），否则放大后边缘被截断
- 输出纹理尺寸建议为 2 的幂（如 512×512），避免 WebGL 或 Vulkan 中非幂次纹理采样异常
OpenGL/Vulkan 中怎么正确采样并抗锯齿
SDF 渲染质量不取决于纹理本身，而取决于 fragment shader 中的距离到 alpha 转换方式。最基础的 step(0.5, sdf) 会硬切，放大后仍有阶梯感。
实际应使用：
- 平滑过渡：用
smoothstep(0.4, 0.6, sdf)，但阈值范围要随缩放动态调整 - 更优方案是引入屏幕空间导数：
fwidth(sdf)，算出当前像素覆盖的距离变化量，再做自适应反走样float sd = texture(sdfTex, uv).r; float alpha = smoothstep(0.5 - fwidth(sd), 0.5 + fwidth(sd), sd);
- 若用 MSDF，需三通道采样 +
min()合并，对应vec3 msdf = texture(sdfTex, uv).rgb;，再转单值
字体/图标混合渲染时 SDF 的坐标对齐陷阱
UI 中常把文字和图标混排，但图标 SDF 纹理通常按整图归一化 UV，而字体 SDF 可能按 glyph bounding box 归一化。一旦 uv 计算没对齐（比如忘了减去 glyph->x0 / atlasWidth），放大后会出现 0.5 像素偏移，边缘发虚。
必须确保：
- 所有 SDF 纹理使用相同归一化逻辑（推荐统一用「像素坐标 → 归一化 UV」，即
(x + 0.5) / width） - 文本布局引擎返回的
advance和bearingX必须参与 UV 偏移计算，不能只靠整数像素对齐 - 如果用了
glPixelStorei(GL_UNPACK_ALIGNMENT, 1)上传单通道 float 纹理，但 shader 里误读为vec4，会触发未定义行为——texture(...).r才是安全写法
SDF 放大能力的上限，其实卡在 GPU 插值精度和 shader 中 fwidth 的可靠性上；超过 4000% 缩放时，即使算法正确，浮点累积误差也会让边缘轻微抖动。
