缓冲区对象: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;
}