【前端er入门Shader系列】05—在cocos中使用shader实现简单特效

CCEffect %{
  techniques:
  - passes:
    - vert: vs:vert # 指向 CCProgram unlit-vs 的 vert 入口函数
      frag: fs:frag
}%

CCProgram vs %{
  //...
  vec4 vert () {
    //
  }
}%

CCProgram fs %{
  //...
  vec4 frag () {
    //
  }
}%

CCEffect %{
  techniques:
  - name: opaque # technique名称
    passes:
    - vert: unlit-vs:vert # 顶点着色器
      frag: unlit-fs:frag # 片段着色器
      properties: &props # 面板参数
        a_color: { value: [1.0, 1.0, 1.0, 1.0], editor: { type: color } }
        colorScale: { value: [1.0, 1.0, 1.0], target: colorScaleAndCutoff.xyz }
      migrations: &migs
        properties:
}%

CCProgram unlit-vs %{
  // 定义默认精度
  precision highp float;
  #include <cc-global>
  in vec3 a_position;
  vec4 vert () {
    // 获取顶点位置信息 本地坐标系
    vec4 pos = vec4(a_position, 1);
    // 本地空间 -> 世界空间 -> 视图空间 -> 投影(裁剪坐标)
    pos = cc_matViewProj * pos;
    return pos;
  }
}%

CCProgram unlit-fs %{
  precision highp float;
  #include <output>
  // Cocos Shader要求，常量需要定义在uniform-block常量块(uniform-block)中
  uniform Constant {
    vec4 a_color;
    vec4 colorScaleAndCutoff; // 颜色调节参数，rgb为调节因子
  };
  vec4 frag () {
    vec4 o = a_color;
    o.rgb *= colorScaleAndCutoff.rgb;
    return o;
  }
}%

// 应用于 Sphere
import { _decorator, Component, MeshRenderer, Color, Vec4 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('MaterialCtrl')
export class MaterialCtrl extends Component {
  start() {
    const target = this.node.getComponent(MeshRenderer);
    const color = new Vec4(0.6, 0.6, 1, 1.0); // 不使用Color，因为Color的颜色分量 [0,255]
    target.sharedMaterial.setProperty('a_color', color);
    const colorScaleAndCutoff = new Vec4(1.0, 1.0, 1.0, 1.0);
    target.sharedMaterial.setProperty('colorScaleAndCutoff', colorScaleAndCutoff);
  }
}

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: legacy/main-functions/general-vs:vert # builtin header
      frag: unlit-fs:frag
      properties: &props
        mainTexture: { value: white }
        detailTexture: { value: black }
        method: { value: 0 }
        mainColor: { value: [1, 1, 1, 1], editor: { type: color } }
  - name: transparent
    passes:
    - vert: legacy/main-functions/general-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-fs %{
  precision highp float;
  #include <legacy/output>
  #include <legacy/fog-fs>

  in vec2 v_uv;
  in vec3 v_position;

  uniform sampler2D mainTexture;
  uniform sampler2D detailTexture;

  uniform Constant {
    vec4 mainColor;
    int method; 
  };

  vec4 frag () {
    vec4 col = mainColor * texture(mainTexture, v_uv);
    vec4 detailColor = texture(detailTexture,v_uv);

    if(method == 0){
      //直接相加
      col.rgb += detailColor.rgb;
    }
    else if(method == 1){
      //直接相乘
      col.rgb *= detailColor.rgb;
    }
    else if(method == 2){
      //插值混合
      col.rgb = mix(col.rgb,detailColor.rgb,0.618);
    }
    else if(method == 3){
      //加权求和
      col.rgb = col.rgb * 0.2 + detailColor.rgb * 1.2;
    }
    else if(method == 4){
      //灰度混合
      float gray = detailColor.r * 0.299 + detailColor.g * 0.587 + detailColor.b * 0.114;
      col.rgb = mix(col.rgb, detailColor.rgb * 1.5, gray);
    }
    else if(method == 5){
      //相减
      col.rgb = col.rgb - detailColor.rgb;
    }
    CC_APPLY_FOG(col, v_position);
    return CCFragOutput(col);
  }
}%

CCEffect %{
  techniques:
  - name: test # technique名字
    passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState: # 深度&模板检测状态
        depthTest: false
        depthWrite: false
      blendState: # 图像混合测试状态
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      rasterizerState: # 光栅化状态，目前仅支持"面剔除"选项
        cullMode: none
      properties: # Pass面板上的配置参数
        u_dissolveMap: { value: white, editor: { tooltip: '噪声贴图' } }
        dissolveThreshold: { value: 0.5, editor: { range: [0, 1, 0.01], slide: true, tooltip: '溶解阈值' } }
}%

CCProgram sprite-vs %{
  precision highp float;
  #include <cc-global>

  in vec3 a_position; // GLSL es300 中使用 in / out 关键字代替 attribute / varing，但旧关键字仍然兼容
  in vec2 a_texCoord;
  in vec4 a_color;

  out vec4 color;
  out vec2 uv0;

  vec4 vert () {
    vec4 pos = vec4(a_position, 1);
    pos = cc_matViewProj * pos;
    uv0 = a_texCoord;
    color = a_color;
    return pos;
  }
}%

CCProgram sprite-fs %{
  precision highp float;

  in vec4 color;
  uniform Dissolve{ // Cocos Shader 规定，所有非 sampler 类型的 uniform 都应以 UBO（Uniform Buffer Object/Uniform Block）形式声明
    float dissolveThreshold; // 溶解阈值[0, 1]
  };

  #if USE_TEXTURE
    in vec2 uv0;
    uniform sampler2D u_dissolveMap; // 噪声图纹理
    #pragma builtin(local)
    layout(set = 2, binding = 10) uniform sampler2D cc_spriteTexture; // 新版内存分配
  #endif

  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);
    float value = 1.0;

    #if USE_TEXTURE
      vec4 dissolveMap = texture(u_dissolveMap, uv0);
      value *= dissolveMap.r; // 取贴图 r 分量
    #endif

    if (value < dissolveThreshold) {
      discard; // 小于阈值的片段丢弃，形成溶解
    }

    #if USE_TEXTURE
      o *= texture(cc_spriteTexture, uv0); // 与原纹理混合
    #endif

    o *= color;
    if (value < dissolveThreshold + 0.05) {
      o = vec4(0.9, 0.6, 0.3, o.a); // 溶解的边缘设置边缘过度色
    }

    return o;
  }
}%