緩衝區對象: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;
}