GLSL Exercise: Light Attenuation

Recall that the lighting equation has an attenuation factor for positional lights. The attenuation factor, att, is defined by \[ att = \frac{1}{a+br+cr^2} \]

where a, b, and c are constants that are properties of the light, and r is the distance from the light to the point on the surface to which the lighting is being applied. The constants a, b, and c are referred to as the constant attenuation coefficient, the linear attenuation coefficient, and the quadratic attenuation coefficient, respectively, for the light.

In standard OpenGL, the default values for these constants are 1, 0, and 0, which makes att equal to 1. That is, by default, there is no attenuation.

The attenuation factor is used in the light equation only for a positional light. In that case, the diffuse and specular components of the light are multiplied by att before they are added into the color of the surface point.

For this exercise, you should start with the file attenuation.html. The WebGL application on that page shows a large square, with side of length 30. There are 4 positional lights, positioned 5 units in front of the square. The white light is in front of the center of the square, the red light is at the upper right, the green light at the upper left, and the blue light at the lower center. There are input boxes for the attenuation factors, but there is no support for light attenuation in the program.

Your job is to, first, add attenuation to the implementation of the lighting equation in the fragment shader and, second, to add code to the JavaScript side of the program to set the attenuation values in the shader. (Hint: Consider using a vec3 in the shader program to store the three attenuation factors, instead of using three separate variables of type float. That would make the JavaScript part easier.)

Once you have things working, experiment with it, to see how the attenuation factors affect the lighting.

Scene Graph 1: A Simple Example

The files scenegraph1.html and scenegraph2.html are identical. They were made by stripping from world2.html all the geometry. You will add some geometry to the files, to make your own animated scenes. There are three lines marked with "TODO" where you have to add code. You do not have to make any other changes to the files.

Note that the canvas is set up to show, approximately, a cube extending from -20 to 20 along each axis, so the objects that you make have to be relatively large (or you have to change the projection).

For a first exercise, starting with scenegraph1.html, make a "world" that shows a long cylinder with a spinning cube on each end. Initially, the cylinder should extend along the z-axis, but The combined object should rotate as a whole, about the y-axis. The three component objects should be different colors.

You will have to understand how world2.html works in order to create your own scene graphs. We discussed that in class on Wednesday.

Scene Graph 2: Be creative

Finally, starting from scenegraph2.html, design and create your own scene graph. You can, if you like, use a cylindrical platform like the one in world2.html and maybe even trees like the one in that example. However, you should define your own additional objects. You should use multiple copies of at least some of the objects, and some of the objects should be animated. You could make a windmill with several vanes, for example, and use several copies of it. You could make a raft (from a cube) with a sail (from a cylinder and another cube) and sail it around the platform. Your model does not have be realistic or represent real objects. You could make a kind of abstract "mobile", with hierarchically rotating parts. You could make a solar system with a sun, various planets, and moons.