Now we finally get to make the objects in our scene reflect local illumination. Do read the Shading and Lighting topic's materials if you have not done so already.

In this task we will be implementing two sets of shaders for our objects. One set (vertex + fragment) will be for the Gouraud shading (per-vertex lighting) and the second will be for the Phong shading (per-fragment lighting). For both cases implement the Phong's lighting model (ambient term + diffuse/Lambertian term + Phong's specular term).

You will need the following normalized vectors in your shaders:

• $v$ – the direction towards the viewer
• $n$ – the surface normal
• $l$ – the direction towards the light source
• $r$ – the reflection of the light incident vector, see GLSL reflect()

The vector $r$ can alternatively be the reflection of the viewer incident vector. The angle between the reflected viewer incident and $l$ and the reflected light incident and $v$ will be of the same size. Because cosine is symmetric, the specular term in the lighting model will be of the same value.

or

For the diffuse term you need to use the cosine of the angle between $l$ and $n$.

So overall you need to use the dot product $l \cdot n$ for the diffuse term and $v \cdot r$ for the specular.

In order to see more clearly the difference between the Gouraud and Phong shading, let us make the body of the chopper to be a very crudely approximated sphere.

Task is to implement the aforementioned shaders to get a result similar to the images below. When implementing the shaders, remember that the calculations will be done in the camera space. This means that the viewer position is actually the origin.

For Gouraud:

For Phong:

Describe in the task submission why is Gouraud missing a specular highlight on the back wall?

JavaScript

Base code is at:
https://cglearn.codelight.eu/files/course/6/ShadedChopperJS.zip

That code will initially give you an error. First add the missing uniform variables to the shader, then proceed with the shader code.

You may want to change some parts of the chopper drawing functions to reflect your own chopper.

Do not use the THREE.MeshPhongMaterial. You can use it later.

C++

Base code is at:

https://cglearn.codelight.eu/files/course/6/ShadedChopperCPP.zip

1. Copy your chopper drawing methods from the Shader Chopper excercise. Here we use another approach in the createCube method than before. We also have a createSphere method, which you can use to construct the chopper's body. In your drawing method you will now have to call glDrawArrays(GL_TRIANGLES, 0, 36) for cube drawing.

2. Implement Gouraud shading in the files gouraud.vert.glsl and gouraud.frag.glsl

3. Implement Phong shading in the files phong.vert.glsl and phong.frag.glsl 

Base code draws one sphere and one cube. At some point (when you are not yet drawing your chopper) the result can look like this.