Page 16: Materials

Materials are the abstraction in THREE that controls the appearances of object surfaces. You can think of 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 contain 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 going 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 sometimes provide global effects (like 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. Here’s a demo that shows many of them off. In all cases, we have the same object (a “knot”) that is the same green color. All of the windows have the same light (a little ambient lighting and a point light).

The actual material class names are named Mesh because they are designed to work with Mesh objects. Here’s a description of what you are seeing:

• BasicMaterial - (actually class MeshBasicMaterial) colors the pixels with the object’s color, ignoring any lighting. All pixels on the object are the same green color.
• MeshLambertMaterial - computes a simple dull appearance. This is a very basic lighting model. We’ll learn the math in class.
• 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. It mixes the dull appearance of the Lambert model with some shininess.
• Phong 2 - uses MeshPhongMaterial, but with different parameters than the previous object in order to show off different kinds of shininess.
• 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.
• MeshToonMaterial - a special material that tries to mimic “cartoon” drawing.
• MeshNormalMaterial - a special material for debugging that colors based on the direction of the normal vector at each point.
• MeshDepthMaterial - a special debugging material that chooses the color based on depth. It really isn’t very visible to the eye (but can be used for analysis).

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 is a demo that allows you to experiment with the different parameters of the Phong model to get a sense of what they do. The Phong model mixes a dull (diffuse) appearance with a shiny highlight. The parameters control the amount of each.

The shininess value controls the sharpness of the “shiny” highlight. The Diffuse intensity controls the amount of “dull” color. The specular color chooses the color of the highlight. In three, you can pick any color - but usually, we always pick either white (so the highlights are white, like shiny plastic) or the object color (so the highlights are brighter versions of the main color, like metallic objects).

In general, the fancier models (Standard and Physical) look more realistic than Phong. However, we will use Phong a lot in class because (1) we will learn the math as it gives the foundations; (2) it is easier to control since it has fewer parameters; and (3) it gives the quaint “old-fashioned computer graphics” look.

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.

Exercise: Materials

Make each sphere have a different, non-white, material. Use different settings of MeshStandardMaterial and other models. 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 04-16-01.js (04-16-01.html).

Next: Page  17 - Animation and THREE