shader圆形进度条

实现一个圆形进度条需要用到一些基本的数学知识，比如三角函数和向量运算。以下是一个简单的实现过程：

1. 首先需要定义一个圆形的顶点列表。可以通过计算圆上等分点的坐标来生成。例如，可以定义一个半径为1的圆，然后通过遍历角度来计算每个等分点的坐标。

2. 然后需要根据当前进度计算出需要显示的圆弧的角度范围。假设进度为50%，则需要显示圆弧的角度范围为0度到180度。

3. 接下来需要生成圆弧的顶点列表。可以通过对圆上等分点的坐标进行旋转来得到圆弧上的顶点坐标。具体来说，可以首先计算出圆心到等分点的向量，然后通过旋转这个向量来得到圆弧上的顶点坐标。

4. 最后需要将圆形和圆弧的顶点列表传入着色器中进行绘制。可以使用三角扇来绘制圆形，使用三角带或三角列表来绘制圆弧。

下面是一个简单的着色器示例，可以实现一个简单的圆形进度条：

precision mediump float;

attribute vec2 a_position;
varying vec2 v_position;
uniform float u_progress;

void main() {
    v_position = a_position;
    gl_Position = vec4(a_position, 0.0, 1.0);
}

precision mediump float;

varying vec2 v_position;
uniform float u_progress;
uniform vec4 u_color;
const float PI = 3.1415926;

void main() {
    vec2 center = vec2(0.5, 0.5);
    float radius = 0.5;
    float angle = u_progress * PI;
    vec4 color = vec4(0.0, 0.0, 0.0, 0.0);
    if (v_position == center) {
        color = u_color;
    } else if (length(v_position - center) <= radius) {
        float dx = v_position.x - center.x;
        float dy = v_position.y - center.y;
        float vertex_angle = atan(dy, dx);
        if (vertex_angle < 0.0) {
            vertex_angle += 2.0 * PI;
        }
        if (vertex_angle <= angle) {
            color = u_color;
        }
    }
    gl_FragColor = color;
}

这个着色器接受一个进度值和一个颜色值作为参数，然后绘制一个圆形进度条。需要注意的是，这个着色器没有使用任何顶点列表，而是使用了一个简单的图形函数来绘制圆形和圆弧。