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公式算法来实现的