1025 Gráficos y multimedia

Tema 1 – Introducción a la informática gráfica

1 Aplicaciones de la I.G.
La I.G. Puede emplearse, por ejemplo en el diseño asistido por ordenador (CAD),
representar datos gráficamente, creaciones artísticas, entretenimiento, etc...

2 El proceso de obtención de imágenes

Se pueden tratar imágenes tomadas mediante una cámara o generarlas desde cero con
un ordenador. A continuación se detalla el proceso de manipulación de dichas imágenes,
una vez convertidas en modelos:
– Transformación del modelo: Colocar los objetos en la escena, relativos a un
origen de coordenadas.
– Transformación de la vista: Colocar la cámara en la escena, apuntando desde el
eje z a la escena que queremos mostrar.
– Proceso de recortado: Sólo queremos mostrar parte de la escena, por lo que
usamos técnicas para minimizar los objetos que se muestran.
– Eliminación de caras ocultas: No hay que mostrar aquellos objetos que quedan
tapados.
– Proyección: Hay que pasar el modelo 3D a una imagen en 2D.
– Transformación al dispositivo: Ajustar el tamaño de la imagen al dispositivo en
que se muestra, adaptándolo a varias resoluciones.
– Conversión al ráster: Convertir en puntos discretos la imagen para poder
mostrarla en la pantalla.
– Iluminación: Iluminar y dar color al modelo dependiendo de el foco y tipo de luz,
propiedades ópticas del material, su color, etc.

3 Hardware gráfico
Actualmente, predominan tres tecnologías de visualización: Plasma, LCD y LED.
– Plasma: Consiste en una matriz de celdas que contienen una mezcla de gases
nobles, que al recibir corriente eléctrica, se convierte en plasma y emite luz del
color de las celdas rgb adjuntas.
– LCD: Consiste en una matriz de celdas entra placas polarizadas que filtran
determinada luz. Ésta cambia en función del color que debe representar.
– LED: Consiste en una matriz de LEDs rgb que se iluminan en mayor o menor
medida para formar cada color.

Frame Buffer
Es la memoria reservada a una imagen hasta que es enviada a un monitor o dispositivo.
La cantidad de memoria usada y su codificación dependerá de la profundidad del color.
 Tema 2 – Modelado geométrico I
1 Introducción
El modelado geométrico permite representar objetos mediante formas geométricas
sencillas (líneas, polígonos o circunferencias).

2 Modelos alámbricos
Son aquellos que proporcionan una imagen de tipo wireframe del objeto a representar.
Son muy fáciles de construir, y ocupan poca memoria, pero son ambiguos y poco
coherentes, porque es difícil determinar qué caras se muestran.

3 Modelos poligonales
Utilizan polígonos para describir la geometría del modelo. Una malla de polígonos
conecta cada arista como máximo con dos polígonos. Algunos conceptos a recordar son:
– Teselado: Proceso de dividir un polígono en otros más pequeños.
– Triangulación: Dividir un polígono de n lados en triángulos.
– Optimización: Agrupar varios polígonos para dibujarlos más rápidamente.
– Simplificación: Elimina información redundante en el modelo.

Formas de representación
– Explícita: Cada polígono es representado por una lista de vértices.
– Pros: Eficiente para polígonos individuales.
– Cons: Se almacenan vértices por duplicado, las aristas compartidas se dibujan
dos veces.
– Lista de vértices: Los vértices se almacenan en una lista. Los polígonos hacen
referencia a los índices de dicha lista para indicar qué vértices los componen.
– Pros: Cada vértice se almacena sólo una vez.
– Cons: Las aristas siguen dibujándose dos veces.
– Lista de aristas: Se mantiene la lista de vértices. Un polígono se representa como
una lista de índices a una lista de aristas. Cada arista apunta a dos vértices y a los
polígonos a los que pertenece.
– Pros: Ahora las aristas se dibujan una sola vez.
– Cons: Es difícil determinar qué aristas comparten vértice.

