01.cocos shader图片老化

1.参考了这位老兄的教程：
https://www.jianshu.com/p/711a54ff2fa0

effect代码

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        alphaThreshold: { value: 0.5 }        
        old_level: {
          value: 1.0,
          inspector: {
            tooltip: "老化程度",
            range:[0.0,1.0]
          }
        }
}%


CCProgram vs %{
  precision highp float;

  #include <cc-global>
  #include <cc-local>

  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;

  #if USE_TEXTURE
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif  

  void main () {
    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif

    #if USE_TEXTURE
    v_uv0 = a_uv0;
    #endif

   

    v_color = a_color;

    gl_Position = pos;
  }
}%


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

  in vec4 v_color;

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

  #if USE_OLD_PHOTO
  uniform old_photo{
    float old_level;
  };

  vec4 get_old_photo_color(vec4 color){
    float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b;
    float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b;
    float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;
    return vec4(r,g,b,color.a); //第四个参数为透明度rgba;
  }
  #endif

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

    #if USE_TEXTURE
    o *= texture(texture, v_uv0);
      #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);

    #if USE_OLD_PHOTO
    vec4 src_color =o;
    vec4 old_color = get_old_photo_color(src_color);
    o = src_color + (old_color -src_color) * old_level;
    #endif

    gl_FragColor = o;
  }
}%

ts的代码：

// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Slider)
    old_slider: cc.Slider = null;

    @property(cc.Node)
    image:cc.Node = null;

    material:cc.Material = null;
    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        this.old_slider.node.on("slide",this.slider_change,this);
        this.image.getComponents(cc.RenderComponent).forEach(renderComponent => {
            this.material = renderComponent.getMaterial(0);
            
            
        });
        
        
    }

    slider_change(){
        console.log("change:",this.old_slider.progress);
        this.material.setProperty("old_level", this.old_slider.progress);
    }

    // update (dt) {}
}