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 }
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.