CAPÍTULO I

# Introducción a la graficación por computadora

## Aplicaciones de la graficación por computadora

La graficación por computadora (GC) es un campo multidisciplinario bastante amplio, donde tanto computólogos, matemáticos, físicos, ingenieros, artistas y otros practicantes comparten un mismo objetivo "mostrar un mundo a través de una ventana", nos podemos referir como mundo a un modelo digital, una simulación, o bien, cualquier representación visual que se busque mostrar, y como ventana a cualquier medio para mostrar imágenes, como un proyector, la pantalla de un monitor, tablet, entre otros. Por lo que nos podemos dar una idea de las multiples aplicaciones que se pueden obtener en este campo sobre los diferentes ámbitos, veamos algunas de estas aplicaciones:

- Industria del entretenimiento

Creación de películas o caricaturas sintéticas, publicidad, efectos visuales y videojuegos.

- Ingeniería Mecánica

Diseño de prototipos virtuales de partes mecánicas para su construcción, utilizando sistemas CAD/CAM (Computer-Aided Design/ Computer-Aided Manufacturing).

- Arquitectura

Uso del software CAD para la creación de planos de alguna estructura arquitectónica, visualizaciones de espacios antes y después de una construcción planeada.

- Diseño

Diseño y creación de productos, haciendo uso de sistemas CAD/CAM, promoviendo la creatividad del diseñador al permitirle experimentar con varias formas antes de producir la idea final.

- Patrimonio cultural

Reconstrucciones virtuales de templos, monumentos, piezas antiguas, o bien, reconstrucciones hipotéticas de escenas.

- Medicina

Simulaciones virtuales de cirugías para entrenamiento y visualización de datos dados por algún instrumento de diagnóstico.

Asimismo, se han ido desarrollando un gran número de áreas de especialización, las cuales han ido evolucionando de acuerdo a las necesidades de los usuarios y al avance tecnológico en el hardware y software. Las principales suelen ser las siguientes:

- Renderización

Es el proceso para generar una imagen final dada una entrada ordenada de datos, se suele clasificar dependiendo del algoritmo que se use, generalmente se toma como referencia el tiempo que a éste le tome en producir una imagen sintética (Real time rendering, Offline rendering), o bien, el tipo de técnica de renderizado que utilice (Photorealistic rendering, non-photorealistic rendering o information visualization).

- Modelado

Es la especificación matemática del mundo a representar, es decir, se describen los objetos y sus propiedades de un modo que éstos puedan ser almacenados en la computadora, por ejemplo, una manzana puede ser descrita como un conjunto de puntos 3D, los cuales forman caras ordenadas, con un modelo de iluminación especifico para describir cómo interactúa la luz con la manzana.

- Animación

Es la creación de una secuencia de imágenes con una computadora, que tiene como finalidad producir la ilusión de movimiento. Si bien, hace uso de las dos áreas anteriores, no se encarga del estudio de éstas, pues su objetivo es añadir alguna animación sobre un rango de tiempo específico a los modelos, con la cual modifica algún aspecto de éstos, como su color, posición, apariencia, entre otros.

Y entre algunas otras áreas de relevancia se encuentran:

- Simulación

Es el proceso en el que un modelo matemático es ejecutado y representado con una computadora, la cual es usada para simular un comportamiento y su repercusión en el mundo real, o bien, dentro de un sistema físico impuesto, permitiendo revisar la fiabilidad del modelo, por lo cual es útil para modelar sistemas en física, astrofísica, climatología, química, biología, economía, ingeniería, etc. Por ejemplo, el movimiento de las partículas del agua en una ola, o bien, la simulación en tiempo real de un escenario de entrenamiento, como volar un avión. Las simulaciones garantizan un menor costo y mayor seguridad para los usuarios.

- Fotografía Computacional

Es el uso de las técnicas de graficación por computadora, visión artificial y proceso digital de imágenes empleadas para mejorar el potencial de la fotografía digital y la calidad de la captura digital de imágenes, desarrollando otras formas de capturar objetos, escenas y ambientes. Permitiéndonos producir equipos fotográficos de bajo costo capaces de identificar caras, hacer reenfoques, panorámicas, e incluso hacer que el resultado luzca similar o mejor al de un equipo caro.

- Escaneo en 3D

Es el proceso de colectar información de objetos del mundo real para crear un modelo 3D, desarrollando muchos dispositivos y algoritmos para obtener la geometría y apariencia del objeto real, dichos modelos son utilizados para crear visualizaciones.

- Proceso Digital de Imágenes

Es la aplicación de técnicas y algoritmos para la manipulación de imágenes 2D, para obtener información de éstas, o bien, mejorar su calidad.

- Realidad Virtual

Es la simulación de un entorno virtual en 3D generado por computadora, que intenta hacer experimentar al usuario una sensación de estar inmerso en él. Aunque puede ser proyectado simplemente en la pantalla de un dispositivo como un monitor, se suelen utilizar otras tecnologías tales como cascos de realidad virtual, guantes, o incluso diseñar espacios, para intensificar las sensación de realidad y que además le permita una mejor interacción con el mundo virtual, creando imágenes realistas, sonidos y otras sensaciones.

