CocosCreator Shader学习（四）：花草摆动效果

花草摆动效果

原理：根据时间的推移计算出x轴方向上的偏移量，然后把纹理中的每个点的颜色修改成发生偏移之后点的颜色。

先放一张静止状态的画草图

顶点着色器代码不用修改。

片元着色器代码如下：

CCProgram fs %{
  precision highp float;
  
  #include <alpha-test>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  uniform inputData{
    float time;
  };

  void main () {
    vec4 o = vec4(1, 1, 1, 1);

    //获取v_uv0这个点的高度
    float height = 1.0 - v_uv0.y;
    //使用pow函数，让越高的地方摆动幅度越明显且成抛物线形态
    float k = 0.1*pow(height, 2.0);
    //x轴偏移量，使用sin函数实现两边摆动效果，time*2.0是为了加快摆动
    float offset = k*sin(time*2.0);

    #if USE_TEXTURE
    //fract函数是GLSL内建函数，取小数部分
    o *= texture(texture, fract(vec2(v_uv0.x + offset, v_uv0.y)));
      #if CC_USE_ALPHA_ATLAS_TEXTURE
      o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
      #endif
    #endif

    o *= v_color;

    ALPHA_TEST(o);

    gl_FragColor = o;
  }
}%

脚本代码：

const {ccclass, property} = cc._decorator;

@ccclass
export default class Grass extends cc.Component {

    material: cc.Material = null;
    time: number = 0;

    start () {
        this.material = this.node.getComponent(cc.Sprite).getMaterial(0);
        //this.material.define();
    }

    update (dt) {
        this.time += dt;
        if(this.node.active && this.material != null){
            this.material.setProperty("time", this.time);
        }
    }
}

效果图如下：

花朵在摇摆的时候有点变形，效果勉强过得去吧！