自定义着色器,frag输出的alpha小于一时,其他sprite被遮挡的部分会没有颜色

自定义着色器,frag输出的alpha小于一时,其他sprite被遮挡的部分会没有颜色

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

CCEffect %{

techniques:

  • name: opaque

    passes:

    • vert: legacy/main-functions/general-vs:vert # builtin header

      frag: unlit-fs:frag

      properties: &props

      mainColor: { value: [1, 1, 1, 1], editor: { type: color } }

      edgeColor: { value: [0, 0, 0, 1], editor: { type: color } }

      edgeWidth: { value: 0.5, editor: { type: range, min: 0.0, max: 1.0 }}

      length_x: { value: 1.0, editor: { type: range, min: 0.0, max: 1.0 }}

      length_y: { value: 1.0, editor: { type: range, min: 0.0, max: 1.0 }}

  • name: transparent

    passes:

    • vert: 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 Constant {

vec4 mainColor;

vec4 edgeColor;

float edgeWidth;

float length_x;

float length_y;

};

float sdf_rect(vec2 p, vec2 size) {

vec2 d = abs(p) - size;

return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);

}

vec4 frag () {

// return vec4(v_uv.x, v_uv.y, 0.0, 1.0);

vec2 uv = v_uv * 2.0 - 1.0;  // 将UV从[0,1]映射到[-1,1]

float scaledEdgeWidth = edgeWidth * min(length_x, length_y);

float real_length_x = length_x - scaledEdgeWidth;

float real_length_y = length_y - scaledEdgeWidth;

float sdf = sdf_rect(uv, vec2(real_length_x, real_length_y));



// 修改为只向外扩展

float inner = step(sdf, 0.0);              // 内部区域:sdf <= 0

float edge = step(0.0, sdf) * step(sdf, scaledEdgeWidth);  // 边缘区域:0 < sdf <= scaledEdgeWidth

// 混合颜色

vec4 col = mainColor * inner + edgeColor * edge;

// if (-1.0 < uv.y && uv.y < -0.8){

//   return vec4(1.0, 0.0, 0.0, 1.0);

// }



return col;

}

}%