Drawing a Frame

Encapsulate drawing a frame and invoke it when the slider value changes.

129                 function drawFrame(gl, modelViewMatrix, animationMatrix, vertexBuffer, anotherBuffer)
130                 {
131                     // Clear previous color and depth values.
132                     gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
133 
134                     // Gets reference on the modelViewMatrix uniform
135                     var modelViewReference = gl.getUniformLocation(program, 'modelViewMatrix');
136                     if(modelViewReference == -1)
137                     {
138                         alert('Can not find uniform modelViewMatrix.');
139                         return;
140                     }
141 
142                     // Load the matrix into the shader
143                     gl.uniformMatrix4fv(modelViewReference, false, modelViewMatrix);
144 
145                     // Bind the buffer to the positon attribute
146                     bindBuffer(vertexBuffer, 'position', 3, gl.FLOAT, 28, 0);
147 
148                     // And to the color attribute
149                     bindBuffer(vertexBuffer, 'color', 4, gl.FLOAT, 28, 12);
150 
151                     // Finally run the program. Render, or draw, the data. Here we tell it to draw triangles starting
152                     // with element zero of the vertexBuffer, and that there are three vertices. So there is
153                     // one triangle.
154                     gl.drawArrays(gl.TRIANGLES, 0, 3);
155 
156                     // Load the matrix into the shader
157                     gl.uniformMatrix4fv(modelViewReference, false, animationMatrix);
158 
159                     // Bind the buffer to the positon attribute
160                     bindBuffer(anotherBuffer, 'position', 3, gl.FLOAT, 28, 0);
161 
162                     // And to the color attribute
163                     bindBuffer(anotherBuffer, 'color', 4, gl.FLOAT, 28, 12);
164 
165                     // Finally run the program. Render, or draw, the data. Here we tell it to draw triangles starting
166                     // with element zero of the buffer, and that there are three vertices. So there is
167                     // one triangle.
168                     gl.drawArrays(gl.TRIANGLES, 0, 3);
169                 }

Notes

drawFrame contains a number of new features. gl.clear clears color and depth data in preparation for drawing a new frame.

getUniformLocation returns the location of the modelViewMatrix uniform. We need only do this once, then set different matrices for each triangle.

uniformMatrix4fv loads a 4x4 matrix of floating point values into the uniform. The second argument specifies whether the matrix should be transposed. The WebGL specification requires this to be false.

The binding of the buffer to position and color are repeats of the previous code.

uniformMatrix4fv is invoked again to load animationMatrix, the matrix dependant on the slider position, into the modelViewMatrix uniform.

bindBuffer and drawArrays then draw the second triangle in its translated position.