shader 动画之旗子/水纹波浪 ！Cocos Creator !

顶点动画、正弦、波长、振幅、周期。

效果预览

使用步骤

新建材质 ​​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. 1. 
      
2. 使用 Sprite 的网格(Mesh)渲染模式
   ，自定义顶点数据，可以参考 ​初探精灵中的网格渲染模式 。
3. 使用 cc.MeshRenderer
   组织顶点数据，参考 ​飘扬的旗帜！shader 编程实战！
   1. 
      

小结

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

以上为白玉无冰使用 ​​Cocos Creator v2.3.3​​​ 开发​​" shader 动画之旗子/水纹波浪效果！"​​的技术分享。

每个人都必定在某一方面胜于我，因此我向所有人学习。 -- 《人性的弱点》

更​多​精​彩​