Page 9: All Together

CS559 Spring 2021 Sample Solution - Workbook 11

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 6, page 7 and page 9.

On this page there are 3 exercises: you need to write a shader for each one.

Exercises 1 and 2 require some lighting, and 3 recommends it. For the purposes of these exercises, you can assume that the lights are in “camera coordinates” (if that’s easier for you), or use any of the methods we discussed on Page  4  (Lighting in Shaders) (like assuming that transformation is a rotation).

If you do diffuse lighting, the lighting may change as the camera moves (if the lights move with the camera). It is sufficient to create a single directional light either in the camera direction (0,0,1 in view coordinates), or from above the camera (0,1,0 in view coordinates). It is sufficient to just to diffuse lighting (since it is simple); you may want to add some ambient to it so that the parts facing away from the light are not totally black, or add some specular lighting since you have the implementation of it.

It should be clear that there is lighting (for the examples that have lighting).

For this page, you should write the shader yourself - the next page, you can adapt a shader from somewhere. You can reuse the lighting code from a prior page.

It is OK to use ideas that you find elsewhere. Remember: if you use ideas (or code) from some shader you find someplace else, be sure to give proper attribution. If you adapt a shader from somewhere else, make sure you understand how it works!

Shader Composition

One thing to notice about the first two exercises: they require you to put together two different simpler shaders. For example, the first exercise on this page asks you to mix lighting and a procedural texture. You have seen each piece independently - you really just need to put them together. For the exercise, this means computing a color using the procedural shader, and then using that color as the input (maybe the material color) of the lighting shader.

This idea of putting shaders is really common. In fact, shaders are often designed as pieces that get plugged together. If you look at shader design tools (like ShaderFrog), they often provide a workflow where you take simpler shaders and connect them together. Internally, THREE does this (it has “chunks” of shaders in a library, and assembles them to make you materials depending on what options you use).

For these exercises, compose the shaders yourself. We’ll talk about using shaders from other tools later.

Exercise: Lighting and Procedural

Write a shader in shaders/11-09-01.vs and shaders/11-09-01.fs that creates a procedural texture (one of the ones from page 5 is fine - even one of the examples) and adds lighting. A single directional light source (either in the direction of the camera line of sight or from above the camera) is sufficient. You may not need to modify 11-09-01.js (11-09-01.html), but you can if you want to.

Exercise: Images and Lighting

Write a shader in shaders/11-09-02.vs and shaders/11-09-02.fs that combines information from an image with lighting. A single directional light source (either in the direction of the camera line of sight or from above the camera) is sufficient. You will need to modify 11-09-02.js (11-09-02.html) to load the image and to set up the texture in a uniform.

If you’d like a bonus point, do something more complex than just adding diffuse lighting to a texture. You may want to do something more creative than just showing the colors of a single texture (the standard color map that you could do with THREE’s built in shaders). For example, adjust the geometry or normals, mix two textures together, … If you add your own image, make sure you add it to the repository and push it when you submit.

Either way, explain it in the textbox in the file 11-09-02.txt.

Exercise: Student’s Choice

Write a shader in shaders/11-09-03.vs and shaders/11-09-03.fs that does something interesting and different than the other shaders you’ve made already in this workbook. You will need to modify 11-09-03.js (11-09-03.html) to set up the uniforms and load textures.

In this exercise, you must add a uniform variable that controls some parameter, and have this be controlled by a slider. You can look at the examples on pages 5 and 6 to see how to make sliders easily with the framework code.

If you write a shader that alters the geometry of the object (moving vertices), you may want to increase the tessellation of the sphere (see page 7 for an example). You can add more example geometry if you think it shows off your shader better - but please leave the plane and sphere.

You need to not only write a pair of shaders, but also explain what they do and how they work in the file 11-09-03.txt. You can earn some bonus points for a particularly interesting shader with an explanation.

Some things to consider trying:

  • alter the geometry in the vertex shader (as in page 7)
  • mix lighting with other colorings
  • animate effects (see page 2 for an example)
  • have procedural effects modify images (or vice versa)
  • create a different pattern
  • combine effects (make dirty wood grain, or a checkerboard of different woods)

Feel free to add uniform variables (for example, to add a time variable like on page Page  2  (Simple Shaders)).

Then we can move on to Next: Shader Tools and Examples .

Page 9 Rubric (34 points total)
Points (28):
Box 11-09-01
5 pt
has a procedural pattern
Box 11-09-01
4 pt
has lighting
Box 11-09-02
5 pt
has an image-based texture
Box 11-09-02
4 pt
has lighting
Box 11-09-03
10 pt
Some shader that is different than what is in other boxes
Bonus points (6):
Box 11-09-02
3 pt
something beyond basic lighting with texture (required explanation)
Box 11-09-03
3 pt
something particularly interesting (grader's discretion) (requires explanation)