CAPÍTULO VI

# Modelos de iluminación y sombreado

"In computer graphics, a shading function is defined as a function which yields the intensity value of each point on the body of the object from the characteristics of the light source, the object, and the position of the observer." - Bui Tuong Phong (1975).

La interacción entre la luz y una superficie es una proceso físico bastante complejo. La luz está compuesta por fotones, los cuales son un tipo de partícula elemental, que pueden ser pensados como paquetes muy pequeños de energía que se mueven a una velocidad constante y no poseen masa.

En esta representación, la luz puede pensarse como un flujo de muchos paquetes de energía, los cuales son propagados de un lugar a otro en forma de rayo. Dichos rayos solo pueden ser redirigidos por su interacción con la materia, y cada vez que éstos chocan contra una superficie un porcentaje de fotones puede ser absorbido, reflejado o transmitido dependiendo de las propiedades reflectivas de la superficie y de la luz misma. En la se pueden apreciar dichos efectos. De modo que este proceso continua repitiéndose, es decir, cierta cantidad de energía sigue viajando en el entorno, hasta que toda la energía es transferida, ver .

Interacciones básicas entre la luz y una superficie.
Reflexiones de luz sobre un conjunto de superficies.

En el mundo real, las superficies reciben luz de otras superficies incluso si éstas no producen luz o no son iluminadas directamente. Por lo que podemos clasificar a las fuentes de luz en dos tipos: como emisor de luz o fuente de luz primaria, las cuales producen la luz que emiten, o bien, un reflector de luz o fuente secundaria, es decir, aquellas que reflejan la luz que producen otras fuentes.

Por ejemplo, pensemos en la iluminación de un cuarto durante el día, donde la luz del sol solo entra por una ventana. Si bien, algunas partes del cuarto serán iluminadas directamente por la luz del sol, hay otras partes como el techo, que no. Sin embargo, éstas partes se ven iluminadas gracias a las reflexiones de luz generadas por aquellas que sí son iluminadas, como el piso y las paredes, y que eventualmente alcanzan a estas partes no iluminadas.

Iluminación global. Cuarto con una ventana. Imagen generada con blender.

Esta dispersión de luz recursiva entre las superficies explica los efectos sutíles del sombreado, tales como las sombras producidas entre objetos adyacentes, la luz indirecta que es la cantidad de luz recibida a través de las reflexiones de luz de objetos cercanos, o bien, el color bleeding que es un efecto particular de la luz indirecta, el cual describe el modo en que el color de un objeto es influenciado por el color de otros objetos que lo rodean. En la puedes observar estos efectos. A este tipo de iluminación se le conoce como Iluminación global.

Efectos de iluminación global: color bleeding y sombreado. Imagen generada con blender.

Y ya que la luz viaja demasiado rápido (cerca de $3\times10^8$m/sec) no importa el tamaño de la escena, la luz tardará un tiempo insignificante en propagarse por todo el entorno.

Sin embargo, reproducir la iluminación global en una escena virtual resulta ser una tarea bastante compleja y computacionalmente costosa, pues requiere demasiado tiempo de cómputo para calcular todas las posibles interacciones de luz entre los objetos de una escena.

Por lo que para facilitar los cálculos nos enfocaremos en modelos de Iluminación local, en donde evaluaremos únicamente las contribuciones de las fuentes de luz primarias sobre un punto de la superficie, con las cuales determinaremos el color del punto, considerando siempre que la fuente de luz y la superficie son visibles. Por lo que si una superficie debería generar una sombra sobre otra, ésta no se vería, teniendo un resultado menos realista. Por otro lado, el color que se le asignará al punto dependerá tanto de las propiedades de las fuentes de luz que iluminen a la superficie, como de las pro-

piedades del material que compone la superficie misma, y de ser el caso de la posición del observador. Esto con el fin de entender los conceptos básicos de iluminación tales como modelos de iluminación y tipos de fuentes de luz.

Nos referiremos a un punto en la superficie como una pequeña area en alguna cara que componga al objeto que queremos colorear, siendo más específicos, a un fragmento. Por lo que la técnica de sombreado que usaremos en la implementación de los interactivos a lo largo del capítulo será la técnica de Phong shading, siendo una de las más populares.

Ahora bien, como vimos anteriormente, en el Sistema de visión humano, la luz también puede comportarse como una onda y solo podemos percibir aquella que esté dentro del espectro visible. La luz visible puede estar compuesta por una única longitud de onda (monocromática) o varias longitudes de onda (policromática). De modo que cuando un objeto es iluminado por una fuente de luz, el color que percibimos que tiene es el resultado de la luz que está reflejando o longitudes de onda que no absorbió.

Por ejemplo, si una luz blanca (la cual contiene todos los colores o longitudes de onda del espectro visible) choca contra un objeto y éste se ve de un color azul turquesa, quiere decir que ha absorbido todos los colores, menos los azules y verdes (en su mayoría), que son los que componen al color que refleja.

Reflexión y absorción de la luz en una superficie.

Entonces para crear una imagen realista de nuestra escena virtual en 3D necesitamos determinar las longitudes de onda de luz que el objeto refleja.

Afortunadamente, con el modelo RGB podemos aproximarnos a cada color del espectro visible por medio de una combinación lineal de tres colores primarios $(R,G,B)$. Los modelos de iluminación que presentaremos utilizarán este modelo de color, evaluando cada componente en un rango de $0$ a $1$, con los cuales representaremos la composición espectral de la luz, es decir, el color que percibimos, así como su intensidad. Esto definiendo la intensidad o cantidad de luz que reflejan de cada canal $R$, $G$ y $B$.

