Further Explorations - HTML5 Canvas - page 882

The initShaders() function itself calls a function named getShader() to load in the text of
the shader programs wehave already defined. Youcan see the code forthese functions inthe
code listing in Example A-3 .

NOTE
You can learn about the shaders used in this program in “Lesson 2—Adding colour” on the Learn-
ingWebGL website .

After 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 can-
vas. We do this in initBuffers() .

The initBuffers() functioncontainsalotofcode,butwe'lldiscussonlyacoupleveryinter-
esting 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 , // Right face