再炫的特效没有声音也是不完整的~

Shader 特效 —— Film Burn.mp4

效果图

该特效可以分为以下 5 种效果的融合。

大 Blob 的效果

结合代码可知，这其实就是二维 sin*cos 的效果。

对纹理坐标增加了点随机性并随着 progress 移动后的效果如下

相应代码和注释如下

/// @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));

小粒子的效果

相应代码和注释如下

/// @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 的变化

从上图中可以看出该效果是 “从无到有再到无” 的一个过程。

相应代码和注释如下

/// @note 颜色随着 progress 而变化
f = pow3(f * color,   ///< 着色vec3(1., 2. - sin(progress * PI), 1.3)); ///< 1., [2., 1.], 1.3
f *= sin(progress * PI);

纹理坐标的周期性缩放

纹理坐标的缩放即是对纹理进行缩放的效果

相应代码和注释如下

/// @note 图像周期性缩放
p -= .5;    ///< 以屏幕中心为原点/// 随机对纹理坐标进行缩放
p *= 1. + (smoothRandom(vec2(progress * 5.), 6.3) * sin(progress * PI) * .05);
p += .5;    ///< 平移原点回左下角

带噪点的转场（结合纹理的缩放）

相应代码和注释如下

    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.));
}

综上

综合以上所有效果后，完整代码和解释如下

