三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

Unity TMP_SDF 分析(六)GLOW_ON 辉光路径

Unity TMP_SDF 分析(六)GLOW_ON 辉光路径

Unity TMP_SDF 分析(六):GLOW_ON辉光路径

适用版本:Unity2021.3.23f1c1|TextMeshPro3.0.9|UGUI1.0.0

分析范围:项目中的标准Assets/TextMesh Pro/Shaders/TMP_SDF.shader及其关联源码;Mobile、SSD、Surface 等变体不直接套用。

系列导航:第 6/9 篇|前置:基础片元着色器与GetColor|下一篇:UNDERLAY_ONUNDERLAY_INNER

标准 TMP SDF Shader 通过材质关键字GLOW_ON编译辉光变体:

#pragma shader_feature __ GLOW_ON

材质面板的 Glow 功能开关会选择是否包含 Glow 代码的 Shader 变体。


一、Glow 涉及三段代码

1. CPU:计算_ScaleRatioB

TMP_ShaderUtilities.UpdateShaderRatios()根据 Atlas 可用梯度范围修正 Glow 参数。

2. 顶点着色器:降低alphaClip

#if GLOW_ON alphaClip = min( alphaClip, 1.0 - _GlowOffset * _ScaleRatioB - _GlowOuter * _ScaleRatioB); #endif

3. 片元着色器:计算并叠加辉光 RGB

#if GLOW_ON float4 glowColor = GetGlowColor(sd, scale); faceColor.rgb += glowColor.rgb * glowColor.a; #endif

这三段分别负责分配 Atlas Padding、保留辉光所需片元以及根据距离生成辉光颜色。


二、CPU 端_ScaleRatioB

源码如下(节选):

floatscale=mat.GetFloat(ID_GradientScale);floatfaceDilate=mat.GetFloat(ID_FaceDilate);floatweight=Mathf.Max(mat.GetFloat(ID_WeightNormal),mat.GetFloat(ID_WeightBold))/4.0f;floatglowOffset=mat.GetFloat(ID_GlowOffset);floatglowOuter=mat.GetFloat(ID_GlowOuter);floatrange=(weight+faceDilate)*(scale-1.0f);floatt=Mathf.Max(1,glowOffset+glowOuter);boolisRatioEnabled=!mat.shaderKeywords.Contains("RATIOS_OFF");floatratioB=isRatioEnabled?Mathf.Max(0,scale-1.0f-range)/(scale*t):1;mat.SetFloat(ID_ScaleRatio_B,ratioB);

这里的 C#scale是材质_GradientScale,通常与字体 Atlas Padding 相关;HLSLscale则由顶点着色器按屏幕大小计算。

1.range

range=(weight+faceDilate)*(scale-1)

它先扣除字重和 Face Dilate 已占用的距离范围;Ratio B 的公式不包含 Outline Width 或 Outline Softness。

2.t

t=Mathf.Max(1,glowOffset+glowOuter)

当 Glow Offset 与 Outer 的和超过1时,分母随之增大,使 Ratio B 进一步缩小。公式直接使用两者之和。

3.ratioB

ratioB = 可用于 Glow 的剩余梯度范围 ÷(GradientScale × Glow 范围因子)

分子使用Mathf.Max(0, ...),保证剩余范围不足时不会得到负比例。启用RATIOS_OFF时 Ratio B 直接为1,即不做安全范围压缩。

Ratio B 负责有限 SDF Padding 的参数预算,HLSLscale负责屏幕尺度换算。


三、Glow 为什么修改alphaClip

顶点着色器先得到 Face/Outline 所需的alphaClip,Glow 再取更低的阈值:

alphaClip = min( alphaClip, 1.0 - _GlowOffset * _ScaleRatioB - _GlowOuter * _ScaleRatioB);

片元着色器稍后执行:

clip(c - input.param.x);

因此:

  • alphaClip越低,Atlas Alpha 较低、离字形更远的片元也会被保留。
  • _GlowOffset_GlowOuter增大时,Glow 需要更大的外部距离范围。
  • min()保证阈值至少能覆盖 Face/Outline 与 Glow 两者中需求更大的范围。

该阈值的作用范围如下:

  • 文本四边形几何没有被这行代码修改。
  • 真正的丢弃发生在片元着色器的clip()
  • 几何是否留有足够 Padding 还取决于 TMP CPU 端生成的材质 Padding 和字符四边形范围。

四、GetGlowColor()源码

float4 GetGlowColor(float d, float scale) { float glow = d - (_GlowOffset * _ScaleRatioB) * 0.5 * scale; float t = lerp( _GlowInner, _GlowOuter * _ScaleRatioB, step(0.0, glow)) * 0.5 * scale; glow = saturate(abs(glow / (1.0 + t))); glow = 1.0 - pow(glow, _GlowPower); glow *= sqrt(min(1.0, t)); return float4( _GlowColor.rgb, saturate(_GlowColor.a * glow * 2)); }

