HTML and CSS Reference
In-Depth Information
// Set the index buffer
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
// Draw the elements
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
// Restore the original matrix
mvPopMatrix();
// Update the rotation of the cube
updateRotation();
}
The naive implementation goes through the following steps:
1.
Sets the values for clearing the screen's frame buffer
2.
Clears the screen's frame buffer
3.
Enables the depth test
4.
Binds the shader program
5.
Sets the uniforms for the matrices
6.
Sets the texture unit for the sampler
7.
Binds the texture to the specified unit
8.
Sets the texture properties
9.
Binds the vertex buffers
10.
Sets up each vertex's attributes
11.
Binds the index buffer
12.
Issues a draw call
This results in 25 calls to WebGL. In reality only three of these calls are needed with each frame: the clearing,
setting the model-view-projection matrix (MVP matrix) uniform as the cube's rotation is animating, and the draw
call. The rest of the calls can be done once, during initialization. This is because the state of those calls is retained, so
making them again with each frame results in redundant operations.
All calls contained in Table
9-1
will modify the state of an object or the rendering context as a whole.