- Realidad Aumentada

Es la visualización de un espacio real en donde a los objetos tangibles de éste se les añade información gráfica generada por computadora, es decir, elementos virtuales son agregados al mundo real, cubriendo total o parcialmente a objetos del entorno, y permitiéndole al usuario interactuar en tiempo real dentro de este espacio mixto.

## Cámara estenopeica (pinhole camera)

Para producir imágenes por computadora de escenas 3D, es importante entender primero cómo son producidas las imágenes de manera tradicional, con una cámara física y en el sistema de visión humano (que es el siguiente subtema), pues también vivimos en un mundo tridimensional.

La cámara estenopeica o cámara pinhole es la cámara real más simple que existe, lo cual la hace el modelo más utilizado en GC, ya que es más sencillo de reproducir y menos costoso. Es importante entender el funcionamiento de esta cámara ya que retomaremos algunos conceptos de ésta más adelante.

La cámara estenopeica es muy simple, consta de una caja a prueba de luz, con un agujero o apertura muy pequeña en el centro de uno de sus lados, y una película fotográfica o algún material fotosensible en la cara interior contraria al agujero, sobre la cual se proyecta la imagen invertida de la escena exterior cuando la apertura es abierta (Véase la ).

Cámara pinhole.

El principio que sigue esta cámara es el mismo que el de una cámara obscura, fenómeno que fue descubierto desde la antigüedad y que permitía estudiar eventos como el eclipse solar. Dicho fenómeno se experimentaba dentro cuartos obscuros con una pequeña abertura, la cual permitía la entrada de la luz, y formaba una imagen invertida de la escena exterior. El siguiente video es de National Geographic (todos los derechos reservados) y muestran cómo convertir tú propio cuarto en una cámara obscura.

En el mundo real tenemos varias fuentes de luz, siendo el sol la principal de éstas. Y cuando los rayos de luz chocan contra un objeto, éste puede absorberlos y/o reflejarlos en todas las direcciones. Por lo que, cuando tomamos una foto, solo aquellos rayos de luz que son reflejados del exterior hacia la cámara pasan a través de la pequeña apertura para formar la imagen sobre la película.

Supongamos que colocamos nuestra cámara a lo largo del eje $z$, con la apertura en el centro del sistema de coordenadas, mirando hacia $z+$. Y que la película fotográfica se encuentra a una distancia $d$ de la apertura.

Cámara estenopeica. Proyección del punto exterior sobre la película.

Entonces, de todos los rayos que se reflejan desde algún punto $P =(x, y, z)$ en el exterior, solo un rayo, o más precisamente, un haz de luz muy estrecho logra entrar por la apertura, hasta que finalmente choca sobre el material fotosensible en el punto $P' =(x', y', z')$, véase .

Cámara estenopeica (vista de perfil).

Ahora bien, considerando lo que pasa cuando un rayo de luz atraviesa la apertura, de la , podemos observar que los dos triángulos rectángulos que se forman, uno con el punto exterior $P = (x,y,z)$ y otro el punto proyectado $P'$, son semejantes, permitiéndonos calcular la posición del punto proyectado $P'$. Sabemos que la película se encuentra a distancia $-d$ del origen en $z$, entonces: $$ y' = -\frac{y}{z/d} \quad \text{y} \quad x' = -\frac{x}{z/d} $$ $$ \Rightarrow P' = (x', y', -d)$$ Así el color del punto $P'$ en nuestra película sería el mismo que el del punto exterior $P$, proyectando la imagen de manera invertida.

Otro aspecto a considerar, es el ángulo de visión o campo de visión, que es qué tanto de la escena se alcanza a mostrar, o bien, qué tan grandes se ven los objetos del exterior.

Dicho aspecto depende también de la distancia $d$ que hay entre la película y la apertura, conocido como distancia focal. Ya que al acercar la película a la apertura, los objetos se hacen más pequeños y una mayor parte de la escena es proyectada, es decir, pareciera que nos alejamos, haciendo más amplio el ángulo de visión.

Y por el contrario, cuando alejamos la película de la apertura (mayor distancia focal), se muestra una porción más pequeña de la escena, es decir, como si nos acercáramos, haciendo más estrecho el ángulo de visión, como podemos notar en la

Cámara estenopeica. Mueve el slider para modificar la distancia focal $d$ de la cámara y observe su relación con la amplitud el ángulo de visión $\theta.$

Por lo que sí la altura de la cámara es $\bm{h}$, entonces el ángulo de visión $\bm{ \theta}$ estaría dado por $$ tan \left( \frac{ \theta}{2} \right) = \frac{h/2}{d} \quad \Rightarrow \quad \theta = 2 tan^{-1} \frac{h}{2d}.$$

Dicho ángulo de visión puede ser definido de manera vertical, conectando la apertura con las esquinas superior e inferior de la película, o bien, de manera horizontal, conectado los extremos derecho e izquierdo de la película.

La cámara pinhole tiene un campo de profundidad infinito, esto quiere decir que cada punto en la escena dentro del campo de visión es proyectado dentro de la cámara.

