Further Explorations - HTML5 Canvas - page 572

However, there is additional code in canvasApp() required to set up the application to
rotate the cube. A couple of the most important initialization steps are the calls to
initShaders() and initBuffers() :
initShaders();
initBuffers();
The initShaders() function itself calls a function named getShader() to load in the text
of the shader programs we have already defined. You can see the code for these func-
tions in the code listing a bit later in Example 11-1 .
You can learn about the shaders used in this program in “Lesson 2—
Adding colour” on the LearningWebGL website: http://learningwebgl
.com/blog/?p=134 .
Once we have loaded the shader programs, we need to create the buffers. Buffers refer
to space in the video card's memory that we set aside to hold the geometry describing
our 3D objects. In our case, we need to create buffers to describe the cube we will rotate
on the canvas. We do this in initBuffers() .
The initBuffers() function contains a lot of code, but we'll discuss only a couple very
interesting sections. The first is the Vertex Position buffer, which describes the vertices
that make up the sides of the cube:
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFER, cubeVertexPositionBuffer);
vertices = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,