不使用外部库的Webgl Circle

// 步骤1：创建画布
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 步骤2：获取WebGL上下文
const gl = canvas.getContext('webgl');

// 步骤3：编写顶点着色器
const vertexShaderSource = `
    attribute vec2 a_position;
    void main() {
        gl_Position = vec4(a_position, 0, 1);
    }
`;

// 步骤4：编写片元着色器
const fragmentShaderSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1, 0, 0, 1);
    }
`;

// 步骤5：创建缓冲区
const buffer = gl.createBuffer();

// 步骤6：设置顶点数据
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
const vertices = [
    0, 0,
    0.5, 0,
    0, 0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 步骤7：绑定着色器程序
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 步骤8：绘制圆形
gl.enableVertexAttribArray(0);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 3);