10_24/Test10_24/assets/Scripts/Shader/dissolve.effect

CCProgram vs %{
  //顶点着色器
  precision highp float;
  #include <cc-global>

  in vec3 a_position;
  in vec2 a_texCoord;

  out vec2 v_uv;

  void main () {
    vec4 pos = vec4(a_position, 1.0);
    v_uv = a_texCoord;
    gl_Position = cc_matViewProj * pos;
  }
}%

CCProgram fs %{
  //片元着色器
  precision highp float;
  #include <cc-global>

  in vec2 v_uv;
  layout(location = 0) out vec4 fragColor;

  // 修改 objectCenter 为 vec4 类型，避免对齐问题
  layout(set = 2, binding = 0) uniform DissolveUniforms {
      vec4 objectCenter;       // 改为 vec4，避免对齐错误
      vec4 edgeColor;          // 边缘颜色（火焰灼烧效果）
      float dissolveThreshold; // 消融阈值
      float edgeWidth;         // 边缘宽度
  };

  layout(set = 2, binding = 1) uniform sampler2D mainTexture;
  layout(set = 2, binding = 2) uniform sampler2D dissolveTexture;

  void main () {
    // 获取主纹理颜色
    vec4 color = texture(mainTexture, v_uv);

    // 获取消融纹理的值
    float dissolveValue = texture(dissolveTexture, v_uv).r;

    // 计算当前像素与物体中心的距离（物体中心可以设置为 objectCenter.xy）
    vec2 centerUV = v_uv; // 将UV坐标转换为[-1, 1]范围
    float distanceFromCenter = length(centerUV); // 计算与中心的距离

    // 基于距离的消融效果
    // 边缘的透明度（火焰效果逐渐消失的部分）
    float dissolveFactor = smoothstep(dissolveThreshold - edgeWidth, dissolveThreshold + edgeWidth, dissolveValue - distanceFromCenter);

    // 这里给边缘区域添加一个渐变效果，模拟火焰灼烧的感觉
    // 边缘会有一个渐变的颜色，从边缘颜色到透明
    vec4 fireEdgeColor = mix(edgeColor, vec4(0.0, 0.0, 0.0, 0.0), dissolveFactor);

    // 判断是否超出阈值，应用透明度
    if (dissolveValue < dissolveThreshold) {
        // 超过阈值时显示边缘颜色
        fragColor = mix(fireEdgeColor, vec4(0.0), dissolveFactor);
    } else {
        // 否则显示原始纹理颜色
        fragColor = color;
    }

    // 边缘部分逐渐消融，模拟火焰燃烧的消融效果
    fragColor.a *= (1.0 - dissolveValue);  // 基于 dissolveValue 控制透明度
  }
}%


CCEffect %{
  techniques:
    - passes:
        - vert: vs
          frag: fs
          rasterizerState:
            cullMode: none
          blendState:
            blend: true
            srcBlend: srcAlpha
            dstBlend: oneMinusSrcAlpha
          properties:
            mainTexture: 
              value: white
              editor: 
                type: texture2D
            dissolveTexture: 
              value: white
              editor: 
                type: texture2D
            dissolveThreshold: 
              value: 0.5
              editor: 
                type: slider
                min: 0
                max: 1
            edgeColor: 
              value: [1.0, 0.5, 0.0, 1.0]  # 这里设置边缘的颜色，模拟火焰灼烧
              editor: 
                type: color
            edgeWidth: 
              value: 0.1
              editor: 
                type: slider
                min: 0
                max: 1
            objectCenter: 
              value: [0.0, 0.0, 0.0, 0.0]
              editor: 
                type: vec4
}%