了不起的 Creator Shader 修仙之路—紅旗飄飄、水波盪漾

頂點動畫、正弦、波長、振幅、週期。

效果預覽

使用步驟

新建材質 Material ， 選擇對應的 Effect ，調整參數。

在場景中新建一個精靈(Sprite) ， SpriteFrame 選取一個超小的圖片。渲染模式選擇平鋪(TILED)，修改節點大小。材質選擇上面創建的材質。

預覽就能看到這張圖片動起來了。

實現原理

爲什麼選擇平鋪模式可以實現這個效果呢？

簡單的 Sprite 通常是4個頂點。

而通過 Cocos 源碼中發現，Sprite 的平鋪渲染模式的 webgl 實現是平鋪頂點網格。平鋪的數量越多，頂點越多。

所以，只要這張圖片足夠小的話，這個網格就越密集。

如何產生波動效果？

這裏用到正弦波公式  y = A sin{ 2π ( t/T - x/λ ) } ，就能實現波動效果。

所以，使用 sin 函數，對每一個頂點的位置座標做一次偏移，就能達到波動效果啦～

頂點着色器主要代碼如下。

void main () {
    vec4 pos = vec4(a_position, 1);
    // y = A sin{ 2π ( t/T - x/λ ) }
    pos.y = pos.y + sin_A*sin(2.0*3.141592653*(cc_time.x/sin_T - pos.x/sin_lamda));
    // 省略代碼
}

使用 Sprite 的平鋪渲染模式有一個限制條件就是這個紋理要比較簡單且可以重複使用，例如這種純色的波動效果。

如果要使用複雜的紋理波動可以用以下幾種方法。

1. 使用 Sprite 的網格(Mesh)渲染模式，自定義頂點數據，可以參考 初探精靈中的網格渲染模式 。

2. 使用 cc.MeshRenderer 組織頂點數據，參考 飄揚的旗幟！shader 編程實戰！

小結

y = A sin{ 2π ( t/T - x/λ ) }

以上爲白玉無冰使用 Cocos Creator v2.3.3 開發" shader 動畫之旗子/水紋波浪效果！"的技術分享。如果對你有點幫助，歡迎分享給身邊的朋友。

每個人都必定在某一方面勝於我，因此我向所有人學習。   -- 《人性的弱點》

“在看”是最大的鼓勵▼