Shader特效——“更酷炫的 Heart ❤ Beating”【GLSL】

效果视频

优酷视频链接

Shader 特效——酷炫的HeartBeating

效果图

GIF 压缩有画质损失

完整代码与注释

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

核心原理解析

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

① 绘制心形的第一步

 

3维示意图

等高线示意图

② 绘制心形的第二步

三维示意图

等高线示意图

③ 心跳的节奏

心跳节奏示意图

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

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

查看专栏详情 立即解锁全部专栏