07 Superficies y luz

Estilizar: luz por bandas y contorno Fresnel

La misma esfera con otra fórmula de iluminación: brillo por bandas y bordes luminosos.

Bandas de luz3

BandasSí

Exponente del contorno3.00

Intensidad del contorno0.70

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

void main() {
  vec3 N = normalize(vNormal);
  vec3 L = normalize(vec3(-0.6, 0.8, 1.0));
  vec3 V = normalize(uCameraPos - vWorld);
  float diffuse = max(dot(N, L), 0.0);
  float toon = ceil(diffuse * 3.000) / 3.000;      // suave -> por bandas
  float level = mix(diffuse, toon, 1.000);
  float rim = pow(1.0 - max(dot(N, V), 0.0), 3.000);  // más brillante hacia el borde
  vec3 color = vec3(0.96, 0.43, 0.30) * (0.2 + 0.8 * level) + vec3(0.55, 0.85, 1.0) * rim * 0.700;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec3 N = normalize(vNormal);
  vec3 L = normalize(vec3(-0.6, 0.8, 1.0));
  vec3 V = normalize(uCameraPos - vWorld);
  float diffuse = max(dot(N, L), 0.0);
  float toon = ceil(diffuse * 3.000) / 3.000;      // suave -> por bandas
  float level = mix(diffuse, toon, 1.000);
  float rim = pow(1.0 - max(dot(N, V), 0.0), 3.000);  // más brillante hacia el borde
  vec3 color = vec3(0.96, 0.43, 0.30) * (0.2 + 0.8 * level) + vec3(0.55, 0.85, 1.0) * rim * 0.700;
  gl_FragColor = vec4(color, 1.0);
}

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

Estilizar es reescribir la fórmula de iluminación: divide el brillo en bandas para un aspecto de dibujo animado y usa 1 − dot(N, V) para una luz de contorno.

Pruébalo

Pon las bandas en 2
Aumenta la intensidad del contorno
Desactiva las bandas y compara con la iluminación suave