了不起的 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 动画之旗子/水纹波浪效果！"的技术分享。如果对你有点帮助，欢迎分享给身边的朋友。

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

“在看”是最大的鼓励▼