输入d是第五篇的sd

d < 0 → 更靠字形内部 d > 0 → 更靠字形外部

五、移动辉光中心:Glow Offset

float glow = d - (_GlowOffset * _ScaleRatioB) * 0.5 * scale;

令:

offset = _GlowOffset × _ScaleRatioB × 0.5 × scale

则新的零点位于:

d = offset

由于d正方向朝字形外部,增大正 Offset 会把辉光强度中心向外移动;负 Offset 则向内移动。_ScaleRatioB限制 Offset 使用的 Atlas 范围,scale把它转换到当前屏幕距离尺度。


六、分别选择 Inner 与 Outer 宽度

float t = lerp( _GlowInner, _GlowOuter * _ScaleRatioB, step(0.0, glow)) * 0.5 * scale;

step(0.0, glow)的结果为:

glow < 0 → 0 → 使用 _GlowInner glow >= 0 → 1 → 使用 _GlowOuter × _ScaleRatioB

因为glowd向外增大:

  • 零点内侧使用_GlowInner
  • 零点外侧使用_GlowOuter

_GlowOuter_ScaleRatioB_GlowInner在这一行直接参与计算,两侧使用不同的比例公式。

最终* 0.5 * scale把材质参数换算到d所在的屏幕距离尺度。


七、距离归一化与 Falloff 曲线

glow = saturate(abs(glow / (1.0 + t))); glow = 1.0 - pow(glow, _GlowPower);

1.abs(glow)

取到移动后零点的无方向距离,使 Inner 与 Outer 两侧都能形成衰减。

2.1.0 + t

t扩展辉光过渡范围,常量1.0保留基础抗锯齿距离跨度。它不只是“防止除零”的保险项。

3.saturate

将相对距离限制为[0, 1]:零点附近为0,远离后趋近1

4._GlowPower

项目 Shader 中_GlowPower的属性范围写作Range(1, 0),数值仍在0~1之间,只是材质滑块方向相反。最终曲线为:

intensity = 1 - normalizedDistance ^ _GlowPower

该材质面板在0~1范围内塑造幂函数衰减曲线。


八、小于一个屏幕距离单位时淡出

glow *= sqrt(min(1.0, t));

源码注释为:

Fade off glow thinner than 1 screen pixel
  • t >= 1:乘数为1
  • 0 < t < 1:乘数为sqrt(t),宽度越接近零,强度越低。
  • t = 0:辉光贡献归零。

这里的sqrt()令衰减相对线性t更缓,整体仍随宽度从10衰减。


九、构建并叠加 Glow 颜色

return float4( _GlowColor.rgb, saturate(_GlowColor.a * glow * 2));

GetGlowColor()返回固定 RGB 与计算后的 Alpha。片元着色器随后只叠加 RGB:

faceColor.rgb += glowColor.rgb * glowColor.a;

这有两个重要结果:

  1. Glow 是加到当前预乘颜色 RGB 上的加法型贡献。
  2. 这行代码没有增加faceColor.a

Shader Pass 使用Blend One OneMinusSrcAlpha,所以即使 Face 覆盖率很低,保留下来的 Glow RGB 仍可对目标颜色产生加法贡献。最终的 TMP 顶点 Alpha 和UNITY_UI_CLIP_RECT仍会调制整个结果。

如果启用UNITY_UI_ALPHACLIP,它稍后依据faceColor.a执行clip();由于 Glow 不提高该 Alpha,纯 Glow 外围片元可能被 Alpha Clip 丢弃。


十、完整数据流

CPU:UpdateShaderRatios() └─ GradientScale - Weight - FaceDilate └─ _ScaleRatioB ├─ 顶点 Shader:降低 alphaClip │ └─ 保留 Glow 所需 Atlas 片元 └─ 片元 Shader: sd(负内、正外) └─ Offset 移动零点 ├─ 内侧宽度 _GlowInner └─ 外侧宽度 _GlowOuter × RatioB └─ 距离归一化 └─ Power 曲线 └─ 细辉光淡出 └─ RGB 加法叠加

十一、源码索引

  • Assets/TextMesh Pro/Shaders/TMP_SDF.shaderGLOW_ON顶点与片元分支。
  • Assets/TextMesh Pro/Shaders/TMPro.cgincGetGlowColor()
  • Scripts/Runtime/TMP_ShaderUtilities.cs_ScaleRatioB
  • Scripts/Editor/TMP_SDFShaderGUI.cs:Glow Shader Feature 与材质面板。
← 返回列表