InteractiveGraphics-Homework 1 Solved

Tasks to do 

The homework must be completed alone. Each student should do its own homework and NO CODE SHARING IS ALLOWED. Submissions will be checked for plagiarism and suspicious ones will be rejected and reported. You cannot use code taken from the web, the only code you are allowed to use in your submission is the initial code provided with the assignment and the code of the book. You can, however, read all the documentation you want (including the WebGL and GLSL official documents on https://www.khronos.org/), but not use the code included.  

 

To complete the assignment you need to use GitHub Classroom, start by creating your own repository in the GitHub Classroom of the course by clicking on this link https://classroom.github.com/a/Ta2Zk-rR , please select your name from the list (taken from Google Classroom). If you are not registered in Google Classroom please do so by going to https://classroom.google.com/ (code “cgg3qi4”) and email the teacher so that he can enter you in GitHub Classroom. The assignment material includes this PDF file and two directories, Homework1 (containing the files homework1.html and homework1.js) and Common (containing the files MV.js and initShaders.js). You need only to modify the two files (homework1.html and homework1.js), add the texture and add a short documentation in PDF format (more details at the end of this file). Please do not change the names of the files, you only need to modify their content.

 

You need to modify the files so to obtain the following effects:  

 

1.       Replace the cube with a simple model of a table of 20 to 40 (maximum) vertices. Each vertex should have associated a normal (3 or 4 coordinates) and a texture coordinate (2 coordinates). Explain in the document how you chose the normal and texture coordinates. Model the table in its own coordinates.

2.       Choose an origin (different from the origin of the table and include the rotation of the table around the origin and along all three axes. Control with buttons/menus the axis and rotation, the direction and the start/stop.

3.       Add the viewer position (your choice), a perspective projection (your choice of parameters) and compute the ModelView and Projection matrices in the Javascript application. The viewer position and viewing volume should be controllable with buttons, sliders or menus. Please choose the initial parameters so that the object is clearly visible and the object is completely contained in the viewing volume. By changing the parameters you should be able to obtain situations where the object is partly or completely outside of the view volume.  

4.       Add a spotlight, place it outside of the view volume. Assign to it all the necessary parameters (your choice) including an attenuation factor. Add a button that turns the light on and off and sliders to control the angle of opening and the direction of the spotlight.

5.       Assign to the object a material with the relevant properties (your choice).

6.       Implement both per-vertex and per-fragment shading models. Use a button to switch between them.

7.       Find or create a wood texture and load it in the application. Add a button that activates/deactivates the texture.

8.       Implement a motion blur effect https://en.wikipedia.org/wiki/Motion_blur using textures and frame-buffer objects. Add a button that activates/deactivates the motion blur effect.

 

Describe your solution in a short PDF document (2-3 pages) describing the techniques used, the advantages and disadvantages of the proposed solution and the features of your solution.