Mallas poligonales
Hay varios tipos de mallas dependiendo de cómo conectemos las aristas entre sí.
– Cinta de triángulos (strip): Los triángulos se disponen en línea recta.
– Abanico de triángulos (fan): Todos los triángulos comparten un vértice común.
– Malla de cuadriláteros (mesh): Se usan cuadriláteros, dispuestos como en un
tablero de ajedrez.
4 Modelos de superficies curvas
Hay varias maneras de representarlas. La más usada es la paramétrica y sintética.
• No paramétricas:
◦ Explícitas:
▪ No pueden representar círculos o parábolas.
▪ Es difícil aplicarlas a rotaciones y tangentes verticales.
◦ Implícitas:
▪ La ecuación puede tener más de una solución.
▪ Problemas con la continuidad entre curvas.
• Paramétricas:
◦ Analíticas:
▪ Definidas mediante ecuaciones (líneas, círculos, eclipses, etc...)
◦ Sintéticas:
▪ Definidas mediante puntos de control.
▪ Fáciles de usar en CAD.

5 OpenGL primitivas geométricas

Las primitivas geométricas se forman agrupando vértices, y estas se agrupan a su vez
para definir objetos de mayor complejidad. OpenGL no proporciona mecanismos para
describir estos objetos complejos, pero sí permite especificar cómo deben ser dibujados.

Las primitivas son el punto, segmento de línea y el triángulo.

Tema 3 – Transformaciones geométricas

1 Introducción
Debemos poder ser capaces de trasladar, escalar y rotar los objetos en una escena. A
continuación vemos cómo.

2 Transformaciones en 2D
– Traslación: Mover un objeto a una nueva posición.
– Escalado: Se realiza respecto a un punto y consiste en cambiar el tamaño. Puede
ser uniforme o no, dependiendo si se incrementa de igual manera en ambos ejes.
También es posible reflejar un objeto en ambos ejes cambiando el signo. Debe
aplicarse a todos los puntos de un objeto para que tenga sentido.
– Rotación: Usado para orientar objetos.
– x' = x · cos a – y · sen a
 – y' = x · sen a – y · cos a

3 Concatenación de transformaciones
Podemos realizar varias transformaciones para obtener operaciones más complejas. No
todas las transformaciones son conmutativas, por lo que el orden en que las realizamos
importa.
• Transformaciones conmutativas:
◦ Traslación – Traslación
◦ Escalado – Escalado
◦ Rotación – Rotación
◦ Escalado Uniforme – Rotación
• Transformaciones NO conmutativas:
◦ Traslación – Escalado
◦ Traslación – Rotación
◦ Escalado No Uniforme - Rotación

4 Cambio de sistema de coordenadas

Hay que diferenciar las Coordenadas del Mundo Real (CMR) de las del Dispositivo
Normalizado (CDN) y de las del Dispositivo Físico (CD).
– CMR: Las coordenadas dentro de la escena.
– CDN: Las coordenadas, escaladas de 0 a 1 para una resolución determinada.
– CD: Las coordenadas en píxeles para la resolución final.

5 Transformaciones en 3D
De manera similar a las transformaciones en 2D, pueden realizarse las operaciones de
traslación, escalado y rotación. Un punto 3D se representa por un vector de 4
elementos, donde el último es la coordenada homogénea, que vale 1 y sirve para que
todas las operaciones puedan realizarse sin cambiar el tamaño de las matrices.

Para realizar una rotación respecto un eje cualquiera, se realizan los siguientes pasos:
• Trasladar el objeto al origen del eje.
• Rotar el eje para que coincida con uno de los ejes de coordenadas (x, y, z).
• Realizar la rotación alrededor el eje anterior.
• Aplicar las rotaciones inversas para que el eje vuelva a su orientación original.
• Deshacer la traslación inicial, devolviendo el objeto a su posición original.
 Tema 4 – Proyecciones

1 Introducción
Para el proceso de visión en 2D es suficiente con definir una ventana y un marco. En 3D,
debe realizarse una transformación de 3D a 2D (proyección).
El proceso de visión en 3D es similar al de una cámara sintética: Puede desplazarse a
cualquier posición y orientación para capturar una imagen 2D de una escena 3D.

Manejo de una cámara sintética

1. Fijar la cámara y apuntar a la escena.
2. Situar los objetos (dependiendo de su profundidad).
3. Elegir el "zoom".
4. Determinar el tamaño de la foto.

Para pasar de 3D a 2D necesitamos especificar el tipo de proyección (perspectiva o

paralela), y especificar la posición del observador y el plano de proyección. Para esto se
usan dos sistemas de coordenadas, el que define la escena y las de la vista.

2 Tipos de proyecciones
Proyecciones geométricas
Los proyectores son rectas, y la superficie de proyección es un plano (plano de
proyecciones). Hay dos tipos:
• Perspectiva: Visión desde un punto (Centro de Proyecciones). Los objetos son más
pequeños cuanto más lejos se encuentran.
• Paralela: Visión desde el infinito (Dirección de Proyección). Los objetos ocupan el
mismo tamaño sin importar su profundidad.
3 Modelo de cámara sintética

