VU Graphics

Lab 1b

Due: Sunday, May 5th 2024, 23:59

Start Early!!!

Individual Effort:
: No team participation is really encouraged in the case of the homework or the labs.
You're are not allowed to use any libraries or extra code except gl-matrix and some helper functions in order to initialize WebGL / load shaders. Especially Three.js is not allowed! If you're not sure or want to use some library, ask the teaching assistants before.

Objectives:

To understand the development of graphics programs.
To understand illumination models.
To become closely familiar with the WebGL rendering pipeline.
To become experts in debugging graphics code.
To have fun.

Do the following before you proceed:

Make sure you have read and understood the background and became familiar with the working environment that you should have gotten to know in Lab 1a.
You have a fridge full of nutritious food.

Goal:

The goal of this lab is to create a simple, interactive 3D application and explore shading and illumination models. The focus is on the development of a graphics program and how to handle surface properties and lighting. Most of the concepts are laid out in the book as well as in class with example programs.

Tasks:

Follow this guideline step-by-step. Make sure that you thoroughly test your program after each step so that you can find bugs easier and quicker. Create a scene with 9 3D shapes which can be seen from the camera. The shapes should be 3D and not flat. For example: cubes, spheres, cones, or a combination of them. Ensure that at least one of the shapes in the scene contains a curved surface (sphere, cone, cylinder, imported complex model, ...) in order to better see the effects of the shading models. This assignment directly follows assignment 1a, which may be used as a starting point. Implement the following shading and illumination models using a point light source initialized at coordinates (0, 10, 0):

T1: (15%) Shade the models - Gouraud/diffuse Implement Gouraud shading (vertex shading) with diffuse illumination.
T2: (15%) Shade the models - Gouraud/specular Implement Gouraud shading (vertex shading) with the Phong illumination model to produce a specular highlight.
T3: (20%) Shade the models - Phong/diffuse Implement Phong shading (pixel shading) with diffuse illumination.
T4: (20%) Shade the models - Phong/specular Implement Phong shading (pixel shading) with the Phong illumination model to produce a specular highlight.
T5: (30%) Add additional user interaction with the shapes and lights
Respond to user interaction from the keyboard. Implement the following:
- a) selection
  - The user should be able to select the active lighting and shading models used by pressing the number keys between:
    - 'w' (Gouraud/diffuse),
    - 'e' (Gouraud/specular),
    - 'r' (Phong/diffuse), and
    - 't' (Phong/specular).
- b) Light transformations
  - The user should be able to toggle between interacting with the shapes and interacting with the light. Use the 'L' key to toggle between the two interaction modes. Lights should rotate and translate using the same keys as in assignment 1. Object interaction should work as before. Light transformations are with respect to the global coordinates.

Extra Credit (max 10%)

In some of the bonus tasks you will have to create a ground plane. You only have to implement it if you are doing the corresponding extra tasks.

B1: (10%) Implement shadows
Using either the projection method, or shadow maps to produce an accurate shadow on the ground plane. The user should be able to turn the shadows on and off by using the 'h' key.
B2: (5%) Cooke-Torrance illumination model
Implement the Cooke-Torrance shading model. This model should also be selectable by the user using the 'k' key.
B3: (5%) Spot-light source
Implement a spot-light source. The user should be able to toggle between the types of light sources (point or spot) by using the 't' key. The spotlight should always be pointing at the object and the beam should be narrow enough that it can be seen on the ground plane. Use an inner and outer radius for the spot-light, with the amount of illumination falling off smoothly between them.

Hints

Remember the difference between Phong illumination and Phong Shading: Phong illumination is the lighting model and Phong shading is how the surface properties are interpolated across the faces from the vertices.
Do not write all your code in one big file. Try to structure your code into logical files.

Submission

Be sure to double check your final submission by unzipping it in another directory, best on a different computer
Provide a 'readme.txt' file in which you describe the following:
1. A 'claim'-section in which you describe an overview of which tasks you actually implemented (T1, T2, T3, T4, T5 (a, b))
  - Provide additional remarks if you somehow implemented them only partially or if there are any noteworthy mistakes.
  - Failing to do so will lead to a worse mark.
2. A 'tested environments'-section, describing for instance the OS of dev-computer, OS of test-computer, browsers (+version) used for testing, ...
3. A 'additional and general remarks'-section, containing additional noteworthy comments (if applicable).
Include everything required by your program in your submission including: objects, textures, etc...
Submit your files on Moodle.

Grading Criteria

Grading the labs will be based on the correctness and the adherence to assignment specification.
Following issues will lead to point deductions (up to):

-10%: very bad readability and structure of code, no use of comments, very bad indentation, etc.
-10%: ignoring adherence to lab procedures (see submission section)
-5%: very bad efficiency

In order to get a full mark, you need to do all of the assigned tasks AND adhere to to lab procedures while creating readable and efficient code. I.e. if you accomplish only 70% of the tasks correctly, but you do not adhere to lab procedures, your final mark will be 70*(1-0.05) = 66.5%.