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