SDF 还能这样用？Cocos Creator 基于 SDF 实现多种 Shader 特效
引言：本文为「Cocos 中文社区第4期征稿活动」参与作品，开发者 muzzik 将和我们分享他所理解的 SDF，运用 SDF 巧妙实现阴影、描边、外发光等效果。
SDF 的全称是 Signed Distance Field（有符号距离场），用于表示空间中各点到物体表面的距离。
有符号：指的是正数和负数，正数代表在物体外，负数代表在物体内。
距离场：其中的 数值正是代表到物体表面的距离，0就代表物体表面，例如数值5就代表当前点在物体外，距离表面还有5的距离，负数则相反。
SDF 常被应用于字体渲染、Ray Marching、物理引擎等领域，今天我们将基于 SDF 实现一些 Shader 效果，包括形变动画、描边、外发光、阴影等。
前置知识
为了便于没有 Shader 基础的同学观看，这里简单介绍一下 Shader 的相关基础知识；同时对本文所用到的 GLSL 内置函数进行说明。
Shader 其实是一段 GLSL（OpenGL 着色语言）程序，而 WebGL 则是为了方便浏览器使用而封装的 OpenGL。组成结构：
顶点着色器：模型由三角面组成，三角面由顶点组成，而顶点作色器就负责顶点的坐标控制，可以用来实现布料、水体等等。
片段着色器：片段着色器负责渲染位置的颜色输出。
本文用到的 GLSL 内置函数说明：
clamp(x, y, z)：x < y 返回 y，x > z 返回 z，否则返回 x
mix(x, y, z)：x, y 的线性混叠， x(1 - z) + y * z
length(x)：返回一个向量的模（长度），即 sqrt(dot(x,x))
sign(x)：x < 0 时返回 -1，x == 0 返回 0，x > 0 返回 1
形变动画
画一个圆
如果我们想要在 Shader 内用 SDF 画一个圆，应该怎么做呢？很简单，代码如下：
参数 p 是当前渲染点的位置，因为是 2D 图形，所以只有 xy；
参数 r 则是我们想要绘制的圆的半径。
这里的返回结果就是距离场。
举个例子：圆半径5，圆在 0,0 点（所有公式皆基于 0,0 点），渲染点在 0,3 点，这时 length ( p ) = 3，3 - 5 = -2，则我们离圆的表面有 2 的距离，负数代表渲染点在物体内。
接着我们要做的就是把它在片段着色器「画」出来：
output_v4：片段着色器输出的颜色
float dist_f：距离场
vec4 color_v4：物体颜色
output_v4 = mix(output_v4, color_v4, clamp(-dist_f, 0.0, 1.0));
- dist_f：负负得正，所以在物体内部 clamp 结果就是一个有效值，在物体外部就是负数（clamp 结果为0），最终结果就为原本的 output_v4，所以只有在物体内部 mix 才会生效。
注：以下我将 SDF 值通称为距离场。更多 SDF 图形公式和原理讲解附在文末，感兴趣的朋友可以继续深入了解。
平移
前面说了如何画出 SDF 图形，那么怎么让它们动起来呢？很简单，我们只需要将渲染点减去我们要移动的坐标，再将结果点传入 SDF 函数求得距离场，就得到了移动过后的距离场。
vec2 translate(vec2 render_v2_, vec2 move_v2_) {
return render_v2_ - move_v2_;
}
举个例子：
float dist_f = sdf_circle(translate(render_v2_, vec2(100.0, 100.0)), 10.0);
dist_f 便是我们通过 sdf 函数求得平移 vec2(100.0, 100.0) 后的距离场。
旋转
旋转其实也很简单。学习过矩阵的同学应该知道有个旋转矩阵，我们只需要将向量 * 二维旋转矩阵，就能得到旋转后的点：
// 逆时针旋转
vec2 rotate_ccw(vec2 render_v2_, float radian_f_) {
mat2 m = mat2(cos(radian_f_), sin(radian_f_), -sin(radian_f_), cos(radian_f_));
return render_v2_ * m;
}
// 顺时针旋转
vec2 rotate_cw(vec2 render_v2_, float radian_f_) {
mat2 m = mat2(cos(radian_f_), -sin(radian_f_), sin(radian_f_), cos(radian_f_));
return render_v2_ * m;
}
正常展示多个物体
注：残留像素是录屏软件的关系
如果要正常展示多个 SDF 物体，只需要返回两个距离场最小的那个就行了，一个 min 稿定：
float merge(float dist_f_, float dist2_f_) {
return min(dist_f_, dist2_f_);
}
是不是很简单！通过对距离场进行操作，我们可以得到更多不同的效果，请接着往下看。
相交
效果是不是很奇怪？这个函数只会在两个物体的距离场同时 < 0 时才会返回 < 0，方法也很简单：
float intersect(float dist_f_, float dist2_f_) {
// dist_f_ < 0, dist2_f_ > 0 例 dist_f_ = -2, dist2_f_ = 3，r = 3, 例 dist_f_ = -2, dist2_f_ = 1，r = 1， 则值 > 0
// dist_f_ > 0, dist2_f_ < 0 例 dist_f_ = 2, dist2_f_ = -1，r = 2, 例 dist_f_ = 2, dist2_f_ = -5，r = 2， 则值 > 0
// dist_f_ > 0, dist2_f_ > 0 例 dist_f_ = 1, dist2_f_ = 2，r = 2, 例 dist_f_ = 2, dist2_f_ = 1，r = 2， 则值 > 0
// dist_f_ < 0, dist2_f_ < 0 例 dist_f_ = -2, dist2_f_ = -3，r = -2, 例 dist_f_ = -2, dist2_f_ = -1，r = -1， 则值 < 0
// 所以最终结果只会在 dist_f_ 和 dist2_f_ 重合时展示
return max(dist_f_, dist2_f_);
}
其实原理就是只有两个数同时 < 0 时，max 才会返回负数，所以造成了上面的效果。
融合
这个效果就比较常见了，实现方式如下：
float smooth_merge(float dist_f_, float dist2_f_, float k_f_) {
// k_f_ 如果不超过 abs(dist_f_ - dist2_f_)，那么都是无效值（0 或 1）
float h_f = clamp(0.5 + 0.5 * (dist2_f_ - dist_f_) / k_f_, 0.0, 1.0);
// 假设 k_f_ = 0, dist_f_ = 2, dist2_f_ = 1，则 h_f = 0, mix(...) = dist2_f_, k_f_ * h_f * (1.0 - h_f) = 0，结果为 dist2_f_
// 假设 k_f_ = 0, dist_f_ = 1, dist2_f_ = 2，则 h_f = 1, mix(...) = dist_f_, k_f_ * h_f * (1.0 - h_f) = 0，结果为 dist_f_
// 如果 k_f_ 为无效值，那么返回结果将 = min(dist_f_, dist2_f_)，和 merge 结果相同
// 如果 k_f_ 为有效值，那么将返回比 min(dist_f_, dist2_f_) 还要小的值，k_f_ 越大，结果越小
return mix(dist2_f_, dist_f_, h_f) - k_f_ * h_f * (1.0 - h_f);
}
从上面可以看出来，只有 k_f_ > abs(dist_f_ - dist2_f_) 时才会对结果进行操作，如果传入的 dist_f_ 和 dist2_f_ 结果相差不大，那么就会小于 k_f_ ，从而让两个物体的中间位置返回的值更大。
抵消
两者在运动过程中的重合部分消失了，这就是抵消效果：
float merge_exclude(float dist_f_, float dist2_f_) {
// 如果 dist_f_ < 0，dist2_f_ > 0 例 dist_f_ = -2 dist2_f_ = 6, r = -2， 例 dist_f_ = -2 dist2_f_ = 3, r = -2
// 如果 dist_f_ > 0，dist2_f_ < 0 例 dist_f_ = 2 dist2_f_ = -6, r = -6， 例 dist_f_ = -2 dist2_f_ = 3, r = -2
// 如果 dist_f_ > 0，dist2_f_ > 0 例 dist_f_ = 2 dist2_f_ = 6, r = 2， 例 dist_f_ = 5 dist2_f_ = 3, r = 3
// 如果 dist_f_ < 0，dist2_f_ < 0 例 dist_f_ = -2 dist2_f_ = -3, r = 4， 例 dist_f_ = -3 dist2_f_ = -2, r = 4
// 所以最终结果只会将 dist_f_ < 0 && dist2_f_ < 0 的值变成 > 0 的值
return min(max(-dist_f_, dist2_f_), max(-dist2_f_, dist_f_));
}
最终的目的也就是将 dist_f_ < 0 && dist2_f_ < 0 的值变成 > 0 的值，这样就会得到在物体外部，也就是一个正数，从而实现抵消效果。
减去
“减去”的效果和字面意思一样，减去另一个物体的重合的部分，当然也不会展示减去的物体，否则就变成了抵消效果了：
float substract(float dist_f_, float dist2_f_) {
// dist_f_ < 0, dist2_f_ > 0 例 dist_f_ = -2, dist2_f_ = 3，r = 3, 例 dist_f_ = -2, dist2_f_ = 1，r = 2， 则值 > 0
// dist_f_ > 0, dist2_f_ < 0 例 dist_f_ = 2, dist2_f_ = -1，r = -1, 例 dist_f_ = 2, dist2_f_ = -5，r = -2， 则值 < 0
// dist_f_ > 0, dist2_f_ > 0 例 dist_f_ = 1, dist2_f_ = 2，r = 2, 例 dist_f_ = 2, dist2_f_ = 1，r = 1， 则值 > 0
// dist_f_ < 0, dist2_f_ < 0 例 dist_f_ = -2, dist2_f_ = -3，r = 4, 例 dist_f_ = -2, dist2_f_ = -1，r = 4， 则值 > 0
// 所以最终结果只会展示 dist2_f_, 且 dist_f_ 和 dist2_f_ 重合时不会展示
return max(-dist_f_, dist2_f_);
}
通过上面的举栗，可以看出只有 dist_f_ > 0 && dist2_f_ < 0 返回的值 < 0，而其他条件结果都 > 0。
dist_f_ > 0，dist2_f_ < 0 返回 < 0 代表了渲染点不在第一个物体内且在第二个物体内才展示
而 dist_f_ > 0, dist2_f_ < 0 返回 > 0 就代表了渲染点同时在两个物体内，也就是抵消效果
除了通过距离场实现不同的展示效果外，我们还可以利用距离场进行混合，来实现物体的描边。只需要一句代码搞定它：
output_v4：片段着色器输出的颜色
float dist_f：距离场
vec4 color_v4：描边颜色
float width_f：描边宽度
output_v4 = mix(output_v4, color_v4, abs(clamp(dist_f - width_f, 0.0, 1.0) - clamp(dist_f, 0.0, 1.0)));
从上面的代码可以看出来，dist_f 的有效值是 (0~ 1.0 + width_f)，所以会在此范围内通过 clamp - clamp 返回一个负数，abs 将其转换为正数，再通过 mix 混合，就得到了物体边缘的混合颜色。
内/外发光
外发光
宝具：王之财宝！ 让我来闪瞎你的眼（此函数参考原作者 AO 函数改写）：
float dist_f：距离场
vec4 color_v4_：渲染点的颜色
vec4 input_color_v4_：外发光颜色
float radius_f_：外发光半径
vec4 outer_glow(float dist_f_, vec4 color_v4_, vec4 input_color_v4_, float radius_f_) {
// dist_f_ > radius_f_ 结果为 0
// dist_f_ < 0 结果为 1
// dist_f_ > 0 && dist_f_ < radius_f_ 则 dist_f_ 越大 a_f 越小，范围 0 ~ 1
float a_f = abs(clamp(dist_f_ / radius_f_, 0.0, 1.0) - 1.0);
// pow：平滑 a_f
// max and min：防止在物体内部渲染
float b_f = min(max(0.0, dist_f_), pow(a_f, 5.0));
return color_v4_ + input_color_v4_ * b_f;
}
dist_f_ 的有效值范围是（ 0 ~ radius ）。
如果 dist_f_ > radius_f_ ：
a_f = 0；
b_f = min(max(0.0, dist_f_), 0) = 0；
返回值就为 color_v4_，此时为无效值。
如果 dist_f_ < 0 ：
a_f = 1；
b_f = min(max(0.0, dist_f_), 1) = 0；
返回值就为 color_v4_，此时为无效值。
内发光
内发光效果的实现根据上面的外发光改写：
vec4 inner_glow(float dist_f_, vec4 color_v4_, vec4 input_color_v4_, float radius_f_) {
// (dist_f_ + radius_f_) > radius_f_ 结果为1
// (dist_f_ + radius_f_) < 0 结果为0
// (dist_f_ + radius_f_) > 0 && (dist_f_ + radius_f_) < radius_f_ 则 dist_f_ 越大 a_f 越大，范围 0 ~ 1
float a_f = clamp((dist_f_ + radius_f_) / radius_f_, 0.0, 1.0);
// pow：平滑 a_f
// 1.0+：在物体内渲染
// max(1.0, sign(dist_f_) * -：dist_f_ < 0 时返回 -1，dist_f_ == 0 返回 0，dist_f_ > 0 返回 1，所以有效值只在物体内部
float b_f = 1.0 - max(1.0, sign(dist_f_) * -(1.0 + pow(a_f, 5.0)));
return color_v4_ + input_color_v4_ * b_f;
}
如果 (dist_f_ + radius_f_) > radius_f_ ：
a_f = 1.0；
b_f = 1.0 - max(1.0, -2.0) = 0；
返回值就为 color_v4_，此时为无效值。
如果 (dist_f_ + radius_f_) < 0 ：
a_f = 0.0；
b_f = 1.0 - max(1.0, 1.0) = 0；
返回值就为 color_v4_，此时为无效值。
由于 dist_f 越往物体内部越小，所以也会导致 a_f 也是也是如此，所以最后 1.0 - max。
阴影
硬阴影
注：残留像素是录屏软件的关系
什么是硬阴影？边缘没有过渡的阴影便是硬阴影。我们的 SDF 不仅可以同来生成各种图形，还可以做阴影！
硬阴影的实现原理是：从渲染点出发到光源点，依次步进安全距离（SDF 距离场，代表这个范围不会触碰到物体），如果距离场 < 0，则代表碰到了物体，返回 0，再把我们的光源的 color *= 返回值，就得到了阴影。
直接上代码：
vec2 render_v2_ 渲染点
vec2 light_v2_ 光源点
float shadow(vec2 render_v2_, vec2 light_v2_) {
// 当前渲染位置到光源位置的方向向量
vec2 render_to_light_dir_v2 = normalize(light_v2_ - render_v2_);
// 渲染位置至光源位置距离
float render_to_light_dist_f = length(render_v2_ - light_v2_);
// 行走距离
float travel_dist_f = 0.01;
for (int k_i = 0; k_i < max_shadow_step; ++k_i) {
// 渲染点到场景的距离
float dist_f = scene_dist(render_v2_ + render_to_light_dir_v2 * travel_dist_f);
// 小于0表示在物体内部
if (dist_f < 0.0) {
return 0.0;
}
// abs：避免往回走
// max 避免渲染点距离物理表面过近导致极小耗尽遍历次数，所以有可能会跳过物体距离小于1.0的阴影绘制
travel_dist_f += max(1.0, abs(dist_f));
// travel_dist_f += abs(dist_f); 精确的阴影
// 渲染点的距离超过光源点
if (travel_dist_f > render_to_light_dist_f) {
return 1.0;
}
}
return 0.0;
}
软阴影
图1
图2
相较硬阴影，软阴影更加有真实感。目前我了解的 SDF 实现软阴影目前大概是两种，一种是 iq 大神和 games202 里面提到的公式，但是效果并不好，在靠近物体时会产生弯曲的软阴影（上图1）；而本文将参考 Shadertoy 上另一位大神的代码去实现，效果非常好（上图2）。
先上代码：
float shadow(vec2 render_v2_, vec2 light_v2_, float hard_f_) {
// 当前渲染位置到光源位置的方向向量
vec2 render_to_light_dir_v2 = normalize(light_v2_ - render_v2_);
// 渲染位置至光源位置距离
float render_to_light_dist_f = length(render_v2_ - light_v2_);
// 可见光的一部分，从一个半径开始（最后添加下半部分）；
float brightness_f = hard_f_ * render_to_light_dist_f;
// 行走距离
float travel_dist_f = 0.01;
for (int k_i = 0; k_i < max_shadow_step; ++k_i) {
// 当前位置到场景的距离
float dist_f = scene_dist(render_v2_ + render_to_light_dir_v2 * travel_dist_f);
// 渲染点在物体内部
if (dist_f < -hard_f_) {
return 0.0;
}
// dist_f 不变，brightness_f 越小，在越靠近光源和物体时 brightness_f 越小
brightness_f = min(brightness_f, dist_f / travel_dist_f);
// max 避免渲染点距离物理表面过近导致极小耗尽遍历次数，所以有可能会跳过物体距离小于1.0的阴影绘制
// abs 避免朝回走
travel_dist_f += max(1.0, abs(dist_f));
// 渲染点的距离超过光源点
if (travel_dist_f > render_to_light_dist_f) {
break;
}
}
// brightness_f * render_to_light_dist_f 根据距离平滑, 离光源越近越小，消除波纹线
// 放大阴影，hard_f 越大结果越小则阴影越大, hard_f_ / (2.0 * hard_f_) 使结果趋近于0.5，用于平滑过渡
brightness_f = clamp((brightness_f * render_to_light_dist_f + hard_f_) / (2.0 * hard_f_), 0.0, 1.0);
brightness_f = smoothstep(0.0, 1.0, brightness_f);
return brightness_f;
}
这个实现方式的原理是：从渲染点出发到光源点，依次步进安全距离（SDF距离场，代表这个范围不会触碰到物体），如果距离场 < -hard_f_ 则返回 0，为什么是 -hard_f_ ，因为我们要用物体表面往内 hard_f_ 的距离来绘制阴影，这样软阴影就可以过渡到硬阴影的范围内，看起来更真实。
具体实现方式可以看注释，个人的理解都在注释里，大家可以多实验实验。
本文 Demo 放在 Gitee 仓库：
https://gitee.com/muzzik/mk_sdf_shadow
点击文末【阅读原文】前往论坛专贴查看完整内容，欢迎大家一起交流谈论！
参考资料
[1] 更多 SDF 图形公式
https://www.shadertoy.com/view/4dfXDn
[2] 图形公式原理讲解
https://blog.csdn.net/qq_41368247/article/details/106194092
[3] shadertoy 2D 软阴影实现
https://www.shadertoy.com/view/4dfXDn
[4] 软阴影和硬阴影