En GC se suele posicionar el plano de proyección o película en $z = d$, que es algo que no funcionaría con una cámara real, pero en el mundo virtual de la computadora sí, evitando así los signos negativos y colocando la imagen en la posición original (de arriba hacia abajo).

Entonces, el punto proyectado estaría dado por $$P' = (x',y',z') = (\frac{dx}{z}, \frac{dy}{z}, d)$$

Renombrando también al punto estenopeico como el "ojo" o posición de la cámara, o solamente como viewpoint; y el plano de proyección o la película, como image plane, digamos nuestra imagen final compuesta de pixeles.

Plano de proyección (paralelo eje $XY$)

Si bien, lo ideal sería que la apertura de la cámara pinhole pudiera capturar un solo rayo de luz por punto, ya que de este modo, habría una única correspondencia entre los puntos en el exterior y los puntos proyectados, obteniendo una imagen nítida como resultado.

Pues de lo contrario, cada punto en el exterior podría proyectarse varias veces y producir una imagen desenfocada o borrosa. Este efecto se puede apreciar más cuando se fotografían objetos pequeños y brillantes con un fondo obscuro, generando círculos borrosos.

Fotografía desenfocada: Alumbrado público de noche. Foto por Raziel Almanza.

No obstante, en el mundo real, no es posible hacer tal apertura, ya que si el agujero es demasiado pequeño (comparable con el tamaño de la longitud de onda de la luz), lo rayos son difractados, sin embargo, se puede encontrar un

diámetro lo suficientemente pequeño para lograr obtener una buena imagen. Por ejemplo, una apertura de 2mm en una caja de zapatos, produce muy buenos resultados.

La cámara estenopeica tiene dos desventajas, una es que al tener una apertura muy pequeña, se requiere de más tiempo de exposición, pues se necesita de cierta cantidad de luz para formar la imagen sobre el material fotosensible; y en consecuencia se produce un efecto borroso si la cámara o algo en la escena exterior se mueve. La segunda es que no es posible modificar la distancia focal de la cámara, para obtener un mayor o menor campo de visión. Cabe mencionar, que éstos no son un problema en el mundo virtual.

Dichas desventajas se pueden solucionar agregando un lente sobre la apertura. Los lentes permiten una mayor apertura, para pasar más luz a la cámara y a su vez, redireccionando los rayos de luz reflejados por un mismo punto en el exterior a puntos únicos sobre la película. Proporcionando una imagen nítida en menor tiempo de exposición, lo cual resuelve el primer punto. Mientras que para el segundo, basta con elegir o ajustar los lentes a una distancia focal deseada.

## El Sistema de Visión Humano

La visión, es quizás el sentido más importante que tenemos, ya que nos proporciona información útil, como percibir increíbles imágenes, así como el movimiento y diferenciar objetos, siendo fundamental para la supervivencia del ser humano a lo largo del tiempo.

Anatomía del ojo humano.

El sistema de visión humano (SVH) nos ayuda a comprender este complejo proceso biológico y psicológico, el cual, a pesar de ser tan complejo, sigue respetando los principios físicos de cualquier otro sistema óptico. Dicho sistema está compuesto por los ojos y el cerebro.

El proceso comienza cuando la luz llega al ojo y entra a través de la cornea (Ver )), que a su vez pasa por la pupila, la cual (controlada por el iris) puede cambiar el tamaño de su diámetro de 2mm a 8mm, regulando la cantidad de luz que entra, y que es refractada por el cristalino sobre la retina, proyectando la imagen de manera invertida (como en la cámara pinhole).

La retina contiene fotorreceptores o receptores de luz, llamados conos y bastones, estos receptores transforman la luz en pulsos eléctricos (de acuerdo a su sensibilidad y la intensidad de la luz), los cuales transportados por el nervio óptico, llegarán al cerebro para ser interpretados.

La luz es una forma de radiación electromagnética que se propaga en forma de onda, de la cual el ser humano sólo puede percibir aquella que se encuentre dentro del espectro visible (). La luz visible suele ser definida como aquella que tiene longitudes de onda que rondan en un rango de 380nm a 780nm, entre la luz ultravioleta e infrarroja.

Espectro visible por el ojo humano.

Los bastones, son los más numerosos, y son responsables principalmente de nuestra visión nocturna (visión escotópica), debido a que pueden captar cantidades muy bajas de luz. Además, son más sensibles a la detección de movimiento o flicker y a la visión periférica, debido a su distribución sobre la retina.

Mientras que los conos son menos sensibles, y responden a niveles altos de luz (visión fotópica), es decir, durante el día, o bien, con cantidades normales de luz, éstos nos permiten percibir los colores, así como detalles más finos y un cambio de imágenes más rápido, esto último debido a que responden más rápido que los bastones.

Un punto medio, es decir, cuando los niveles de luz se encuentran en un nivel intermedio (visión mesópica), ambos receptores son utilizados. Aquí es donde empieza nuestra visión del color, así como la saturación de nuestros bastones. Un ejemplo de la visión mesópica sería, cuando vamos caminando por la calle de noche con alumbrado público.

