Shader特效——“酷炫的 ❤️ 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 進行範圍的截斷。

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