Interlude 2. Manga Speed Lines

偶然用 shader 乱搓出的一个类似漫画风格的放射线效果，实际上还有很多缺陷，权且当思路分享了

🚩 0x00 To begin with

这篇文章将会包含以下内容：

漫画中经常有这种放射线的效果：

通常是用来表达角色情绪、物体速度感或突出画面重点，动漫中还会做出动画以增加表现力。但是如果不靠画（全凭程序化）怎么做呢？

如果不限制工具的话思路很简单，在 PS 里先画一个渐变，再用波浪扭成间隔不等的尖刺状，最后转成极坐标就完事了。

但是如果要用 shader 写的话就有点头疼了，主要是那种不规则的尖刺效果。我一开始想的是让 V 的起点在径向随机偏移，但 UV 毕竟是重复平铺的，极坐标一扭还是会窜到中心去，甚至 V 有没有都没关系。

所以偏移 UV 的想法是不行了，我的做法是糊出一个遮罩（也是很邪门了）。

要做出放射的效果，首先得让 UV 位于模型的中心，以正方形平面为例，在映射中将 UV 同时减去 0.5，让 UV (0,0) 处位于模型中心。

然后就是让 U 绕圆周环游一圈，现在的 UV 可以当成直角坐标系处理，很容易给出一个单位圆的方程：

$$ u^2+v^2=1 $$

然后算以 U 轴正方向为起点的角度：

$$ \theta=\arctan \frac{v}{u} $$

可以用运算节点的反正切 2 计算这个$\theta$，但是结果的范围是$-\pi \sim+\pi$，需要映射回$0 \sim1$：

用这个作为 UV 采样波浪纹理就可以有放射线的效果：

为什么可以直接连矢量，因为 V 是啥都无所谓，由于波浪纹理的性质径向都是同一个值

但是漫画里面的放射线粗细、间隔没有那么均匀，那就拿一个噪波扰动 U：

酷！可以拿这玩意交平面构成作业了（bushi）。

现在有了放射线的造型，但我们只需要周边的部分，为此需要径向剔除中心部分的放射线，首先需要拿到径向的 V，直接取原始 UV 的长度即可。然后需要让 V 径向随机偏移，这里我直接拿波浪纹理的输出与 V 相加，糊出一个海胆状遮罩。

波浪纹理之后的乘数用于控制偏移范围

最后拿这个遮罩和原本的放射线混合一下，遮罩为 0 处取原本颜色，否则取 1（白色）。

然后就糊出来了……

做出这个的时候还特意网上搜了一圈，有 AE 和 PS 的教程，但似乎没有用 shader 还原的（也可能没搜到），当然毕竟是糊出来的，还有很多不可控的地方：

实际如果有项目要用估计也是直接画好遮罩然后做帧动画的，但还是希望我这种邪门的做法是无用之用吧。