La mayoría de los conos se concentran en la fóvea, por lo que es la área con mayor agudeza visual. Esta área está libre de bastones, sin embargo, a medida en que nos vamos alejando hacia la periferia del ojo, el número de conos decrece mientras que el número de bastones incrementa. Por esta razón también es que podemos ver una estrella con poca luminosidad al no enfocarnos en ella.

Existen tres tipos de conos: L (long), M (medium) y S (short), que como sus nombres lo indican, están definidos de acuerdo a la parte del espectro visible a la que son más sensibles.

Pues como podemos observar en , la distribución de las respuestas de cada uno de los conos no es uniforme, y abarcan rangos de longitudes de onda que se intersecan entre sí, sin embargo, cada tipo tiene un punto máximo diferente. De modo que, los conos L son más sensibles a las longitudes de onda más largas, correspondiendo a la parte roja del espectro visible, los conos M a las longitudes de onda medianas, siendo la parte verde del espectro y los S a las más cortas, es decir, la parte azul del espectro.

Espectros de respuestas normalizada de los conos: S, M y L.

Cabe aclarar que no es que las longitudes de ondas sean de cierto color, puesto que no es una propiedad de la luz, es el cerebro quien las interpreta o produce la sensación del color, así como de tamaño y forma. Por lo que se podría decir que cada cono es capaz de percibir cierto rango de colores.

Por ejemplo, cuando percibimos el color amarillo es porque los conos tipo L se estimulan un poco más que los M. Del mismo modo, cuando percibimos el color azul es porque los conos tipo S se estimulan más. Mientras que para el blanco, todos los conos son estimulados por igual.

Como consecuencia, al tener solo a estos tres tipos de receptores del color (en lugar de tener un tipo de cono distinto para cada una de las longitudes de onda), se simplificó bastante la tarea de manejar los colores en una pantalla, pudiendo del mismo modo aproximarnos a cualquier otro color por medio de los tres primarios.

Otra característica interesante es que los humanos somos más sensibles a los cambios de brillo que de color, el brillo es la intensidad con la que percibimos la luz emitida por un objeto. Por lo que, dicha propiedad ha sido tomada para la compresión de imágenes, donde la información de los colores se comprime más que la información de la iluminación.

## Color

La imagen de la izquierda ilustra una escena alegre y contiene con colores con colores cálidos (Birthday vector created by upklyak - www.freepik.com), mientras que la imagen de la derecha contiene colores fríos y muestra una escena triste Kids vector created by brgfx - www.freepik.com.

El color es un aspecto fundamental para la graficación por computadora, ya que además de ser una característica importante en los objetos, nos permite transmitir sensaciones y emociones. Por ejemplo, una escena con colores cálidos puede evocar desde sentimientos de calidez y confort hasta ira u hostilidad, mientras que una escena con colores fríos evoca calma, o bien, sentimientos de tristeza o indiferencia (ver ).

Podemos pensar en el color en dos niveles. En un nivel físico, que consiste en todas las leyes físicas que se involucran en el SVH para crear la sensación del color, y en un nivel perceptual o subjetivo, que se refiere a cómo lo percibimos.

Y debido a la influencia de los diferentes factores, tanto objetivos como subjetivos, se han creado una variedad de modelos para representar a los colores.

### Modelo RGB

El modelo RGB, también conocido como Additive Color Model o modelo natural, ya que de manera similar a nuestros receptores de colores, se combinan las intensidades de los tres colores primarios (Rojo, Verde y Azul), para obtener un color y es el modelo más utilizado.

Podemos pensarlo como tres lámparas que proyectan los colores primarios sobre una pared blanca, en un cuarto obscuro. De este modo, en la pared blanca se reflejaría el color de las luces, así como la correspondiente combinación aditiva de las luces que estén superpuestas. En especial, al superponer las tres luces, podríamos obtener cualquier color al ir ajustando de manera adecuada la intensidad de cada una.

Una representación del modelo aditivo utilizando tres luces con los colores primarios sobrepuestas entre sí. Obsérvese que el la luz verde con la luz roja forman el color amarillo, la luz azul con la roja el colo magenta, la luz azul con la verde el color cyan, y las tres se acercan al color blanco. Puedes modificar la intensidad de cada color con los sliders.

Su espacio de color puede ser representado por el cubo unitario $[0,1] \times [0,1] \times [0,1]$ como se muestra en la , donde un color es representado por

una tripleta (R,G,B), haciendo referencia a un punto en el cubo, e indicando al mismo tiempo la intensidad de cada componente. Se asigna el color negro al origen $(0,0,0)$, y conforme la intensidad de los colores incremente se llega al color blanco en $(1,1,1)$ al moverse a lo largo de los ejes.

Modelo de color RGB. Se invita al lector a mover el modelo con el ratón así como variar los valores R,G y B.

Comúnmente, se utilizan 8-bits por componente, por lo que cada uno puede representar hasta $2^8 = 256$ valores diferentes.

Algunos de los dispositivos en los que se emplea este modelo son las pantallas (CRT, LCD, LED, OLED, AMOLED), cámaras digitales y escáneres. Por el contrario, la manera en que especifican un color RGB no es muy intuitiva.

### Modelo HSV

