Assignment 8: Shaders

by Mike Gleicher on October 28, 2014

Assignment due Wednesday, November 12th. To be turned in on Moodle.

Your task is to write a shader in GLSL (well, a pair 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.

kickjs is a better one. The only reason I bother to tell you about the next one (below) is that it’s simpler, and I didn’t know about kickjs when I wrote my own simple example.  It’s so full of fancy features that it takes a little while to figure out. is a simpler one. The down side is that it crashes the browser from time to time, and sometimes when you try to save your work, well, it doesn’t really save it. So, be sure to save your work often. And to “download” you shader source, in case it gets lost. Worse, it doesn’t have texture coordinates for the objects! So, if you want to do a procedural texture, you need to do something hacky. (here’s one that I made)

Note: you can use these tools without creating an account (if you don’t like to make accounts on random websites) – just make sure to download your work. If you do make an account, you can “share” your work (for example, to give us a link where we can look at it).

So, for this assignment: try writing a shader or two. Try to make something cool. If you want to use something other than the websites above, that’s OK. Tell us what you did.

What you need to turn in: a shader “pair” (a fragment shader and a vertex shader), both as source code, as well as a screen shot showing an object using the shader. If you use one of the web services above (and are willing to make an account on it) you can turn the assignment in by sharing a link with us.

Your shader must:

  1. have some element of lighting besides just constant (ambient) lighting
  2. do something non-standard in the vertex shader
  3. do something that changes the color depending on something (e.g. a procedural texture)
  4. not be one of the standard shaders, or something you can do with the fixed function pipeline (you get that for free pretty much with #3).

My shader meets these bare minima (it passes the local space position in the vertex shader, and has a diffuse light component with a directional light source, and it makes the color based on the “solid texture coordinates” given by the local positon).

You should try to make something cooler.

This project will be graded on the check/no check, above and beyond scheme.

You should start with the shaders readings.

For some resources on learning to write shaders, you can look at the 2010 class web’s practice assignment. You’ll even get a C++ testing program in addition to some pointers to some  useful resources, like the GLSL reference, Appendix I of the Redbook, here.

You’ll get to write more shaders in the future for project 2. But for now, we want you to just play a little bit and get a sense of what they do.

What to turn in

Turn in your two shaders (the source code – save it as a .glsl file), and a picture of what they look like. If you use a website, give us a link so we can look at it there (use the “share” button). If you used something else, explain in the Moodle type-in box.

If its not obvious that your shader satisfies the requirements, explain.

Previous post:

Next post: