Game Development Reference
In-Depth Information
We can unbind buffer objects using a
bindBuffer()
function call by specifying null
as the buffer object parameter:
vertices = [
3.0, 3.0, 0.0, //Vertex 0
-3.0, 3.0, 0.0, //Vertex 1
3.0, -3.0, 0.0, //Vertex 2
-3.0, -3.0, 0.0 //Vertex 3
];
gl.bindBuffer(gl.ARRAY_BUFFER, null);// Deactivate the current
buffer
vertexBuffer = gl.createBuffer();//Create a reference to the
buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);//Make the buffer the
current active buffer for memory allocation(Subsequent command)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);//Allocate memory for the buffer object.
Index buffer objects
Similar to vertex buffer objects, we have index buffer objects to store the indices in
the GPU memory. The following code creates a vertex array and an index array. It
then creates the corresponding vertex buffer object and index buffer objects:
vertices = [
3.0, 3.0, 0.0, //Vertex 0
-3.0, 3.0, 0.0, //Vertex 1
3.0, -3.0, 0.0, //Vertex 2
-3.0, -3.0, 0.0 //Vertex 3
];
indices = [0,2,3,0,3,1];
indexBuffer = gl.createBuffer();// Create a reference to the
buffer
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);// make the
Index buffer the active buffer notice gl.ELEMENT_ARRAY_BUFFER
for index buffers.
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices),
gl.STATIC_DRAW);// Alocate memory for the index buffer
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
Shaders
A WebGL program is divided in two components; the control code and the shader
program. The control code is executed in the system's CPU while the shader code
is executed in the system's GPU. Since the control code binds data to the GPU's
memory, it is available for processing in the shader.
