【UE】SDF - 使用有向距离场(Signed Distance Fields)整各种活-4-将图片制作为距离场图

关于"如何使用函数制作 SDF（有符号距离场）"，之前已经做过详细讲解，这里就不再赘述。

今天这篇文章，解决另一个需求

如何使用 Photoshop，将普通的图像资产，制作为距离场图像资产

第一步：在 PS 中搭建工作环境

最简单的距离场，就是从图像的轮廓开始向外，带有一个随距离变化的渐变效果。

例如一个三角形2D距离场基元

这是它的渐变方向

布置工作环境

导入图片，放到文件夹里，后续操作这个文件夹
创建纯白色背景

缩放图像

缩放图像，使其最远边，距离整体边缘250px左右（原因稍后提到）

第二步：进阶制作近似的 SDF（有符号距离场）

在真正的 SDF 中，0 代表边界，负值代表内部，正值代表外部。

但是，因为普通的图像数据无法存储负值，所以我们在 PS 中采用将 0.5（中性灰）视为 0的方式来进行映射和伪造。

制作思路：

我们在 Photoshop 中调整图层样式或绘制渐变时，需要使其满足以下灰度条件：

灰色（0.5 / RGB127）代表形状边界

右键文件夹，选择混合选项
覆盖颜色为50%

大于 0.5 的值（从0.5渐变到1）代表形状外部距离

继续添加效果 外发光 注意图中：

灰色
选择精确
扩展50% （参数居中）
大小250 将px作为距离单位，（这也是为什么前面要缩放尺寸）

小于 0.5 的值（0.5渐变到0）代表形状内部

现在调整颜色叠加为纯黑 0%
（之前为50%只是为了方便教学，正式生成可直接为0%）
启用内发光，设置如下

通过这种手法，我们就可以在图像上生成重现 SDF 效果的"伪 SDF"。

补充说明：

这种处理思路其实和法线贴图（Normal Map）中以 0.5 为基准记录法线的方法非常相似。在法线贴图的切线空间中，各通道的值原本应该在 -1 到 +1 之间，但由于纹理无法保存负值，因此也是转换到了 0 到 1（0.5为基准）的范围内进行保存。
工作环境搭建好了，在这里切换新图就可以直接生成了

记得缩放图像到250距离