Entonces, podemos modelar esta interacción de la siguiente manera. Consideremos que tenemos una fuente de luz blanca que ilumina a un objeto, y de acuerdo a sus propiedades éste refleja un color verde bosque, entonces el color que veríamos estaría dado por $$ {\color{#008b8b}\underbrace{\color{black}(1.0, 1.0, 1.0)}_{\color{black} \text{luz blanca}}} {\color{#008b8b}\underbrace{\color{black}(0.121, 0.498, 0.121)}_{\color{black} \text{color del objeto}}} = {\color{#008b8b}\underbrace{\color{black}(0.121, 0.498, 0.121)}_{\color{black} \text{color reflejado}}}$$ definiendo así al color reflejado como la cantidad o intensidad de luz que cada componente refleja de la luz que recibe.

Por otro lado, si utilizáramos luz monocromática de color rojo entonces solo el componente rojo de la luz sería reflejado, por lo que percibiríamos a nuestro objeto de un color casi negro, es decir, sin color, a excepción de un ligero tono rojo $$ {\color{#008b8b}\underbrace{\color{black}(1.0, 0.0, 0.0)}_{\color{black} \text{luz roja}}} {\color{#008b8b}\underbrace{\color{black}(0.121, 0.498, 0.121)}_{\color{black} \text{color del objeto}}} = {\color{#008b8b}\underbrace{\color{black}(0.121, 0.0, 0.0)}_{\color{black} \text{color reflejado}}}$$

Sin embargo, si repetimos este mismo cálculo para todos los puntos del objeto tendremos como resultado un objeto con un color uniforme y plano, como se puede apreciar en la , por lo que necesitarémos determinar el color que deberá tener el objeto en cada uno de sus puntos.

Durante este capítulo se describirán los cálculos usados para iluminar y sombrear una superficie utilizando iluminación local, obteniendo así una aproximación aceptable de cómo debería lucir un objeto en el mundo real.

Se invita al lector a modificar el color de la fuente de luz y el color que refleja el objeto.

## Reflexión ambiental

La reflexión o luz ambiental de una escena es la luz de baja intensidad que surge de los numerosos reflejos de luz de todas las superficies cercanas en el entorno, también conocida como luz indirecta.

La reflexión ambiental nos proporciona una aproximación de la luminosidad de la escena en general, reemplazando la compleja tarea de calcular la cantidad de luz que recibe una superficie dadas las reflexiones de otros objetos dentro de ésta, ya que a pesar de tener una escena muy poco iluminada, los objetos casi nunca son completamente negros. Y dependiendo del material del objeto éste podrá absorber y reflejar mayor o menor cantidad de luz ambiental.

Para cada punto $P$ en la superficie, la intensidad de luz ambiental reflejada puede ser modelada de la siguiente forma. Sea $\mathbf{L}_A$ la cantidad de luz producida por la luz incidente, y $k_A$ el coeficiente de reflexión ambiental característico del material, con $ 0 \leq k_A \leq 1$, entonces $$ \begin{aligned} \mathbf{I}_P =& \kern{.4em} k_A \mathbf{L}_A \\=& \kern{.4em} k_A (L_{A,R}, L_{A,G}, L_{A,B}) \end{aligned}$$

Agregando una cierta cantidad de luz que parece provenir de todas las direcciones con la misma intensidad, iluminando cada parte de un objeto de manera uniforme. Sin embargo, aunque puede ser un efecto valioso debe usarse cuidadosamente, ya que al aumentar la luminosidad de todo lo que hay en la escena, puede llegar a desvanecer algunos detalles como las sombras.

Reflexión ambiental. Se invita a modificar el valor de $k_A$ y el color de $L_A$. Puedes cambiar el modelo y mover la cámara con el ratón o dedo.

## Reflexión difusa (superficies de Lambert)

Las superficies puramente difusas son aquellas que reflejan la luz uniformemente en todas las direcciones, por lo que tendrá la misma apariencia sin importar la posición del observador.

La reflexión difusa es característica de superficies de materiales rugosos, mates y sin brillo. Por ejemplo, si miras fijamente a un punto determinado de una hoja de papel y te mueves, éste seguirá viéndose del mismo color. Pues si ampliáramos una sección de una superficie difusa veríamos algo aparecido a la , donde los rayos de la luz incidente son dispersados por igual en direcciones aleatorias.

Superficie difusa (a nivel microscópico). Reflexión de la luz en direcciones aleatorias.

Este tipo de materiales suelen ser modelados usando la Ley del Coseno de Lambert, por esta razón es que también son llamadas como superficies de Lambert. La ley del coseno nos dice que la cantidad de luz reflejada en una pequeña área o punto de una superficie depende del ángulo formado entre el vector normal $\mathbf{N}$ en el punto y la dirección de la luz incidente $\mathbf{L}$, es decir, el vector que va del punto a la fuente de luz.

Consideremos una pequeña área $A$ de un superficie plana, la cual es iluminada por un haz de luz, véase la . De modo que cuando el haz de luz es perpendicular a $A$ todos los fotones contenidos en el haz chocan con $A$, permitiendo reflejar la mayor cantidad de fotones. Y como podemos notar en el interactivo, al incrementar el ángulo de inclinación $\theta$ formado entre el haz de luz y la normal de $A$ la cantidad de fotones que cae en $A$ se reduce, pues la sección transversal que el haz de luz cubre se vuelve más grande, por lo que la luz es esparcida y una menor cantidad de fonotes o energía ilumina a $A$. Por otro lado, si el haz de luz es paralelo a la superficie, $A$ no es iluminada, pues no recibe nada de energía.

La figura de la izquierda muestra el área $A$ de la superficie que impacta el haz de luz, la figura del centro se observa como el haz impacta la superficie con cierto ángulo y la de la derecha muestra el cálculo de dicho ángulo.

De estas observaciones podemos concluir que $A$ recibe la mayor cantidad de energía cuando el haz de luz es perpendicular a la superficie, en otras palabras, cuando $\mathbf{L}$ es paralelo a $\mathbf{N}$, y esta cantidad va disminuyendo conforme el ángulo $\theta$ incrementa, volviéndose más oscura cada vez. Finalmente cuando $\mathbf{L}$ es perpendicular a $\mathbf{N}$ el área $A$ no es iluminada, por lo que no refleja energía. Entonces podemos decir que la cantidad de luz que se refleja por el área es inversamente proporcional a el coseno de $\theta$, esto es $A/\cos\theta$.

Iluminación de un área de una superficie por un haz de luz. Se invita al lector a rotar el haz de luz representado por el cilindro amarillo y observar el área de la superficie que llega a impactar. Cuando el haz de luz es perpendicular a la superficie, una área más pequeña recibe todos los fotones del haz de luz. Conforme rotamos el haz notamos que el área que cubre es mayor, distribuyendo la cantidad de fotones por la superficie, hasta ser paralelo y no transmitir energía.

El valor $\cos\theta$ puede obtenerse con el producto punto de los vectores normalizados $\mathbf{N}$ y $\mathbf{L}$. Y como el producto punto puede ser negativo cuando la superficie apunta en dirección contraria a la luz, es decir, la fuente de luz se encuentra atrás de la cara frontal de la superficie, como se muestra en la , el valor del producto punto se suele limitar a $[0,1]$, ya que de otro modo tendríamos "luz negativa".

Superficie apuntando en dirección contraria a la fuente luz.

Este modelo es conocido como el Modelo de Lambert debido a su dependencia a la ley de Lambert, el cual se define a continuación.

Para cada punto $P$ en la superficie, podemos calcular la intensidad de luz difusa reflejada en $P$ como $$ \begin{aligned} \mathbf{I}_P =& \kern{.4em} k_D \mathbf{L}_D \text{max}(\cos\theta,0) \\ =& \kern{.4em} k_D \mathbf{L}_D \text{max}((\mathbf{N} \cdot \mathbf{L}),0) \end{aligned}$$ con $\mathbf{N}$ y $\mathbf{L}$ normalizados. Donde $\mathbf{L}_D$ es la cantidad de luz producida por la luz incidente, y $k_D$ el coeficiente de reflexión difusa de la superficie que nos indica qué tan difusa es, siendo $0 \leq k_D \leq 1$.

Reflexión difusa. Se invita a modificar el valor de $k_d$ y el color de $L_S$, así como los valores de la posición de la fuente de luz. Puedes cambiar el modelo y mover la cámara con el ratón o dedo.

## Reflexión especular

La reflexión especular produce reflejos brillantes, se presenta en superficies brillantes, pulidas o satinadas, como metales y vidrios. La reflexión especular a diferencia de la reflexión difusa y ambiental depende tanto de la dirección de la luz incidente como de la posición del observador.

A nivel microscópico una superficie especular es muy lisa, por ello los rayos de luz rebotan como un espejo ideal, como se aprecia en la . Y mientras más lisa o menos irregularidades tenga la superficie, más se asemeja a un espejo y se le conoce como superficie especular perfecta.

Superficie especular (a nivel microscópico).

La muestra una reflexión especular perfecta (izquierda), en este caso un material puramente especular refleja toda la luz incidente con exactamente el mismo ángulo de incidencia, a este vector espejo se le conoce también como vector de reflexión perfecta. Por otro lado, cuando se tiene una superficie especular no ideal (derecha), una parte de la energía recibida se refleja a lo largo del vector de reflexión, y otra cantidad se refleja de manera difusa al rededor del vector espejo, el cual tiene como efecto el difuminar la luz reflejada sobre la superficie, actuando como un espejo roto.

Reflexión especular ideal o perfecta (izquierda). Reflexión especular no ideal o espejo rugoso (derecha).

Sea $\mathbf{N}$ el vector normal y $\mathbf{L}$ la dirección de la luz incidente, y ambos normalizados. Podemos calcular el vector de reflexión $\mathbf{R}$ como se muestra en la

Cálculo del vector espejo. El vector $\mathbf{L}$ puede ser modificado arrastrando la punta de la flecha en el primer paso. Da clic en el botón Sig o Prev para ver el paso siguiente o previo.

Entonces podemos expresar al vector $\mathbf{R}$ como $$ \mathbf{R} = 2 \mathbf{N} (\mathbf{N} \cdot \mathbf{L})-\mathbf{L}$$

Y si asumimos que el observador está viendo hacia la superficie en la misma dirección que el vector espejo $\mathbf{R}$, ésta podrá reflejar un brillo más tenue o más fuerte dependiendo del material de la superficie. Si tenemos una superficie no ideal entonces es claro que se reflejá un brillo más tenue ya que algunos de los rayos serán dispersados en direcciones aleatorias, mientras que en una superficie perfecta, todos los rayos serán reflejados hacia el ojo u observador.

Ahora bien, si el observador estuviera posicionado diferente, es decir, el vector de vista o view direction $\mathbf{V}$ que va del punto en la superficie a la cámara es distinto al vector $\mathbf{R}$, ver . La cantidad de energía que se refleja, o mejor dicho, que nuestro observador ve en un punto, decrementa a medida que el ángulo $\phi$ formado entre $\mathbf{R}$ y $\mathbf{V}$ se incrementa. Esto es, ya que a medida en que $\phi$ se incrementa, el número de rayos que son reflejados en la misma dirección de $\mathbf{V}$ disminuye.

Para calcular el vector $\mathbf{V}$ que va de la posición del fragmento a la cámara basta restar la posición de la cámara con la posición del fragmento. Y si realizamos los cálculos desde el espacio de la cámara, como discutimos previamente en el Capítulo 5, ésta se encontraría posicionada en el origen. Por lo que considerando a $P$ como el punto en la superficie, tendríamos que $\mathbf{V} = -P.$

Reflexión especular del Modelo de Phong. La intensidad de la reflexión especular está dada en función del ángulo formado entre el vector $\mathbf{V}$ y $\mathbf{R}$.

Phong observó que este brillo podía ser simulado de la siguiente forma. Tomando en consideración que los vectores $\mathbf{V}$ y $\mathbf{R}$ son vectores unitarios, así como las características de las propiedades de la superficie y de la luz. Para cada punto $P$ en el objeto podemos calcular la intensidad de la luz especular recibida por el ojo como $$ \begin{aligned} \mathbf{I}_P =& \kern{.4em} k_S \mathbf{L}_S \text{max}(\cos(\phi),0)^\alpha \\=& \kern{.4em} k_S \mathbf{L}_S \text{max}((\mathbf{R} \cdot \mathbf{V}),0)^\alpha \end{aligned}$$

siendo $\mathbf{L}_S$ la cantidad de luz producida por la luz incidente, $k_S$ la fracción de la luz especular reflejada del material, con $0 \leq k_S \leq 1,$ con $\mathbf{R}$ y $\mathbf{V}$ normalizados. El valor del producto punto es utilizado para simular la reflexión especular y el exponente especular $\alpha$ es un número positivo que controla el tamaño y definición del brillo, el cual es ajustado empíricamente de acuerdo a las propiedades reflexivas del material del objeto.

A este modelo se le conoce como Modelo especular de Phong, ya que fue el que desarrolló para su modelo de iluminación, del cual hablaremos un poco más adelante.

Como se puede observar en la , a medida que el componente especular se va haciendo más grande la curva se va estrechando al rededor del eje $y$. De modo que un valor pequeño para $\alpha$ produce un brillo mate que se desvanece a una distancia relativamente larga, mientras que un valor grande genera un brillo más definido y pequeño que se desvanece tan rápido como los vectores $\mathbf{R}$ y $\mathbf{V}$ divergen.

Gráfica de la función $\cos\phi^\alpha$ del brillo especular de Phong.
Aunado a ello, vale la pena verificar sí $( (\mathbf{N} \cdot \mathbf{L}) > 0)$ antes de calcular la reflexión especular, ya que de manera similar a la reflexión difusa, la fuente de luz estaría detrás de la superficie y no debería presentar un brillo especular.
Reflexión especular. Se invita al lector a modificar el valor del exponente especular $\alpha$, con lo cual podemos simular varias cantidades de luz dispersada al rededor del vector de vista. Así como también observar la dependencia de la posición del observador moviendo la posición de la cámara con el ratón o dedo.

## Modelo de iluminación de Phong

El Modelo de iluminación de Phong es uno de los modelos de iluminación local más utilizados el cual fue desarrollado de forma empírica por Bui Tuong Phong en 1975.

En el mundo real la mayoría de las superficies no suelen ser puramente difusas o especulares, más bien, suelen estar compuestas por ambas propiedades. Por lo que, la luz recibida por el observador es producida una parte por la reflexión difusa y otra parte por la reflexión especular de la luz incidente. Tomando en consideración esto, Phong describió a la luz reflejada por un punto $P$ en la superficie de un objeto como $$ \mathbf{I}_P = {\color{#008b8b}\underbrace{\color{black}k_A \mathbf{L}_{\text{A}}}_{\color{black} \text{Reflexión ambiental}}} + {\color{#008b8b}\underbrace{\color{black} k_D \mathbf{L}_D \text{max}((\mathbf{N} \cdot \mathbf{L}),0)}_{\color{black} \text{Reflexión difusa}}} + {\color{#008b8b}\underbrace{\color{black} k_S \mathbf{L}_S \text{max}((\mathbf{R} \cdot \mathbf{V}),0)^\alpha}_{\color{black} \text{Reflexión especular}}} $$ donde se incorpora cada uno de los modelos de reflexión que hemos visto, permitiendo modelar cada una de las propiedades reflexivas del material.

Y en el caso de tener múltiples fuentes de luz, la reflexión de cada una de estas luces en $P$ es acumulada para así obtener la cantidad total de luz reflejada. Esto es $$ \mathbf{I}_P = \kern{.4em} k_A L_A + \sum_{i = 0}^n (k_D\text{max}((\mathbf{N} \cdot \mathbf{L}_{D_i}),0)) + k_S\text{max}((\mathbf{R}_i \cdot \mathbf{V}),0)^\alpha $$ siendo $n$ el número de luces.

Modelo de iluminación de Phong. Se invita a modificar cada uno de los componentes del modelo, así como cambiar la posición de la luz y el modelo a utilizar. Puedes mover la posición de la cámara con el ratón o dedo.

## Modelo de iluminación Blinn-Phong

El Modelo de iluminación de Blinn-Phong es una variación del modelo de Phong propuesta por James Blinn. En esta adaptación se buscó simplificar el cálculo de la reflexión especular, ya que necesitaba calcular el vector de reflexión $\mathbf{R}$ para cada punto de la superficie. En su lugar, se propone calcular el vector intermedio o half vector $\mathbf{H}$ para determinar la intensidad del brillo especular, el cual es el vector que se encuentra entre el vector de vista $\mathbf{V}$ y el de la luz incidente $\mathbf{L}$, como se muestra en la .

Modelo de ilumación de Blinn-Phong..

Entonces en el modelo de Phong la reflexión especular ahora se calcularía en función del ángulo formado entre el vector intermedio y la normal del punto como $$ \begin{aligned} \mathbf{I}_P =& \kern{.4em} k_S \mathbf{L}_S \text{max}(\cos\phi), 0)^\alpha\\ =& \kern{.4em} k_S \mathbf{L}_S \text{max}((\mathbf{N} \cdot \mathbf{H}),0)^\alpha \\\\ \text{donde } \mathbf{H} =& \kern{.4em} \frac{\mathbf{L} + \mathbf{V}}{2} \end{aligned} $$ Nótese que todos los vectores mencionados están normalizados.

De manera similar, el ángulo $\phi$ nos da una aproximación de qué tan cerca se encuentra el vector de vista del vector de reflexión o espejo. De modo que el brillo especular es más intenso a media que $\mathbf{H}$ se acerca al vector normal $\mathbf{N}$.

Sin embargo, como se puede observar en la , el ángulo $\phi$ suele ser más pequeño que el ángulo formado entre $\mathbf{R}$ y $\mathbf{V}$ del modelo original, produciendo diferentes resultado para $\alpha$. Esta diferencia la podemos observar en la .

Este modelo nos permite optimizar los cálculos, y es por ello que se ha vuelto el modelo más utilizado en gráficos 3D de tiempo real.

Comparación entre el Modelo de iluminación de Phong y Blinn-Phong. Se invita al lector a modificar el valor del exponente especular y observar la diferencia a pesar de que todas las características del objeto y la luz son las mismas.

## Materiales

Como ya hemos mencionado la intensidad de la luz reflejada por una superficie depende tanto de las propiedades de la luz incidente como de las propiedades reflexivas del objeto.

Veamos algunos ejemplos. En el mundo real, si un material es dieléctrico, es decir, no es conductor eléctrico, y presenta un brillo especular como la madera pulida, la porcelana, el plástico, etc, además de reflejar el color que percibimos del objeto, se refleja un brillo especular del mismo color que emite la luz incidente. Por otro lado, si se trata de un material metálico, el brillo especular

reflejado será del color del metal mismo, por ejemplo el oro refleja un brillo especular de color amarillo.

Utilizando el modelo de iluminación de Phong podemos modelar estas propiedades. Podemos especificar las propiedades reflexivas del material con los coeficientes de reflexión $k_A, k_D$ y $k_S$, los cuales representaremos como tripletas $(R,G,B)$ para definir así las intensidades de cada uno de los canales de color que refleja cada componente, y del mismo modo para las propiedades de la luz incidente con $L_A, L,D$ y $L_S$. Entonces el resultado del color reflejado en el punto sería representando como $$ \begin{aligned} \mathbf{I}_P = \begin{bmatrix} R \\ G \\ B \end{bmatrix} =& \begin{bmatrix} k_{A_R} L_{A_R} \\ k_{A_G} L_{A_G} \\ k_{A_B} L_{A_B} \end{bmatrix} + \begin{bmatrix} k_{D_R} L_{D_R} \\ k_{D_G} L_{D_G} \\ k_{D_B} L_{D_B} \end{bmatrix} \text{max}((\mathbf{N} \cdot \mathbf{L}),0) + \\ \\ & \begin{bmatrix} k_{S_R} L_{S_R} \\ k_{S_G} L_{S_G} \\ k_{S_B} L_{S_B} \end{bmatrix} \text{max}((\mathbf{R} \cdot \mathbf{V}),0)^\alpha \end{aligned} $$

Podemos definir entonces las características del material de una superficie como sigue

                Material {
                  Vector3 ambiental;      //k_A
                  Vector3 difuso;         //k_D
                  Vector3 especular;      //k_S
                  float brillo_especular;
                }

donde brillo_especular hace referencia al exponente especular $\alpha$.

Análogamente podemos empezar a definir las propiedades de una luz como sigue

                Luz {
                  Vector3 posición;
                  Vector3 ambiental;  //L_A
                  Vector3 difuso;     //L_D
                  Vector3 especular;  //L_S
                }

obteniendo así la dirección de la luz incidente $\mathbf{L}$ como el vector que va de la posición de la fuente de luz a un punto de la superficie. En el siguiente subtema veremos otras formas de modelar a una fuente de luz.

Por otro lado, la intensidad del componente ambiental de la luz $L_A$ suele ser un color bajo o tenue ya que no queremos que sea el que predomine en el objeto, ni perder detalles. La intensidad difusa $L_A$ suele ser exactamente el color de la luz o un color brillante como el blanco para reflejar así el color base que percibimos del objeto. Por último el color especular $L_S$ suele ser el blanco en el caso de materiales no metálicos como mencionamos al principio o del color del metal.

Puedes cambiar los modelos y materiales a aplicar, así como mover la posición de la cámara con el ratón o dedo. Da clic en "personalizar" para modificar los valores de reflexión del material.

En esta lista encontrarás la descripción de distintos materiales reales para poder simularlos.

## Fuentes de luz

Recordemos que por fuente de luz nos referimos a un punto en el espacio 3D que produce o emite energía. Hasta ahora hemos modelado a las fuentes de luz únicamente por su posición, a partir de la cual se emiten rayos de luz en todas las direcciones con una misma intensidad, lo cual no es muy realista.

En el mundo real existe una variedad de fuentes de luz, con diferentes formas, tamaños y colores. Por ejemplo una lámpara de la calle, una vela, el sol o luces de neón. A continuación veremos cómo modelar algunas de las fuentes de luz más utilizadas.

### Luz puntual

Una fuente de luz puntual es un punto en el espacio que emite energía en todas las direcciones dentro de un campo esférico y su intensidad se debilita con la distancia. Un ejemplo de este tipo de fuente de luz es un foco o una vela.

Luz puntual o de posición.

La intensidad de la luz recibida en un punto de una superficie disminuye de acuerdo a la Ley del cuadrado inverso, esto es, su intensidad es inversamente proporcional al cuadrado de la distancia $d$ que hay entre la posición de la luz y el punto. Aunque esto es matemáticamente correcto en el mundo real, los resultados no suelen ser muy naturales ya que la intensidad se desvanece rápidamente a medida que la distancia se incrementa.

Por ello suele ser reemplazado por el siguiente factor $$ \text{atenuación} = \frac{1}{ad^2 + bd + c} $$ donde los coeficientes $a$, $b$ y $c$ son constantes características de la fuente de luz que nos permiten suavizar y controlar mejor la iluminación como se puede observar en la . La constante $c$ suele ser $1$ para mantener el denominador mayor a $1$. Mientras que el coeficiente $b$ determina el comportamiento lineal de la curva de la atenuación, y $a$ el comportamiento cuadrático.

Modifique los coeficientes de atenuación y observe cómo afecta la curva.

Por lo tanto, agregando este factor de atenuación al modelo de Phong tenemos $$ \mathbf{I}_P = k_A \mathbf{L}_{\text{A}} + \frac{1}{ad^2 + bd + c} (k_D \mathbf{L}_D \text{max}((\mathbf{N} \cdot \mathbf{L}),0) + k_S \mathbf{L}_S \text{max}((\mathbf{R} \cdot \mathbf{V}),0)^\alpha) $$

Entonces la luz puntual puede ser modelada como sigue

              Luz_puntual {
                Vector3 posición;
                Vector3 ambiental;  //L_A
                Vector3 difuso;     //L_D
                Vector3 especular;  //L_S

                //Coeficientes de atenuación
                float cuadrático;  //a
                float lineal;      //b
                float constante;   //c
              }

Modelos iluminados por una fuente de luz puntual. Modifica la posición de la fuente de luz y los coeficientes del factor de atenuación y observa los resultados. Puedes mover la cámara con el ratón o dedo, así como alejarte o acercarte con la rueda del ratón.

### Luz direccional

Una fuente de luz direccional también llamada como fuente de luz infinita es un caso especial de luz puntual. Este tipo de luz es utilizada para modelar fuentes de luz que se encuentran a una distancia muy lejana como el sol. Como se muestra en la , visto desde una posición cualquiera en la Tierra los rayos emitidos por el sol son paralelos y su intensidad es prácticamente la misma, es decir, no disminuye con la distancia como en la luz puntual.

El sol como fuente de luz direccional. El ángulo de diferencia entre los polos de la Tierra es de 0.005 grados.
Luz direccional. Rayos de luz paralelos.

Como resultado los rayos de luz llegan en una misma dirección de manera uniforme, es decir, que las superficies con la misma orientación reciben la misma cantidad de luz independientemente de su posición. Por lo que la luz direccional puede ser modelada únicamente por sus propiedades de reflexión y su vector de dirección unitario

                Luz_direccional {
                  Vector3 dirección;

                  Vector3 ambiental;  //L_A
                  Vector3 difuso;     //L_D
                  Vector3 especular;  //L_S
                }

Modelos iluminados por una fuente de luz direccional. Modifica la dirección de la luz. Puedes mover la cámara con el ratón o dedo, así como alejarte o acercarte con la rueda del ratón.

### Luz de reflector

Una fuente de luz de reflector o spotlight es similar a una fuente de luz puntual solo que sus rayos apuntan hacia una dirección específica. Un buen ejemplo de este tipo de fuente de luz son los reflectores de un teatro o un foco envuelto por una lámpara.

Para definir un spotlight necesitamos especificar una posición $P$ en el espacio, que será de donde emitirá energía; una dirección $\mathbf{D}$, que será a la que apunte y a su vez el eje del cono, y un ángulo de corte $\theta$, que es el ángulo formado entre el eje del cono y un rayo a lo largo del borde del cono, veáse . El ángulo de corte define el área a iluminar, fuera de ésta la intensidad de luz es igual a cero. De modo que aquellos puntos que no se encuentren dentro del cono no serán iluminados, limitando así el rango de rayos emitidos por la fuente de luz.

Cono formado por una luz de reflector.

Considerando entonces al punto $Q$ sobre un objeto de la escena, podemos verificar si éste debe ser iluminado o no por el reflector de la siguiente forma. Sea $\gamma$ el ángulo formado entre la dirección de la luz $\mathbf{D}$ y el vector $\mathbf{L}$, que en este caso para facilitar la visualización del cálculo será definido como el vector que va de la fuente de luz a la superficie. Entonces podemos determinar que $Q$ está dentro del cono si $\gamma$ es menor a $\theta$, por lo que debe ser iluminado, en otro caso se encuentra fuera del cono y no debe ser iluminado, como se muestra en la .

Otra característica importante de este tipo de luz es la atenuación. La intensidad de la luz es atenuada con respecto a la distancia al igual que con una fuente de luz puntual, pero también es atenuada por otro factor, conocido como efecto spotlight.

Determinación de un punto $Q$ dentro de un reflector. Para iluminar a $Q$ el ángulo de corte $\theta$ representado por el sector circular rojo deberá ser mayor o igual, o bien, contener al ángulo $\gamma$ representado por el arco azul formado entre el vector $\mathbf{L}$ que va de la posición de la fuente al fragmento y el de dirección o eje del cono $\mathbf{D}$. Puedes rotar el cono y modificar el ángulo de corte del cono.

Este efecto consiste en que la intensidad de la luz del reflector decae a medida que los rayos se alejan del eje del cono. Y existen varias formas de modelar este comportamiento. Tomando en cuenta que $$ \cos\gamma = \mathbf{D}\cdot \mathbf{L} $$ Entonces podemos calcular la intensidad de luz recibida por un punto $Q$ como $$ \text{atenuación} = \begin{cases} \dfrac{\text{max}((\mathbf{D}\cdot \mathbf{L}),0)^f}{ad^2 + bd + c} & \text{si } \gamma < \theta\\ 0 & \text{en otro caso} \end{cases} $$ donde los coeficientes $a$, $b$ y $c$ son constantes de atenuación características de la fuente, $d$ la distancia que hay entre la posición de la luz y el punto $Q$, y $\mathbf{L}$ el vector unitario que va de $P$ a $Q$.

El exponente $f$ determina el factor por el cual la intensidad es reducida para rayos lejanos al eje del cono. De modo que un valor grande de $f$ nos dará una concentración de luz mayor cerca del eje, mientras que un valor pequeño nos da un haz de luz menos concentrado. La luz es más intensa cuando $\mathbf{D} = \mathbf{L}$ y va decayendo gradualmente a medida que el ángulo $\theta$ se incremente.

Entonces la luz de reflector puede ser modelada como sigue

              Luz_reflector {
                Vector3 posición;
                Vector3 dirección;

                Vector3 ambiental;  //L_A
                Vector3 difuso;     //L_D
                Vector3 especular;  //L_S

                //Coeficientes de atenuación
                float constante;    //a
                float lineal;       //b
                float cuadrático;   //c

                float ángulo_de_corte;   //cos(theta)
                float factor_spotlight; //f factor de atenuación
              }

Modelos iluminados por una fuente de luz de reflector. Modifica el factor $f$ y el valor de $\theta$, y observa la diferentes concentraciones de luz. Puedes mover la cámara con el ratón o dedo.

Otra manera de modelar el efecto spotlight es seccionando al cono en dos partes: la umbra, que es el área del centro del cono, en la que todos los rayos de luz llegarían y por lo tanto se iluminaría por igual, y la penumbra, que es el área alrededor, en la cual llega una menor cantidad de rayos de luz por lo que se iluminaría menos, ya que suelen ser bloqueados por la superficie que rodea al foco.

Considerando esto podemos definir entonces a la umbra como el área definida por un ángulo $\rho$, con $\rho < \theta$, y a la penumbra como el área definida entre $\rho$ y $\theta$. Entonces podemos definir la intensidad como $$ I = \begin{cases} 1.0 &\text{si } \gamma < \rho \\ 0.0 &\text{si } \gamma > \theta \\ \Bigl ( \dfrac{\cos\gamma - \cos\rho}{\cos\theta - \cos\rho} \Bigr )^f &\text{en otro caso } \end{cases} $$ Finalmente se multiplicaría la atenuación utilizada en la luz puntual por $I$. Sin embargo, como podemos notar al calcular la intensidad para puntos que están dentro de la penumbra resulta ser algo costosa, en su lugar puede ser reemplazada por otra función, por ejemplo, una interpolación lineal.

## Transparencia

La transparencia es otra característica que está presente en muchos objetos del mundo real. Los materiales transparentes o translúcidos son aquellos que permiten pasar cierta cantidad de luz a través de ellos y hay diferentes maneras en que esto ocurra. Algunos efectos que se pueden producir es que la luz se atenue (transmisión) o se desvíe (refracción), provocando que otros objetos en la escena sean iluminados de manera diferente. Nosotros trataremos el caso más sencillo, en donde el objeto transparente solo atenúa los colores de los objetos que se encuentran detrás de él, preocupándonos únicamente por renderizar al objeto mismo.

La solución más utilizada consiste en mezclar el color del objeto transparente con los colores de los objetos que están atrás de él. Para ello, se agrega una cuarta componente a las tripletas $RGB$ que utilizamos para describir las propiedades reflexivas de nuestros materiales, esta componente es conocida como componente alfa $(\alpha),$ y es con la cual describiremos el grado de transparencia en ese punto del objeto. En donde si alfa es igual a $1$ quiere decir

que el objeto es opaco, y $0$ quiere decir que es totalmente transparente. De este modo, cada fragmento del objeto estará descrito por un color $RGBA$ o $RGB\alpha$.

Recordemos del Pipeline gráfico que el búfer de color terminará almacenando el color final que tendrá el pixel en la pantalla, por lo que el color final deberá ser la mezcla de colores que estamos buscando. Para poder calcular esa mezcla correctamente necesitamos definir un orden de renderizado específico entre los objetos, donde los objetos opacos sean renderizados primero y los transparentes después. Esto es ya que iremos calculando el color final de la siguiente manera.

Para cada fragmento se consideran dos colores: el color del fondo y el color del objeto transparente, en donde el color de fondo es el último color almacenado en el búfer de color. Entonces, el color final $\mathbf{c}_f$ de superponer un objeto transparente en la escena es $$ \mathbf{c}_f = \mathbf{c}_t\alpha_t + (1-\alpha_t)\mathbf{c}_b $$ en donde $\mathbf{c}_t$ es el color del objeto transparente, $\alpha_t$ el grado de transparencia del objeto, y $\mathbf{c}_b$ el color de fondo actual del búfer. Por lo que el color $\mathbf{c}_b$ es reemplazado por el $\mathbf{c}_f$ en el búfer de color. De esta manera la componente $\alpha$ determinará qué tanto está siendo cubierto el pixel por el material transparente. Por otra parte, si solo se reciben colores $RBG\alpha$ con $\alpha$ igual a $1$ la ecuación se simplifica a reemplazar completamente los colores en el búfer de acuerdo a su profundidad.

Este algoritmo nos proporciona una sensación de transparencia en el sentido de que podemos percibir a través de un objeto aquellos objetos que se encuentran detrás de él, de manera similar a como lo haría una tela de gasa. Sin embargo, se sigue sintiendo poco convincente para simular algunos materiales como plástico o vidrio de color.

Supongamos que tenemos un filtro de plástico rojo que cubre a un objeto azul, entonces usando la operación previa, tendríamos como resultado la porción del color rojo y del color azul sumadas. No obstante, como vimos al principio de este capítulo sería mejor multiplicar ambos colores, añadiendo así la luz que refleja el objeto azul hacia el objeto transparente, esto es $$ \mathbf{c}_f = \mathbf{c}_t\alpha_t + \mathbf{c}_b $$

con esta nueva operación (additive blending o mezcla aditiva), podemos obtener un mejor resultado para efectos brillantes como chispas o luces, ya que en lugar de atenuar los pixeles, los hace más brillantes. Pero, sigue sin funcionar adecuadamente ya que las superficies opacas no son filtradas, además para superficies semitransparentes como el fuego o humo puede dar un efecto de saturación sobre sus colores. Por estas razones es que la primera operación de mezcla es más utilizada. Puedes observar la diferencia entre estos dos operadores en la .

Ejemplo de transparencia de dos planos. Se muestran dos planos transparentes. El plano verde es renderizado antes que el plano rojo, intenta encimar o poner el plano verde frente al rojo y observa lo que pasa. Modifica los valores de transparencia $\alpha_R$ y $\alpha_G$ para hacer a los planos de un material más o menos transparente. Cambia el tipo de operador a utilizar y observe las diferencias. Puedes mover la posición de la cámara con el ratón o dedo.

Al renderizar los objetos translúcidos el orden es importante, siendo más específicos necesitamos renderizar las superficies transparentes en un orden de atrás hacia adelante. Una forma de hacer esto es considerando las distancias del centro de los objetos en dirección a la cámara. No obstante esta solución puede no ser trivial en ciertos casos, por ejemplo, cuando los objetos tienen la

misma profundidad. En este caso el operador de mezcla aditiva puede ser una mejor solución, puedes probar esto en la figura anterior.

Otro ejemplo, sería cuando una escena es modificada más adelante, en donde el orden de los objetos cambia, este caso también lo podemos ver en la al mover al plano verde enfrente del rojo. Esto se debe al test del búfer de profundidad, ya que al ser dibujado primero el plano verde y estár más adelante que el rojo, el búfer de profundidad se actualiza y el fragmento del plano rojo es descartado por no ser visible. Por esta razón es que es necesario apagar el test de profundidad durante el renderizado de los objetos transparentes.

Del mismo modo, este problema ocurre si tuviésemos objetos transparentes con concavidades que se sobreponen a sí mismos. Aquí deberíamos prestar especial atención al orden de sus caras. Para mejorar la apariencia en este caso se suele utilizar la orientación de sus caras, y dependiendo de la posición del observador se dibujarían primero las caras traseras del objeto y después las caras frontales, obsérvese la .

Ejemplo de objetos transparentes. Modifica el valor de transparencia de cada objeto y cambia su posición. Puedes mover la posición de la cámara con el ratón o dedo.

## Referencias bibliográficas

Phong, Bui Tuong. Junio de 1975. Illumination for Computer Generated Pictures. Communications of the ACM. 18(6): 311-317. https://dl.acm.org/doi/10.1145/360825.360839 Introduction to Shading: Lights. s.f. Scratchapixel. Recuperado el día 12 de Mayo del 2021 de https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/shading-lights Introduction to Shading: Diffuse or Lambertian Shading. s.f. Scratchapixel. Recuperado el día 12 de Mayo del 2021 de https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading WebGL2 3D - Spot Lighting. s.f. WebGL2Fundamentals. https://webgl2fundamentals.org/webgl/lessons/webgl-3d-lighting-spot.html de Vries, Joey. 2014. Colors. LearnOpenGL. https://learnopengl.com/Lighting/Colors de Vries, Joey. 2014. Basic Lighting. LearnOpenGL. https://learnopengl.com/Lighting/Basic-Lighting
de Vries, Joey. 2014. Materials. LearnOpenGL. https://learnopengl.com/Lighting/Materials de Vries, Joey. 2014. Light casters. LearnOpenGL. https://learnopengl.com/Lighting/Light-casters de Vries, Joey. 2014. Multiple lights. LearnOpenGL. https://learnopengl.com/Lighting/Multiple-lights Luebke, David. 2011. Lighting & Shading.[Diapositiva de PowerPoint] COMPSCI 464: Computer Graphics. http://cs.boisestate.edu/~alark/cs464/lectures/Shading.pdf Phong reflection model. 27 de Diciembre del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Phong_reflection_model&oldid=996573952 The Phong Model, Introduction to the Concepts of Shader, Reflection Models and BRDF. Scratchapixel. Recuperado el día 12 de Mayo del 2021 de https://www.scratchapixel.com/lessons/3d-basic-rendering/phong-shader-BRDF Reflexión y Refracción de la Luz. Fisicalab. Recuperado el día 12 de Mayo del 2021 de https://www.fisicalab.com/apartado/reflexion-refraccion-luz Brown, C. Wayne. 4 de Marzo del 2016. 9.3 - Specular Lighting. Learn WebGL. Recuperado el día 12 de Mayo del 2021 de http://learnwebgl.brown37.net/09_lights/lights_specular.html Thormählen, Thorsten. Kehrer, Johannes. s.f. Phong demo. Toronto - CS. Recuperado el día 13 de Mayo del 2021 de http://www.cs.toronto.edu/~jacobson/phong-demo/