Materials and reflections

When light hits a surface, some of it reflects straight off the top (the specular highlight) and some sinks in, bounces around among the pigment, and leaves in a random direction having picked up the material's color (the diffuse). A shading model is just a function that, given the light direction, the view direction and the surface normal, returns how bright that surface should be. The standard one, and the one in the sphere above, is Cook-Torrance:

Those three specular letters are the whole game. F decides how much reflects at all, and is the subject of the next section. D is controlled by the roughness slider. G stops the model from cheating energy at grazing angles. Get all three right and one equation covers chrome, plastic, skin, rust and water.

Here is the most counterintuitive fact in rendering, and you can confirm it on the sphere right now: every surface becomes a perfect mirror when you view it at a shallow enough angle. Look at your matte desk straight on and it is dull; look along it toward a window and it gleams. That angular ramp is the Fresnel effect, and REACT uses Schlick's cheap, accurate approximation of it:

F0, the reflectance when you look straight at the surface, is the single most important number a material carries. It is tiny for everyday non-metals and large for metals:

A mirror and a sheet of brushed steel are made of the same atoms. The difference is geometry too small to see: a mirror is flat at the microscopic scale, brushed steel is a field of tiny facets pointing every which way. Roughness is the width of that distribution of facet angles, and the GGX function is how REACT models it:

On the sphere, roughness does two things at once that are really the same thing. The direct highlight from the light grows from a pinpoint into a soft glare, and the reflection of the room goes from a crisp mirror image to a foggy suggestion. Both are the facets disagreeing about which way to send light. A polished floor and a frosted one differ by exactly this one number.

float D_GGX(float NoH, float a) {
    float a2 = a * a;
    float d  = (NoH * NoH) * (a2 - 1.0) + 1.0;
    return a2 / (PI * d * d);
}

vec3 F_Schlick(float VoH, vec3 f0) {
    return f0 + (1.0 - f0) * pow(1.0 - VoH, 5.0);
}

// roughness drives alpha; metalness drives f0 and kills diffuse
float a   = roughness * roughness;
vec3  f0  = mix(vec3(0.04), baseColor, metalness);
vec3  spec = D_GGX(NoH, a) * G_Smith(NoL, NoV, a) * F_Schlick(VoH, f0)
           / (4.0 * NoL * NoV + 1e-4);

There are really only two kinds of material in the physical world, and the metalness slider picks between them. Non-metals (dielectrics: wood, stone, plastic, water, skin) reflect a flat 4% and keep their color in the diffuse term. Metals reflect a lot, 70 to 98%, tint that reflection with their color, and have no diffuse at all, because the light that would have scattered as diffuse is instead absorbed. The workflow collapses both into one slider:

Slide metalness from 0 to 1 on a colored sphere and watch the color jump from the body of the ball (diffuse) into the reflection (specular). That migration is the whole physical story of the metalness workflow, and seeing it happen in real time is worth more than any paragraph, which is why the toy comes first.

The shading model exposes its workflow and debug views through the console: