Page 5: Exercise 4: Environment Maps

On the previous page, we learned about texture maps that surround objects. On that page, we just looked at them. On this page, we’ll use them to fake reflections on objects. This is called Environment Mapping. Since all lighting is basically reflections, environment mapping becomes an important method for faking fancy lighting. The required reading deals with environment mapping briefly in Section 11.4.5 (where they refer to it as reflection mapping).

The key idea of environment mapping is that we use the normal of the surface to figure out what direction the mirror reflection would be coming from, and then use that direction to look up the color in the environment map. Unlike all of the mapping strategies we’ve discussed so far, in environment mapping we don’t use the UV coordinates from the object: instead we compute the texture coordinates based on the object’s normal and the direction of the camera.

Implementing environment maps is tricky because you have to do the computation of the texture coordinate (which depends on the camera, the object position, and the object normal). And then you have to look up the texture in the environment map. Fortunately, THREE implements this for us! All we have to do is use it. (Well, make sure you understand the concepts since you may be asked about them on the exam).

Using an Environment Map

The basic use of an environment is to make a mirrored object. In THREE, this is as simple as using a material that supports Environment Mapping, and using an appropriate texture with it. MeshStandardMaterial does this. Even MeshBasicMaterial does it.

Read the documentation. You will need to use a CubeTextureMap.

And, as you can guess, you have to do it.

The example below in 09-05-01.js ( 09-05-01.html), put an environment mapped object into the scene. Pick an object that is appropriate for environment mapping (a primitive like a sphere or torus is fine). Find an environment map, or paint one yourself. Be sure to put the images into the repo!

Note: your object will “reflect” what is in the environment map, not what is in the scene (we’ll deal with this later). That’s OK for this exercise, but it may look silly to have the green ground plane not reflected in the object (so the bottom of the object won’t be green). You can just remove the ground plane (GrWorld has that option). Even better, paint your textures so the bottom has the green in it, so objects look as if they are properly reflecting the ground plane.

You will want to make the background (skybox) be the environment map - otherwise, it will look like the object is reflecting the wrong thing.

In the text box 09-workbook.txt, explain why the object you chose is appropriate for reflection mapping. And give attribution for any textures (like the environment map!).

If you get an image from the web, be sure to give proper attribution in 09-workbook.txt.

Advanced: create a second object that shows a combination of enviornment mapping and bump/normal mapping to make the surface less smooth. You can even add in a material property map so that different parts of the object are more or less shiny. In the text box, explain how you used multiple map types to achieve the effect.

Summary: Environment Maps

Environment maps are an important way to fake fancy lighting effects using simple rendering.

On Next: Exercise 5: Shadow Maps , we’ll try out shadow maps, which work in a completely different way.