title: How to rotate individual shapes in WebGL
body: <p>I have been scratching my head over the past week trying to understand rotating shapes in WebGL. I am drawing 3 shapes that gets called from their own functions. The basic structure of the functions is kinda like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function drawShape(vertices) {
  
      var a = vertices.length / 2;
      gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  
      var vPosition = gl.getAttribLocation(program, "vPosition");
      
      gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(vPosition);
  
  
      gl.drawArrays(gl.TRIANGLE_FAN, 0, a);
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I have render where each shape function gets called. Kinda like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function render() {
      angleInRadians += 0.1;
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);   
   
      drawShape1();
      drawShape2();
    
      matrix = mat.rotation(angleInRadians);  
      
      gl.uniformMatrix3fv(matrixLocation, false, matrix);
  
      requestAnimFrame( render );
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The rotation function being: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>rotation: function(angle) {
        var a = Math.cos(angle);
        var b = Math.sin(angle);
        return [
          a,-b, 0,
          b, a, 0,
          0, 0, 1,
        ];
      },</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have been trying to get only 1 shape to rotate out of the 3. I tried using the uniform3fv before the drawArrays in the function which draws the shape that I want to be rotated but all the shapes rotate with it. How do I get only one shape to rotate? </p>