Photosohp - 实现 2D MetaBall、MetaFont

---

效果

---

MetaFont

---

MetaBall

---

原理

• 将原来的图像模糊
• 然后调整色阶

就两步，非常简单，但是效果非常出众

---

Photoshop 步骤

---

原图

---

模糊

---

调整色阶

---

原理转换到 Shader

先不着急写 Shader
上面都是 Photoshop 的一些步骤
里面的一些黑箱操作，可能不了解的同学，会一脸懵逼

那么下面我将在 shader 程序代码思路的角度来讲解，便于没接触过 Photoshop 的同学理解

模糊：原图剪影模糊后，边缘都是 淡出的数值 (FadeOut)，边缘值都是平滑的淡出的
相加：然后我们可以通过多个图像的模糊后的 交集部分像素值相加
色阶：然后将这些相加后的值，大于某个指定的阈值时候，就设置为指定的颜色

---

实时模糊

上面的效果不算太麻烦，有了上面的思路，我们要制作实时的也是可以的

我们可以 实时 将原图实时 方框模糊，或是 高斯模糊算法来处理

然后将得到的结果处理即可

但是这个模糊效果的消耗不低，毕竟需要比较多的纹理采样次数

总结为：原图实时模糊 + 相加 + 色阶

---

预先模糊

我们可以使用预先使用 Photoshop 模糊后的素材来做 预先模糊好的图 + 相加+色阶 即可

---

Shader

（shader graph）
（手撸 shader）
（后续补上）

---

PSD 素材

jave.lin_Metaball_原理.psd - Photoshop 2020 CC - 23.0.0 版本

---

References

• AE 小动画 | 融球动画

---

另外，2D metaball 的实现，可以如此简单

其实在 3D 下的也差不多
在 shadertoy 上可以看到 iq 大神的 metavolume 的各种效果
都是使用隐式几何的SDF公式算法来实现的