CSCI 444/544 - Advanced Computer Graphics

Spring 2021 - Assignment 1 - Blinn-Phong Shaders

OpenGL
OpenGL ES
WebGL
WebGL

This assignment is due by February 12, 2020 by 11:59pm.

Please Note: For this all future assignments, you are free to choose whichever OpenGL implementation you would prefer to use. Most of what we will be working on can be accomplished in OpenGL, OpenGL ES, or WebGL.

HOWEVER - if you choose to use a version or framework that we are not covering in class, then you must ensure your submission builds out of the box on the machines in the Computer Commons. Be sure to note any special instructions in your README.

If the grader (i.e. instructor) cannot compile your code, you will be contacted once to solve the problem.


Part I - OpenGL 4.1 and GLSL 4.10


The exact content of the assignment is to your choosing. You must draw a 3D object to the screen and illuminate it using Blinn-Phong Shading.

However, you must meet the following technical specs:

Feel free to experiment with textures on your ground, a skybox. The object itself should not be textured so the effects of Blinn-Phong Shading can be seen.

You will want to use your Lab1 solution as the starting point for this assignment.



Part II - Shaders


You will need to create two full shader programs (a Vertex + Fragment Shader pair creates one shader program). These programs must implement:

  1. Gourad Shading - the illumination is computed per-vertex in the vertex shader.
  2. Phong Shading - the illumination is computed per-fragment in the fragment shader.

The user needs to be able to toggle between these two programs using the 1 and 2 keys.

Since both of these programs will depend upon the same set of uniforms, the uniforms must be passed to the GPU and the shader programs by use of Uniform Buffer Objects (UBOs).

Additionally, both shader programs need to have shader subroutines that implement the following specular illumination models:

  1. Phong Specular Illumination - the specular component is computed using the reflected vector.
  2. Blinn-Phong Specular Illumination - the specular component is computed using the halfway vector.

The user needs to be able to toggle between these two programs using the 3 and 4 keys.

There are then four different combinations our program can render:

  1. Gourad Shading + Phong Illumination
  2. Gourad Shading + Blinn-Phong Illumination
  3. Phong Shading + Phong Illumination
  4. Phong Shading + Blinn-Phong Illumination

To alert the user as to what combination they are currently viewing, display this information as text to the window underneath the FPS calculation.

While not explicitly stated above, in order to perform the illumination you will need to ensure the following properties are being set in your program:


Part III - Create Your Website


In addition to creating this awesome looking cube, create a webpage that showcases your work. There is a template available for your website. If you wish to use it, download this .zip file and extract it in your dropbox. It will create a www/ directory with the stylesheet from the course webpage, which you can use if you like. You'll be adding to it for each homework assignment, with a screenshot or screenshots of your work, a short description of the assignment, and the opportunity to talk about any neat implementation details if you so choose. The websites are a way for you to keep track of the projects you've made over the course of the semester, but you should also aim to make the descriptions accessible to people outside of the course as a way to share and showcase your coursework. Hopefully you can use this as a portfolio along with your resumé.

Inside the www/ directory, there is an images/ folder. Place any screenshots and other images into this folder.

If you're not familiar with HTML, don't worry; the template shouldn't do anything crazy - a <br> signifies a newline, the <img> tag places an image. There are plenty of tutorials available for HTML if you want to add tables, change font styles, or play with the formatting. There are some comments in the template file to help you out as well.

If you choose to use the template or your own template, be sure to name the webpage <HeroName>.html where <HeroName> is the name of your hero without spaces in CamelCase. (For example, my submission would look like ElvishScout.html .) If you have a question about what you should name your file, please ask the instructor and he will confirm how your name should look.


Documentation


With this and all future assignments, you are expected to appropriately document your code. This includes writing comments in your source code - remember that your comments should explain what a piece of code is supposed to do and why; don't just re-write what the code says in plain English. Comments serve the dual purpose of explaining your code to someone unfamiliar with it and assisting in debugging. If you know what a piece of code is supposed to be doing, you can figure out where it's going awry more easily. (Interestingly enough, this code review of Doom 3's source code says the exact opposite - well written code should require no comments. Well, we don't work at id so we're going to comment.)

Proper documentation also means including a README.txt file with your submission. In your submission folder, always include a file called README.txt that lists:


Grading Rubric


Your submission will be graded according to the following rubric.

Percentage Requirement Description
20% Shader Programs implement Gourad Shading and Phong Shading
25% Shader Programs implement Phong Illumination and Blinn-Phong Illumination via shader subroutines
20% Cube or object of greater complexity drawn to screen using VAOs and VBOs with normals specified
25% Uniforms sent to shaders via UBOs
10% Light Source is a point/directional/spot with appropriate accompanying material properties

Submission


Please update your project so it produces an executable with the name userName_A1. When you are completed with the assignment, zip together your source code, README.txt, and www/ folder. Name the zip file, userName_A1.zip. Upload this file to Canvas under A1

This assignment is due by February 12, 2020 by 11:59pm.