再炫的特效没有声音也是不完整的~
Shader 特效 —— Film Burn.mp4
效果图
该特效可以分为以下 5 种效果的融合。
大 Blob 的效果
没添加随机性的大 Blob 示意图结合代码可知，这其实就是二维 sin*cos 的效果。
sin(x)cos(y)对纹理坐标增加了点随机性并随着 progress 移动后的效果如下
增加了随机性的大 Blob 动态示意图【gif 对颜色进行了量化】
增加了随机性的大 Blob 静态示意图相应代码和注释如下
代码语言：javascript复制/// @note 大 Blob
/// 增加一点随机性，改变每个 blob 的形状
f = .1
sin(((p.x * rand(i) * 6.0) ///< 影响 blob 的大小
(progress * 8.0)) ///< 影响 blob 的速度
rand(i 1.43)) *
cos(((p.y * rand(i 4.4) * 6.0) ///< 影响 blob 的大小
(progress * 6.0)) ///< 影响 blob 的速度
rand(i 2.4));
小粒子的效果
相应代码和注释如下
代码语言：javascript复制/// @note 小粒子
f = 1. - clamps(length(p -
vec2(smoothRandom(vec2(progress * 1.3), i 1.0), ///< 控制粒子的运动位置和轨迹【通过插值确保产生的随机值是连续的】
smoothRandom(vec2(progress * 0.5), i 6.25))) *
mix(20., 70., rand(i))); ///< 影响粒子的大小，值越大粒子越小其实就是在随机的位置【连续变化】画随机大小的圆。
大 Blob & 小粒子 随着 Progress 的变化
f 随着 progress 的变化从上图中可以看出该效果是 “从无到有再到无” 的一个过程。
动态效果【gif 对颜色进行了量化】
静态效果相应代码和注释如下
代码语言：javascript复制/// @note 颜色随着 progress 而变化
f = pow3(f * color, ///< 着色
vec3(1., 2. - sin(progress * PI), 1.3)); ///< 1., [2., 1.], 1.3
f *= sin(progress * PI);纹理坐标的周期性缩放
这里对纹理坐标的值进行了调整以便显示纹理坐标的缩放即是对纹理进行缩放的效果
相应代码和注释如下
代码语言：javascript复制/// @note 图像周期性缩放
p -= .5; ///< 以屏幕中心为原点
/// 随机对纹理坐标进行缩放
p *= 1. (smoothRandom(vec2(progress * 5.), 6.3) * sin(progress * PI) * .05);
p = .5; ///< 平移原点回左下角带噪点的转场（结合纹理的缩放）
相应代码和注释如下
代码语言：javascript复制 float bluramount = sin(progress * PI) * .03;
/// @note repeats 越大，毛玻璃效果越弱
for (float i = 0.; i < repeats; i )
{
/// 角度转弧度
float rad = radians((i / repeats) * 360.);
vec2 q = vec2(cos(rad), sin(rad)) *
(rand(vec2(i, p.x p.y)) bluramount); ///< 生成噪点
vec2 uv2 = p (q * bluramount); ///< 随机噪点偏移纹理坐标，毛玻璃效果
blurred_image = textureSmoothMix(uv2); ///< 叠加随机偏移的纹理（同时随着 progress 变化）
}
blurred_image /= repeats; ///< 平均，模糊/// @brief 纹理平滑混合
vec4 textureSmoothMix(vec2 p)
{
return mix(getFromColor(p), getToColor(p), sigmoid(progress, 10.));
}
sigmoid 示意图综上
综合以上所有效果后，完整代码和解释如下
代码语言：javascript复制请留言
