Due: Monday, October 12 (see the reason for the non-standard due date)
Synopsis:
You Get to write some shaders!
Learning Objectives:
To help you understand how shaders work by writing some. We’ll write them independently of the programs that connect to them so we can focus on the shaders themselves.
Evaluation: Check/No Check/Above and Beyond. You get a check if you turn in a viable, and complete submission. We will mark above and beyond for people who make particularly cool pictures.
Handin: Will be as a Canvas (the course management system, not the JavaScript drawing library) assignment. (Link). We’ll ask you to turn in links to where we can see your shaders, as well as the source code (in case the shader site goes down).
Description
Your task is to write some shaders in GLSL (well, 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.
http://shdr.bkcore.com/ is a simpler one. Last year it had problems: it crashed the browser from time to time, and sometimes when you try to save your work, well, it didn’t really save it. So, be sure to save your work often. And to “download” your shader source (by copying it into a text editor), in case it gets lost. Last year, it didn’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) – of course this year, we’re learning shaders before textures, so you may not even know what texture coordinates are yet, and this won’t be a problem.
kickjs seemed better last year. But it’s more complicated. It’s so full of fancy features that it takes a little while to figure out. And some students tell me that shdr.bkcore is good enough.
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.
You need to write at least two shader pairs (these are only a few lines long!):
- A pair of shaders that does the same shading (or as close as possible) to the shading you did for Program 4. (If you didn’t do shading, as close to the shading I did in the example – diffuse lighting coming from a fixed direction (upper left)). Note: in GLSL, it’s hard to do per-triangle shading (you should understand why!) – you can do the shading per-pixel or per-vertex.
- A cool shader that does something cooler. (“requirements” below – we’ll get some shading/procedural texture basics in class)
What you need to turn in: we’d prefer you send us links to the sandbox (shdr.bkcore) where your shaders are so we can see them easily. In the web link, give a link to your best shader. In the text type-in give links to all of them (with brief (sentence is OK) descriptions). Also, please turn in a zip file (using the handin convention) of your best shader (it should be a zip file with 2 files in it – the vertex shader and the fragment shader).
Note: if for some reason you can’t share a link, you can put all of your shaders in your ZIP file. You’ll also need to include a picture (do a screen grab) of what the shader looks like.
Your fancy shader should:
- have some element of lighting besides just constant (ambient) lighting
- do something non-standard in the vertex shader
- do something that changes the color depending on something (e.g. a procedural texture)
- 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.
The readings will be very helpful for this assignment. You might want to look at the optional tutorial readings (like the shaders book).
