CS 418 Interactive Computer Graphics

In-Class Exercise: The Blinn-Phong Reflectance Model

Programming Language and Tools

For this exercise, you will implement the Blinn-Phong refectance model as a vertex shader written in GLSL.

We will use code from Interactive Computer Graphics, A top-down approach with WebGL (Seventh Edition) by Edward Angel and Dave Shreiner

They use their own set of JavaScript utility functions and matrix-vector library and you will use them here. For the remainder of the class (and beyond) you should stick with the glmatrix library for vector and matrix computations.

• MV.js
• webgl_utils.js
• initShaders.js
• shadedCube.html
• shadedCube.js

Your challenge is to complete the vertex shader code in shadedCube.html.

References

In addition to course slides on shading , Wikipedia has a very good article on the Phong reflecatcnce model [link]. 

Challenges

1. Fill in the GLSL code in the vertex shader to correctly implement the Blinn-Phong Reflectance Model. You should see something like this:
   
   
    
2. Change the shading parameters in the code and to produce different material appearances.
3. Try to implement fragment-based shading.
4. Sample implementation