Create the following static cube image:

You must use the following cube vertices (although you need to rearrange them and add duplicates of them):

    vec3(-0.5, -0.5, 0.5),         // Vertex 0
    vec3(-0.5, 0.5, 0.5),          // Vertex 1
    vec3(0.5, 0.5, 0.5),           // Vertex 2
    vec3(0.5, -0.5, 0.5),          // Vertex 3
    vec3(-0.5, -0.5, -0.5),        // Vertex 4
    vec3(-0.5, 0.5, -0.5),         // Vertex 5
    vec3(0.5, 0.5, -0.5),          // Vertex 6
    vec3(0.5, -0.5, -0.5),         // Vertex 7

And you must use the following corresponding colors per vertex:

    vec4(0.0, 0.0, 0.0, 1.0),      // black for Vertex 0
    vec4(1.0, 0.0, 0.0, 1.0),      // red for Vertex 1
    vec4(1.0, 1.0, 0.0, 1.0),      // yellow for Vertex 2
    vec4(0.0, 1.0, 0.0, 1.0),      // green for Vertex 3
    vec4(0.0, 0.0, 1.0, 1.0),      // blue for Vertex 4
    vec4(1.0, 0.0, 1.0, 1.0),      // magenta for Vertex 5
    vec4(1.0, 1.0, 1.0, 1.0),      // white for Vertex 6
    vec4(0.0, 1.0, 1.0, 1.0),      // cyan for Vertex 7

And you must use the following rendering call:

    gl.drawArrays(gl.TRIANGLES, 0, vertices.length); 

And you must use the following vertice locations per triangle:

    1, 0, 3
    3, 2, 1
    2, 3, 7
    7, 6, 2
    3, 0, 4
    4, 7, 3
    6, 2, 1
    1, 5, 6
    4, 5, 6
    6, 7, 4
    5, 4, 0
    0, 1, 5

The HTML code for your program is given here StaticCube.html. This code is complete and you will not need to modify it.

The partial Javascript code is given here StaticCube.js.

Create the following SpinningCube program that rotates the following cube, with buttons below the cube that change the rotation into the direction of the axis that you select. For this program you are to use a gl.ELEMENT_ARRAY_BUFFER type of buffer as an index buffer called iBuffer.

The HTML code for your program is given here SpinningCube.html. This code is complete and you will not need to modify it.

The partial Javascript code is given here SpinningCube.js. This code is incomplete and you will need to modify it in the following ways:

• You will need to create a vBuffer object, initialize it, and associate it with the associated vPosition attribute variable in the vertex shader.

• You will need to create a cBuffer object, initialize it, and associate it with the associated vColor attribute variable in the vertex shader. (Note that the vertexColors are vec4 values instead of vec3 values this time. In the 3DSierpinskiTriangleSpin program they were vec3 values.)

• You will need to create the thetaLoc uniform location object, associating it with the theta value. (Note that the "theta" variable is a vec3 value this time. That is because it holds three rotation angles, one for the x-axis, one for the y-axis and one for the z-axis.)

• You will need to create the three button handlers. Each button handler will just set which of the three theta values is the current one being rotated. This should be done by setting the global "axis" variable to one of three values: xAxis, yAxis or zAxis, which are equal to 0, 1, and 2 respectively.

• You will need to add the code for the render() method. The code should do the following:

  1. First you need to clear the color buffer bit AND the depth buffer bit.

  2. Then you need to modify the theta value for the axis currently being rotated. The theta values are in degree coordinates, so add a value like 2.0 to the angle to make it do one full rotation in about every 3 seconds.

  3. Then you need to update the thetaLoc association with a gl.uniform call.

  4. Then you draw the "indices" elements. Note that you will not be calling the "gl.drawArray()" method to draw the buffered array directly. Instead you will be calling the "gl.drawElements()" method to draw the buffer points in the order they are defined in the "indices" array.

     This approach is being used because there are only 8 vertex points in the vBuffer array, defining the eight corners of the cube. But drawing those 8 points as triangles will not produce a cube image. To create the cube image, the indices array is arranged into 36 points (each references one of the 8 vertices by its index of 0-7). Every 3 of these points makes a triangle, which makes 12 triangles => 2 triangles per cube face on 6 cube faces. And this is what produces the cube object from the 8 vertices.

     So instead of using the following call:

     gl.drawArrays(gl.TRIANGLES, 0, vertices.length);

     You need to draw the vertices in the order defined by the indices with the following call

     gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);

  5. Finally, you need to call "requestAnimFrame(render);" to recursively call the render() method through the requestAnimFrame() method which will then smoothly update the animation.

Add a Comment block section to the top of your Javascript program in this assignment with the following information filled in using the following format:

/*
 * Course: CS 4722
 * Section: .....
 * Name: ......
 * Professor: ......
 * Assignment #: ......
 */

Be sure your program runs without error.

Deliverables

Turn in the files:

• StaticCube.zip (with your HTML and JS files)
• SpinningCube.zip (with your HTML and JS files)