ShaderJoy —— 果凍般的彈性 「抖抖抖「 特效【GLSL】

效果圖

因爲最近工做比較忙，有一段時間沒有更新特效專欄了，可是期間也收集了一些挺有意思的特效代碼，後續通過整理會陸續加入到專欄裏面來和各位讀者進行分享~ (　ﾟ∀ﾟ) ﾉ♡

而且儘可能以簡單的語言來解釋原理而不是用枯燥乏味的長篇大論以及堆砌晦澀難懂的公式【我本身遇到這樣的文章以很頭疼 (ノへ￣、) 】，固然若是有什麼地方讀者大大以爲我沒有說清楚，也歡迎留言，提醒我進行補充。

核心算法

該特效關鍵用到 sin(sin(x * a))*b, a = 3., b = 20. 這個數學公式，很神奇 (๑•̀ㅂ•́)و✧ 有木有？！

/// @note 不一樣網格錯開不一樣的偏移   
vec2 offs = vec2(sin(uv.y * scale + sin(iTime * 3.) * 20. + id.y * 0.2),                      sin(uv.x * scale + sin(iTime * 3.) * 20. + id.x * 0.2));
複製代碼

這個數學公式的函數圖以下

顯然紋理座標在 x y 方向上都是遵循這種 「震盪」 的方式，並且本例中週期都是相同的，只不過各個紋理座標因爲所處的網格不一樣、自己座標不一樣，而進行了必定程度的偏移

某一時刻的 offs 可視化以下所示

注意，黑色的區域不都是 0，有些實際上是負值

正是有了各個座標的不一樣偏移量以及隨着時間的週期性震盪，才最終實現了最開頭的那個神奇效果~

完整代碼和註釋

#iChannel0 "file://../images/19.jpg"

#iUniform float scale = 60. in {1., 100.}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    /// @note 歸一化的屏幕座標(from 0 to 1)
    vec2 uv = fragCoord / iResolution.xy;
    /// @note 劃分網格
    vec2 id = floor(uv * scale);

    /// @note 不一樣網格錯開不一樣的偏移
    vec2 offs = vec2(sin(uv.y * scale + sin(iTime * 3.) * 20. + id.y * 0.2),
                     sin(uv.x * scale + sin(iTime * 3.) * 20. + id.x * 0.2));

    offs *= .01;
    uv.xy += offs ;

    /// @note 採樣圖像並顯示
    vec3 col = texture(iChannel0, uv).rgb;
    fragColor = vec4(col, 1.0);
}
複製代碼

不知道怎麼運行的同窗能夠參考個人這篇文章 — 《很是方便的 VSCode 的 Shader 插件 -- Shader Toy》