WebGL学习——缓冲区对象（四）

缓冲区对象：WebGl提供的一种机制，可以一次性向着色器传入多个顶点数据，我们可以一次性向缓冲器对象中填充大量的顶点数据，然后将这些数据保存起来，供顶点着色器使用。

初始化过程：

创建缓冲器对象  gl.createBuffer();

绑定缓冲器对象  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

将数据写入缓冲区对象 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

将缓冲区对象分配给一个attribute

// 顶点变量
        const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        // 将缓冲区对象绑定顶点变量
        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);

开启attribute变量  gl.enableVertexAttribArray(a_Position);

/**
     * 缓冲区初始化
     * @param g1
     */
    function initVertexBuffers(gl) {
        // 创建坐标点 x y 默认z为0 也可添加上
        const vertices = new Float32Array([0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.0, 0.0, 0.0]);
        // 创建缓冲区对象
        const vertexBuffer = gl.createBuffer();
        if (!vertexBuffer) {
            return;
        }
        // 将缓冲区对象绑定到目标
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        // 将缓冲区数据中写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        // 顶点变量
        const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        // 将缓冲区对象绑定顶点变量
        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
        // 建立连接
        gl.enableVertexAttribArray(a_Position);
        return 4;
    }

demo