El modelo HSV está basado en el sistema de color de Munsell, el cual intenta acercarse más a la manera en la que percibimos los atributos de los colores, simulando el modo en que un pintor obtiene un color, al mezclar el pigmento con color blanco y/o negro, con el fin de obtener un color más claro, más obscuro u opaco.

Su espacio de color es modelado con un cono o una pirámide hexagonal inversa, y como su nombre lo indica, está definido por sus componentes:

- H (Hue) es un ángulo entre $0 \mathring{}$ y $360 \mathring{}$, donde cada valor corresponde a un color “puro” (en el espectro visible) o pigmento en la circunferencia del modelo. Empezando con el color rojo en $0 \mathring{}$ y el verde en $120 \mathring{}$.
- S (Saturation) $\in [0,1]$, se relaciona con la pureza o intensidad del color, es decir, qué tanto vamos a diluir o rebajar el pigmento con un tono entre los colores blanco y negro, definido por el último componente. Donde 1 es el color puro y 0 es el tono en V, correspondiendo a la generatriz del cono, o bien, el radio del cilindro.
- V (Value) $\in [0,1]$, donde 0 es el color negro y 1 el blanco, haciendo referencia al factor de brillo, correspondiendo al eje del modelo.

Modelo de color HSV. Se invita al lector a mover el modelo con el ratón así como variar los valores H,S y V.

### Espacio de color y gamut

Cuando un modelo de color es asociado con una función que mapea los colores reales o físicos a los elementos del modelo, se le conoce como espacio de color.

Existen espacios de colores que son capaces de representar cualquier color, sin importar la manera en la que serán físicamente reproducidos, estos se conocen como espacios de color independientes de los dispositivos . Por otro lado, los espacios de colores dependientes de los dispositivos, tienen que lidiar con el hecho de que no todos los colores físicos pueden ser reproducidos.

De modo que, un dispositivo en particular puede producir un conjunto de colores específico, conocido como gamut o gama de colores reproducibles. Por lo que los colores que no se encuentren dentro de la gama, no podrán ser reproducidos de manera adecuada.

El gamut de los espacios de colores dependientes, suelen ser definidos en el diagrama de cromaticidad del espacio de color estándar CIEXYZ (Ver ), creado por la Comission International de l'Eclairage en 1931. El cual es un espacio de color independiente, basado en un experimento científico, que

Diagrama de cromaticidad del espacio de color The CIE 1931.

engloba todos los colores del espectro visible que en promedio podemos distinguir. Estableciendo los tres colores primarios a partir de los cuales se generan todos los demás.

Comparación del gamut entre espacios de colores sobre el diagrama de cromaticidad del espacio de color The CIE 1931. Autor: BenRG and cmglee. Licencia.

Por ejemplo los espacios sRGB y AdobeRGB, son dos espacios de colores distintos asociados a un mismo modelo de color, donde la tripleta RGB(21,03,97) podría mostrar un color diferente en cada espacio. Pues como podemos notar en la , a pesar de que comparten los colores primarios rojo y azul, el verde es distinto, haciendo que la gama de colores del espacio de color AdobeRGB sea más amplia que la del sRGB.

Otro ejemplo en donde encontramos una diferencia a simple vista, es entre la gama de colores de una impresora de oficina y un monitor, donde el rango de colores de la impresora está mucho más limitada.

## El pipeline gráfico

El pipeline gráfico o rendering pipeline es el proceso que se requiere para renderizar o generar una imagen 2D, dado un conjunto de datos de entrada que describen un escena tridimensional.

El pipeline se divide en varias etapas, las cuales cumplen con cierta parte del proceso; estas etapas son ejecutadas en paralelo, pero cada una depende del resultado de la etapa previa.

Podemos pensarlo como el proceso dentro de una fábrica ensambladora, o bien, como la analogía que nos dan en , de una cocina de comida rápida. En donde para preparar rápido un gran número de sándwiches, se dividen las tareas entre varias personas, de manera que la primera le unta el aderezo al pan, la segunda le pone el jamón, y así consecutivamente; de modo que cada etapa espera a que la etapa previa haya terminado, para realizar su tarea y continuar con el proceso.

Si bien, no hay una sola forma de llevar a cabo el pipeline, mencionaremos las 4 etapas fundamentales: Aplicación, Procesamiento Geométrico, Rasterización y Procesamiento de pixeles, dentro de las cuales también tienen sus propios pipelines, es decir, se subdividen en varias etapas. REF..

Etapas del Pipeline Gráfico

Esta estructura es el motor del pipeline gráfico, y es usada en aplicaciones en tiempo real.

Vale la pena mencionar, que en este tipo de renderizado, también llamado renderizado por rasterización, es un proceso distinto al de ray tracing, donde por cada pixel se calcula su respectivo color de acuerdo a los objetos que lo intersecan. Ya que en el renderizado por rasterización se considera a cada objeto y se buscan los pixeles que lo conforman.

A continuación, explicaremos un poco de lo que trata cada etapa del pipeline (sin meternos en detalles de implementación).

### Aplicación

