Drawing a Frame with Perspective

One more uniform for the perspective projection matrix.

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

Notes

Almost the same as the previous drawFrame, only we now lookup and load a matrix into the projectionMatrix uniform.