CocosCreator-Shader-Effect-Demo/assets/effects/loading-style-1.effect

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        u_arc_color: {
          value: [1.0, 1.0, 1.0, 1.0],
          editor: {
            type: color,
            tooltip: "圆弧线颜色"
          }
        }
        u_arc_radius: { 
          value: 0.3, 
          editor: { 
            tooltip: "圆弧半径"
          } 
        } 
        u_arc_line_width: {
          value: 0.1,
          editor: {
            tooltip: "圆弧线宽"
          }
        }
        u_ball_color: {
          value: [1.0, 1.0, 0.0, 1.0],
          editor: {
            type: color,
            tooltip: "小球颜色"
          }
        }
        u_ball_angle: {
          value: 30.0,
          editor: {
            tooltip: "小球所在角度"
          }
        }
        u_ball_angle_range: {
          value: 30.0,
          editor: {
            tooltip: "小球所在角度的夹角范围"
          }
        }
        u_ball_radius: {
          value: 0.05,
          editor: {
            tooltip: "小球半径"
          }
        }        
}%


CCProgram vs %{
  precision highp float;

  #include <cc-global>
  #include <cc-local>

  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;

  #if USE_TEXTURE
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif

  void main () {
    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif

    #if USE_TEXTURE
    v_uv0 = a_uv0;
    #endif

    v_color = a_color;

    gl_Position = pos;
  }
}%


CCProgram fs %{
  precision highp float;

  #include <cc-global>

  in vec4 v_color;

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

  #if USE_ANTI_ALIAS
  #endif

  #if USE_LOADING_STYLE
  uniform style{

    // 圆弧线颜色
    vec4 u_arc_color;

    // 小球颜色
    vec4 u_ball_color;

    // 圆弧线宽
    float u_arc_line_width;

    // 圆弧半径
    float u_arc_radius;

    // 小球所在角度
    float u_ball_angle;

    // 小球所在角度的夹角范围
    float u_ball_angle_range;

    // 小球半径
    float u_ball_radius;
  };


  /**
   * 获取 v_uv0 映射后的坐标
   */
  vec2 getUv0Shadow() {
    // 1. 将 v_uv0 映射到 以 (0.5, 0.5) 为圆心，Y轴向下，X轴向右的坐标系的坐标 uv0
    vec2 uv0 = v_uv0 - vec2(0.5, 0.5);

    // 2. 将映射后的 uv0 的坐标逆时针旋转一定角度（实际等同于旋转画布)

    // 这里应用 cc-global.chunk 的 cc_time 参数，实现根据时间不断旋转的功能
    float rotation_angle = u_ball_angle + cc_time.x * 200.0;  // * 200 是加快旋转速度
    float rotation_radians = radians(rotation_angle);         // 角度转弧度
    vec2 uv0_after_rotation = vec2(                           // 矩阵旋转
      uv0.x * cos(rotation_radians) - uv0.y * sin(rotation_radians),
      uv0.x * sin(rotation_radians) + uv0.y * cos(rotation_radians)
    );

    return uv0_after_rotation;
  }

  /**
   * 画圆弧
   * 
   * 原理基于纹理中心，并且0角度先画圆弧，然后在旋转画布
   */
  vec4 getArcColor() {
    vec2 uv0 = getUv0Shadow();

    // 求圆边范围
    float len = length(uv0);
    float min_radius = u_arc_radius - u_arc_line_width * 0.5;
    float max_radius = u_arc_radius + u_arc_line_width * 0.5;
    if (len >= min_radius && len <= max_radius) {

      // 求（圆）缺口范围
      float radian = acos(uv0.x / len);
      float radian_range = radians(u_ball_angle_range * 0.5);
      if (radian >= radian_range) {
        float alpha = 1.0;
        // 抗锯齿
        #if USE_ANTI_ALIAS
          alpha = smoothstep(0.0, 0.05, 1.0 - abs(len - u_arc_radius) / (u_arc_line_width * 0.5));
        #endif

        // 非缺口范围内画圆弧
        return u_arc_color * alpha;
      }
    }
    return vec4(0.0, 0.0, 0.0, 0.0);
  }

  /** 
   * 画小球
   */
  vec4 getBallColor() {
    vec2 uv0 = getUv0Shadow();
    vec2 ball_center_point = vec2(u_arc_radius, 0);

    // cos 控制小球半径不断缩放
    float ball_radius = u_ball_radius + u_ball_radius * 0.3 * cos(radians(cc_time.x * 200.0));
    float dis = distance(uv0, ball_center_point);
    if (dis <= ball_radius) {

      float alpha = 1.0;
      // 抗锯齿
      #if USE_ANTI_ALIAS
        alpha = smoothstep(0.0, 0.01, ball_radius - dis);
      #endif
      
      return u_ball_color * alpha;
    } else{
      return vec4(0.0, 0.0, 0.0, 0.0);
    }
  }

  #endif

  void main () {
    vec4 o = vec4(1, 1, 1, 1);
    gl_FragColor = o;
    #if USE_LOADING_STYLE
      vec4 arc_color = getArcColor();
      vec4 ball_color = getBallColor();
      gl_FragColor = ball_color * ball_color.a + arc_color;
    #endif   
  }
}%