简单的流动边框效果

[782306174 (小垃圾)]

主要思路就是使用step函数裁取边框区域，再根据极坐标的角度渐变边框颜色

  uniform sampler2D mainTexture;

  uniform Constant {

    vec4 mainColor;

    float u_width;

    float u_speed;

    float u_alphaScale;

  };

  #define PI 3.14159

  vec4 frag () {

    //首先转换坐标系

    vec2 uv = v_uv;

    vec2 center = vec2(0.5, 0.5);

    vec2 point = uv - center;

    float theta = atan(point.y, point.x);

    //流线颜色

    vec4 col = mainColor;

    //根据角度衰减透明度

    col.a = fract(theta / PI - u_speed * cc_time.x) + u_alphaScale;

    //纹理边界

    float inside = 0.5 - u_width;

    //截取边框 内部a为1，外部为0

    float a = step(abs(point.x),inside) * step(abs(point.y),inside);

    //保留被边框吃掉的像素

    uv.x = uv.x / (1.0 - u_width);

    uv.y = uv.y / (1.0 - u_width);

    col = mix(col, texture(mainTexture, uv), a);

    return col;

  }