Page 10-8: All Together

Page 10-8: All Together

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

Exercises 8-1 and 8-2 require some lighting, and 8-3 recommends it. For the purposes of these exercises, you can assume that the lights are in "camera coordinates". If you do diffuse lighting, the lighting will change as the camera moves (because 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.

If you do something really creative, you can earn bonus points.

Optional: If you want to figure out how to connect to THREE's lighting system, you can earn bonus points by having your shaders on this page use the ambient, directional, and point lights from THREE. If you do this, make sure that you pick some lighting that will be obvious (for example, using the "extreme" lighting of GrWorld). You may want to put an extra sphere into the world using one of THREE's materials so we can see that the lighting is the same. If you choose to try this, expect to have to read the THREE.JS source code, as the documentation is not complete.

Box 1: Exercise 8-1 - Lighting and Procedural

Write a shader in ex81.vs and ex81.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 8-1.js, but you can if you want to.

Box 2: Exercise 8-2 - Images and Lighting

Write a shader in ex82.vs and ex82.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 8-2.js to load the image and to set up the texture in a uniform.

See if you can do something more creative than just showing the colors in the texture (the standard color map that you could do with THREE's built in shaders). If you add your own image, make sure you add it to the repository and push it when you submit.

Box 3: Exercise 8-3 - Student's choice

Write a shader in ex83.vs and ex83.fs that does something interesting and different than the other shaders you've made already in this workbook. You will need to modify 8-3.js 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 Box 7-2 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.

Some things to consider trying:

Summary: Shaders

This marks the end of our workbook on shaders. You can make more in the future, although, the ones built in to THREE will be good enough.