07 Superficies y luz

Mapas de normales: cambiar la orientación, no la forma

El plano sigue siendo plano, pero la normal de cada píxel se altera. Mueve la luz y observa.

Intensidad del relieve1.00

Densidad del relieve18.00

440

Dirección de luz X-0.80

-22

Mostrar mapa de normalesNo

Se ejecuta una vez por píxelArrastra los números o edita el código

void main() {
  vec2 p = vUv * 18.000;
  vec2 slope = vec2(cos(p.x) * sin(p.y), sin(p.x) * cos(p.y));   // pendiente del campo de alturas
  vec3 bump = normalize(vec3(-slope * 1.000, 1.0));     // normal en espacio tangente
  vec3 N = normalize(uNormalMatrix * bump);                      // al espacio del mundo
  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));   // pendiente del campo de alturas
  vec3 bump = normalize(vec3(-slope * 1.000, 1.0));     // normal en espacio tangente
  vec3 N = normalize(uNormalMatrix * bump);                      // al espacio del mundo
  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);
}

Lado JSgl.uniformMatrix4fv(uModel, …) // rotación 0.35 / -0.45

Un mapa de normales no cambia la geometría, solo la orientación de cada píxel; la silueta sigue plana mientras la iluminación crea relieves.

Pruébalo

Activa «Mostrar mapa de normales» para ver el azul violáceo habitual
Gira el plano hasta verlo de canto: la silueta sigue recta
Mueve la luz: los relieves responden