cocos creator 利用shader 实现探照灯效果

探照灯实现效果如下：

看看怎么实现的吧：

light.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 }
}%


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;
  uniform ARGS {
    float width;
    float height;
    vec2 center;
  };
  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif
  void mainImage(out vec4 color,vec2 uv,vec4 s) {
    vec2 realCenter;
    realCenter.x = uv.x / width;
    realCenter.y = uv.y / height;
    float radius = 3.;
    float dis = sqrt(pow((realCenter.x - uv.x),2.) + pow((realCenter.y - uv.y),2.));
    if(dis < 1.) {
      color = vec4(0.3,0.4,0.5,1.);
    } else {
      color = s;
      // color = color * vec4(1.,0.,0.,0.5);
    }
  }
  void circle(out vec4 color,vec2 uv,vec2 cen,float radius,vec4 s) {
    float ratio = width / height;
    /* 所有像素点到中心点的距离*/
    float dis = sqrt(pow((cen.x - uv.x),2.) + pow((cen.y - uv.y),2.));
    if(dis < radius) {
      color = s;
    } else {
      color = vec4(s.r * s.g * s.b,s.b * s.r * s.g,s.b * s.r * s.g ,0.5);
    }
  }
  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);
    
    gl_FragColor = o;
    vec2 resolution = vec2(width,height);
    vec2 uv = v_uv0;
    float ratio;
    vec2 realCenter = vec2(0.5,0.5);
    if(height > width) {
      ratio = height / width;
      uv.y *= ratio;
      realCenter.y = center.y * ratio;
      realCenter.x = center.x;

    } else {
      ratio = width / height;
      uv.x *= ratio;
      realCenter.x = center.x * ratio;
      realCenter.y = center.y;
    }
    // uv.y *= 1.77;
    // vec2 uv = (-resolution.xy + 2. * v_uv0.xy) / resolution.y;
    circle(gl_FragColor,uv,realCenter,0.2,o);
    // mainImage(gl_FragColor,uv,o);
  }
}%

对应setUniform的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 {

    

    // LIFE-CYCLE CALLBACKS:
    _material: cc.Material;
    @property({
        type: cc.Integer,
        step: 1,
        displayName: '横向格子的数量',
        slide: true,
        min: 10,
        max: 200
    })
    width: number = 0;
    @property({
        type: cc.Integer,
        step: 1,
        displayName: '纵向格子的数量',
        slide: true,
        min: 20,
        max: 300
    })
    height: number = 0;

    onLoad () {
        this._material = this.node.getComponent(cc.RenderComponent).getMaterial(0);
        let sprite: cc.Sprite = this.node.getComponent(cc.Sprite);
        let spriteFrame: cc.SpriteFrame = sprite.spriteFrame;

        let texture: cc.Texture2D = spriteFrame.getTexture();
        let textureWidth: number = texture.width;
        let textureHeight: number = texture.height;

        console.log("width is ",textureWidth," and height is ",textureHeight);

        // for(let i = 0; i < textureWidth; i++) {
        //     for(let j = 0; j < textureHeight; j++) {
                
        //     }
        // }
        
        this.node.on(cc.Node.EventType.TOUCH_MOVE,this.move,this);
        console.log("width is ",this.node.width," and height is ",this.node.height);
        // this._material.setProperty('width')
        this._material.setProperty('width',this.node.width);
        this._material.setProperty('height',this.node.height);
        this._material.setProperty('center',cc.v2(0.5,0.5));

    }
    move(event: cc.Event.EventMouse): void {
        let ratio = this.node.height / this.node.width;

        let location: cc.Vec2 = event.getLocation();
        console.log("location.y is ",location.y);
        let x = location.x / cc.winSize.width;
        let y = (location.y / cc.winSize.height);
        /**
         * x [-1,1]
         * y [-1,1]
         */

        console.log("x is ",x);
        console.log("y is ",y);

        let center = cc.v2(x,1 - y);
        this._material.setProperty('center',center);
    }
    start () {

    }

    update (dt) {
        
    }
}

鼠标移动到哪哪个地方就会有个探照灯