float seed = 2.31;#define PI 3.141592653589
#define PI_HALF (PI/2.)
#define clamps(x) clamp(x, 0., 1.)#iChannel0 "file://./images/私の初めて、キミにあげます/1 (6).jpeg"
#iChannel1 "file://./images/私の初めて、キミにあげます/timg (4).jpg"float progress = 0.f;vec4 getFromColor(vec2 uv)
{return texture2D(iChannel0, uv);
}vec4 getToColor(vec2 uv)
{return texture2D(iChannel1, uv);
}float sigmoid(float x, float a)
{float b = pow(x * 2., a) / 2.;if (x > .5){b = 1. - pow(2. - (x * 2.), a) / 2.;}return b;
}float apow(float a, float b)
{return pow(abs(a), b) * sign(b);
}/// @brief 三通道的 apow
vec3 pow3(vec3 a, vec3 b)
{return vec3(apow(a.r, b.r), apow(a.g, b.g), apow(a.b, b.b));
}/// @brief 平滑混合
float smoothMix(float a, float b, float c)
{return mix(a, b, sigmoid(c, 2.));
}/// ---------------------------------------------------------
/// 随机函数部分
float rand(float co)
{return fract(sin((co * 24.9898) + seed) * 43758.5453);
}float rand(vec2 co)
{return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}float rand(vec2 co, float shft)
{co += 10.;return smoothMix(fract(sin(dot(co.xy, vec2(12.9898 + (floor(shft) * .5), 78.233 + seed))) * 43758.5453),fract(sin(dot(co.xy, vec2(12.9898 + (floor(shft + 1.) * .5), 78.233 + seed))) * 43758.5453),fract(shft));
}float smoothRandom(vec2 co, float shft)
{return smoothMix(smoothMix(rand(floor(co), shft),rand(floor(co + vec2(1., 0.)), shft), fract(co.x)),smoothMix(rand(floor(co + vec2(0., 1.)), shft),rand(floor(co + vec2(1., 1.)), shft), fract(co.x)),fract(co.y));
}
/// ---------------------------------------------------------/// @brief 纹理平滑混合
vec4 textureSmoothMix(vec2 p)
{return mix(getFromColor(p), getToColor(p), sigmoid(progress, 10.));
}#iUniform vec3 color = vec3(1., 0.7, 0.6)
#iUniform float repeats = 50.0 in {0.0, 100.0}vec4 transition(vec2 p)
{/// @note 粒子效果vec3 f = vec3(0.);/// 粒子的个数for (float i = 0.; i < 20.; i++){/// @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));// -------------------------------------------------------------------------/// @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)));                                       ///< 影响粒子的大小，值越大粒子越小}f += 4.;f /= 11.;  ///< 变暗/// @note 颜色随着 progress 而变化f = pow3(f * color,                  ///< 着色vec3(1., 2. - sin(progress * PI), 1.3)); ///< 1., [2., 1.], 1.3f *= sin(progress * PI);/// @note 图像周期性缩放p -= .5;    ///< 以屏幕中心为原点/// 随机对纹理坐标进行缩放p *= 1. + (smoothRandom(vec2(progress * 5.), 6.3) * sin(progress * PI) * .05);p += .5;    ///< 平移原点回左下角vec4 blurred_image = vec4(0.);/// @note 带噪点的转场效果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; ///< 平均，模糊return blurred_image + vec4(f, 0.); ///< 毛玻璃+粒子}void main()
{vec2 uv = gl_FragCoord.xy / iResolution.xy;// uv.x *= iResolution.x/iResolution.y;progress = fract(.5 * iTime); ///< 线性速度gl_FragColor = transition(uv);
}

ShaderJoy —— Film Burn （炫光光晕）效果【GLSL】相关推荐

fcpx插件:50组唯美梦幻棱镜光晕效果预设MotionVFXmPrism
fcpx插件:50组唯美梦幻棱镜光晕效果预设推荐给大家!这是一套由MotionVFX出品的为影片增加唯美梦幻效果的预设,新颖独特,画面浪漫唯美!应用范围广!多项参数可再二次调节,达到您满意的效果!非常 ...
PS教程：紫色光晕效果实现
这里小千分享给大家一片PS实现紫色光晕效果的图文教程,同学们根据步骤操作即可. 1.新建800x800画布 2.设置前景色和背景色分别为#b38adb ,#212121;执行"滤镜" ...
【Unity3D日常开发】灯光系统，太阳光晕效果实现
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 一.前言太阳光晕的效果虽然用处不大,但是很漂亮,漂亮不就行了,那么就来看看 ...
Android:RecyclerView滑动到边缘时的光晕效果
相信大家对于RecyclerView 都已经不再陌生,我们都知道RecyclerView等可滑动控件默认的是会有滚动条以及滑动到边缘时的阴影(光晕)效果的,那么怎样去掉这两个默认属性呢,在这里简单的记 ...
剪辑美化视频的方法，每个视频添加光晕效果
很多视频通过剪辑使视频更美观,有时候也会给一些视频添加上光晕效果,那么如何快速剪辑多个视频,给每个视频添加上光晕效果呢?我使用视频剪辑高手,为你们分享批量的剪辑怎么做. 准备工具: 安装一个视频剪辑 ...
分享一个可以批量给视频去色并且添加一个光晕效果的方法
我们在剪辑视频的时候往往都会遇到各种各样的剪辑问题,今天小编要给大家分享一个可以批量给视频去色并且添加光晕效果的简单方法,有需要的小伙伴可以进来学习哦! 首先让我们来看一下视频去色并加上光晕效果之后是 ...
多段视频画面四周同时插入光晕效果并导出的详细步骤
在视频画面中插入光晕效果,是在很多视频素材中经常被用到的效果.那么这么效果是怎么制作出来的呢?下面一起来试试. 预览视频效果先看一下用视频剪辑高手快速给多段视频同时插入光晕效果双击视频进去查看,该 ...
教你快速剪辑多段视频，添加一个光晕效果
最近有很多朋友在问,该如何剪辑多段视频,比如添加光晕效果,怎么实现?于是乎今天小编给大家分享一个新的技巧,一次能剪辑多段视频,省时省心省力,下面一起来学习. 材料准备: 一台Win系统的电脑视频剪辑 ...
用AE实现一个文字光晕效果
文字光晕效果首先新建合成,调整视频的大小,然后再继续. 一.新建一个固态纯色背景层,可以是任何你喜欢的颜色,(右键-新建-纯色,然后再弹出的窗口修改颜色和名字) 二.再建一个纯色固态层,将颜色调整为 ...

ShaderJoy —— Film Burn （炫光光晕）效果【GLSL】

再炫的特效没有声音也是不完整的~

效果图

大 Blob 的效果

小粒子的效果

大 Blob & 小粒子随着 Progress 的变化

纹理坐标的周期性缩放

带噪点的转场（结合纹理的缩放）

综上

ShaderJoy —— Film Burn （炫光光晕）效果【GLSL】相关推荐

最新文章

热门文章

ShaderJoy —— Film Burn （炫光光晕）效果【GLSL】

再炫的特效没有声音也是不完整的~

效果图

大 Blob 的效果

小粒子的效果

大 Blob & 小粒子 随着 Progress 的变化

纹理坐标的周期性缩放

带噪点的转场（结合纹理的缩放）

综上

ShaderJoy —— Film Burn （炫光光晕）效果【GLSL】相关推荐

最新文章

热门文章

大 Blob & 小粒子随着 Progress 的变化