La Aplicación, como su nombre lo indica esta etapa es ejecutada por la aplicación misma, es decir, el software que es ejecutado desde el CPU. Aquí es el programador quien tiene todo el control, pues es el que se encarga de definir las funcionalidades que ésta va a tener, por lo mismo, es también, donde se pueden hacer optimizaciones en el desempeño de dicha aplicación.

En esta etapa es donde son implementadas otras tareas de acuerdo a los objetivos del desarrollador, como detectar colisiones entre dos objetos, definir animaciones o simulaciones de modelos físicos, entre otras. Así como la implementación de algoritmos de aceleración.

También es la que se encarga de manejar la interacción con otros dispositivos de entrada, definiendo las acciones a ejecutar de acuerdo a la entrada, por ejemplo, cuando alguien presiona una tecla o mueve el cursor del ratón.

Y es donde se especifica la geometría que se quiere renderizar, para ser procesada en a la siguiente etapa. Dicha geometría es especificada con primitivas de renderizado, las cuales pueden ser líneas, puntos o triángulos que finalmente podrían ser mostradas en la pantalla.

A partir de la siguiente etapa las operaciones son realizadas desde el GPU.

### Procesamiento Geométrico (o de vértices)

El Procesamiento geométrico o de vértices, se encarga de convertir los vértices en primitivas, realizando la mayoría de las operaciones por vértice y por triángulo, dicho proceso se describe en el siguiente diagrama.

Etapas en el procesamiento geométrico.

En el Vertex shading se efectuan la mayoría de las transformaciones para calcular las posiciones de los vértices y de otros datos o atributos asociados a éstos, como serían las normales de los vértices o algún otro vector que se quiera calcular, así como las coordenadas de textura o un color.

Para empezar, tenemos de entrada la descripción geometrica de cada uno de los modelos que queremos, es decir, por cada objeto, tenemos un conjunto de vértices ordenados, los cuales forman o describen a dichos objetos, y se encuentran descritos en su propio espacio local ().

Espacio local. Por lo regular los objetos son descritos con su punto céntrico en el origen. Puedes mover la posición de la cámara con el ratón o dedo para tener una mejor vista.

Las coordenadas de un objeto se conocen como coordenadas locales, sobre las cuales se pueden aplicar una serie de transformaciones para modelar al objeto (escalarlo, rotalo y/o trasladarlo), a estas transformaciones se les llaman transformaciones de mundo o de modelo ().

Transformación de modelo. Se transforman las coordenadas locales del objeto a coordenadas globales.

Una vez que éstas han sido aplicadas, se dice que los objetos se encuentran posicionados en el espacio global o de mundo, donde los objetos ya están ordenados dentro de un mismo espacio.

La siguiente transformación a aplicar es la transformación de vista, ésta es la que modela la cámara, ya que lo que nos interesa renderizar será lo que la cámara (o el observador) esté viendo. Efectuando un cambio de base de las coordenadas del mundo a las coordenadas de la cámara, es decir, del espacio global al espacio de la cámara, también llamado view space o eye space. Colocando a la cámara en el origen, mirando comunmente en dirección al eje $z$ negativo ($z-$), con el eje $y$ positivo ($y+$) apuntando hacia arriba , y el eje $x$ positivo ($x+$) a la derecha ().

Transformación de vista. En la visualización superior izquierda se muestra la cámara dirigida y posicionada en donde queremos que esté dentro del espacio global. En la visualización superior derecha se muestra cómo todos los objetos son reorientados al espacio de la cámara de modo que la cámara termine en el origen y apuntando hacia $z+$. En la última visualización se muestra lo que la cámara esta viendo de acuerdo con la posición y dirección definida. Se considera la proyección de perspectiva para visualizar los objetos, y su volumen de vista se describe por el frustrum de las escenas. Se invita al lector a modificar los valores de la posición y dirección de la cámara. Amplia el interactivo para poder observar mejor lo que ocurre. Puedes mover la posición de la cámara de las escenas superiores con el ratón o dedo, así como alejarte o acercarte con la rueda del ratón para tener una mejor noción del espacio.

Hasta aquí ambas transformaciones (de modelo y de vista) también suelen ser aplicadas a las normales de los vértices, así como otros véctores que ayuden a modelar el aspecto del objeto. Por esta razón, la parte programable del procesamiento de vértices es llamada como vertex shader. Y dichas transformaciones pueden ser implementadas con matrices de 4x4, las cuales veremos también en el Capítulo 4 y 5.

Sin embargo, tanto la posición de los vértices como de los otros atributos pueden ser calculadas o modelados como el programador prefiera.

La siguiente etapa es la de Proyección, y en ésta se efectúa otra transformación, la cual también puede ser efectuada con una matriz $4 \times 4$, por lo que suele ser concatenada a las matrices de transformación anteriores dentro del vertex shader. Este tipo de matrices de transformación son llamadas de proyección ya que lo que se busca es proyectar lo que se está viendo en la pantalla de la cámara, de manera similar a lo que ocurre con la cámara pinhole.