El marco es el área rectangular del dispositivo donde se visualiza la escena. No tiene por
qué tener la misma relación de aspecto que el plano de proyecciones.

Los siguientes parámetros son necesarios para realizar la visualización:

• Posición (x, y, z) • Campo de visión (FOV)

• Orientación (def. por v. LOOK y UP) • Planos de recorte frontal y trasero
• Razón de aspecto • Profundidad de campo

El plano frontal evita dibujar objetos muy cerca de la cámara, porque podrían bloquear
su visión. El plano trasero evita dibujar objetos distantes que podrían ser demasiado
pequeños para ser visualmente significativos. También ayuda a que la imagen final sea
más clara.
La profundidad de campo consigue que los objetos situados a la distancia focal se
visualicen nítidos, y el resto borrosos.
 Tema 5 – Visibilidad
1 Introducción
• Espacio del objeto: Comprende las superficies, polígonos, etc de cada objeto.
• Espacio de la imagen: Ordena objetos por proximidad, mostrando sus partes
visibles. Trabaja con píxeles.
El coste de ubicar los objetos en el espacio de la imagen puede ser:
n·n ó n·p. n. nº obj. p = nº px.

2 Algoritmos para superficies

Z-buffer trabaja en el espacio de la imagen. Usa una memoria para la profundidad y
otra para el color. Funcionamiento:
• Preproceso: Se inicializa la memoria de profundidad y color a un valor máximo.
• Proceso: Se ubican los polígonos en la imagen en cualquier orden. Si un polígono
lejano se ubica en la misma zona que uno cercano ya inscrito, no se sobrescribe la
información.
• Ventajas: No precisa ordenación, maneja cualquier tipo de escena y se
implementa mediante hardware (muy eficiente).
Cuando un objeto cercano oculta otro más lejano, se llama Z-culling. Una granularidad
elevada en un Z-Buffer (24 - 32 bits) resulta en menos distorsión o Z-fighting cuando dos
objetos son muy próximos.

Algoritmo Z-buffer
1. Inicializar matriz de color a color de fondo.
2. Inicializar matriz de profundidad a máximo valor.
3. Para cada polígono:
3.1. Para cada píxel en la proyección del polígono:
a) Si la profundidad del píxel es mayor que la actual, sobrescribir el valor de
la profundidad y color.

Algoritmo del pintor

Trabaja en el espacio del objeto. Primero ordena los polígonos de la
escena en función de su profundidad y los pinta en ese orden,
sobrescribiendo los valores necesarios en la matriz de color.
El algoritmo puede fallar en ciertos casos donde se da superposición.
En este caso deben cortarse los polígonos involucrados.
 • Preproceso: Se ordenan los polígonos en profundidad decreciente.
• Proceso:
◦ Es posible dibujar el primero?
◦ Se resuelven ambigüedades (hasta que se cumple una):
▪ No solapamiento en x.
▪ No solapamiento en y.
▪ No hay intersecciones.
◦ Conversión de atrás a delante.
Si se da solapamiento, cambia el algoritmo para resolver los casos de solapamiento
cíclico y sección innecesaria.

Raytracing
Trabaja en el espacio de la imagen.
Obtiene el color de cada píxel tomando el color del primer polígono que atraviesa.

Algoritmo de Warnock
Trabaja en el espacio de la imagen. Colorea la matriz de color
dependiendo de las posibles situaciones que pueden darse entre cada
píxel y los polígonos que lo rodean.
a) Envolvente – El polígono contiene el área de interés.
b) Intersectante – El polígono intersecta el área.
c) Contenido – el polígono está contenido en el área.
d) Disjunto – el polígono está fuera del área.

El área de interés se divide en cuatro partes iguales, y:

