U4S5L19——SDF 材质球和参数设置

SDF

SDF 是有符号距离场 (Signed Distance Field) 的缩写，其中：

有符号(Signed)：指的是距离可以为正或负，表示一个点位于边界的内部（负值）还是外部（正值）
距离(Distance)：表示每个像素点到字符边缘的距离
场(Field)：指的是整个字体或图形周围的距离值的分布

它是一种用于高质量文本和图形渲染的技术，尤其适用于缩放或在低分辨率下保持边缘平滑的情况

它的本质就是在一个 Shader（着色器）中利用 SDF 相关算法规则来渲染文字
SDF 技术生成的字体纹理并不是普通的位图，而是基于每个像素到字体边缘的距离值。
这些距离值存储在纹理的灰度通道中，代表每个像素到字符边缘的距离信息。
然后在渲染时，着色器根据这些距离值动态计算字体的边缘，最终渲染出平滑的字符轮廓。

主要在 TMP 中用于生成和渲染文本，能让字体在任意大小或距离下保持清晰和锐利的效果

SDF 材质球指什么

我们创建的字体资源使用的材质球，本质上就是一个使用了 SDF 相关 Shader 的材质球
利用该Shader渲染出来的字体效果会更好，并且该Shader提供了很多可以被配置的参数
我们可以在对应字体的材质球中修改这些参数，从而让我们的字体实现一些更复杂的美术表现效果

因此我们需要学习字体材质球中的这些参数，从而帮助我们利用它来实现我们的表现需求

SDF 材质球中的主要内容

以下的设置可以在字体资源的材质球上的对字体全局地进行设置，也可以单独为某个 TMP 控件设置，参数是一样的

Face：基础表面设置
Outline：边缘线效果设置
Underlay：阴影(底层)效果设置
Lighting：照明效果设置
Grow：发光效果设置
Debug Settings：调试设置

基础表面设置

Color: 文本表面颜色，该颜色会和 TMP 组件中设置的颜色相乘进行叠加
Texture：可以为文本添加贴图
- Tiling：平铺（缩放）
- Offset：偏移
- Speed：移动速度（可以实现纹理滚动效果，配合UV映射使用）
以此纹理为例：

显示效果：
Softness：边缘柔和度，可以让文字边缘产生模糊感

设置为0.5时的显示效果：
Dilate：拓展，类似改变粗细的效果

边缘线和阴影设置

边缘线设置

Color：边缘线颜色
Texture：边缘线纹理，会用纹理颜色和轮廓颜色相乘叠加
Thickness：轮廓粗细，值越大越粗

以上图参数作为示例，显示效果：

阴影（底层）设置

需要勾选左上角的多选框才能生效

阴影相当于在字的底部再渲染一个相同的字，以下的参数都是对整个底部的字的参数调整

Underlay Type：底图阴影类型
- None：无阴影
- Normal：正常标准的底图样式
- Inner：反转底图，用原始文本遮罩它
Color：底图阴影的颜色
Offset X：阴影字的X偏移
Offset Y：阴影字的Y偏移
Dilate：阴影字的拓展，相当于粗细
Softness：阴影字的边缘柔和度，让阴影边界产生模糊感

以上图参数作为示例，显示效果：

照明设置

需要勾选左上角的多选框才能生效

Bevel：斜面设置，它可以让字体边缘呈现斜面效果

此设置可能需要配合边缘线才能显示出效果
- Type：斜面类型
  - Outer Bevel：外斜面
    
    让字体产生带有倾斜侧面的凸起效果，相当于向中间凸起来
  - Inner Bevel：内斜面
    
    轮廓凸起的文本，相当于向中间凹进去
- Amount：陡峭程度
- Offset：位置偏移
- Width：斜面大小
- Roundness：让斜面更加平滑，产生更多角度区域
- Clamp：限制斜面最大高度
显示示例：
Local Lighting：本地照明设置

对于光照相关知识，详见：US3S1——Shader入门-光照效果
- Light Angle: 光照角度，模拟局部光的角度
- Specular Color：镜面反射颜色
- Specular Power：镜面发射强度
- Reflectivity Power：反射强度，值越大越能反应周围环境的颜色
- Diffuse Shadow：漫反射阴影，调整整体阴影的等级，值越高，阴影越强
- Amblent Shadow：环境阴影，调整环境光照水平
Bump Map：凹凸贴图设置

关于发现贴图（#TODO#）
- Texture：凹凸贴图
- Face：凹凸影响程度
- Outline：凹凸贴图对文本轮廓的影响程度
Environment Map：环境设置

关于立方体贴图（#TODO#）
- Face Color：立方体贴图对文本的颜色影响，会和文本进行颜色叠加
- Outline Color：立方体贴图对文本的轮廓颜色影响，会和轮廓进行颜色叠加
- Texture：环境的立方体贴图
- Rotation：旋转环境贴图