UE5——UMG——分析5

材质绘图:SDF 有向距离场
1.每一个点的数值=离最近图形的距离值，形状内部为负值，外部为正值
2.可以用于U边框，阴影等效果一次绘制，缩放不会变模糊，更加通用
3.多个SDF容易合并，将简单图形组合成复杂图形

一些高级应用:
1.Ray Matching
2.碰撞测试
3.距离场阴影
4.程序化建模
5.体积云

材质绘图:SDF圆

圆圈的距离为0
圆内部的为负值
圆外部的为正值
因此:SDF圆=SDF圆心点-圆半径


可以推导出以下结论:
任意图形的距离场减去半径等于带圆角图形的距离场
上图可以看到矩形的距离场，减去圆角半径，就是圆角矩形的SDF

材质绘图:SDF线段

任意一点到线段AB的距离

分3种情况，如右图C/D/E

D到AB的距离=DD’的长度
C到AB的距离=AC的长度
E到AB的距离=BE的长度

任意一点X[C/D/E):Dot[XA，BA)=X在AB上的投影长度

投影长度小于0，在区域1
投影长度大于AB长度，在区域3
投影长度大于0小于AB长度，在区域2

引擎自带DrawLine函数也是这样做的

材质绘图:SDF矩形

矩形上下左右对称，可以只考虑4分之一区域
SDF也分为3种情况，如右图A/B/P三点
AA’的距离就是A的y坐标减矩形的半高
CC’的距离就是C的x坐标减矩形的半宽
BP的距离就是两点求distance

材质绘图:SDF五角星

材质绘图:复杂SDF图形

多个简单SDF结果取最小值合并
同为负时取最大值
其他SDF图形和应用:
iquilezles.org/articles/

SDF 字体

如下图所示，4种效果
A，普通文字贴图
B，SDF绘制的字体，描边和阴影
C，SDF绘制的轮廓
D，SDF文字

缩放后不失真

一次绘制描边，阴影，轮廓
step多个不同距离的结果lerp在一起即可实现描边
abs后step可得到内外距离边缘相同长度的轮廓

SDF 字体图集

下图可以看到普通文字图集(上)和SDF文字图集(下)的对比
分辨率为10241024，共1616=256个字符
SDF本质为距离数值，可根据实际使用情况考虑BiasScale预处理后再压缩

同样规格，1张2048，4通道，可以保存4096个字符，基本能满足常用汉字的需求
ASTC4X4压缩4MB，RGBA不压缩16MB，即使不压缩也可以考虑常驻
也可以考虑修改引擎源码，支持动态生成实际的SDF字体图集