Shader 实现 - 高清圆角图片

前言

使用 Shader 实现，没有锯齿的高清圆角图片。

一. 效果

二. Effect

核心方法：

CCProgram fs %{
  precision highp float;
  
  #include <alpha-test>
  #include <texture>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  void main () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
    o *= texture(texture, v_uv0);
    float a = distance(v_uv0, vec2(0.5, 0.5));
    o.a = 1.0 - smoothstep(0.49, 0.5, a);

    #endif

    o *= v_color;

    ALPHA_TEST(o);

    gl_FragColor = o;
  }
}%

注意

该方法会影响合批，增加 drawcall, 请根据实际情况使用，避免性能出现问题。