「学习笔记」Cocos Creator 3.8 图形渲染 与 Cocos Shader

CCEffect %{
  techniques: // 渲染技术
  - passes: // 渲染通道（多个按顺序执行）
    - vert: vs // 顶点着色器入口函数名
      frag: fs // 片元着色器入口函数名
      <optional: render state> // 渲染状态
}%

CCProgram vs %{
  // 顶点着色器代码
}%

CCProgram fs %{
  // 片元着色器代码
}%

  techniques:
  - passes:
    - vert: sprite-vs:vert # 指定顶点着色器程序和使用的方法
      frag: sprite-fs:frag # 指定片元着色器程序和使用的方法
      # 深度和模板状态配置（禁用深度测试和写入，适用于2D精灵渲染）
      depthStencilState: 
        depthTest: false # 关闭深度测试
        depthWrite: false # 关闭深度写入（不更新深度缓冲区）
      # 混合状态配置（开启颜色混合，实现透明效果）
      blendState:    
        targets:
        - blend: true  # 开启
          # 混合因子配置：实现标准的Alpha混合
          blendSrc: src_alpha                # 源因子 = 源Alpha值
          blendDst: one_minus_src_alpha      # 目标因子 = 1 - 源Alpha值
          blendDstAlpha: one_minus_src_alpha # Alpha通道目标因子 = 1 - 源Alpha值
      # 光栅化状态配置
      rasterizerState:
        cullMode: none  # 禁用背面剔除，显示双面精灵
      # 属性配置
      properties:
        alphaThreshold: { value: 0.5 } # 设置Alpha阈值，默认值为0.5，用于Alpha测试

  precision highp float;  // 声明高精度浮点数，提供更好的数值精度
  // 引入Cocos内置全局uniform变量（如变换矩阵、时间等）
  #include <builtin/uniforms/cc-global>
  // 条件编译：如果定义了USE_LOCAL宏，则引入本地uniform变量
  #if USE_LOCAL
    #include <builtin/uniforms/cc-local>
  #endif
  // 条件编译：如果定义了SAMPLE_FROM_RT宏，则引入常用定义
  #if SAMPLE_FROM_RT
    #include <common/common-define>
  #endif
  // 输入属性：从顶点缓冲区读取的数据
  in vec3 a_position;  // 顶点位置坐标
  in vec2 a_texCoord;  // 纹理坐标
  in vec4 a_color;     // 顶点颜色
  // 输出变量：传递到片元着色器的数据
  out vec4 color;      // 顶点颜色
  out vec2 uv0;        // 处理后的纹理坐标
  // 顶点着色器-主函数
  vec4 vert () {
    // 将顶点位置转换为四维齐次坐标
    vec4 pos = vec4(a_position, 1);
    // 条件编译：如果定义了USE_LOCAL宏，则应用模型世界矩阵
    #if USE_LOCAL
      pos = cc_matWorld * pos; // 应用模型世界矩阵
    #endif
    // 条件编译：如果定义了USE_PIXEL_ALIGNMENT宏，则进行像素对齐
    #if USE_PIXEL_ALIGNMENT
      pos = cc_matView * pos;     // 应用视图矩阵
      pos.xyz = floor(pos.xyz);   // 对齐到像素中心
      pos = cc_matProj * pos;     // 应用投影矩阵
    #else
      pos = cc_matViewProj * pos; // 应用视图投影矩阵
    #endif
    // 传递纹理坐标
    uv0 = a_texCoord;
    // 条件编译：如果定义了SAMPLE_FROM_RT宏，则处理纹理坐标翻转
    #if SAMPLE_FROM_RT
      CC_HANDLE_RT_SAMPLE_FLIP(uv0); // 翻转Y轴（因为Cocos与OpenGL的纹理坐标系不同）
    #endif
    // 传递顶点颜色
    color = a_color;
    // 返回变换后的顶点位置
    return pos;
  }

precision highp float;  // 声明高精度浮点数
  // 引入内置的Alpha分离采样和Alpha测试
  #include <builtin/internal/embedded-alpha>
  #include <builtin/internal/alpha-test>
  // 输入变量：从顶点着色器传递过来的插值数据
  in vec4 color;  // 顶点颜色
  // 条件编译：如果定义了USE_TEXTURE宏，则进行纹理采样
  #if USE_TEXTURE
    in vec2 uv0;  // 纹理坐标
    #pragma builtin(local) // 告诉编译器cc_spriteTexture是内置的本地uniform
    layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;  // 声明纹理采样器是精灵纹理
  #endif
  // 片元着色器-主函数
  vec4 frag () {
    // 初始化输出颜色为白色不透明
    vec4 o = vec4(1, 1, 1, 1);
    // 条件编译：如果定义了USE_TEXTURE宏，则进行纹理采样
    #if USE_TEXTURE
      o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0); // 从纹理中采样颜色，并与基础颜色相乘
      // 条件编译：如果定义了IS_GRAY宏，则将颜色转换为灰度
      #if IS_GRAY
        float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
        o.r = o.g = o.b = gray;
      #endif
    #endif
    // 与顶点颜色相乘
    o *= color;
    // 进行Alpha测试，丢弃低于阈值的片段
    ALPHA_TEST(o);
    // 返回最终片元颜色
    return o;
  }

// 定义渲染技术和通道配置
CCEffect %{
  techniques:
  - 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:
        noiseTexture: { value: grey, editor: { tooltip: '噪声贴图' } }
        dissolveThreshold: { value: 0.0, editor: { range:[0.0, 1.0, 0.01], slide: true, tooltip: '溶解阈值' } }
}%
// 顶点着色器程序
CCProgram sprite-vs %{
  precision highp float;
  #include <builtin/uniforms/cc-global>
  in vec3 a_position;
  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;
  #if USE_TEXTURE
    in vec2 uv0;
    #pragma builtin(local)
    layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;
    uniform sampler2D noiseTexture; // 声明同名uniform(噪声贴图)
    uniform Dissolve { // 非sampler的uniform需要在block中声明
      float dissolveThreshold; // 声明 溶解阈值
    };
  #endif
  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);
    float noiseValue = 1.0;
    #if USE_TEXTURE
      vec4 dissolveMap = texture(noiseTexture, uv0);  // 对噪声材质采样
      noiseValue *= dissolveMap.r; // 采样到的噪声像素 R 通道的分量值（任意选一个通道即可），用于表示明度
      if (noiseValue < dissolveThreshold) {
        discard;  // 将小于阈值的片段丢弃，形成溶解
      }
      o *= texture(cc_spriteTexture, uv0); // 原纹理采样;
    #endif
    o *= color;
    if (noiseValue < dissolveThreshold + 0.05) { //设置边缘过渡色
      o = vec4(0.9, 0.6, 0.3, 1.0);
    }
    return o;
  }
}%