Cocos Creater Shader-3D护盾

1、效果图：

2、拖入3D模型，创建一个球体，调整球体大小，包裹住模型；

3、创建effect着色器和材质，找到顶点shader文件，复制代码；

4、修改effect代码

// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: unlit-vs:vert # builtin header
      frag: unlit-fs:frag
      properties: &props
        __metadata__:   { editor: { visible: true } }
        mainTexture:    { value: white }
        mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }
        textureNoise:   { value: white }
        noiseAlpha:    { value: 0.5,  editor: { slide: true, range: [0.1, 3.0], step: 0.01, visible: true  } }
        shieldAlpha:    { value: 1.0,  editor: { slide: true, range: [0.1, 3.0], step: 0.01, visible: true  } }
  - name: transparent
    passes:
    - vert: unlit-vs:vert # builtin header
      frag: unlit-fs:frag
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendSrcAlpha: src_alpha
          blendDstAlpha: one_minus_src_alpha
      properties: *props
}%

CCProgram unlit-vs %{
  precision highp float;
  #include <legacy/input-standard>
  #include <builtin/uniforms/cc-global>
  #include <legacy/local-batch>
  #include <legacy/input-standard>
  #include <legacy/fog-vs>
  #include <legacy/shadow-map-vs>

  in vec4 a_color;//从渲染管道获取的顶点颜色

  out vec3 v_position; 
  out vec3 v_normal;
  out vec3 v_tangent;
  out vec3 v_bitangent;
  out vec2 v_uv; //顶点shader传递給着色shader的顶点纹理坐标;
  out vec4 v_color;//顶点shader传递給着色shader的顶点颜色

  //投影坐标传递给片元着色器
  out vec4 v_view;

  vec4 vert () {
    StandardVertInput In;
    CCVertInput(In);
    //引擎绘制物体时设置当前物体模型到世界的变换矩阵
    mat4 matWorld, matWorldIT;
    CCGetWorldMatrixFull(matWorld, matWorldIT);
    //从渲染管道获取的顶点坐标
    vec4 pos = matWorld * In.position;

    v_position = pos.xyz;
    v_normal = normalize((matWorldIT * vec4(In.normal, 0.0)).xyz);
    v_tangent = normalize((matWorld * vec4(In.tangent.xyz, 0.0)).xyz);
    v_bitangent = cross(v_normal, v_tangent) * In.tangent.w; // note the cross order

    pos = In.position;
    //a_texCoord 从渲染管道获取的纹理坐标
    v_uv = a_texCoord;
    v_color = a_color;

    #if SAMPLE_FROM_RT
      v_uv.y = 1.0 - v_uv.y;
    #endif
     //cc_matProj 引擎绘制物体时设置世界坐标到投影坐标系的变换
     // 将模型坐标变换到透视投影坐标，返回給渲染管道;
    v_view = cc_matProj * (cc_matView * matWorld) * pos;
    return v_view;
  }
}%

CCProgram unlit-fs %{
  precision highp float;
  #include <legacy/output>
  #include <legacy/fog-fs>

  uniform sampler2D mainTexture;
  uniform sampler2D textureNoise;

  in vec2 v_uv;

  in vec3 v_position;
  in vec4 v_view;

  uniform Constant {
    vec4 mainColor;
    float noiseAlpha;//噪声图透明度变化率
    float shieldAlpha;//边缘透明度变化率
  };

  vec4 frag () {
    vec4 color = mainColor;
    //获取噪声图颜色值
    vec4 noiseCol = texture(textureNoise, v_uv - cc_time.x * 0.2);
    color.a = noiseCol.r * noiseAlpha;
    vec2 uv = v_uv;
    //uv 随时间变化
    uv.x +=  cc_time.x * 0.2;
    vec4 col = color * texture(mainTexture, uv);
    // 边缘距离中心的透明度随距离变化
    float dis = distance(v_view.xy , vec2(0., -0.1)) * shieldAlpha; 
    col.a *= dis * dis * dis;
    return CCFragOutput(col);
  }
}%

噪声图