webgl:绘制多个圆的最快方法

var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");

var vertexShaderSource = `
    attribute vec2 a_position;
    void main() {
        gl_Position = vec4(a_position, 0, 1);
    }
`;

var fragmentShaderSource = `
    precision mediump float;
    uniform vec4 u_color;
    void main() {
        gl_FragColor = u_color;
    }
`;

function createShader(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (success) {
        return shader;
    }

    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
}

var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    var success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (success) {
        return program;
    }

    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}

var program = createProgram(gl, vertexShader, fragmentShader);

var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

var positions = [
    // 顶点坐标
    -0.5, 0.5,
    0.5, 0.5,
    0.5, -0.5,
    -0.5, -0.5,
];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(
    positionAttributeLocation,
    2,
    gl.FLOAT,
    false,
    0,
    0
);

function drawCircle(x, y, radius, color) {
    var uColorLocation = gl.getUniformLocation(program, "u_color");
    gl.uniform4f(uColorLocation, color.r, color.g, color.b, color.a);

    var segments = 32; // 圆形由多个三角形组成，这里选择32个片段来绘制
    var angle = 2 * Math.PI / segments;
    var vertices = [x, y]; // 圆心坐标作为第一个顶点

    for (var i = 0; i <= segments; i++) {
        var theta = angle * i;
        var vx = x + radius * Math.cos(theta);
        var vy = y + radius * Math.sin(theta);
        vertices.push(vx, vy);
    }

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    gl.drawArrays(gl.TRIANGLE_FAN, 0, segments + 2);
}

drawCircle(0, 0, 0.5, { r: 1, g: 0, b: 0, a: 1 }); // 绘制半径为0.5的红色圆形