1. Todos los polígonos son disjuntos (d) se pinta el color de
fondo.
2. Hay sólo un polígono intersectante o contenido (b y c), se
pinta el color de fondo y encima el polígono.
3. Hay sólo un polígono envolvente, el área se rellena con el color del polígono.
4. Hay más de un polígono intersecante, pero un polígono envolvente lo tapa, se
rellena el área con el color del polígono envolvente.
5. Se alcanza el tamaño del píxel (no puede dividirse más). El área se pinta del color
con la coordenada z más cercana, o ponderando los colores.
6. Si no, subdividir y repetir el proceso.
Línea de barrido (scan-line)
Trabaja en el espacio de la imagen. Procesa la escena
dividiéndola en regiones de arriba-abajo. Para cada
línea de rastreo se calculan las intersecciones de dicho
plano con las primitivas en la escena. Estas
intersecciones se consideran para el cálculo de la
visibilidad a partir de su profundidad en z.
Algoritmo de Weiler-Atherton
Trabaja en el espacio del objeto.
• Preproceso:
◦ Ordena los polígonos de acuerdo a Z.
◦ Mantiene una lista externa con todos los polígonos.
• Proceso:
◦ Se recorta el primer polígono (llamado polígono de recorte) y se actualiza la
lista externa e interna.
◦ Se eliminan los polígonos tapados por el polígono de recorte.
◦ Si algún polígono está por encima del de recorte, el polígono de recorte pierde
ese trozo.
◦ Se comprueba si los polígonos restantes no solapan al resto. De ser así se
termina.

3 Técnicas de aceleración
Ordenación: Se preprocesa una lista de las primitivas ordenadas por profundidad para
simplificar el proceso.
Coherencia: Reusar cálculos ya realizados.
• Objeto: Comparación de objetos, no caras.
• Superficie: Conservación de propiedades dentro de la misma.
• Línea de barrido: El conjunto de objetos vistos de una línea de barrido a otra
difiere poco.
• Área: Píxeles cercanos tienden a tener el mismo color.
 Tema 6 – Iluminación y sombreado
1 Introducción
La apariencia de cada superficie depende de los tipos de fuentes luminosas que la
iluminan, sus propiedades (color, textura, reflectancia...) y su posición y orientación con
respecto a estas fuentes, al observador y a otras superficies.
El color asignado a cada píxel de la proyección de una superficie visible depende de la
luz reflejada y transmitida por los objetos.
Tipos de sombreado
Sombreado en Depende del material Se resaltan brillos
Flat Caras No No
Gouraud Vértices, interpolado No Sí
Phong A cada píxel Sí Sí

Características a considerar:
• Fuentes de luz:
◦ Posición: Localizada o en el infinito.
◦ Intensidad: Color de la fuente.
◦ Número de fuentes: Una o más.
◦ Distribución lumínica: uniforme, focalizada, direccional...
◦ Geometría: Puntual, esférica, lineal, etc...
• Objetos:
◦ Distancia: Al observador y a la fuente de luz.
◦ Tipo de material: Pulido, metálico, rugoso...
◦ etc...

2 Un modelo de iluminación empírico

Un modelo de iluminación permite calcular la intensidad de la luz vista por un
observador en un punto de la superficie de un objeto. Puede expresarse por medio de
una ecuación de variables asociadas al punto en el objeto que se sombrea.
Los modelos de iluminación empíricos están basados en la experiencia y en la
percepción. Pretenden un "resultado visual satisfactorio con mínimo esfuerzo".

Modelo de iluminación ambiental

La luz llega de todas partes produciendo una
iluminación independiente de la posición u
orientación de las superficies. Todas las caras
se pintan del mismo color.
Modelo de iluminación difusa
Parte de la luz se refleja en la superficie de los
objetos de manera uniforme (caras diferente
iluminadas pero aún así uniformemente
pintadas). Esto tiene en cuenta las propiedades
materiales de los objetos (los mate no reflejan
luz, rugosos en todas direcciones).

Atenuación del foco

La distancia a la cual se sitúa el foco de luz influye en la intensidad y cantidad de luz
reflejada.

Iluminación especular
La reflexión especular es luz reflejada sobre una superficie brillante o pulida en una
dirección.

3 Modelos de sombreado de polígonos

Plain: Funciona por cada cara.
Gouraud: Se aplica a cada vértice del polígono, interpolando los valores no calculados.
Phong: Interpola las normales en lugar del color calculado en cada vértice.

4 Modelos avanzados
Otros modelos tienen en cuenta otros fenómenos que los modelos anteriores simplifican.
Entre ellos: Sombras arrojadas, transparencia, refracción, geometría de fuentes
extendidas, interreflexión.
Clasificación de algoritmos
• Dependientes de la vista (Trazado de rayos):
◦ Se envían rayos desde el foco de luz a los objetos en la escena, que rebotan y
permiten calcular fuentes de luz secundarias causadas por la refracción.
◦ No tiene en cuenta cómo se comporta la luz que es reflejada en los objetos
(sería muy costoso). Dependen de la posición de la cámara, por lo que hay
que recalcularlo cuando se mueve.
◦ Es posible aplicarlo de manera local para obtener detalle en puntos clave,
reduciendo el coste que tiene.

