3D Rendering in WebGL

Goals

Understand how the WebGL 3D rendering pipeline works and what happens in it in detail.
Implement a flat shaded cube with rotation animation and perspective camera

3D rendering in theory: what happens to two triangles in the rendering pipeline?
Hello 3D in WebGL: implementing th rendering of those two triangles in WebGL
A 3D cube in WebGL: extending the two triangles to a cube
Transformations in WebGL: adding rotation and perspective camera to the cube

Use the repository from last time and follow the instructions in the slides:

means that the code is already in the repository and you just need to look at it.

means you can copy-paste the code and it should work.

means that you need to create a new file

indicates that you need to do more than just copy-paste the code.

indicates that you need to replace the old code with something new.

In any case you need to understand what you are doing.

In the following, some tasks are listed that need to be implemented in order to better understand the implemented code.

(small and easy code changes)

Change the size of the cube
Change the color of the cube
Change the position of the cube to the top left of the canvas by modifying the viewport
Change the rotation speed of the cube

(needs new functions)

Change the color of the cube so that each edge has the same color on both adjacent faces, but there is a color gradient on each face.
Let the cube pulsate (change its size) in a sinusoidal way.
Draw a thousand cubes instead of one.
Change the perspective of the camera (check webgl-camera for help)
Change the second parameter in the gl.uniformMatrix4fv(modelMatrixLocation, false, modelViewMatrix); function call to true and check the result.
Change the camera to an orthographic camera (check gl-matrix for a helper function)