Exercise Solution

Part 1-1

Draw a sphere in perspective view.
  • Start from Part 2 of Worksheet 3, which draws three wireframe cubes in perspective view. Simplify such that you draw just one cube in the image center and switch to drawing triangles instead of wireframe. [Angel 2.4.2, 4.6, 5.3, 5.6]
Please use a browser supporting HTML5

Parts 1-2, 2

Draw a sphere in perspective view.
  • Draw a unit sphere instead of a unit cube using recursive subdivision of a tetrahedron. [Angel 6.6]
  • Insert two buttons: one which increments the subdivision level and one which decrements the subdivision level. [Angel 3.6.2]
Please use a browser supporting HTML5

Subdivision level:    

Part 3

Use Gouraud shading (with true normals) to draw a diffuse sphere lit by a distant, white, directional light with direction (0, 0, βˆ’1).
  • Obtain the surface normal in the vertex shader. [Angel 6.9]
  • Think of the color of the sphere as its diffuse reflection coefficient k_d. Introduce a distant light with direction l_e = (0, 0, βˆ’1) and light emission L_d = L_e = (1, 1, 1), no distance attenuation. Compute the diffusely reflected light in the vertex shader and set the vertex color to this result (note that l = βˆ’l_e ). [Angel 6.3.2, 6.7.1]
  • Let the camera orbit the sphere over time. [Angel 3.1]
Please use a browser supporting HTML5

Subdivision level:    

Part 4

  • Implement the full Phong reflection model in the vertex shader and create sliders for material parameters (k_a, k_s, k_d, alpha) and light emission (L_e). [Angel 3.6.5, 6.3, 6.7-6.8]
  • Please use just a single slider for each parameter and the same light emission for all lighting terms (L_a = L_d = L_s = L_e). This means that your solution can be significantly simpler than the example in the textbook.
  • [Section 6.8 of the textbook has many minor glitches. Please consult the Wiki page with textbook clarifications before using the code example in Section 6.8.]
Please use a browser supporting HTML5

Subdivision level:    

K_ambient      
K_diffuse      
K_specular      
Shininess      
Light red      
Light green      
Light blue      

Part 5

Use Phong shading by moving your implementation of the Phong reflection model to the fragment shader and varying positions and normals across triangles instead of colors. [Angel 6.5.3, 6.10]
Is Gouraud or Phong shading the best method for simulating highlight? Explain.
-------------------------------
ANSWER
In Gouraud shading, the resulting lighting color is calculated per vertex, and the color values of the surrounding fragments are then the result of interpolating those vertex lighting colors. This results in the lighting being not very realistic unless large amounts of vertices are used. Phong shading, although more computationally expensive, results in smoother highlight. By interpolating positions and normals we can obtain more precise values to plug in our shading formulas.
Please use a browser supporting HTML5

Subdivision level:    

K_ambient      
K_diffuse      
K_specular      
Shininess      
Light red      
Light green      
Light blue      

Part 6

Answer the following questions: [Angel 5.2, 6.2, 6.3, 6.5, 6.8]
  1. What is the difference between Phong shading and Phong lighting (the Phong reflection model)?
  2. What is the difference between flat shading, Gouraud shading, and Phong shading? List pros and cons of each.
  3. What is the difference between a directional light and a point light?
  4. Does the eye position influence the shading of an object in any way?
  5. What is the effect of setting the specular term to (0, 0, 0)?
  6. What is the effect of increasing the shininess exponent (𝛼𝛼)?
  7. In what coordinate space did you compute the lighting?

ANSWERS

  1. The term "Phong lighting" refers to a reflection model. It describes the way a surface reflects light, taking into consideration three major components - ambient, diffuse and specular. The diffuse component models rough surfaces and the specular component models shiny ones. The term "Phong shading" is an interpolation technique for surface shading. It interpolates surface normals across rasterized polygons, allowing us to compute pixel colors based on the interpolated normals and a reflection model.

  2. In flat shading, every fragment belonging to the polygon gets the same color, since the basis for the calculation is just the angle between the polygon and the light source. The resulting shading is not smooth, and grid-like patterns can emerge if shaded surfaces are not very dense. This model allows for high computationally efficiency however, since there is no interpolation taking place.

    Gouraud shading interpolates lighting values calculated for every vertex (as opposed to interpolating surface normals as in Phong shading). This results in a rather smooth shading (no sudden changes in color between polygons like in flat shading). However, lighting is not very realistic unless large amounts of vertices are used. It can be considered "middle ground" between flat and Phong shading, offering better quality then flat shading, while also being much cheaper to compute then Phong shading.

    Phong shading offers the most realistic results of the three, but also comes with the highest computational overhead - since we interpolate surface normals, the lighting calculations take place in the fragment shader and thus, have to be done for each pixel.

  3. With a directional light, the light vector has the same value for every vertex, simplifying calculations. It is meant to simulate light coming from the sun or other distant light sources. Point light on the other hand allows us to take distance into account during the rendering.

  4. The eye position matters when simulating highlight - the specular element in the Phong reflection model takes into consideration camera's position, so it can simulate light being reflected into the eye of the camera.

  5. This disables the specular component, resulting in only ambient and diffuse lighting being applied.

  6. Increasing the exponent reduces the brightness of the specular term, while also reducing the radii of highlight points.

  7. I have calculated the lighting in camera view (eye coordinate) space.