七种基本图像:

//画图
/**
 * webgl中的基本形状：点，线，三角形
 */
gl.drawArrays(gl.POINTS, 0, n)
gl.drawArrays(gl.LINES, 0, n)
gl.drawArrays(gl.LINE_STRIP, 0, n)
gl.drawArrays(gl.LINE_LOOP, 0, n)
gl.drawArrays(gl.TRIANGLES, 0, n)
// gl.drawArrays(gl.TRIANGLES, 2, n)
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)
gl.drawArrays(gl.TRIANGLE_FAN, 0, n)

import initShaders from "./initShaders";
let canvas = document.getElementById('canvas');
let gl = canvas.getContext('webgl');//3d是 "webgl"

let vertexSource = /*glsl*/`
    attribute vec2 a_position;
    attribute vec3 a_color;
    varying vec3 v_color;

    void main() {
        v_color = a_color;
        gl_Position = vec4(a_position, 0.0, 1.0);
        gl_PointSize = 20.0;
    }
`
let fragmentSource = /*glsl*/`
    precision mediump float;
    varying vec3 v_color;

    void main(){
        gl_FragColor = vec4(v_color, 1.0);
    }
`
initShaders(gl, vertexSource, fragmentSource);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);


//随机生成n个点
let n = 25;
let vertices = []

for(let i = 0; i < n; i++) {
    let x = (Math.random() - 0.5) * 2;
    let y = (Math.random() - 0.5) * 2;
    let r = (Math.random()) * 1.2;
    let g = (Math.random()) * 1.2;
    let b = (Math.random()) * 1.2;
    vertices.push(x, y, r, g, b);
}

vertices = new Float32Array(vertices);
let FSIZE = vertices.BYTES_PER_ELEMENT
// console.log(FSIZE)



/**
 * buffer：分五个步骤
 */
//step 1:
let buffer = gl.createBuffer()
//step 2:
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
//step 3:
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
//step 4：把带有数据的buffer赋值给attribute
let a_position = gl.getAttribLocation(gl.program, 'a_position')
let a_color = gl.getAttribLocation(gl.program, 'a_color')
gl.vertexAttribPointer(
    a_position,
    2,
    gl.FLOAT,
    false,     //正交化
    5 * FSIZE, //步长
    0          //offset偏移
)
gl.vertexAttribPointer(
    a_color,
    3,
    gl.FLOAT,
    false,
    5 * FSIZE,
    2 * FSIZE
)
//step 5:
gl.enableVertexAttribArray(a_position);
gl.enableVertexAttribArray(a_color);

//画图
/**
 * webgl中的基本形状：点，线，三角形
 */
// gl.drawArrays(gl.POINTS, 0, n)
// gl.drawArrays(gl.LINES, 0, n)
// gl.drawArrays(gl.LINE_STRIP, 0, n)
// gl.drawArrays(gl.LINE_LOOP, 0, n)
gl.drawArrays(gl.TRIANGLES, 0, n)
// gl.drawArrays(gl.TRIANGLES, 2, n)
// gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)
// gl.drawArrays(gl.TRIANGLE_FAN, 0, n)