sample/js/uniformArray.js
function drawScene() {
  // Clear the canvas before we start drawing on it.
  gl.clearColor(0, 0, 0, 1);
  gl.clearDepth(1.0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Establish the perspective with which we want to view the
  // scene. Our field of view is 45 degrees, with a width/height
  // ratio of 640:480, and we only want to see objects between 0.1 units
  // and 100 units away from the camera.

  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);

  // Set the drawing position to the "identity" point, which is
  // the center of the scene.

  loadIdentity();

  // Now move the drawing position a bit to where we want to start
  // drawing the cube.

  mvTranslate([-0.0, 0.0, -6.0]);

  // Save the current matrix, then rotate before we draw.

  mvPushMatrix();
  mvRotate(cubeRotation, [1, 0, 1]);
  mvTranslate([cubeXOffset, cubeYOffset, cubeZOffset]);

  // Draw the cube by binding the array buffer to the cube's vertices
  // array, setting attributes, and pushing it to GL.

  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

  // Draw the cube.

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
  setMatrixUniforms();

  var pUniform = gl.getUniformLocation(shaderProgram, "uniformArray");
  gl.uniform2fv(pUniform, new Float32Array([1,0.2,0.4,1]));

  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

  // Restore the original matrix

  mvPopMatrix();

  // Update the rotation for the next draw, if it's time to do so.

  var currentTime = (new Date).getTime();
  if (lastCubeUpdateTime) {
    var delta = currentTime - lastCubeUpdateTime;

    cubeRotation += (30 * delta) / 1000.0;
    cubeXOffset += xIncValue * ((30 * delta) / 1000.0);
    cubeYOffset += yIncValue * ((30 * delta) / 1000.0);
    cubeZOffset += zIncValue * ((30 * delta) / 1000.0);

    if (Math.abs(cubeYOffset) > 2.5) {
      xIncValue = -xIncValue;
      yIncValue = -yIncValue;
      zIncValue = -zIncValue;
    }
  }

  lastCubeUpdateTime = currentTime;

  window.requestAnimationFrame(function() {
        drawScene();
  });
}
function drawScene() {
  // Clear the canvas before we start drawing on it.
  gl.clearColor(0, 0, 0, 1);
  gl.clearDepth(1.0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Establish the perspective with which we want to view the
  // scene. Our field of view is 45 degrees, with a width/height
  // ratio of 640:480, and we only want to see objects between 0.1 units
  // and 100 units away from the camera.

  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);

  // Set the drawing position to the "identity" point, which is
  // the center of the scene.

  loadIdentity();

  // Now move the drawing position a bit to where we want to start
  // drawing the cube.

  mvTranslate([-0.0, 0.0, -6.0]);

  // Save the current matrix, then rotate before we draw.

  mvPushMatrix();
  mvRotate(cubeRotation, [1, 0, 1]);
  mvTranslate([cubeXOffset, cubeYOffset, cubeZOffset]);

  // Draw the cube by binding the array buffer to the cube's vertices
  // array, setting attributes, and pushing it to GL.

  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

  // Draw the cube.

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
  setMatrixUniforms();

  var pUniform = gl.getUniformLocation(shaderProgram, "uniformArray");
  gl.uniform2fv(pUniform, new Float32Array([1,0.2,0.4,1]));

  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

  // Restore the original matrix

  mvPopMatrix();

  // Update the rotation for the next draw, if it's time to do so.

  var currentTime = (new Date).getTime();
  if (lastCubeUpdateTime) {
    var delta = currentTime - lastCubeUpdateTime;

    cubeRotation += (30 * delta) / 1000.0;
    cubeXOffset += xIncValue * ((30 * delta) / 1000.0);
    cubeYOffset += yIncValue * ((30 * delta) / 1000.0);
    cubeZOffset += zIncValue * ((30 * delta) / 1000.0);

    if (Math.abs(cubeYOffset) > 2.5) {
      xIncValue = -xIncValue;
      yIncValue = -yIncValue;
      zIncValue = -zIncValue;
    }
  }

  lastCubeUpdateTime = currentTime;

  window.requestAnimationFrame(function() {
        drawScene();
  });
}
function drawScene ( ) { // Clear the canvas before we start drawing on it. gl . clearColor ( 0 , 0 , 0 , 1 ) ; gl . clearDepth ( 1.0 ) ; gl . clear ( gl . COLOR_BUFFER_BIT | gl . DEPTH_BUFFER_BIT ) ; // Establish the perspective with which we want to view the // scene. Our field of view is 45 degrees, with a width/height // ratio of 640:480, and we only want to see objects between 0.1 units // and 100 units away from the camera. perspectiveMatrix = makePerspective ( 45 , 640.0 / 480.0 , 0.1 , 100.0 ) ; // Set the drawing position to the "identity" point, which is // the center of the scene. loadIdentity ( ) ; // Now move the drawing position a bit to where we want to start // drawing the cube. mvTranslate ( [ - 0.0 , 0.0 , - 6.0 ] ) ; // Save the current matrix, then rotate before we draw. mvPushMatrix ( ) ; mvRotate ( cubeRotation , [ 1 , 0 , 1 ] ) ; mvTranslate ( [ cubeXOffset , cubeYOffset , cubeZOffset ] ) ; // Draw the cube by binding the array buffer to the cube's vertices // array, setting attributes, and pushing it to GL. gl . bindBuffer ( gl . ARRAY_BUFFER , cubeVerticesBuffer ) ; gl . vertexAttribPointer ( vertexPositionAttribute , 3 , gl . FLOAT , false , 0 , 0 ) ; // Draw the cube. gl . bindBuffer ( gl . ELEMENT_ARRAY_BUFFER , cubeVerticesIndexBuffer ) ; setMatrixUniforms ( ) ; var pUniform = gl . getUniformLocation ( shaderProgram , "uniformArray" ) ; gl . uniform2fv ( pUniform , new Float32Array ( [ 1 , 0.2 , 0.4 , 1 ] ) ) ; gl . drawElements ( gl . TRIANGLES , 36 , gl . UNSIGNED_SHORT , 0 ) ; // Restore the original matrix mvPopMatrix ( ) ; // Update the rotation for the next draw, if it's time to do so. var currentTime = ( new Date ) . getTime ( ) ; if ( lastCubeUpdateTime ) { var delta = currentTime - lastCubeUpdateTime ; cubeRotation += ( 30 * delta ) / 1000.0 ; cubeXOffset += xIncValue * ( ( 30 * delta ) / 1000.0 ) ; cubeYOffset += yIncValue * ( ( 30 * delta ) / 1000.0 ) ; cubeZOffset += zIncValue * ( ( 30 * delta ) / 1000.0 ) ; if ( Math . abs ( cubeYOffset ) > 2.5 ) { xIncValue = - xIncValue ; yIncValue = - yIncValue ; zIncValue = - zIncValue ; } } lastCubeUpdateTime = currentTime ; window . requestAnimationFrame ( function ( ) { drawScene ( ) ; } ) ; }
drawScene  Draw the scene.
drawScene Draw the scene .