Page 9: All Together

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 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 - on 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/10-09-01.vs and shaders/10-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 10-09-01.js ( 10-09-01.html), but you can if you want to.

Exercise: Images and Lighting

Write a shader in shaders/10-09-02.vs and shaders/10-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 10-09-02.js ( 10-09-02.html) to load the image and to set up the texture in a uniform.

If you’d like an advanced 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 and so on. 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 10-workbook.txt.

Exercise: Student’s Choice

Write a shader in shaders/10-09-03.vs and shaders/10-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 10-09-03.js ( 10-09-03.html) to set up the uniforms and load textures.

In this exercise, you must add a uniform variable that controls some parameters, and have them 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 10-workbook.txt. You can earn some advanced 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 .