Computer Graphics 2020, Course Project
Politecnico di Milano - MSc in Computer Science and Engineering
The aim of this project was to develop a WebGL application and associated OpenGL shaders that will render a 3D model of Cat Wall Watch like the one below from a frame of Back to the Future.
The application has been written in JavaScript and GLSL and consists of different 3D .obj files with the requirement that the final implementation should show the current time and the movement of the cat's eyes and tail needs to be in the same direction, as the real clock does.
The final result is:
Most of the components of the watch use two kinds of textures: a normal color texture and a normal map texture that encodes information about normal vectors for each internal point of a triangle. Because of the tangent space encoding of this values in the normal map, the fragment shader will perform an on-the-fly computation of geometrical normals to obtain the tangent and bitangent vectors. This dynamic computation can be enabled in the UI control "Compute geometrical normals" and is not enabled by default because using the normal vector direction stored with the geometry results in a better rendering.
In addition to a simple implementation of the cat watch I've also implemented an interface to control the lights inside the scene, with the related diffuse and specular effects. This UI communicates directly with the GLSL program of each 3D component setting the current option, light positions and colors.
It's possible to enable up to 3 different types of lights in the scene: directional, point and spot lights, with their related color, coordinates and angles. In addition to that I've implemented Diffuse(Lambert, Toon) and Specular (Phong, Blinn, Toon Phong, Toon Blinn).
The camera looks at the cat and, by default, it's set at the coordinates x = 0.0, y = 0.05, z = 0.2. However it's possible to change these parameters and move the "eye" around the object by using the arrow keys to change coordinates x and y, and +/- keys to move along the z axis.
The animation of eyes and tail is performed by the function animate() of main.js and it relies on the assumption that the window.requestAnimationFrame method performs a number of callbacks to it that is usually 60 times per second. Therefore in 60fps the tail and eyes will have 15 frames to move in a fixed direction, 15 frames to return to the centre and again 15+15 frames in the opposite direction, resulting in a 60 frames pendulum movement.
A delta equal to 1, as it's set by default, will move the objects of 15 degrees in both directions.
The clockhands rotation (in degrees) is calculated on the current time as follows:
hoursRotationMatrix = rotateZ( -(hour + minutes/60) * 2*Math.PI/12 );
minutesRotationMatrix = rotateZ( -minutes * 2*Math.PI/60 );
where hour is a number between 0 and 11 while minutes varies from 0 to 59. For a better result the hours clockhand's rotation is also influenced by the number of elapsed minutes.
The last version of the project is available at this GitHub Page but can also be build offline by cloning this repository and running a webserver (e.g. Apache) in the same folder.
Fig. 1 - a single white direct light with Lambert diffuse and Phong Specular.
Fig. 2 - a yellow direct light with Toon diffuse and warmer yellow Phong Specular.
Fig. 3 - a yellow direct light and a red point light with Toon diffuse and Phong Specular.
Fig. 4 - in addition to the previous two lights, a blue spot light with Toon diffuse and Phong Specular.
