Ejemplo de mapeo de textura sobre una esfera.
Texturas del planeta Tierra obtenidas de https://www.solarsystemscope.com/ bajo
la Licencia CC BY 4.0.
En el capítulo anterior asumíamos que las propiedades reflectivas de un
objeto eran las mismas para cada punto de su superficie, sin embargo, muy pocas superficies
son así.
Por ejemplo, si quisiéramos representar una superficie plana con un patrón de
colores sencillo como el de un tablero de ajedrez, podríamos utilizar
$8\times 8=64$ cuadrados ordenados, alternando los materiales (blanco y negro)
entre cada uno. Pero si consideramos un patrón de colores más complicado como
un texto, una pintura o propiedades de materiales naturales como la madera y el mármol,
se vuelve muy difícil de representar geométricamente, además de ser excesivamente
caro de almacenar ya que se requeriría de un gran número de polígonos para tener un
acabado más realista.
Del mismo modo, una superficie también puede presentar otro tipo de imperfecciones
como rasgaduras, hendiduras, bultos y variaciones de colores, las cuales presentarían
este mismo problema.
Las técnicas de mapeo de texturas que describirémos en este capítulo nos permitirán
controlar las propiedades reflectivas de cada punto de una superficie, sin necesidad
de agregar geometría extra en la mayoría de los casos, logrando hacer que nuestras superficies
se vean más realistas en tiempo real.
Pipiline de texturas
El mapeo de texturas o texture mapping es una técnica que nos permite modelar de
manera eficaz las variaciones de material y acabado de una superficie. Dicha técnica consiste en
modificar las propiedades reflectivas y otros atributos de cada punto de la superficie
utilizando los valores almacenados en uno o varios mapas de textura, los cuales
suelen ser una imagen o una función procedural.
Los mapas de textura o simplemente texturas, son espacios de 1, 2, 3 o 4 dimensiones, en
donde se almacena la información que queremos mapear a una superficie. Para acceder a los valores
de una textura necesitamos especificar sus coordenadas de textura.
Por ejemplo, una textura 1D puede usarse para determinar la coloración de un modelo de terreno
de acuerdo a la altura de cada punto, o bien, para pintar una curva o una línea
de un color a otro dado su parámetro $t$.
Ejemplo de un mapa de textura 1D.
Las texturas 2D o de imágenes por otra parte son las más utilizadas, y se trata de imágenes rasterizadas,
las cuales son representas por arreglos bidimensionales de pixeles. Podemos pensarlas como una etiqueta
que es "pegada" a lo largo de una superficie.
Ejemplo de un mapa de textura 2D.
Las texturas 3D o de volumen son descritas por un arreglo tridimensional de píxeles; sus coordenadas de
textura son presentadas como vectores $(u,v,w)$, donde $w$ hace referencia a la profundidad del arreglo.
Podemos pensarlas como un arreglo de texturas 2D, como se observa en la .
Y debido a que suelen ser muy costosas de almacenar usando imágenes, se suele optar por usar
texturas procedurales en su lugar, en donde las coordenadas son mapeadas por una función a un color.
Ejemplo de un mapa de textura 3D.
La muestra las diferentes etapas para aplicar una textura
a una superficie, las cuales se describen a continuación. REF. .
Pipeline general de texturizado .
Función de proyección
El proceso inicia en la definición de las posiciones de los vértices de algún modelo,
es decir, desde el espacio local, donde por medio de una función de proyección
las coordenadas de textura son asignadas a los vértices como un atributo.
La función de proyección se encarga de mapear o proyectar un punto tridimensional al
espacio de textura, en otras palabras, cada punto de la superficie deberá tener asignado
un punto en la textura.
Por lo regular este mapeo es a un espacio 2D, también conocido como espacio $UV$ o $ST$, el cual se
encuentra definido dentro del rango $[0,0]\times[1,1]$, nosotros nos referiremos a sus coordenadas simplemente
como coordenadas $uv$.
Comúnmente los programas de modelado permiten a los artistas definir las coordenadas de textura $uv$
por vértice, las cuales pueden ser inicializadas a partir de funciones de proyección o algoritmos de
desenvolvimiento de malla, además de permitir ser editadas de manera manual.
Los algoritmos de desenvolvimiento de malla pertenecen a un campo amplio llamado mesh parametrization.
Algunas de la funciones de proyección más utilizadas son las cilíndricas, esféricas y planas,
ver .
Funciones de proyección. Selecciona el tipo de proyección que quieras
visualizar, así como la textura. Puedes mover la posición de la cámara con el ratón o dedo y acercarte o alejarte
con la rueda del ratón.
La especificación de la función de proyección también depende de cómo esté definido el modelo,
por ejemplo, en una superficie parámetrica las coordenadas $uv$ son obtenidas por definición.
Las texturas volumétricas o 3D por otra parte suelen utilizar las mismas coordenadas del modelo
como coordenadas de textura.
En el renderizado en tiempo real las funciones de proyección normalmente son aplicadas en la
etapa de modelado y las coordenadas de textura almacenadas en los vértices.
Función de correspondencia
Texture wrapping modes.
Las coordenadas de textura del plano están definidas dentro
del rango $[-1,2]\times[-1,2]$, nótese que el punto $(0,0)$ se encuentra
en la esquina inferior izquierda del cuadro central.
Selecciona las diferentes funciones de correspondencia para cada
coordenada y observa el resultado.
Una función de correspondencia convierte las coordenadas de textura en
coordenadas en el espacio de textura, permitiendo una mayor flexibilidad durante la
aplicación de la textura.
Por otra parte, ya que el espacio de textura 2D es un espacio rectangular definido dentro
del rango $[0,0]\times[1,1]$, es importante especificar qué ocurre cuando nos salimos de
este rango para evitar lidiar con excepciones. Para ello, es necesario especificar una función
de correspondencia que mapee las coordenadas de $[-\infin,-\infin]\times[\infin,\infin]$ a
$[0,1]^2$ de cierto modo, a este tipo de funciones se les conoce como texture wrapping
y algunas de las más comúnes son descritas a continuación:
clamp: el resultado es la repetición de
los bordes de la imagen para las coordenadas fuera del rango.
repeat: la imagen se repite a lo largo de la superficie,
esto se hace eliminado la parte entera de la coordenada.
mirror: la imagen se repite a lo largo de la superficie, pero es invertida
en cada una de las repeticiones.
border (DirectX): las coordenadas fuera del rango son
renderizadas con un color previamente específicado, formando así un borde.
cada una de las funciones puede ser aplicada en ambas coordenadas $u$ y $v$, o bien definir un
modo distinto para cada una. En la puedes probar los
diferentes modos de texture wrapping.
Otro ejemplo sería aplicar una transformación geométrica sobre las coordenadas de textura
en el vertex shader o fragment shader, como se muestra en la
, o bien, utilizar la API para definir
un área de la textura sobre la cual se trabajará.
Transformaciones sobre las coordenadas de textura.
La ilustración de la izquierda muestra el espacio de textura dentro del rango $[-1,2]\times[1,2]$
con el modo REPEAT de texture wrapping, el rectángulo amarillo está definido por las
coordenadas de textura del plano renderizado que se ilustra a la derecha, señalando el área
de la textura que se va a mapear sobre el plano de la derecha. Las coordenadas de textura son
inicializadas en $[0,1]^2$.
Aplica las transformaciones sobre las coordenadas de textura y obsérva cómo el rectángulo
amarillo es transformado, afectando la imagen que es proyectada sobre el plano de la derecha.
La última función de correspondencia es implícita y consta de multiplicar las coordenadas de
textura dentro del rango $[0,1]$ por la resolución de la imagen, para obtener así
la ubicación del pixel de la textura.
Valores de la textura
Finalmente con las coordenadas en el espacio de textura podemos obtener o acceder a los
valores del mapa de textura. Como mencionamos anteriormente, los mapas de texturas
pueden ser una imagen o una función procedural.
En el caso de ser una imagen, el valor es obtenido del pixel de la imagen correspondiente a
las coordenadas de textura, este proceso es explicado en el siguiente tema.
Mientras que para una función procedural, conocida como
texturas procedurales, basta realizar el cálculo de la función asociada como textura.
El valor obtenido del mapa suele ser una tripleta $RGB$, la cual puede ser utilizada para reemplazar
el color de la superficie. De manera similar, se puede obtener un color en escala de grises (ya que se
utiliza el mismo valor en las tres componentes) para representar la intensidad de la componente especular,
o bien, utilizar el color para representar una normal como veremos más adelante,
entre otros valores que se quieran utilizar para modificar la ecuación del modelo de iluminación.
Otro valor que puede obtenerse es la 4-tupla $RGBA$ donde $A$ representa la transparencia del color,
la cual suele ser utilizada como máscara para definir los pixeles a considerar y
a descartar de la textura.
Alpha Mapping. En este ejemplo los valores la textura (texeles) con $A < 0.5$ son descartados.
Puedes mover la posición de la cámara con el ratón o dedo.
Texturas de pasto obtenida de https://learnopengl.com/
bajo la Licencia CC BY 4.0.
Texturas en el pipeline gráfico
Por otro lado, volviendo al Pipeline gráfico,
el mapeo de texturas es realizado principalmente dentro de la etapa de Rasterización y la primera
del procesamiento de fragmentos, Pixel shading. Ya que durante la primera las
coordenadas de textura (y otros atributos) que han sido asignados a los vertices de las primitivas
son interpoladas entre sí para obtener las coordenadas de textura correspondiente a cada fragmento.
Y en la segunda se determinaría el color del
fragmento usando la ecuación de iluminación que se desee con los valores obtenidos
del mapa de texturas dadas sus coordenadas de textura.
Texturas 2D o de imágenes
Una textura 2D es una imagen rasterizada o mapa de bits, el cual es representado por un arreglo bidimensional de pixeles. Los pixeles
de la imagen son llamados como texeles (por texture element o texture pixel) para diferenciarlos
de los pixeles de la pantalla.
El mapeo de una imagen a una superficie 3D es una tarea bastante compleja ya que la mayoría de veces no se puede
obtener el color del texel de manera directa con las coordenadas en el espacio de textura.
En esta sección nos enfocaremos en los principales problemas a los que nos enfrentamos
para obtener un valor de una imagen y los métodos que se emplean para solucionarlo.
Recordemos que las coordenadas de textura $(u,v)$ han sido asignadas a los vértices, y que son
mapeadas por una función de correspondencia al espacio $[0,1]^2$. Ahora bien,
dependiendo del API el origen del sistema puede estar ubicado en la esquina inferior izquierda de la textura,
es decir, su esquina inferior es $(0,0)$ y su esquina superior es $(1,1)$, como es
el caso de OpenGL, o bien, la esquina superior izquierda de la imagen es $(0,0)$ y su esquina inferior
derecha es $(1,1)$, como es el caso de DirectX; nosotros usaremos el primer sistema de referencia.
De modo que no importa el tamaño de la imagen siempre podremos acceder a cada texel variando
los valores de $u$ y $v$.
Supongamos que queremos mapear una imagen de $n\times n$ a un cuadrado y que el cuadrado
proyectado en la pantalla es del mismo tamaño que la textura.
Entonces tendríamos una correspondencia
uno a uno entre los pixeles que conforman la superficie (fragmentos) y texeles, por lo
que podríamos acceder a
los valores del arreglo sin problemas, es decir, al
fragmento con coordenadas $(u,v)$ le correspondería el texel
imagen[u*n-1][v*n-1].
Mapeo directo de una textura de $5\times5$ pixeles sobre un cuadrado que ocupa $5\times5$ pixeles
en la pantalla. Cada vértice del cuadrado está asociado a las coordenadas de textura que se muestran.
Vale la pena mencionar que la posición de los vértices no tienen que tener una relación en particular
con las coordenadas de textura. En la se muestra un ejemplo
de este caso, en donde se busca mapear un área de la imagen a una primitiva,
aquí los vértices de la primitiva tienen asignadas las coordenadas de textura
que conforman el triángulo naranja en la imagen.
Mapeo de una textura a una primitiva.
Nótese que el triángulo de la primitiva tiene una forma diferente que el triángulo formado
por las coordenadas de textura, lo cual provoca que la imagen se deforme un poco.
Desafortunadamente, cuando una textura es aplicada sobre una superficie los texeles no suelen
tener esta relación de correspondencia uno a uno con los fragmentos de la superficie, como vimos en el
primer ejemplo. Y además sabemos que los texeles tienen coordenadas enteras, por lo que no podemos acceder
a valores intermedios. Entonces, ¿qué pasa con las coordenadas que no intersecan exactamente con un pixel?
La respuesta dependerá del tipo de método de filtro que se seleccione para solucionar cada caso.
La proyección de un pixel al espacio de textura es un cuadrilátero el cual puede ser más pequeño
o bien, el pixel puede llegar a cubrir varios texeles.
En el primer caso, necesitamos aumentar o estirar la imagen por lo que se deberá aplicar un filtro de
magnificación ( (izquierda)), mientras que en el segundo,
necesitamos encoger la textura, por lo que se aplica un filtro de minimización
( (derecha)).
Métodos de filtrado: Magnificación y Minimización.
Magnificación
Las dos técnicas de filtrado más comunes para resolver este problema son el
filtro caja o nearest neighbor y el filtro bilineal o de interpolación bilineal.
En el filtro caja para cada pixel se toma el texel más cercano a su centro. En esta técnica los texeles
individuales se hacen más evidentes y es el típico efecto de pixelado que obtenemos al ampliar una imagen,
como se muestra en la . Aunque termina dando un resultado de baja calidad,
el cálculo es muy rápido pues solo se requiere buscar un texel por pixel.
Por otro lado, en la interpolación bilineal, por cada pixel se toman los cuatro texeles más cercanos a su centro
con los cuales se realiza una interpolación bilineal, obteniendo así un valor combinado para el pixel.
Con esta técnica el resultado es una imagen más borrosa, disminuyendo considerablemente el efecto de pixeleado
que produce la técnica anterior, véase la .
Comparación entre filtro de caja y bilineal utilizando una
imagen de $36\times36$ pixeles.
Por ejemplo, supongamos que tenemos las coordenadas en el espacio de textura de un fragmento
$(P_u, P_v) = (61.24,52.18)$.
Para encontrar a sus cuatro vecinos más cercanos necesitamos primero restarle $(0.5,0.5)$ a las coordenadas
para estar en el centro del pixel, teniendo (60.74, 51.68). Ahora, considerando solo la parte entera del centro
del pixel, es decir con $(x,y) = (60, 51)$, podemos encontrar a los cuatro texeles cercanos
$(x,y), (x+1,y), (x,y+1)$ y $(x+1,y+1)$
como se muestra en la .
Magnificación. Interpolación bilineal.
Finalmente podemos calcular la interpolación bilineal
entre los cuatro texeles y como parámetro dentro de esta relación la parte fraccionaria del centro del pixel
es decir $(u',v') = (0.74, .61)$.Esto es
$$
\begin{aligned}
\mathbf{b}(P_u,P_v) =& (1-u')(1-v')C(x,y) + u'(1-v')C(x+1,y) + \\& (1-u')v'C(x,y+1) + u'v'C(x+1,y+1)
\end{aligned}
$$
donde $C(x,y)$ es la función que te devuelve el color del textel de la imagen, es equivalente
a imagen[x][y].
Como podemos notar el color del texel más cercano a las
coordenadas $(u',v')$ o centro de las coordenadas en el espacio de textura son las que tendrán mayor
influencia en el valor final.
Si bien esta técnica suele dar un mejor resultado que la anterior, puede no ser muy buena opción
para ciertos patrones como el del tablero de ajedrez, ya que se mezclarían los colores dando una escala
de grises entre cada transición de color, véase .
Magnificación de una textura con patrón de tablero de ajedrez: Filtro de caja y filtro bilineal.
Minimización y Mipmapping
Minimización con filtro de caja, filtro bilineal y mipmapping.
Cuando una textura es minimizada, varios texeles de la textura corresponden a un pixel o fragmento.
De modo que para obtener el color correcto de cada fragmento deberíamos calcular la influencia que tienen
cada uno de los texeles que éste cubre, lo cual resulta imposible de calcular de manera
precisa en tiempo real.
Si utilizamos el filtro de caja se tomarían texeles arbitrariamente lejanos entre sí, pudiendo
producir un mapeo sin sentido. Como se puede ver en la (izquierda superior)
este filtro puede causar muchos problemas de aliasing o efecto escalera ya que solo un texel es elegido
entre varios, estas distorsiones son más notables cuando la superficie se mueve con respecto al
observador y a esto se le conoce como temporal aliasing.
Por otra parte, el filtro bilineal es ligeramente mejor ya que en lugar de tomar un texel combina cuatro,
sin embargo cuando el pixel llega a cubrir más de cuatro texeles el filtro comienza a fallar
de manera similar al anterior y produce aliasing, como se muestra en la (derecha superior).
El método más utilizado que ayuda a mitigar este problema de manera eficiente
es el de mipmapping, donde mip proviene de la frase en latín "multum in parvo"
que quiere decir "muchas cosas en un lugar pequeño".
En este método de filtrado se genera un conjunto de versiones más pequeñas de la imagen original,
cada una un cuarto más pequeña que la anterior antes de que comience el renderizado.
Pirámide de mipmaps.
Textura obtenida de ambientCG.com bajo la
Licencia CC0 1.0 Universal.
Creación de mipmap con una textura con $2\times2$ texeles. El pixel cubre
exactamente los cuatro texeles de la textura, por lo que el nuevo mipmap contará de una textura
con un solo texel, y como valor tendrá el promedio de los cuatro texeles de la textura original.
Consideremos el caso ideal, donde tenemos una textura de $2\times2$ texeles y la proyección de un
pixel cubre exactamente estos cuatro texeles. Podemos crear entonces una versión más pequeña de la imagen
hecha sólo con un texel, el cual tendrá como color el valor promedio de los cuatro texeles de
la textura original, por lo que este valor será el que nos interesará acceder
como se ilustra en la .
Este proceso se puede generalizar para una imagen con un ancho $w$ y altura $h$
donde el fragmento cubra un área arbitraria de texeles. De modo que cuando se cree la textura,
también se deberán crear las versiones más pequeñas de la misma,
reduciendo $\frac{1}{2}$ el ancho y alto de manera recursiva hasta tener una textura con al menos una
de sus dimensiones igual a $1$,
como se muestra en la .
Cada una de las imágenes creadas se les llama mipmap y es asociada a un nivel, donde el primer nivel
es el $0$ y está asociado a la textura original, el nivel $1$ para el primer mipmap y así sucesivamente.
Al conjunto de mipmaps se le conoce como cadena de mipmaps o pirámide de mipmaps.
Nótese que para construir la piramide de mipmaps como hemos visto, se requiere que la textura original tenga
dimensiones de potencia de dos (POT), es decir, $w = 2^n$ y $h = 2^m$.
También como pudimos observar los mipmaps se vuelven pequeños muy rápido, ya que se van encogiendo un
cuarto de su área cada vez, el total de memoria utilizada es solo un tercio más que la memoria utilizada
por la textura original.
Por otro lado, la mayoría de las GPUs modernas ya permiten manejar texturas con dimensiones diferentes a
potencias de dos (NPOT). Para ello, se suele escalar las dimensiones de la textura a la siguiente
potencia de dos más cercana antes de empezar a generar los mipmaps, por lo que se necesita una mayor
cantidad memoria y hace que su manejo sea más lento. Por estas razónes es que se recomienda en general
usar imágenes con dimensiones iguales a potencia de dos.
Además de que algunas GPUs (inlcluyendo modernas) siguen teniendo problemas para mostrar texturas
con dimensiones NPOT, como generar alguna distorsión en la imagen original al ser escalada.
Ahora bien, cuando se está renderizado, y el proceso de texturizado se esté ejecutando, para cada fragmento
se elige el nivel del mipmap a utilizar calculando qué tan grande es la proyección del pixel, es decir,
qué tantos texles cubre de la textura original. Por ejemplo, si el pixel cubre cuatro texeles, entonces se
utiliza el mipmap del nivel $1$, si cubre 16 se elige el del nivel $2$ y así sucesivamente.
Para tener mejores resultados se realiza un filtrado trilineal entre los dos mipmaps más cercanos y se
interpolan sus dos valores obtenidos.
Para calcular el nivel del mipmap $\lambda$ a utilizar en un fragmento, también referido como nivel de detalle,
necesitamos calcular primero el número de texeles que cubre el pixel, siendo $\rho= texeles/pixel$.
Una forma es calculando el borde de mayor tamaño del cuadrilátero formado por la proyección del pixel en el
espacio de textura.
Sea $(x,y)$ las coordenadas del pixel (coordenadas de pantalla) y
$(u,v)$ las coordenadas en el espacio de textura del pixel, siendo más específicos,
expresado en texeles $([0,0]\times[2^n,2^m])$, entonces podemos calcular $\rho$ como
$$ \rho = \text{max}\Biggl(\Biggl\lVert \begin{bmatrix} \dfrac{\partial u}{\partial x} \\ \dfrac{\partial v}{\partial x} \end{bmatrix} \Biggr\rVert,
\Biggl\lVert \begin{bmatrix} \dfrac{\partial u}{\partial y} \\ \dfrac{\partial v}{\partial y} \end{bmatrix} \Biggr\rVert \Biggr)$$
donde cada diferencial es la razón del cambio en la textura con respecto a un eje de la pantalla. Por ejemplo
$\frac{\partial u}{\partial x}$ es qué tanto cambió la coordenada de textura $u$ a lo largo del eje $x$ para
un pixel, obsérvese la .
Finalmente podemos obtener el nivel de detalle como
$$ \lambda = log_2\rho $$
Estimación del tamaño de un pixel en el espacio de textura.
O bien, para un mejor resultado podemos hacer una interpolación trilineal entre los dos nivles más
cercanos $ \lfloor \lambda \rfloor $ y $\lfloor \lambda \rfloor + 1$. En donde primero se hacen dos
interpolaciones bilineales en cada uno de los mipmaps usando las coordenadas de textura
y por último los valores obtenidos de los mipmaps son interpolados linealmente con la parte flotante
de $\lambda$.
De este modo, no importa la cantidad de texeles que un pixel cubra, siempre se tardará la misma cantidad de
tiempo en calcular su color. Pues en lugar de promediar todos los texeles contenidos por pixel, se
interpolan conjuntos de texeles ya precalculados.
No obstante, este método sigue presentando algunos defectos. Uno de los más importantes es el exceso de
desenfoque, y esto ocurre debido a que solo podemos acceder a áreas cuadrádas de la textura.
Digamos que un framento cubre un gran número de texeles en dirección de $u$ y muy pocos en dirección de $v$,
por lo que nos interesa un área rectangular en la textura. Esto sucede cuando miramos a lo largo de una
superficie formando un ángulo oblicuo. E incluso podría llegar a ser necesario hacer una
minificación a
lo largo de un eje, y una magnificación a lo largo del otro.
Podemos observar este defecto en las líneas que se dezplazan en la distancia de
la .
El filtro más común para corregir este defecto es el Anisotropic Filtering, el cual reutiliza
la piramide de mipmaps.
Mapeo de materiales
Empecemos con uno de los usos más comúnes y sencillos del mapeo de texturas.
Como mencionamos anteriormente, podemos usar una textura para modificar las propiedades
de los materiales que conformen la superficie, específicando qué áreas de la superficie
tienen qué material. De este modo cuando se vaya a evaluar la ecuación de la iluminación
del punto podrémos modificar sus parámetros con la información especificada en el mapa
de textura.
El párametro que más se suele modificar es el del color de la superfie, donde se
reemplaza el color difuso por el valor del mapa,
a esta textura se le conoce como diffuse map o abeldo map.
Otro mapa que también suele ser utilizado junto con el diffuse map, es el mapa especular o gloss map,
que es un mapa en escala de grises usado para modificar la insensidad del componente especular,
dando así un efecto más realista.
Por ejemplo, en la , se utlizan ambos mapas ()
para describir una caja de madera con partes metálicas.
Mapa difuso y mapa especular de una caja.
Texturas obtenidas de https://learnopengl.com/
bajo la Licencia CC BY 4.0.
De manera similar, cualquier parámetro de la fórmula de iluminación puede ser modificado
utilizando un mapa de textura, ya sea reemplazando un valor,
multiplicándolo, sumándolo, o cambiándolo de alguna otra forma.
Mapeo de materiales.
El lector puede mover la cámara con el ratón o dedo y alejarse o acercase con la rueda del ratón.
Texturas de la caja obtenidas de https://learnopengl.com/
bajo la Licencia CC BY 4.0. Textura de la esfera obtenida de ambientCG.com.
Mapeo de normales y espacio tangente
Como mencionábamos al principio del capítulo la mayoría de las superficies en el mundo real no son
totalmente lisas y pueden presentar muchos detalles.
Con el mapeo de normales también conocido como Bump mapping, podemos lograr crear una ilusión de
relieve sobre la superficie sin necesidad de agregar o modificar la geometría del objeto a una escala muy
pequeña.
Hasta ahora nos hemos limitado a calcular la normal de un punto por medio de una interpolación entre las
normales definidas en los vértices, lo cual nos impide iluminar cualquier detalle dentro del triángulo de
la malla.
La técina de mapeo de normales consiste en utilizar el color de los texeles de una imagen para almacenar
los vectores que se usarán para modificar la dirección de las normales de cada fragmento, cambiando
así la apariencia de la superficie como se puede observar en la .
Normal mapping. Puedes dar clic en Normal mapping para
ver la diferencia. Mueve la posición de la cámara con el ratón o dedo, o bien, puedes alejarla o acercarla
con la rueda del ratón.
Texturas obtenidas de ambientCG.com.
Un mapa de normales codifica los vectores normales $(x,y,z)$ que van de $[-1,1]$ en colores.
El vector $(0,0,1)$ representa una normal que no es alterada, mientras que cualquier
otro vector representa una modificación de la normal.
Por ejemplo, si consideramos una textura de $8-$bits, entonces el $0$ representaría a $-1$, y $255$ a $1$.
En la se muestra un mapa de normales, y como podemos observar
el color que predomina es un color morado pastel, esto es ya que el vector inalterado $(0,0,1)$
es represetado con
el color $(\frac{1}{2}, \frac{1}{2}, 1)$, o bien, $(128,128,255)$ para el ejemplo anterior.
Otros colores como el rosa y verde pastel hacen referencia a las normales que están apuntando en
dirección al eje $x$ y $y$ positivos respectivamente.
Ahora bien, si aplicamos esta misma textura sobre un plano que apunta en dirección al eje $z$ positivo,
entonces podemos simplemente extraer la normal del mapa para cada punto de la superficie y usarla directamente en la
fórmula de iluminación. Sin embargo, esto dejaría de funcionar correctamente
si el plano apuntara hacia una dirección diferente, ya que la mayoría de los vectores
Ejemplo de Mapa de normales.
en el mapa están apuntando hacia $z+$. Este comportamiento se ilustra en la
.
Para solucionar este problema necesitamos hacer que el vector inalterado $(0,0,1)$ del mapa corresponda con
el vector normal interpolado del fragmento, en otras palabras alinear el espacio del mapa de normales a la
superficie.
Mapeo incorrecto de normales.
Puedes mover la posición de la cámara con el ratón o dedo, así como alejarla o
acercarla con la rueda del ratón.
Para ello necesitamos construir un sistema de coordenadas en cada vértice de la superficie, en donde la normal
del vértice siempre apunte hacia $z+$. A este sistema se le conoce como espacio tangente y es en
donde están definidos nuestros vectores normales del mapa.
La base ortogonal del espacio tangente se define con el vector
normal del vértice y dos vectores tangentes a la superficie: el vector tangente y el vector bitangente.
Una vez establecido el sistema de coordenadas del espacio tangente podemos realizar la transformación de
los vectores de un espacio a otro,
es decir, ya sea usar las normales del mapa transformadas al espacio de vista (por fragmento), o bien,
transformar la dirección del vector de la luz al espacio tangente (por vértice) para luego ser interpolado y
calcular adecuadamente la intensidad de la luz utilizando la ecuación de Lambert.
Vale la pena notar que el primer acercamiento es más costoso que el segundo.
Nuestra meta es entonces encontrar la matriz de cambio de base
que nos permita transformar los vectores entre el
espacio de vista y el tangete. El caso más intuitivo es transformar los
vectores del espacio tangente al espacio de vista, ya que sabemos que el eje $z$ del espacio tangente
siempre será mapeado al vector normal del vértice. Por otra parte, queremos que su eje $x$ corresponda a
la dirección $u$ del mapa de normales y el eje $y$ se alinee con la dirección $v$ del mapa.
Para encontrar los vectores tangentes de un solo vértice consideremos lo siguiente.
Digamos que tenemos un triángulo $P_0, P_1$ y $P_2$, con $(u_0, v_0), (u_1,v_1)$ y $(u_2,v_2)$ como las
coordenadas de textura de los vértices. Sea $P_0$ el vértice de interés tenemos que
$$ \mathbf{Q}_1 = P_1 - P_0 $$
$$ \mathbf{Q}_2 = P_2 - P_0 $$
entonces necesitamos resolver
$$ \mathbf{Q}_1 = (u_1-u_0) \mathbf{T} + (v_1-v_0)\mathbf{B}
= \varDelta u_1\mathbf{T} + \varDelta v_1\mathbf{B}$$
$$ \mathbf{Q}_2 = (u_2-u_1) \mathbf{T} + (v_2-v_1)\mathbf{B}
= \varDelta u_2\mathbf{T} + \varDelta v_2\mathbf{B}$$
donde $\mathbf{T}$ es el vector tangente y $\mathbf{B}$ el vector bitangente, los cuales están alineados
con el mapa de textura, véase .
Espacio tangente.
Podemos reescribir este sistema de ecuaciones de la siguiente forma
$$ \begin{bmatrix}
(\mathbf{Q}_1)_x & (\mathbf{Q}_1)_y & (\mathbf{Q}_1)_z \\
(\mathbf{Q}_2)_x & (\mathbf{Q}_2)_y & (\mathbf{Q}_2)_z
\end{bmatrix}
=
\begin{bmatrix}
\varDelta u_1 & \varDelta v_1 \\
\varDelta u_2 & \varDelta v_2
\end{bmatrix}
\begin{bmatrix}
T_x & T_y & T_z \\
B_x & B_y & B_z
\end{bmatrix}
$$
Multiplicando ambas partes por la inversa de la matriz de las coordendades de textura tenemos
$$
\begin{bmatrix}
T_x & T_y & T_z \\
B_x & B_y & B_z
\end{bmatrix}
=
\dfrac{1}{u_1v_2 - u_2v_1}
\begin{bmatrix}
\varDelta v_2 & -\varDelta v_1 \\
-\varDelta u_2 & \varDelta u_1
\end{bmatrix}
\begin{bmatrix}
(\mathbf{Q}_1)_x & (\mathbf{Q}_1)_y & (\mathbf{Q}_1)_z \\
(\mathbf{Q}_2)_x & (\mathbf{Q}_2)_y & (\mathbf{Q}_2)_z
\end{bmatrix}
$$
Obteniendo así a los vectores (no normalizados) $\mathbf{T}$ y $\mathbf{B}$ para el triángulo definido
por $P_0, P_1$ y $P_2$, con los cuales podemos construir la matriz de cambio que nos
permite transformar nuestros vectores del espacio tangente al espacio de vista.
Ahora, para transformar en sentido contrario, es decir, del espacio de vista al espacio tangente,
podemos tomar la inversa de la matriz.
Para simplifcar los cálculos podemos ortogonalizar
la matriz con el algoritmo de Gram-Schmidt y obtener así la inversa de la matriz con su transpuesta. Esto
es obtener los nuevos vectores $\mathbf{T'}$ y $ \mathbf{B'}$ como sigue
$$ \mathbf{T'} = \mathbf{T} - (\mathbf{N} \cdot \mathbf{T})\mathbf{N}$$
$$ \mathbf{B'} = \mathbf{B} - (\mathbf{N} \cdot \mathbf{B})\mathbf{N} - (\mathbf{T'} \cdot \mathbf{B})\mathbf{T'}$$
Finalmente los vectores serian normalizados y almacenados en los vértices para construir la matriz
$$
\mathbf{v}_{tangente} =
\begin{bmatrix}
T'_x & T'_y & T'_z \\
B'_x & B'_y & B'_z \\
N_x & N_y & N_z
\end{bmatrix}
\begin{bmatrix}
v_x \\
v_y \\
v_z
\end{bmatrix}
$$
Otra optimización sería calcular el vector bitangente con el pruducto cruz
$$B' = m(\mathbf{N}\times\mathbf{T'})$$
donde $m= \pm 1$ es la dirección del vector en el espacio tangente y es igual al determinante de la matriz.
De esta manera simplemente se guardaría en cada vértice el valor de $m$ en lugar del vector $\mathbf{B'}$.
Mapeo de desplazamiento
Un problema con el mapeo de normales es que algunos detalles como elevaciones o bultos no proyectan una
sombra y la silueta no se ve afectada por las irregularidades que la superficie debería presentar.
Esto se debe a que realmente no estamos modificando la geometría del objeto.
El mapeo de desplazamiento por otra parte consiste en modficiar la geometría usando una textura,
siendo más específicos, modifica la posición de los vértices de acuerdo a los valores de desplazamiento
almacenados en el mapa de textura llamado mapa de desplazamiento. Dicho mapa puede ser una imagen en
escala de grises ya que solo nos interesa extraer un solo valor, o bien, una textura procedural.
Para cada vértice se realiza un desplazamiento en dirección de su normal, esto es
$$ \mathbf{v} = \mathbf{v} + d(u,v) \cdot \mathbf{n}$$
donde $d$ es la función que obtiene el valor de desplazamiento del mapa dadas las coordenadas de textura del
vértice.
De manera similar, podemos aplicar el desplazamiento para cada fragmento antes de evaluar la ecuación
de iluminación, generando la ilusión de una superficie rugosa, sin necesidad de agregar más geometría.
Desafortunadamente, esta técnica requiere de un mayor número de vértices para lograr que la superficie
se vea más realista, por lo que necesitará de más procesamiento y memoria.
Mapeo de desplazamiento. Modifica el valor de la altura y el número de
subdivisiones de la esfera, nótese que la definición de las elevaciones aumenta con un mayor
número de subdivisiones. El lector puede mover la posición de la cámara con el ratón o dedo,
así como también alejarla o acercarla con la rueda del ratón.
Textura de la luna obtenida de
https://www.solarsystemscope.com/s bajo
la Licencia CC BY 4.0.
Texturas procedurales
Ejemplos de texturas procedurales geométricas básicas.
Se muestran distintas texturas procedurales geométricas, las cuales se muestran en función de las
coordenadas de textura 2D ($uv$) asignadas a cada vértice (izquierda), y sobre las coordenadas 3D de la
superficie (derecha). Puedes elegir la textura a utilizar, así como el objeto. Modifica el valor
Escalar para aplicar una transformación de escalamiento sobre las coordenadas y observa las
diferencias. En algunos casos, las características visuales de la textura tienen un aspecto parecido
debido a que las coordenadas de textura y las del objeto tienen más o menos el mismo tamaño,
por lo que es necesario aumentar el factor de escalamiento. Las coordenadas del cubo
se encuentran dentro del rango $[-.5,.5]^3$ mientras que las de la tétera estan entre
$[-1,1]^3.$ Se puede mover la posición de la cámara con el ratón o dedo, así como alejarla o
acercarla con la rueda del ratón.
Una textura procedural es una función o algoritmo que devuelve un color para cada punto de la superficie de un
objeto.
Dicha función puede depender de sus coordenadas de textura $(u,v)$, o bien de sus coordenadas en el espacio
$(x,y,z)$, a esta última se les conoce como texturas de volumen o 3D.
Una de las ventajas que tienen las texturas procedurales sobre las imágenes es que pueden ser renderizadas
en cualquier resolución, por lo que no presentará los problemas que suelen aparecer cuando se renderiza una
imagen de cerca. Sin embargo, aún pueden presentar efectos de aliasing .
Otra ventaja es que no se necesita de memoria extra para los mapas, ya que los valores son calculados en tiempo
real.
Por otra parte, si el algoritmo es bastante complejo podría tomar mucho más tiempo que simplemente muestrear
una imagen, además de que podría ser mucho más complicado crear un algoritmo que describa lo que queremos dibujar,
o bien, no estar a nuestro alcance.
Si bien, los colores calculados por la función procedural suelen ser utilizados para reemplzar el color
difuso de la superficie, también pueden ser utilizdos como mapas de texturas de las dos técinas anteriores,
permitiéndonos modificar la dirección de las normales, o bien, la geometría de la superficie,
otro aspecto que también podría modificarse es la transparencia de la misma.
De hecho, también podría realizarse una combinación de éstas técinas de mapeado, incluyendo el de imágenes,
para crear así un aspecto mucho más realista.
Las texturas procedurales son excelentes para simular superficies naturales como la madera, el mármol, granito,
nubes, corteza de árbol, fractales, etc. Podemos dividirlas en dos tipos: geométricas y aleatorias.
Las texturas procedurales geométricas son aquellas que como su nombre lo indica generan patrones geométricos,
algunos ejemplos son líneas, puntos, triángulos, cículos,
estrellas, patrones hexágonales (panal de abejas), el patrón de un tablero de ajedrez, una pared de ladrillos,
fractales, entre muchas otras. En la se muestran algunos ejemplos básicos
de este tipo.
Mientras que las texturas procedurales aleatorias son aquellas que requieren de una función pseudo-aleatoria, la
cual suele estar correlacionada espacialmente, es decir que si dos puntos se encuentran cerca entonces
compartiran parte de sus propiedaes, pero si se encuentran muy separados entonces sus propiedades calculadas
serán muy independientes entre sí. Una de las funciones más utilizadas es la función de ruido de Perlín,
la cual permite simular nubes, explosiones, humo, fuego, entre muchos otros efectos, en la
se muestra ejemplos de esta función.
Una variación de esta función, es la función de turbulencia.
Otra función es la textura celular,
con la cual se crean patrones que parecen células, losas, piel de lagarto, entre otras,
del mismo modo en la se ejemplifica el ruido de Worley que
una función de este tipo.
Otro ejemplo sería el resultado de una simulación física o de algún otro proceso interactivo,
como las ondas de agua o la propagación de grietas.
Por otro lado, la combinación de ambos tipos de funciones puede producir un mejor resultado. Un ejemplo
sería un patron de ladrillos o losas irregulares.
Ejemplos de texturas procedurales aleatorias.
Elige el tipo de función a utilizar, así como la figura sobre la cual quieres que se proyecte.
Cambia el valor Escalar de las coordenadas de textura pausando la Animación.
También puesde mover la posición de la cámara con el ratón o dedo, así como alejarla o
acercarla con la rueda del ratón.
Te invitamos a revisar la página de
Shadertoy para ver increíbles ejemplos de texturas procedurales.
Mapeo ambiental (environment mapping)
El mapeo ambiental más conocido como environment mapping es el conjunto de técinas que nos
permiten simular el efecto de reflexión del entorno sobre un objeto brillante en tiempo real, así
como también simular el efecto de refracción de un objeto translucido o transparente.
En el mapeo ambiental el objeto es rodeado por una superficie tridimensional cerrada sobre la
cual es proyectada el entorno, el cual es almacenado en una textura o conjunto de texturas
llamadas como mapa de entorno o environment map.
El caso más básico de enviroment mapping es el reflection mapping, en donde la superficie
refleja su entorno como un espejo, consiguiendo una apariencia cromada.
De manera similar a la reflexión especular, ésta depende de
la posición del observador, solo que en este caso se calcula el vector de reflexión $\mathbf{R}$
entre el vector de vista $\mathbf{V}$ y la normal $\mathbf{N},$ esto es
$$\mathbf{R} = 2(\mathbf{N}\cdot\mathbf{V})\mathbf{N} - \mathbf{V}$$
una vez calculado este vector se procede a calcular las coordenadas de textura del mapa de entorno y se obtiene
el color. De esta manera las coordenadas de textura cambiaran cuando el observador se mueva, haciendo
que parezca que el objeto está reflejando su entorno.
Vector de reflexión entre el vector normal y de vista.
El mapa de entorno suele ser una textura a la cual se accede utilizando coordenadas esféricas, o bien,
un conjunto de 6 texturas. Nosotros nos enfocaremos en el segundo caso.
En 1986, Green introdujo el Cube mapping, este método es el más utilizado
hoy en día, y su proyección está implementada en los GPUs modernos.
Las texturas de mapas de cubo o cube maps están compuestos por 6 imágenes cuadradas, cada una
asociada a una cara del cubo y que en conjunto forman un entorno, éstas suelen ser visualizadas con
un diagrama de cruz ().
Para acceder a la textura, se toman las coordenadas de los vectores que especifican la dirección de un rayo
que van desde el centro del cubo hacia fuera del cubo. La coordenada de mayor magnitud del vector selecciona la
cara del mapa, luego para obtener las coordenadas $(u,v)$ se dividen las otras dos coordenadas con el
valor absoluto de la coordenada de mayor magnitud, y como ahora se encuentran dentro del rango $[-1,1]$
solo falta mapearlas dentro del rango $[0,1]$. Por ejemplo, sea $\mathbf{b}$ nuestro vector, el cual
apunta en dirección a la cara derecha, entonces su coordenada $x$ es la coordenada de mayor magnitud.
En este caso calculamos
$$ (u,v) = \bigg(\dfrac{z+x}{2|x|}, \dfrac{y+x}{2|x|}\bigg) $$
esto se resuelve de manera análoga para las demás caras.
De manera similar, realizamos este mismo cálculo para cualquer dirección de reflección $\mathbf{R}$,
véase .
Cube mapping. El observador $\mathbf{V}$ ve el objeto y
el vector de reflección $\mathbf{R}$ es calculado con $\mathbf{V}$ y $\mathbf{N}$.
Con el vector de reflexión se accede al mapa ambiental, convirtiendo sus coordenadas a coordenadas
de textura.
Comúnmente también queremos observar el entorno que es reflejado sobre el objeto, para ello simplemente se dibuja
un gran cubo usando los mapas del entorno con el objeto dentro de éste. A esta técnica se le conoce como
Skybox y es ampliamente utilizada en videojuegos. El skybox nos permite representar el entorno de
fondo a un bajo costo, y por lo general contiende objetos distantes al observador como el sol, montañas y nubes,
aunque también puede describir escenas más pequeñas como la de una habitación. Las coordenadas de textura son
obtenidas directamente por las coordenadas del cubo, es decir calculamos a
$\mathbf{b}$ con los vértices de cada cara y los vectores interpolados entre éstas.
Ahora bien, consideremos los siguientes dos casos. El primero es cuando queremos mover los objetos dentro del
skybox, para esto el skybox se mantendría estático, por lo que no tendremos ningún problema obteniendo los valores
del mapa de la manera que ya hemos visto. El segundo caso es cuando queremos mover la posición de la cámara,
entonces la transformación de vista tendría que ser aplicada tanto al objeto con cube mapping como al skybox,
sin embargo, el que el skybox se mueva no quiere decir que la textura lo haga también, es decir, el objeto estará
extrayendo los valores del mapa en su posición original.
Por ejemplo si rotamos $-40$ grados la vista, como se muestra en la ,
entonces obtendremos al punto rosa sobre el mapa de cubo original (el cubo azul), y lo que nos interesa es obtener
el punto azul de la textura. Por lo que necesitaríamos simplemente rotar al vector de $\mathbf{R}$ de regreso
para obtener al punto correcto en la textura.
Esto es aplicar una transformación inversa de la transformación de vista.
Correción del vector de reflexión.
Cabe aclarar que el cube mapping no nos permite reflejar los otros objetos en la escena,
ya que se trata siemplemente de una manera de mapear las texturas del cubo sobre el objeto. El objeto a renderizar
también puede combinar esta técina junto alguna otra de las técnica de mapeado para crear superficies que no sean
totalmente reflexivas.
Si es de tu interés puedes revisar esta página
para conocer un poco de la historia del environment mapping.
Cube mapping. Mueve la posición de la cámara con el ratón o dedo y
observa cómo cambia la parte del entorno que es reflejada sobre el objeto de acuerdo a su posición.
Texturas de una parte de la plaza frente a la Basílica de San Pedro
obtenidas de http://www.humus.name/index.php?page=Textures.
