Workbook 6, Page 6: Materials

Workbook 6, Page 6: Materials

Box 1: Materials

Materials are the abstraction in THREE that controls how the shapes look - what colors the pixels of the triangles ultimately are shown in the resulting image.

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 woodgrain 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, ignores 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.

Exercise: 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 6-materials.js.

We'll discuss animation on the next page a little before moving on to the programming parts.