Objetivos Añadir distintos tipos de luces en una escena de WebGL
Introducción de iluminación
La creación de luces es un proceso más complicado que tiene detras varios conceptos matemáticos. Principalmente ahora es necesario que cada figura tenga albergado el vector normal de cada superficie como atributo. ¿Por qué? Con la dirección de un rayo de luz respecto a la superficie, ésta puede reflejar más o menos luz de acuerdo a la orientación que se encuentre.
 |
| Vectores Luz, Reflexión, Normal y Vista |
Además es necesario tener
una matriz de normales compuesta por la matriz ModelView (1) invertida y (2) transpuesta que permite interpolar los vectores normales de acuerdo a la orientación actual de cada superficie de acuerdo con la fuente de luz.
[1]
Hay que tener en cuentra 3 componentes:
Luz ambiental Color o brillo que tiene por defecto cada figura sin necesidad de luz. (Lo poco que se ve a oscuras)
Luz especular: El rayo que es apuntado con toda la fuerza en la superficie. La parte más brillante que se ve en el solido. Tambien depende de la ubicación del observador.
La luz difusa:El resto de luz que viene reflejado del rayo pero que dio en otros comopnentes como el el piso, las paredes, el resto de la figura u otros obejtos mismos. Tambíen puede entenderse como el degradado entre la luz especular y ambiental.
Tipos de luces
Luz direccional la luz (o luces) se componen de rayos paralelos en una dirección específica. Entonces solo va a ser cambiada de acuerdo a la orientación de la superficie (y el vector normal) por el ángulo que maneja con la dirección del rayo.
Luz puntual La fuente de luz es ahora un punto ubicado en el espacio que lanza rayos para todo lado. A medida que se esté más lejos de este punto, menos intensidad de luz va a recibir. En una superficie por ejemplo ya se va a notar un degradado al alejarse del punto.
Spotlight Similar a la luz puntual pero tiene una dirección y ángulo específido en donde va a generar efecto. Fuera de éste no va a generar ningun cambio de iluminación.
Luces en WebGL ¿Qué cambia?
Principalmente ¿qué hace una luz? Solo aumentar el brillo de un pixel! Y el brillo no es más sino aumentar de igual manera los componentes RGB de éste. En ese caso todo cálculo y asignación de color se realiza en los shaders, trabajo casi no realizado hasta ahora. Veamoslo a verlo con un ejemplo generando una luz direccional.
 |
| Vertex shader de luz direccional |
 |
| Fragment shader de luz direccional |
uDirectionalVector - la dirección desde donde van a venir todos los rayos de luz.
direccional - proporción de la luz recibida de acuerdo a las direcciones entre la normal y el rayo
vLighting - valores RGB del pixel con el componente de luz ambiental y el de luz recibido.
Como es un atributo varying va a ser interpolado a cada pixel en el fragment shader afectando el color que tenía la textura volviendolo más oscuro o claro de acuerdo a direccional. No hay que olvidar pasar cada atributo y variable uniforme nuevo desde la CPU al GPU.
See the Pen Tarea 8 Lights cilinder by David Mayorga (@damayor) on CodePen.
Nota: Para que las luces se vean más continuas, es mejor realizar los cálculos en el fragment shader pasandole desde el vertex shader las normales interpoladas. Así cada pixel de la superficie va a tener su propio vector normal, determinando un color propio. De lo contrario toda la primitva tendría el mismo color por curlpa de las normales de sus vértices.
En el caso de una luz puntual, el
directionalVector es remplazado por la ubicación de la luz puntual
uLightPosition. En ese caso cada vértice o pixel va a estar afectado por su normal y la posición de la fuente de luz. La diferencia de éstos vectores es como se calcula la cantidad de luz recibida.
 |
| Vertex Shader de luz puntual |
 |
| Fragment Shader de luz puntual |
Reto: Todavía existe una restricción de usar más de un shader específico. Por eso la fuente de luz tambien es afectada por la ubicación de la fuente de luz. En este caso el centro de la esfera.
See the Pen Tarea 8 Lights cilinder by David Mayorga (@damayor) on CodePen.
Varias luces
Si ya se tienen distintas luces hechas por separado, el único cambio necesario es sumar cada componente
directional de cada luz distinta que llega a un pixel.
See the Pen Tarea 8 luces unidas by David Mayorga (@damayor) on CodePen.
El código de aquel resultado se puede ver
aquí. El seguimiento del trabajo realizado se encuentra en este
sprint .
Comentarios
Publicar un comentario