引言：本文为「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 ~ 1float 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 ~ 1float 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] 软阴影和硬阴影

https://www.ronja-tutorials.com/post/037-2d-shadows/

往期精彩