Parámetros del material y la luz
Resultado
Arrastra sobre la esfera para mover la luz, o usa los controles de acimut y elevación. Estás viendo Phong completo (ambiente + difuso + especular).
Cargando aplicación...
Preparando tu experiencia meskeIA
Sombrea una esfera 3D píxel a píxel: ajusta las componentes ambiente, difusa y especular, cambia el brillo y mueve la luz para entender cómo piensan los shaders
Ambiente, difuso y especular — cómo los shaders calculan el color de cada píxel
| Componente | ¿Qué simula? | ¿De qué depende? | ¿Cambia con la cámara? |
|---|---|---|---|
| Ambiente | Luz indirecta de relleno que llega rebotada desde todo el entorno | De un coeficiente constante (ka); no depende de ningún ángulo | No: ilumina todo por igual |
| Difusa | El brillo mate de la superficie (papel, tela, pared) | Del ángulo entre la normal y la luz: N·L (ley del coseno de Lambert) | No: solo depende de la luz y la superficie |
| Especular | El destello brillante de superficies pulidas | Del ángulo entre el rayo reflejado y la vista: (R·V) elevado al brillo | Sí: el destello se mueve si mueves la cámara o la luz |
Durante años, los juegos 3D sombrearon cada superficie con Phong o Blinn-Phong en el fragment shader: barato, en tiempo real y suficientemente realista para personajes y escenarios.
💡 Hoy se combina con mapas de normales para fingir detalle sin más geometría.
En modelado y animación, Phong fue el material por defecto durante décadas para previsualizar objetos antes de pasar a render fotorrealista. Sigue siendo útil para bocetos rápidos.
💡 El render final suele usar modelos físicos (PBR), pero Phong es perfecto para iterar.
Subiendo o bajando el coeficiente especular y el exponente de brillo se pasa de una pared de yeso (sin destello) a una bola de billar o a un metal pulido (destello pequeño e intenso).
💡 Pon ks alto y brillo alto para metal; ks bajo y brillo bajo para superficies mates.
Phong es el primer modelo que casi todo el mundo programa al aprender shaders en GLSL, HLSL, Unity o Three.js: enseña las normales y los vectores de luz, vista y reflejo.
💡 Entender Phong hace mucho más fácil el salto a modelos físicos como el PBR.
Lo propuso Bui Tuong Phong, un investigador vietnamita, en su tesis doctoral en la Universidad de Utah, publicada en 1975. Aportó dos ideas: el modelo de reflexión (las tres componentes que usas aquí) y el sombreado de Phong, que interpola las normales por toda la cara de un polígono en lugar de calcular la luz una sola vez por cara. Falleció muy joven, pero su trabajo marcó los gráficos por computador durante décadas.
💡 «Modelo de Phong» y «sombreado de Phong» son cosas distintas aunque relacionadas: uno es la fórmula de la luz, el otro es cómo se interpolan las normales.
Por la ley del coseno de Lambert: una superficie mate recibe más energía por unidad de área cuando la luz le llega de frente y menos cuando llega de lado. Ese factor es exactamente el coseno del ángulo entre la normal y la dirección de la luz, que se calcula como el producto escalar N·L (con ambos vectores normalizados). Por eso el polo iluminado de la esfera es el más brillante y se va oscureciendo hacia los bordes.
💡 Si N·L sale negativo, la cara está de espaldas a la luz: se recorta a 0 para no «iluminar en negativo».
R es la dirección en la que rebotaría el rayo de luz al chocar con la superficie, como una bola que rebota en una pared. Se calcula como R = 2·(N·L)·N − L. La componente especular es máxima cuando ese rayo reflejado apunta justo hacia tu ojo (vector de vista V), es decir cuando R·V es cercano a 1. Ahí ves el destello brillante.
💡 Como el destello depende de V, se mueve cuando giras la cámara: es la pista de que algo es brillante y no mate.
Porque elevar un coseno (un número entre 0 y 1) a una potencia alta lo «aprieta» hacia cero salvo cuando está muy cerca de 1. Con brillo bajo, valores moderados de R·V todavía aportan algo de destello, así que el reflejo es ancho y suave (plástico). Con brillo alto, solo el punto donde R·V ≈ 1 brilla, dando un destello pequeño e intenso (metal pulido o vidrio).
💡 El exponente de brillo es el control que más cambia la «sensación de material» en Phong.
El Phong original calcula el vector de reflexión R y mide R·V. Blinn-Phong (Jim Blinn, 1977) usa en su lugar el vector intermedio H entre la luz y la vista, y mide N·H. Es algo más rápido, evita un artefacto del Phong clásico cuando el ángulo supera los 90° y da destellos más realistas en ángulos rasantes. Por eso fue el modelo por defecto del pipeline fijo de OpenGL.
💡 Este visualizador usa el Phong clásico (R·V) por ser el más directo de explicar.
Sí. El renderizado basado en física (PBR) es más realista porque respeta leyes físicas como la conservación de la energía, pero parte de los mismos conceptos: normales, dirección de la luz, de la vista y reflejos. Phong los explica de la forma más intuitiva posible, así que es el mejor punto de partida antes de pasar a modelos más avanzados.
💡 Casi todos los cursos de gráficos empiezan por Phong precisamente por eso.
Para cada píxel dentro de la esfera, con sus coordenadas (x, y) relativas al centro, se calcula z = √(R² − x² − y²) y se normaliza el vector (x, y, z): esa es la normal N de la superficie en ese punto.
L es la dirección normalizada hacia la luz, V la dirección hacia la cámara (aquí (0, 0, 1)) y R = 2·(N·L)·N − L es el rayo reflejado. Todos los vectores se normalizan a longitud 1.
I = ka·ambiente + kd·max(N·L, 0)·difuso + ks·max(R·V, 0)α·especular. El término difuso depende de N·L (Lambert) y el especular de R·V elevado al exponente de brillo.
Se multiplica cada componente por el color del material o de la luz, canal a canal (R, G, B), y se recorta a [0, 255] para que el valor sea un color válido. Sin ese recorte aparecen artefactos de desbordamiento.
El color final se guarda en el ImageData del canvas y, al terminar todos los píxeles, se vuelca con putImageData. En una GPU este mismo cálculo lo hace el fragment shader en paralelo.
N, L, V y R deben tener longitud 1 antes de hacer productos escalares, o los ángulos saldrán mal y la iluminación quedará distorsionada.
Usa max(N·L, 0) y max(R·V, 0): los valores negativos significan «de espaldas a la luz» y no deben restar luz a la superficie.
Al sumar tres componentes el resultado puede pasar de 1 (o de 255). Sin recorte, los canales desbordan y aparecen colores erróneos.
Multiplica el difuso por el color del material y el especular por el color de la luz; así un metal puede reflejar un destello blanco aunque sea de color.
Mira solo ambiente, solo difuso o solo especular por separado: es la forma más rápida de encontrar por qué una superficie no se ve como esperabas.
Para sombrear píxel a píxel, rellenar el array de ImageData y volcarlo con putImageData es mucho más rápido que dibujar miles de rectángulos.