• Independientes de la vista (Radiosidad):

◦ Modela la reflexión difusa considerando la transferencia de energía radiante
entre las superficies. El cálculo se realiza sobre cada superficie en lugar de
cada píxel como en el método anterior.
◦ Es necesario recalcularlo si se modifica la geometría de la escena. También
aumenta la información que contiene la escena ya que se debe guardar la
información de luz asociada.
 Tema 7 – Texturas
1 Introducción
Las texturas permiten dar tanto detalle como realismo a los modelos sin requerir una
gran cantidad de polígonos.

2 Función de mapeado
Para pegar una textura a un objeto se usa una función de mapeado (mapping) en la que
a cada punto del espacio ocupado por la superficie le hace corresponder un punto en el
espacio de la textura. Las texturas pueden reusarse, estirarse y contraerse para cambiar
su apariencia.

Las dimensiones del espacio de textura suelen estar normalizadas (varían entre 0 y 1).
Cada punto (x, y z) de la superficie se corresponde con unas coordenadas (0-1) en el
espacio de textura. Si estas coordenadas están fuera del rango se toman con modulo 1.

3 Tipos de texturas
Texturas de normales: Bump-mapping
Consiste en abrillantar o oscurecer partes de la
imagen en las que se da una transición de blanco a
negro y viceversa. Convirtiendo las partes oscuras en
hendiduras y las brillantes en biseles. Se consigue así
dar volumen (relieve) a la textura. La textura usada
contiene normales en lugar de color.

Texturas de desplazamiento
La textura contiene la longitud de
desplazamiento, en lugar de color
(textura normal) o normales (bump
mapping). Se consigue crear detalles con
volumen real, sin necesidad de hacerlo
con polígonos físicos.

Texturas sólidas o 3D y animadas

Son mapas de bits que además guardan el volumen que debe ocupar el modelo en cada
posición.
Las texturas animadas consisten en una serie de imágenes con las mismas dimensiones
ordenadas respecto al tiempo.
4 Filtros de magnificación y contracción
Si no hay relación de semejanza entre el tamaño de los píxels y el tamaño de los texels
proyectados, obtenemos una calidad baja. Es necesario compensarlo: Si la textura es
pequeña respecto al modelo (pixelado) hay que magnificar la textura usada. Si es más
grande, hay que reducir su tamaño (reducir el excesivo detalle).

Filtros de magnificación
Para escoger el píxel de la textura que representará el texel, puede escogerse uno de
manera puntual, o aproximarlo de manera lineal entre los píxeles cercanos.

Filtros de contracción
Cuando el texel es más pequeño que los píxeles, el método es similar

Mip-mapping
Cuando un objeto texturizado se aleja de la posición del
observador, la textura debe escalarse a un tamaño muy
pequeño. Como la calidad no importa en este caso, para
acelerar el proceso se guardan varias versiones de la
misma textura con resoluciones cada vez más pequeñas,
las cuales son usadas dependiendo de la posición del
objeto texturizado.
Si lo aplicamos a texturas que se repiten a lo largo de
superficies extensas la calidad gráfica se ve aumentada
porque el resultado final refleja de manera más cercana
la realidad.
El tamaño de las texturas generadas son cuadradas y en
potencias de 2. Una imagen de 512x512 necesitará una
de 1024x1024 para almacenar el resto de niveles.
5 Otras aplicaciones
Environment mapping
Añade realismo a una escena en la que un objeto parece un espejo del entorno que
tiene a su alrededor. Trata a los objetos como si fueran totalmente reflexivos.

Mapeado de entorno cúbico

Se emplean 6 mapas del entorno dispuestos en el interior de un cubo en el cual se
introducirá el objeto. Se permite modificar la textura de cada mapa sin importar lo que
ocurra en las otras, sin mantener en memoria los seis mapas, ahorrando recursos. Este
efecto es el más empleado en escenas de movimiento y la técnica que utilizan
actualmente la mayoría de los juegos.

Mapeado de entorno parabólico dual

Se utilizan dos texturas diferentes del entorno: Una vista frontal del objeto y una
trasera, lo que permite obtener un mayor nivel de detalle pero es más costoso.

Light mapping
Dada una textura y una imagen en escala de grises puede obtenerse una textura
sombreada en tiempo real.