Page 6: Materials

Materials are the abstraction in THREE that controls the appearances of object surfaces. You can think of the them as the thing that chooses the color for every point on a surface.

In the real world, the apparent color of a point on an object depends on several things. It depends on the “material” that the object is made out of at that point (e.g., paper with ink on it, shiny plastic), the light that hits this point, and the shape of the object. When I describe a material (say, shiny gold), I am not just giving a color (dark yellow), but also information about how the surface interacts with light.

The Material abstraction in THREE combines these aspects. It encodes the “material” (in the real world sense) of being the “stuff” the object is made out of. It also encodes the process by which the actual color is determined: how THREE should look at the lights, surface properties, and geometry to determine what color it ultimately appears.

In the future, we’ll learn about how Materials contains programs that tell the graphics hardware how to color each pixel. And we’ll see how we can make new materials by writing programs for the hardware.

For now, we should notice a few parts of what materials can do:

1. Materials can have a color. In the future, we’ll see how we can use materials to give objects multiple colors.
2. Materials can react with lights. The color that we see in the image is the interaction of the lights and the material (and is affected by the object shape).
3. Materials can provide advanced effects that consider other objects - such as shadows and reflections. But we aren’t doing to do that now. Materials provide local effects - the color of the point depends only on that point (and the lights), not what happens at other points. And they sometime provide global effects (light shadows and reflections) that depend on other objects.

So, for now, think about materials as things like “shiny red plastic” or “wood with blue (matte or not-shiny) paint”. In the future, we can add other things like wood grain patterns and mirror reflections.

One thing to notice: because Materials have the programs the hardware uses for coloring pixels, they are specialized to the kind of objects being drawn. Since we will always be drawing meshes, we’ll use the Mesh materials.

THREE’s built in Materials

THREE provides a bunch of built in materials. Again, notice these all are for use with Mesh objects. Here are the ones we’ll focus on for now:

• BasicMaterial - (actually class MeshBasicMaterial) colors the pixels with the object’s color, ignoring any lighting.
• MeshLambertMaterial - computes a simple dull appearance. We’ll learn the math in class. Note: this material only computes the lighting at the vertices, so it may not give expected results on large polygons.
• MeshPhongMaterial - this uses the classic lighting model that we have taught in graphics classes historically. We’ll learn the math for this one. It lets us control various aspects of the appearance.
• MeshStandardMaterial - a fancier material that is easier to control than the Phong model (determine the parameters to get specific appearances). Since we don’t have to implement it ourselves, we might as well use the fancier thing since it looks better. It has lots of parameters to control advanced effects.
• MeshPhysicalMaterial - an even fancier material.

There are two special materials (MeshDepthMaterial and MeshNormalMaterial) that are useful for debugging. They show object properties in the colors.

Materials have different properties (like color or shininess). Those properties can be set either for the whole object, or can be provided as a “map” that allows us to control how different parts of the object look. For now, we won’t consider maps - we’ll learn about them later in the class.

Here are the main properties of MeshStandardMaterial that we will use to get different appearances (see the documentation for a full list):

• color
• emissive - this is basically the “ambient lighting”
• metalness - is the material metallic or not
• roughness - how shiny is the object

In the exercise, you can try these out.

Soon, we’ll learn the details, but for now, experiment with different settings to get some intuitions on how to create different appearances.

Box 1: Exercise 3, Materials

Make each sphere have a different, non-white, material. Use different settings of MeshStandardMaterial. Experiment with different values to get different appearances. To get the points for this exercise, the materials should be non-white, and should appear different. Note: there is a point light source near (but to the right of) the camera and a directional light source shining down (both lights are white).

All you need to change are the 9 materials. The program is in 06-06-01.js ( 06-06-01.html).

We’ll discuss animation on Page  7  (Animation and THREE) a little before moving on to the programming parts.

Next: Animation and THREE