Page 6: Exercise 5: Shadow Maps

In class, we’ll learn how shadow maps work. Fortunately, you don’t have to implement them (there are some tricky details), since they are built into THREE.

Shadow maps are different than other kinds of maps. They are pictures made from cameras positioned at the light sources. We don’t use them for colors (or surface properties), we use them for depth testing (to see if the camera at the light source can see each point in the scene). The lookups are depth tests that turn light on and off. This will be explained in class, and is discussed in Section 11.4.4 of the reading FCG4 Chapter 11.

Implementing shadow maps can be tricky. Fortunately, they are built into THREE.

THREE makes it pretty easy to use shadow maps. All you need to do is:

1. Make sure that your renderer has shadowMap.enabled set to true.
2. Make sure that you set the appropriate properties for objects. Some objects should cast shadows, and some objects should receive shadows. You need to use the castShadow and receiveShadow of objects.
3. Make sure your lights are set to castShadow. It’s easiest to use shadows with spot lights (for reasons we’ll discuss in class).

That’s pretty much it. There are plenty of parameters and options you can tune to make things look the way you want.

For this exercise, all you need to do is make shadows in the scene below. Note: you’ll have to make your own spotlight. You are welcome to remove my objects and put in your own. The file is 09-06-01.js ( 09-06-01.html). Of course, you can use this as an opportunity to experiment with more lights and shadows.

It needs to be obvious that one object casts a shadow on another (besides the ground plane). So, in the sample scene, make sure to place the light far enough above the ground that the spinning hexagon casts a shadow on the cube and the knot.

After you’ve done this exercise, go on to Next: Multi-Pass Rendering .