Shader/assets/Resources/effect/Glowing.effect

//外发光效果

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        u_edge: { value: 0.5 }
        u_offset: { value: 0.01 }
        u_edgeBlur: { value: 0.01 }
        u_mixColor: { value: [1, 1, 1, 1], inspector: { type: color } }
        u_edgeColor: { value: [1, 1, 1, 0], inspector: { type: color } }
}%

CCProgram vs %{
  #include <cc-global>
  precision highp float;
  in vec4 a_position;
  in vec2 a_uv0;
  out vec2 uv0;
  void main()
  {
      gl_Position = cc_matViewProj * a_position;
      uv0 = a_uv0;
  }
}%

CCProgram fs %{
  precision highp float;
  in vec2 uv0;
  uniform sampler2D texture;
  uniform ARGS{
    vec4 u_mixColor; 
    float u_edge;
  };

// 是否边缘羽化
#if IS_Edge_Blur
  uniform ARGS1{
    float u_edgeBlur; 
  };
#endif

// 是否边缘发光(不要和羽化一起使用，会有边)
#if IS_EdgeGlowing
  uniform ARGS2{
    float u_offset; 
  };
#endif

// 是否使用边缘颜色
#if USE_EDGE_COLOR
  uniform ARGS3{
    vec4 u_edgeColor; 
  };
#endif


// 应用贴图颜色 画圆
vec4 drawCircle() {
  float edge = u_edge;
  float dis = 0.0;

  float offset = 0.0;
  vec2 uv = uv0;

// 是否边缘发光
#if IS_EdgeGlowing
  offset =  u_offset; 
  uv = vec2(0.5 + (uv0.x - 0.5) * ((offset*2.0) + 1.0), 0.5 + (uv0.y - 0.5) * ((offset*2.0) + 1.0)); 
#endif
         
        if ( uv.x < edge )
        {
            if ( uv.y < edge )
            {
                dis = distance( uv, vec2(edge, edge) );
            }
            if ( uv.y > (1.0 - edge) )
            {
                dis = distance( uv, vec2(edge, (1.0 - edge)) );
            }
        }
        else if ( uv.x > (1.0 - edge) )
        {
            if ( uv.y < edge )
            {
                dis = distance( uv, vec2((1.0 - edge), edge ) );
            }
            if ( uv.y > (1.0 - edge) )
            {
                dis = distance( uv, vec2((1.0 - edge), (1.0 - edge) ) );
            }
        }

        // 混合外边颜色
        vec4 color = u_mixColor * texture2D(texture,uv);
        // 边缘颜色
        vec4 edge_color = color;
        // 边缘羽化,默认0.01,减少抗锯齿
        float blur = 0.0;
      // 是否边缘羽化
      #if IS_Edge_Blur
          blur = u_edgeBlur;
      #endif

      // 如果有外部颜色,重新定义 边缘颜色
      #if USE_EDGE_COLOR
        // 如果应用贴图颜色混合
        #if USER_TEXTURE_COLOR
          edge_color = u_edgeColor  * texture2D(texture,uv);
        #else
          edge_color = u_edgeColor;
        #endif
      #endif
        
        if(dis > 0.001)
        {
            // 外圈沟
            float gap = edge * blur;
            if(dis <= edge - gap)
            {
                color = color;
            }
            else if(dis <= edge)
            {
                // 平滑过渡: ret smoothstep(a, b, x) 可以用来生成0到1的平滑过渡.
                float t = smoothstep(0.,gap,edge-dis);
                
                // 边缘颜色和透明度
                color = vec4(edge_color.rgb,t * edge_color.a);
            }else{
                // 隐藏不要的部分
                
                // 是否边缘发光
                #if IS_EdgeGlowing
                    color = vec4(edge_color.rgb, (offset - (dis - edge))/offset); 
                  #else
                    color = vec4(edge_color.rgb,0.); 
                #endif
            }
        }
        else
        {
          // 是否边缘发光
          #if IS_EdgeGlowing
                float absX = abs(uv.x - 0.5);
                if(absX > 0.5)
                {
                    color = vec4( edge_color.rgb, (offset - (absX - 0.5))/offset);
                }
                else 
                {
                    float absY = abs(uv.y - 0.5);
                    if (absY > 0.5){
                        color = vec4( edge_color.rgb, (offset - (absX - 0.5))/offset);
                    }
                    else{
                          color =  color;
                    }
                }
            #else
              color =  color;
          #endif
        }
    return  color; 
}


    void main()
    {
      vec4 color = drawCircle();
      gl_FragColor = color;
    }
}%