07 Surfaces and light

Normal maps: change the facing, not the shape

The plane is still flat, but every pixel’s normal is perturbed. Move the light and look.

Bump strength1.00

Bump density18.00

440

Light direction X-0.80

-22

Show the normal mapOff

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 p = vUv * 18.000;
  vec2 slope = vec2(cos(p.x) * sin(p.y), sin(p.x) * cos(p.y));   // slope of the height field
  vec3 bump = normalize(vec3(-slope * 1.000, 1.0));     // tangent-space normal
  vec3 N = normalize(uNormalMatrix * bump);                      // into world space
  vec3 L = normalize(vec3(-0.800, 0.6, 1.0));
  float diffuse = max(dot(N, L), 0.0);
  vec3 lit = vec3(0.86, 0.80, 0.72) * (0.12 + 0.88 * diffuse);
  vec3 color = mix(lit, bump * 0.5 + 0.5, 0.000);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = vUv * 18.000;
  vec2 slope = vec2(cos(p.x) * sin(p.y), sin(p.x) * cos(p.y));   // slope of the height field
  vec3 bump = normalize(vec3(-slope * 1.000, 1.0));     // tangent-space normal
  vec3 N = normalize(uNormalMatrix * bump);                      // into world space
  vec3 L = normalize(vec3(-0.800, 0.6, 1.0));
  float diffuse = max(dot(N, L), 0.0);
  vec3 lit = vec3(0.86, 0.80, 0.72) * (0.12 + 0.88 * diffuse);
  vec3 color = mix(lit, bump * 0.5 + 0.5, 0.000);
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniformMatrix4fv(uModel, …) // rotation 0.35 / -0.45

A normal map changes no geometry, only each pixel’s facing; the silhouette stays flat while the lighting gets bumps.

Try it

Turn on “Show the normal map” to see the familiar blue-purple
Turn the plane edge-on: the silhouette is still straight
Move the light: the bumps follow