Assignment 4: More Lighting and Shading (GLSL)

Objectives:

Implement more advanced lighting and shading within the actual shader code.

Description:

In the previous assignment, we did per-surface lighting, where each polygonal surface had just a single color. However, in the real world, surfaces aren't just shaded uniformly, and are often shaded with a sort of gradient. To do this, we will perform smooth shading using the vertex normals (rather than the surface normals calculated in Assignment 3). So each vertex will have its own normal, and may be colored differently from the other vertices in the surface.

There are two types of smooth shading that we will be implementing:

1. Gouraud shading: We set the normal for each vertex, calculate the color of that vertex, and interpolate the colors of each vertex across the surface. WebGL will handle the color interpolation, all you have to do is calculate the vertex color within the vertex shader.
2. Phong shading: We set the normal for each vertex, interpolate the normals across the surface, and calculate the color of each fragment on a surface. Again, WebGL will handle the normal interpolation, so all you have to do is calculate the fragment color within the fragment shader.

You will also implement 2 other kinds of lighting (other than the diffuse lighting you did previously):

1. Ambient lighting: This is a small light component that is uniformly added on to the apparent color. This is used to emulate soft lighting that permeates a room, even if there's no direct light source hitting it. This will also depend on your model's ambient color.
2. Specular lighting: This is a light component that is used to emulate shiny/glossy surfaces. The intensity of this component depends now not only on the location of the light source, but the location of the viewer. This will also depend on your model's specular color and another component known as the glossiness factor. Note that while this can be done with Gouraud shading, specular highlights look best with Phong lighting.

 How to Proceed:

In the previous assignment, you did all of your lighting calculations in Javascript, and our shader code was still pretty minimal. Now, you will do all of your lighting calculations in the shader itself. There are a couple things you need to do:

1. Pass all of the necessary color/normal parameters for each vertex to the shaders. These will be stored as attribute variables, which are stored per vertex. You will need to pass a bunch of things, including (but not limited to) diffuse color, specular color, surface normal, vertex normal, etc.
2. Pass the light position and view direction as uniform variables. These are the same for all points, so they are passed as uniforms which are 'uniformly' passed to all vertices.
3. Calculate the apparent color from these parameters within the shaders using the appropriate formulas.

For the base requirements, you will have specular and ambient lighting on all of the time (extra points for being able to toggle them). However, you can't have both Phong lighting and Gouraud lighting at the same time (since they serve the same purpose) so you'll need to be able to toggle between those as a required point. To do this, you can use a boolean uniform variable (just an int, 0=false 1=true).

Also, your default diffuse component should be red (1,0,0) (rather than green from before).

Resources:

Directional Lighting in WebGL Links to an external site.

Specular Lighting in WebGL Links to an external site.

All the following examples are in the 'Files' tab under 'MatsudaLea/Ch08'

Lighted Cube Links to an external site.

Point Lighted Cube Links to an external site.

Ambient Lighted Cube Links to an external site.

Per Fragment (Phong) Shaded Cube Links to an external site.

This example is an extra example from Matsuda/Lea

Specular Lighted Cube Links to an external site.

Matsuda/Lea Chapter 8 is the most helpful for this lab.

Play media comment.