We introduce the index buffer, which enables reuse of vertex attributes when many primitives
share vertices.
// ****************************
// * Creating a vertex buffer *
// ****************************
//
// Step 1: Create an array containing the data.
var vertexData = [
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.5, 0.5, 0.0,
-0.5, 0.5, 0.0
];
// Step 2: Create a Float32Array from the data.
var vertexArray = new Float32Array(vertexData);
// Step 3: Create a buffer object.
var vertexBuffer = gl.createBuffer();
// Step 4: Bind the buffer to the ARRAY_BUFFER target.
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Step 5: Transfer the buffer data.
gl.bufferData(gl.ARRAY_BUFFER, vertexArray, gl.STATIC_DRAW);
// Step 6: Unbind the buffer.
gl.bindBuffer(gl.ARRAY_BUFFER, null);
// **************************
// * Create an index buffer *
// **************************
//
// Step 1: Create an array containing the data.
var indexData = [
0, 1, 2, 0, 2, 3
]
// Step 2: Create a Uint16Array (or Uint32Array) from the data.
var indexArray = new Uint16Array(indexData);
// Step 3: Create a buffer object.
var indexBuffer = gl.createBuffer();
// Step 4: Bind the buffer to the ELEMENT_ARRAY_BUFFER target.
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
// Step 5: Transfer the buffer data.
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexArray, gl.STATIC_DRAW);
// Step 6: Unbind the buffer.
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);