Assignment 3 - Working With Shaders - (100 points)



Due Date: Oct 17 2023 at 11:59pm

Objectives:



  • Experiment with shaders to produce different graphics effects.
  • Implement different shading methods.
  • Use multiple shaders in the same WebGL page.

Starter Program



You can start with your source code for Assignment 1. The textured Box WebGL program will work well for this program. You will be modifying the vertex and fragment shaders of this program to add in new texture features.



Implement Three Features Using Shaders (30 points)



  • You should modify the fragment and vertex shaders to add the following:
  • Approximate Bump mapping (10 points)
  • A simple math function of your choosing (10 points)
  • A random noise texture (10 points)

Basic Shading (30 points)



  • You should modify the fragment and vertex shaders to add the following:
  • Flat Shading (10 points) 1 color per triangle.
  • Gouraud Shading (10 points) Interpolate colors over triangle.
  • Phong Shading (10 points) Interpolate normals over triangle.

Basic Lighting (15 points)



  • You should modify the fragment and vertex shaders to add the following:
  • Ambient Lighting (5 points)
  • Diffuse Lighting (5 points)
  • Phong/Specular Lighting (5 points)

Multiple Shaders (20 points)



  • Modify your WebGL program to support multiple shaders per Application. You can do this in one of two ways:
    • (15 points) Add a checkbox in HTML to switch the shaders and only use one at a time.
    • (20 points) Use two different shaders in the same drawScene function.

Extra Credit



  • Create a fractal shader or some other unique shader(10 points)

Submitting the Assignment



Required files (5 points)



Please include the following files for submission.

  • Javascript source code files
  • Screenshots of your output
  • HTML files
  • README - This should be a text file (.txt) and should include your name, a list of the files being submitted, any Shader functions you discovered and used, which extra credit you implemented (if any) and anything you want to tell me about this assignment. Please mention the names of students you worked with or websites you used for this assignment.

submit files on Canvas