9. Creación de sombras en WebGL

Objetivos

Añadir sombras a una escena con iluminación

Usar una textura como buffer alternativo par guardar datos.

Pintar "dos veces"

Como se pudo ver el trabajo anterior no mostraba ningún concepto de sombras, ya que solo se aumentaba la iluminación de un fragmento de acuerdo a la luz recibida. Ahora es necesario ubicarse desde la posición de la fuente de luz y calcular la distancia que hay a todo vertice/fragmento, la cual va a ser guardada como textura. ^[1] Si un fragmento es el que esta a menor distancia de la luz, va a tener luz. Si un pixel eta mas lejos que otro respecto al rayo, va a estar coloreado de negro o de la luz ambiental (sombra).

Distancia desde la luz guardada ^[2]

Guardar una textura alternativa

¿Cómo se logra este cálculo? Antes que nada es necesario saber que vamos a inlcuir un concepto que no se ha realizado previamente: un doble renderizado. Uno de ellos va a ser un render tomando la luz como fuente de la cámara con la instrucción lookAt cálculando distancia (z-depth) hasta cada pixel. Esto va a ser el determinante si un pixel se encuentra afectado o no por la sombra.

Nuevos elementos en el vertex shader[5]

Fragment S. Resultado de tener sombra[5]

Mas adelante miramos cómo evaluan si se encuentra en una sombra o no. Más adelante se ve como se adquirio dicha matriz. Por lo pronto Uno de ellos se va a guardar como textura alternativa de un primer renderizado conteniendo los datos necsarios para pintar la sombra. Se puede escuchar extraño pero si miramos el mismo canvas es una textura [3]. Dicha textura va a renderizar el mundo desde la posición de la luz midiendo la distancia a los vertices. Dicho datos va a servir como entrada al segundo conjunto de shaders. Ambos van a ser usados en el mismo programa de renderizado. [4]

Renderizar datos de la textura como sombra

Una vez guardados los datos, dicho atributo es leído por el shader general de la escena.

See the Pen Tarea 9 Shadows by David Mayorga (@damayor) on CodePen.

El código resultante se puede ver aquí. El seguimiento del trabajo realizado se encuentra en este sprint .

Bibliografia:

1. Wikipedia.org - Shadow mapping
2. OpenGL Tutorial - Tutorial 16 : Shadow mapping
3. WebGL Fundamentals, WebGL Rendering to a Texture
4. MIT - WebGL Tutorial: Directional Shadow Mapping without extensions
5. Learn WebGL - 11.5 - Shadows