En esta etapa se define el volumen de visión que ve nuestra cámara, el cual define el espacio de la escena a renderizar, y que será transformado en un cubo unitario, también llamado volumen canónico de vista, el cual suele tener sus extremos en $(-1,-1,-1)$ y $(1,1,1)$. Para ello, se elige un tipo de proyección con la que se definirán los límites del volumen de visión o clipping volume y se transformará en el cubo unitario, para la conveniencia de las etapas posteriores, pasando las coordenadas de vista a coordenadas de clipping o de recorte. Los dos tipos de proyección más utilizados son la proyección ortográfica y la de perspectiva, obsérvese la .

Proyección Ortgonal (izquierda) y Proyección de Perspectiva (derecha).

En la primera se utiliza un volumen de visión con forma de prisma rectangular, en esta los puntos son proyectados de manera paralela y el volumen de visión ortogonal es transformado en un cubo unitario. Por otra parte, la proyección de perspectiva tiene un volumen de visión con forma de pirámide truncada o frustrum como el que vimos en la , este tipo de proyección nos proporciona una sensación más realista de profundidad, ya que mientras más alejado se encuentre un objeto de la cámara más pequeño se verá. Y del mismo modo, el frustrum es transformado a un cubo unitario.

Con ésta última transformación se finaliza el proceso del vertex shader.

El objetivo del Clipping es descartar total o parcialmente aquellas primitivas o partes de primitivas que queden fuera del volumen de visión. Pues recordemos que lo que nos interesa renderizar es lo que esté adentro de éste, por lo que sí la primitiva se encuentra completamente dentro del volumen entonces pasa a la siguiente etapa para ser renderizada y por el contrario, si se encuentra completamente fuera es descartada. Por otro lado, sí la primitiva se encuentra parcialmente dentro, entonces es recortada, generando nuevos vértices y primitivas a partir de la intersección con el volumen y los vértices que quedan fuera de éste son descartados ().

Clipping. Un polígono es cortado con respecto a un plano del volumen de visión, la porción que queda afuera es recortada del poligono, generando así nuevos vértices, mientras que la que queda dentro es retenida para la siguiente etapa.

Finalmente, se normalizan las coordenadas de clipping con la división de perspectiva, al dividir las coordenadas entre su última componente $w$, convir-

tiéndolas a coordenadas normalizadas del dispositivo o NDC (Normalized Device Coordinates). El término de normalizadas en NDC viene de que las coordenadas de los puntos están dentro del rango de $[-1,1]$.

Como última etapa del procesamiento geométrico tenemos al Screen mapping, también conocida como transformación de pantalla o viewport, que como su nombre lo indica, se encarga de transformar las coordenadas $x$ y $y$ en coordenadas de pantalla o window coordinates, las cuales son pasadas a la etapa de rasterización, en conjunto con su coordenda $z$.
Dicha transformación es efectuada de acuerdo a las coordenadas de pantalla de la ventana sobre la que se renderizará la escena.

Screen Mapping. Se transforman las coordenadas de clipping a coordenadas de pantalla: Teniendo como extremo inferior de la ventana en $(x_1,y_1)$ y el extremo contrario superior en $(x_2,y_2)$, con $x_1 < x_2$ y $y_1 < y_2$.

### Rasterización

Etapas en la rasterización.

Esta etapa es también conocida como scan conversion, y es la responsable de convertir los vértices de coordenadas de pantalla, y otra información asociada a éstos, en pixeles. Este proceso consta de dos etapas.

La primera etapa, es el Ensamblado de primitivas o Triangle setup, que se encarga simplemente de ensamblar conjuntos de vértices en primitivas.

Y en la segunda, Triangle traversal, es donde se buscan aquellos pixeles que se encuentran dentro de una primitiva, o bien, que por lo menos su centro lo esté; generando un fragmento por cada uno de éstos, los cuales podemos pensarlos como un posible pixel con una información asociada, la cual es resultado de la interpolación entre los vértices a lo largo de la primitiva. Dicha información guarda la profundida de pixel (su valor en $z$) y cualquier otro dato del vertex shader.

Triangle Traversal. Se determinan los pixeles de la pantalla que cubren una primitiva.

Finalmente dichos fragmentos (o pixeles) son enviados a la siguiente y última etapa.

### Procesamiento de pixeles (o de fragmentos)

Es la última etapa del pipeline, y también se puede dividir en dos etapas: Pixel shading y Merging.

Etapas en el procesamiento de fragmentos.

En el Pixel shading es donde se realizan las operaciones del fragment shader, utilizando la información asociada de cada fragmento; y pasando finalmente el color (o los colores) resultantes de cada pixel.
Existen varias técnicas para producir el color de los pixeles; la más importante es el mapeado de texturas, la cual consiste en aplicar una textura sobre un objeto, en otras palabras, es como si pegáramos o envolviésemos con una o varias imágenes sobre un objeto.

Ejemplo de mapeo de textura sobre una esfera. Texturas del planeta Marte obtenidas de https://www.solarsystemscope.com/ bajo la Licencia CC BY 4.0.

Y por último tenemos el Merging, y en éste, prácticamente se determina el color final que tendrá cada pixel en la pantalla. Dichos colores son almacenados en el búfer de color, el cual es un arreglo bidimensional, y es inicializado con un color inicial o color de fondo.

