**CS112 PA2: Basic Shading** ***Due date: Wednesday, Nov 6 by 11:59 pm*** Introduction ==================== The objective of this assignment is to get familiar with the basic geometric transformations that are fundamental to creating any scene. Specifically, you would need to write some code (maybe dozens of lines), and it will take some time to understand every part, so **please start early**. **Software and hardware requirement**: WebGL runs within the browser and is independent of the operating and window systems. You may finish the assignment using any operating system you like (e.g. Windows, MacOS or Linux). **Programming language**: The assignment will be implemented in JavaScript. As we will minimize the use of obscure JavaScript language features, it should not be too difficult for anyone with prior experiences in dynamic languages like Python or familiar with the principles of Object Oriented Programming (like C++ or Java) to get a handle on JavaScript syntax by reading through some of the code in code skeleton. For more formal introductions to JavaScript, checkout the [references](#usefulreferences). **Cooperation and third-party code**: This is an individual programming assignment, and you should implement the code by your own. You may not share final solutions, and you must write up your own work, expressing it in your own words/notation. Third party codes are not allowed. Getting started with the code skeleton ======================================== Download pa2.zip -------------------- Download [pa2.zip](pa2.zip) and extract it any folder you like. You should have five files in the folder: |file name|description| |---|---| |pa2.html |HTML file which shows the WebGL canvas.| |pa2.js |functions used to draw the scene.| |gl-matrix-min.js |utility functions for operating matrices.| |model.js |file describing the models in IFS format.| |trackball-rotator.js|utility functions for rotating the scene using the cursor.| Open pa2.html -------------------- Open *pa2.html* in the extracted folder with Chrome. You will see an error message right now as the vertex and fragment shaders are not implemented. The vertex and fragment shaders are responsible for drawing the scene. ![](./pa2/pa2html.png width=512) Note -------------------- - For this project, **you will be modifying two files *pa2.html* and *pa2.js***. But try to read and understand what other functions are doing as well as it would help you better implement things. There are lots of comments throughout the codebase and the functions have similar structure as programming assignment 1 for better/easy understanding. - Using the [`object tab`], a user can select different models (torus, cylinder or sphere). Using the [`lighting checkmarks`], a user can toggle between different illumination conditions. A user can also adjust the [`light position`] and [`exponent`] used for computing specular highlights. There are two tasks which need to be completed in this programming assignment. They are as follows. Implement the lighting function ======================================== TASK 1 ---------- You will be implementing 3 different kinds of illuminations: ambient, diffuse, and specular using the Phong shading model. You will complete both vertex and fragment shader in *pa2.html* in order to draw object. ### Task 1-1 Before starting the project, you need to first know how to compute the light at a single point. Below is a schematic of a point on a surface which is being illuminated by a point light source where: - $L$ = The direction of the light - $N$ = Normal of the point on the surface - $R$ = Reflection of $L$ about $N$ - $V$ = Viewing direction ![](./pa2/phong.png width=512) - Light at a point = Ambient Light + Diffuse Light + Specular Light - Ambient Light = $K_a \times$ diffuse_color - Diffuse Light = $K_d \times$ diffuse_color $\times \max(N\cdot L, 0)$ - Specular Light = $K_s \times$ specular_color $\times \max(R\cdot V, 0)^n$ Use $K_a=0.1, K_d=0.8, K_s=0.4$. $n$ is the specular coefficient, which the user can change. Note, although the above light equation is not complete as it does not account for the distance from light source (light intensity decreases as we move away from the light source), to keep things simple we would only implement above equation in this programming assignment. ### Task 1-2 The next thing you need to know is what are Shaders. Shaders (Vertex, Fragment, etc) are small programs which are executed on the GPU. They are mainly responsible for determining the color of each object. However, they can be used for many different tasks. In this assignment we will be using two shaders namely *`vertex`* and *`fragment`* shaders to render of our scene. To write in any shader, you must first know the basics of GLSL. GLSL is a short term for OpenGL Shading Language. This is used to write code into any shader. It is similar to C/C++. Check out the references to understand more on how to write code in a shader. Once you are familiar with GLSL, you can start writing code in the vertex and fragment shader in *pa2.html*. ![](./pa2/vertex_fragment_shader.png width=512) However, before writing, I would recommend checking out the function **`initGL()`** in *pa2.js* to see what all variables you will be creating in the shaders. Note, you will be using some of these variables in the vertex shader and some in the fragment shader. Hence, it's important to understand: - What vertex and fragment shaders do. - What these variables are and what you can compute from them. ![](./pa2/initGL.png width=512) ### Task 1-3 You will need to implemented each of the lighting separately such that when the user checks ambient or diffuse or specular only those are being implemented. If everything works well, you should be getting results similar to the below images. ![There is no light. Hence you see a black torus.](./pa2/torus1.png width=512) ![Torus with only ambient light. Cyan colored torus is seen.](./pa2/torus2.png width=512) ![Torus with ambient and diffuse lighting.](./pa2/torus3.png width=512) ![Torus with ambient and diffuse and specular lighting.](./pa2/torus4.png width=512) TASK 2 ---------- Once you have implement all the three lighting with Phong shading, add two more light positions, one at the bottom of the object and the other on the left of the object. ### Task 2-1 Add two more light positions for the user to select. When the user selects this light position, the scene should be rendered appropriately. ![](./pa2/task2_1.png width=512) ### Task 2-2 What is happening when the user changes the specular exponent value? Why is this happening. Describe this no more than 3 lines below the scene in the *pa2.html* file. (Feel free to play around with different objects, lighting and light positions to get a sense as to what is happening) ![](./pa2/task2_2.png width=512) Submission ==================== 1. Make sure your name and ID is filled above the canvas in *pa2.html*. 1. You will need to submit the following files on EEE Canvas in **a zip archive**, please DO NOT submit individual files. - pa2.html - pa2.js - model.js - gl-matrix-min.js - trackball-rotator.js 1. We will grade your work using Google Chrome by default. If your code requires a different browser to work properly, please clarify by including a *readme* file in your zip archive. Grading ==================== 1. (60 pts) Your program should be able to correctly light up all the three objects for all the three lighting scenarios (ambient, diffuse, specular) using the Phong shading. The user should be able to manipulate these scenarios using the lighting checkboxes. 2. (30 pts) You should be successfully able to add two new lighting positions (one at the bottom and one on the left) to the existing codebase. When selected, they should light the objects appropriately. 3. (10 pts) In your own words you should also describe how the specular exponent value affects the final appearance. Useful references ==================== - [WebGL](https://webglfundamentals.org) - [JavaScript 1](https://developer.mozilla.org/en-US/docs/Web/JavaScript), [JavaScript 2](https://google.github.io/styleguide/javascriptguide.xml?showone=Comments#Comments) - [glMatrix](http://glmatrix.net) - [WebGL Shaders and GLSL (GL Shading Language)](https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html)