飘扬的旗帜！shader 编程实战！Cocos Creator！

用 shader mesh 立个 flag 吧！ 文章底部获取完整代码！

效果预览

使用方法

1. 创建一个空节点
2. 添加用户脚本组件 mesh-texture-flag
3. 添加图片
4. 修改对应属性

实现原理

概括来说就是创建 mesh 网格模型，通过顶点着色器对顶点坐标不断的修改，达到飘动的效果。关于 mesh 的介绍，可以参考上一篇文章。

确定顶点坐标

为了让顶点着色器里有多个顶点可以改变位置，需要把一个形状分割成多个方形(三角形)。分割数量越大，效果越精细，但需要消耗更多的性能消耗。下图是分割成两行三列的例子。

根据分割的行列数和节点大小，节点锚点，从左到右从上到下，算出每个顶点的位置信息。可以先算出相对左上角的位置，然后再根据锚点偏移，参考代码如下。

const x = (_col - this._col * this.node.anchorX) * _width / this._col;
const y = (_row - this._