In this assignment, you are going to redo Assignment $4$ using another approach. The textbook mentioned $3$ approaches to perform animation using WebGL. We tried the first approach in Assignment $4.$ That is$,$ we perform the transformation in the application and send the updated list of vertices to the GPU during each cycle. This approach is easy but it takes a lot of CPU$-$GPU bandwidth. The second approach is to compute the transformation matrix in the application and send it to the GPU. The GPU will then use the transformation matrix to perform the actual transformation. This can cut down the bandwidth requirement a lot. But it is still not optimum. The third approach is to send the parameter$($s$)$ that controls the animation to the GPU. We then figure out the transformation matrix and perform the actual transformation in the vertex shader. Since only a few parameters need to be sent during each cycle. This approach has the minimum bandwidth requirement. Download the two files csc$451$a$5.$html and csc$451$a$5.$js from Canvas and place them in the same folder, along with the common folder in appropriate location. The file csc$451$a$5.$js initializes and starts the WebGL program. It contains all required JavaScript code that is need for the application. Do not modify this file. The file csc$451$a$4.$html is the invoking page and it contains the HTML code along with two shaders and appropriate inclusion of JavaScript files. The fragment shader is complete. The vertex shader, however, is not complete and need your work here. Although it does not cause any error; currently, it only displays the three triangles in static form. The following shows how the output looks like: Since we have three different transformation matrices $($one for each triangle$).$ We need to tell the shader which of the transformation matrices to use for each vertex. We can do this by sending an additional array to the shader. This array is named vIndex. It is an array of floating$-$point values $($WebGL prohibits sending integer array to shader without special provision$).$ The values of them are $0\mathrm{.}0$ for the red triangle, $1\mathrm{.}0$ for the green triangle, and $2\mathrm{.}0$ for the blue triangle. Please note that sending the position array $($points in JS$,$ Position in shader$),$ the color array $($colors in JS$,$ vColor in shader$),$ and the index array $($indices in JS$,$ vIndex in shader$)$ are done only once during initialization, and does not occupy bandwidth during each cycle. We also have to send three $(3)$ uniform variables to the shader $($recall that a uniform variable is a variable that is visible and has the same value for each vertex$).$ The three uniform variables are the centroid locations for the red, green, and blue triangles, and they are named cr$,$ cg$,$ and cb$,$ respectively, in the shader. Of course, we also need to send the value of $($theta$)$ as a uniform variable to the shader during each cycle. The following is the current content of the vertex shader: The highlighted areas are the places that you should make the modification. Do not change anything else. In this assignment, you are going to redo Assignment $4$ using another approach.

The textbook mentioned $3$ approaches to perform animation using WebGL. We tried the first approach in Assignment $4.$ That is$,$ we perform the transformation in the application and send the updated list of vertices to the GPU during each cycle. This approach is easy but it takes a lot of CPU$-$GPU bandwidth.

The second approach is to compute the transformation matrix in the application and send it to the GPU. The GPU will then use the transformation matrix to perform the actual transformation. This can cut down the bandwidth requirement a lot. But it is still not optimum.

The third approach is to send the parameter$($s$)$ that controls the animation to the GPU. We then figure out the transformation matrix and perform the actual transformation in the vertex shader. Since only a fow parameters need to be sent during each cycle. This approach has the minimum bandwidth requirement.

Download the two files csc$451$a$5.$html and csc$45$ia$5.$ js from Canvas and place them in the same folder, along with the common folder in appropriate location.

The file esc$451$a$5.$js initializes and starts the WebGL program. It contains all required JavaScript code that is need for the application. Do not modify this file.

The file csc$451$a$4.$ htmi is the invoking page and it contains the HTML code along with two shaders and appropriate inclusion of JavaScript files. The fragment shader is complete. The vertex shader, however, is not complete and need your work here. Although it does not cause any error; currently, it only displays the three triangles in static form. The following shows how the output looks like: The following is the current content of the vertex shader:

$```$

$...$