ShaderJoy —— “酷炫的 ❤️ Beating” 的实现【GLSL】

怼烎@ 2023-07-04 08:35 1阅读 0赞

### 效果视频 ###

[优酷视频链接][Link 1]

Shader 特效——酷炫的HeartBeating

### 效果图 ###

![20200209143751414.gif][] GIF 压缩有画质损失

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9wYW5kYTEyMzRsZWUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

### 完整代码与注释 ###

void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
        vec2 uv = (2.*fragCoord - iResolution.xy) / iResolution.y;
        uv.y -= 0.7 * abs(uv.x); ///< 绘制心形的第一步
    
        float t = iTime * 5.;
        float anim = sin(t + sin(t + sin(t))) * 0.5 + 0.5; ///< 控制跳动的节奏
        anim = clamp(0.5, 1., anim);
        float c = .8 * anim / length(uv) ; ///< 绘制心形的第二步
    
        /// 乘上三个通道的权重，红色最大
        vec3 col = vec3(c) * vec3(.55, 0.23, 0.21);
    
        fragColor = vec4(col, 1.0);
    }

### 核心原理解析 ###

代码很简单，重点就三个数学公式，分别是

① 绘制心形的第一步

![z = y - 0.7 \* |x|][z _ y - 0.7 _ _x]

![20200209134657851.gif][] 3维示意图

![20200209134722605.gif][] 等高线示意图

② 绘制心形的第二步

![u = x^\{2\}+z^\{2\}][u _ x_2_z_2]

![2020020913494428.gif][] 三维示意图

![20200209135003876.gif][] 等高线示意图

③ 心跳的节奏

![sin(t + sin(t + sin(t))) \* 0.5 + 0.5][sin_t _ sin_t _ sin_t_ _ 0.5 _ 0.5]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9wYW5kYTEyMzRsZWUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1][] 心跳节奏示意图

然后再用 clamp 进行范围的截断。

至此，一个酷炫的 心跳特效 就完成了~

[Link 1]: https://v.youku.com/v_show/id_XNDUzODU1MDQ2OA==.html?spm=a2hzp.8244740.0.0
[20200209143751414.gif]: https://img-blog.csdnimg.cn/20200209143751414.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9wYW5kYTEyMzRsZWUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200209135226373.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9wYW5kYTEyMzRsZWUuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[z _ y - 0.7 _ _x]: https://private.codecogs.com/gif.latex?z%20%3D%20y%20-%200.7%20*%20%7Cx%7C
[20200209134657851.gif]: https://img-blog.csdnimg.cn/20200209134657851.gif
[20200209134722605.gif]: https://img-blog.csdnimg.cn/20200209134722605.gif
[u _ x_2_z_2]: https://private.codecogs.com/gif.latex?u%20%3D%20x%5E%7B2%7D&plus;z%5E%7B2%7D
[2020020913494428.gif]: https://img-blog.csdnimg.cn/2020020913494428.gif
[20200209135003876.gif]: https://img-blog.csdnimg.cn/20200209135003876.gif
[sin_t _ sin_t _ sin_t_ _ 0.5 _ 0.5]: https://private.codecogs.com/gif.latex?sin%28t%20&plus;%20sin%28t%20&plus;%20sin%28t%29%29%29%20*%200.5%20&plus;%200.5
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9wYW5kYTEyMzRsZWUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200209134411532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9wYW5kYTEyMzRsZWUuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70