Durante esta etapa se resuelve la visibilidad de los fragmentos de acuerdo a su valor de profundidad, es decir, los colores almacenados en el búfer de color deberá contener los colores de las primitivas que son visibles. Comúnmente ésto es calculado con el algoritmo del z-buffer.

También se pueden realizar otros efectos para determina el color final de cada pixel, como el de transparencia, donde se aplica una función de mezclado o blending que indica cómo se combinan los colores con transparencia. O bien, una operación de plantilla o stencil en el que se descartan ciertos fragmentos para después ser pasados por el test de profundidad (y descartar más).

Finalmente el contenido del búfer de color es desplegado en la pantalla.

## Referencias bibliográficas

Eck, David. Introduction to Computer Graphics. Version 1.2. 2018. http://math.hws.edu/graphicsbook Computational photography. 23 de Enero del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Computer_simulation&oldid=934831377 3D Viewing: the Pinhole Camera Model. Scratchapixel. Recuperado el 26 de Febrero del 2020 de https://www.scratchapixel.com/lessons/3d-basic-rendering/3d-viewing-pinhole-camera Computer simulation. 8 de Enero del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Computer_simulation&oldid=934831377 Virtual Reality. 26 de Febrero del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Virtual_reality&oldid=942740811
Realidad aumentada. 16 de Marzo del 2020. Wikipedia. https://es.wikipedia.org/w/index.php?title=Realidad_aumentada&oldid=124304756 Visual system. 5 de Abril del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Visual_system&oldid=946202371 Human visual system model. 13 de Febrero del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Human_visual_system_model&oldid=940628106 Visión. 2 de Abril del 2020. Wikipedia. https://es.wikipedia.org/w/index.php?title=Visi%C3%B3n&oldid=124802496 Gonzáles, Vicente. 27 de Septiembre del 2014. El Sistema Visual Humano. UAL. https://w3.ual.es/~vruiz/Docencia/Apuntes/Perception/Sistema_Visual/ index.html Trichromacy. 18 de Febrero del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Trichromacy&oldid=941417876 Visión mesópica. 30 de Agosto del 2019. Wikipedia. https://es.wikipedia.org/w/index.php?title=Visi%C3%B3n_mes%C3%B3pica&oldid=118741381 Cone cell. 20 de Mayo del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Cone_cell&oldid=957858342 Nave, Carl R. 2001. Rods and Cones. Hyperphysics. http://hyperphysics.phy-astr.gsu.edu/hbase/vision/rodcone.html CJ Kazilek, Kim Cooper. 6 de Junio del 2006. Rods and Cones of the Human Eye. ASU - Ask A Biologist. https://askabiologist.asu.edu/rods-and-cones Kusyk, Janusz., Czudec, Pawel. s. f. Color Perception. StonyBrook - CS. https://www3.cs.stonybrook.edu/~lori/classes/ColorPerception/ addproperties.html Peter K. Kaiser. 1996. The Joy of Visual Perception. YORKU. http://www.yorku.ca/eye/toc.htm
Rod cell. 12 de Abril del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Rod_cell&oldid=950548955 Light. 16 de Abril del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Light&oldid=951305118 Color model. 4 de Febrero del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Color_model&oldid=939112221 RGB color model. 27 de Mayo del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=RGB_color_model&oldid=959272315 Colorizer. http://colorizer.org/ Henderson, AJ. Klecker, Hermann. 26 de Marzo del 2014. Re: Difference or relation between a Color Model and a Color Space?. [Comentario en el foro Difference or relation between a Color Model and a Color Space?] Stackexchange. https://photo.stackexchange.com/questions/48984/what-is-the-difference-or-relation-between-a-color-model-and-a-color-space CIE 1931 color space. 26 de Mayo del 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=CIE_1931_color_space&oldid=959024702 Madsen, Rune. s. f. Color models and color spaces. Programming Design Systems. https://programmingdesignsystems.com/color/color-models-and-color-spaces/index.html Berkenfeld, Diane. Black, Dave. s.f. Understanding Focal Length. NikonUSA. Recuperado 10 de Agosto del 2020 de https://www.nikonusa.com/en/learn-and-explore/a/tips-and-techniques/understanding-focal-length.html# Ward, Caleb. 5 de Junio del 2014. Understanding Lenses: What is Focal Length?. The Beat. https://www.premiumbeat.com/blog/understanding-lenses-what-is-focal-length/ Alamia, Marco. s.f. Article - World, View and Projection Transformation Matrices. Codinglabs. Recuperado 15 de Agosto del 2020 de http://www.codinglabs.net/article_world_view_projection_matrix.aspx
Rendering Pipeline Overview. 8 de Abril del 2019. Kronos. https://www.khronos.org/opengl/wiki_opengl/index.php?title=Rendering_Pipeline_Overview&oldid=14511 RGB and HSV/HSI/HSL Color Space Conversion. s.f. Vocal. https://www.vocal.com/video/rgb-and-hsvhsihsl-color-space-conversion/ Cherry, Kendra. 28 de Mayo del 2020. Color Psychology: Does It Affect How You Feel?. Verywellmind. https://www.verywellmind.com/color-psychology-2795824#:~:text=These%20warm%20colors%20evoke%20emo tions,feelings%20of%20sadness%20or%20indifference