ILUMINATION!

Ya aprendimos a crear objetos, animarlos, colorcales color y textura... que es lo unico que falta? Pues en esta entrada se explciara como colocar una luz en WebGL. Para conceptos prácticos se utiliza el cubo con una textura de una imagen. en todas las caras (Este es el link de la imagen utilizada Imagen).

Este es el ejemplo del resultado del ejercicio

En primer lugar debemos entender cuales son los 3 tipos de luz que pueden incidir en nuestro objeto:

1. Luz Ambiental: Esta luz no es direccional y penetra en la escena; afecta todas las caras de la escena de igual modo
2. Luz Direccional: Esta luz es emitida hacia una dirección en especifico, por ejemplo el sol.
3. Luz Focal: Es una luz que es emitida desde un punto y se irradia a todas las direcciones, por ejemplo un bombillo.

Aparte de conocer los tipos de luz que pueden incidir en nuestro objeto, existen 2 conceptos clave a la hora de definir nuestra luz:

1. Asociar la superficie normal con cada uno de los vectores, este es un vector perpendicular a la cara. 
2. Necesitamos conocer la dirección a la cual la luz esta viajando y esta es definida por el vector director.

Ya podemos comenzar a crear nuestra iluminacion!

• En primera instancia se debe crear un buffer con las normales de cada una de las caras de nuestro objeto, recordemos que la normal es un vector perpendicular ala superficie y esto quiere decir que si la superficie esta definida en los planos X,Y entonces nuestro vector normal estará definido en el plano Z. Una vez creado este buffer se debe vincular con los demás buffers que trabajamos para poder enviar el arreglo de los vértices normales.
  
  
• Ya que estamos agregando un arreglo de vectores normales, debemos crear una matriz de normales que sera utilizada para transformar las normales cuando cambien de orientación ya que el cubo se encuentra girando.
  
  
  
• 
  
  Una vez declaradas las normales, debemos actualizar el vertex shader para agregar sombreado en cada vértice basándonos en la luz ambiental y en la direccional, esto se logra agregando un vec3 que representa la luz y 3 vec3 de alta precisión representando cada uno de los tipos de luces descritos arriba. Finalmente mediante operaciones matriciales aplicamos la luz la cual sera la combinación de los 3 vectores de cada tipo de luz.
  
  
  
  
• Asi como actualizamos el vertex shader tambipen toca actualizar el fragment shader. Esto se hace con el fin de que tome en cuenta los valores de luz agregados anteriormente.
  
  
  
• Finalmente buscamos el atributo aVertexNormal y la matriz uNormalMatrix en el programInfo
  

El código de este ejercicio lo podrá revisar en el siguiente Link a CodePen