Programming Assignment #6

by Eftychios Sifakis on November 14, 2020

Due: Friday, November 20th. (see the class late policy on the Syllabus)

Synopsis: You get to write some shaders! You will experiment with the interactive shader editor to create your own pair of vertex & fragment shader, and test it with the provided 3D geometric models

Learning Objectives: To familiarize yourselves with the GLSL shading language, the respective roles of the vertex & fragment shaders, exchanging information between them (via varying variables), and using the supplied attributes and uniforms. Also, experimenting with shading models incorporating diffuse and specular reflection.

Evaluation: Based on the announced evaluation system. You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). “Above and beyond” grades will be awarded for people who make particularly cool pictures.

Hand-in: Will be as a Canvas (the course management system, not the JavaScript drawing library) assignment. [Submission link]. The editor gives you a way to build a “link” that points to your implemented shaders: if you click on the “Share” button, you will get a (long!) URL that captures your entire program, including both the vertex shader and the fragment shader. Include this link BOTH in the text box of the Canvas submission, AND in a README file that you upload. Also, as a fail-safe, we recommend uploading the shaders as a text file. You can do that by clicking the “Download” button on top of the interface; this will give you a text source of both shaders, that you can save and upload to your submission.


Your task is to write some shaders in GLSL; specifically a pairs of shaders – a fragment shader and an associated vertex shader.

This used to require building an application, getting some geometry, attaching the shader to it … but in the modern era, we can use the web!

There are a few “shader sandbox” websites out there. Both are cool websites where you can type in shader code and see it applied to a model in real time. They let you try writing shaders with a minimum of fuss – just focus on writing the shader! They even helps you by giving you sample fragments of code. is a simpler one that we have used over the years in CS559, with reasonable success and a small number of hickups (that seem to change from year to year, but typically not particularly problematic – this year it appears that the only issue is that the URL “Shorten” utility in the “Share” button doesn’t work anymore, since it depended on Google’s URL shortener that is no longer operational). But it should be perfectly sufficient for your purposes.

The intent of this assignment is to make it relatively easy to get a “3”, i.e. a satisfactory grade. In particular, to meet that standard your shaders need to meet the following requirements:

  • Requirement #1. At least some of the shading/lighting computations need to happen in the fragment shader. That’s to say, you should do something different than computing a per-vertex color and simply interpolating the color itself across each triangle by assigning it to a varying and directly using it in gl_FragColor as this shader does (again, to avoid confusion, this is what you should not do; perform some of the shading calculations in the fragment shader, like this example instead).
  • Requirement #2. Implement a shading model that includes at least diffuse reflection or specular reflection (ideally both, but at least one of them).
  • Requirement #3. Use the “time” uniform provided by to have some element of your scene change dynamically over time. You have many options how to do this … you can change the shape of the geometry being drawn, you can change the location of the light source (see this example), you can change the color of the object or the color of the light, you can change the fragments being discarded, etc … this example does several of these things at once!

As always, you are encouraged to try and exceed these requirements, and if you do well, you can compete for a “4” above-and-beyond grade. Here are some ideas (you should try multiple of these, to be more competitive for this grade!)

  • Use multiple lights, maybe with changing colors, or changing locations.
  • Make sure to incorporate both diffuse and specular reflection.
  • Make the color of the object (the underlying “intrinsic color” of the object, that is, not just the apparent color due to lighting) vary across the spatial extent of the object. Here are some examples.
  • Make the geometry of the model being shown “stretch” or otherwise deform. You can do it by applying transforms to the vertex positions in the vertex shader. This example takes this principle to the extreme!
  • Use the “discard” functionality to create interesting/artistic transparency.

Leave a Comment

Previous post:

Next post: