Informática Gráfica - Curso 2021/22

Tema 1: Introducción

• Gráficos por Computador

▪ Definición: El campo de los gráficos por computador se encarga del

estudio de las técnicas relacionadas con la generación de imágenes
estáticas o secuencias de imágenes por medio de un computador.

▪ Es síntesis de imagen (Visualización): consiste en generar imágenes

sintéticas en un computador.

▪ No es procesado de Imagen (Visión): la adquisición de una imagen para

conseguir un modelo informático de la misma o un determinado
tratamiento de la misma.

▪ Proceso de Visualización: es el conjunto de operaciones sobre un

Modelo Informático de Datos (Modelado) para obtener una
Representación Gráfica (Renderizado) del mismo en un dispositivo físico
de representación.

▪ Procesado de Imágenes:

▪ Generación de Imágenes:

▪ Aspectos Relevantes:

➢ Aplicación:

❖ El objetivo final es una representación gráfica integrada

dentro de otra aplicación software.

❖ Animación, videojuego, mundo virtual, película,

publicidad, etc.

Página | 1
 ➢ Software:

❖ Software de Modelado y Renderizado: Maya, Blender,

etc.

❖ Interfaces de Programación de Aplicaciones (APIs)

Gráficas: OpenGL, DirectX.

➢ Hardware: PC con tarjetas gráficas para modelado y renderizado.

▪ Las fuerzas impulsoras de los GC son: la industria cinematográfica, los

videojuegos (interactividad), la imagen médica, la visualización
científica y el diseño asistido por computador.

▪ Historia y Evolución (1): Evolución de los computadores.

➢ 1ª Generación: Válvulas de vacío (1946 – 1957).

➢ 2ª Generación: Transistores (1958 – 1964).

➢ 3ª Generación: Circuitos integrados (1965 – 1971).

➢ 4ª Generación: Microprocesador (1971 – Hoy).

Página | 2
 ▪ Historia y Evolución (2): Evolución de los gráficos por computador.

➢ 1952, primer videojuego (OXO): tres en raya para EDSAC.

➢ 1961, Spacewar para PDP-1.

➢ 1963: Ivan Sutherland desarrolla el primer sistema para la

manipulación directa de objetos gráficos, precursor de los
modernos sistemas CAD.

➢ Sutherland ingresa en la universidad de Utah, y esta empieza a

ganar reputación como lugar para la investigación de gráficos
computacionales.

❖ Edwin Catmull (Pixar), John Warnock (PostScript), Jim

Clark (Silicon Graphics Inc.), etc.

▪ Historia y Evolución (3): Evolución de los gráficos por computador.

➢ 1971: surge el microprocesador (Altair 8800, una de las primeras

microcomputadoras de escritorio diseñada para uso personal).

➢ Años 70: CAD, Plotters, Videojuegos 2D.

➢ Años 80: Animación por computador (Lucasfilm, Pixar, ...).

➢ Años 90: Industria del videojuego (Tarjetas PC: NVIDIA, ATI, ...).

➢ 2000: Videojuegos 3D (PlayStation, XBOX, ...).

➢ Realidad virtual, realidad aumentada, ...

• Formación de la Imagen

▪ Conceptos Básicos (1):

➢ El objetivo es obtener una imagen 2D en un dispositivo de

visualización de una escena 3D cuando es observada desde un
determinado punto de vista.

Página | 3
 ➢ Adicionalmente, se pretende “colorear” la imagen resultante de
forma que tenga la apariencia lo más realista posible.

▪ Conceptos Básicos (2):

➢ La imagen puede describirse como una representación de la

variación de una magnitud o un parámetro sobre una superficie.

➢ En nuestro caso, casi siempre, esta magnitud física será la

intensidad de la luz en un plano bidimensional, pero es posible
“mostrar” magnitudes “invisibles” al ojo humano y las relaciones
entre ellas.

▪ Conceptos Básicos (3):

➢ Una imagen está compuesta de píxeles, cuyo nombre viene de la

contracción de los términos “picture element”.

➢ Estos elementos se almacenan de forma digital con una precisión

y numero de bits que puede cambiar según el sistema de
adquisición (ó síntesis) de la imagen.

➢ Uno de los principales retos (y dificultades) en el procesado de

imágenes es el manejo y cálculo de gigantescos volúmenes de
datos.

Página | 4
▪ Conceptos Básicos (4):

➢ La imagen que percibimos depende de: la geometría, las

características de la luz y las características de los materiales.

➢ Los procesos de generación de imágenes sintéticas y

visualización real por el ojo humano son muy similares:

▪ Modelo de Cámara Oscura:

➢ La cámara oscura es un instrumento óptico que permite obtener

una proyección plana de una imagen externa sobre la zona
interior de su superficie.

➢ El modelo de cámara oscura describe las relaciones matemáticas

entre las coordenadas de un punto en el espacio (3D) y su
proyección sobre el plano de la imagen de una cámara oscura
ideal.

▪ Algoritmos de Renderizado (1):

➢ A la hora de renderizar una imagen, existen dos planteamientos

para determinar el color de cada una de las superficies visibles
en función de su interacción con la luz:
Página | 5
 ❖ Emplear modelos físicos detallados (óptica, radiación
térmica, radiación electromagnética, etc.):

❖ Buscar modelos empíricos que produzcan resultados

visuales razonablemente buenos (modelo aditivo):

▪ Algoritmos de Renderizado (2):

➢ Otra clasificación de los algoritmos de renderizado es según el

número de interacciones luz-material consideradas:

❖ Métodos Locales: sólo consideramos la interacción

fuentes de luz-objetos (se usan en aplicaciones
interactivas): Forward rendering, Ray casting y Deferred
rendering.

❖ Métodos Globales: se consideran también las

interacciones mutuas entre objetos (más complejo, pero
también mucho más realista): Ray Trazing, Radiosity,
Radiancia y Photon Mapping.

▪ Iluminación Local: se ilumina un punto teniendo en cuenta

exclusivamente:

➢ Las propiedades del punto.

➢ Las luces activas.

➢ En función de cómo se utilice el modelo de iluminación

(ecuación) para calcular el color de todos los puntos de la
superficie, se tienen diferentes modelos de sombreado:

▪ Iluminación Global: se ilumina un punto teniendo en cuenta la luz que le

llega: de las fuentes de luz (tiene en cuenta oclusiones) y de otros
objetos.

Página | 6
 ➢ Los efectos son: producen sombras, reflexión difusa y especular,
refracción, transparencias y causticas.

• El Cauce Gráfico

▪ ¿Cómo se pasa de los modelos tridimensionales a la imagen final?

➢ Respuesta: se hace mediante el cauce (pipeline) gráfico. Se trata

de un conjunto de transformaciones y proceso de imagen que se
realizan a los elementos que forman la escena hasta llegar a la
imagen final.

▪ ¿Qué es un pipeline?

➢ Se divide el proceso de generación en etapas.

➢ Las salidas de una etapa son las entradas de la siguiente.

➢ Cada etapa debe tener sus propios recursos.

➢ Permite paralelizar etapas: no se mejora el tiempo de ejecución

de una tarea, pero sí la productividad general.

➢ Las etapas deben estar equilibradas: Es importante tenerlo en

cuenta a la hora de buscar cuellos de botella.

▪ Segmentación:

➢ Las tarjetas implementan un proceso de generación

segmentado.

➢ Las instrucciones que se ejecutan en las GPUs están

segmentadas.

▪ Paralelismo:

➢ Poca dependencia entre datos.

➢ Paralelismo tipo SIMD.

➢ Múltiples unidades de proceso.

Página | 7
▪ Diferencias en el Cauce según el Autor:

➢ Hoy en día hay un consenso más o menos establecido sobre qué

etapas deben formar parte de un cauce gráfico, las etapas básicas
son las mismas.

➢ Aun así, cada API (OpenGL, DirectX…) y cada autor propone su

propio cauce y lo modifica de una versión a otra para adaptarse
a las necesidades del momento, cambiando el orden de algunas
etapas o introduciendo nuevas.

▪ Cauce Simplificado:

➢ Aplicación: selecciona las primitivas a pintar y configura el cauce.

➢ Transformación o Vértices: proyecta las primitivas.

➢ Rasterizado: transforma las primitivas en fragmentos.

➢ Sombreado o Fragmentos: colorea los fragmentos (similar a un

píxel).

➢ Añade los fragmentos a la imagen (frame buffer).

Página | 8
▪ ¿Un cauce algo más detallado (GPU)?

1. Transformación (1)

❖ La entrada de esta etapa son los vértices de las primitivas

(no las primitivas en sí).

1. Transformación (2)

❖ ¿Cómo se representa el objeto en el mundo 3D?

1. Transformación (3): Del Modelo (objetos)

❖ Se transforma de coordenadas del objeto a coordenadas

del mundo. Se posiciona el objeto en la escena.

❖ El orden en el que se aplican las coordenadas influye en el

resultado final.

Página | 9
1. Transformación (4): De la Vista (cámara)

❖ Se transforma de coordenadas del mundo virtual a

coordenadas de la cámara.

2. Proyección (1):

❖ Transformación que obtiene las coordenadas sobre el

plano de vista (2D), P(x,y), del punto en el espacio (3D),
P(x,y,z).

2. Proyección (2):

❖ Principalmente se usan dos tipos de proyecciones:

ortográfica y perspectiva.

❖ Cada proyección necesita ser configurada con sus propios

parámetros.

Página | 10
2. Proyección (3):

❖ Además, hay que pasar de coordenadas normalizadas a

coordenadas del frame buffer (“pantalla”).

❖ Definir en qué parte de la imagen se va a pintar: Viewport.

2. Transformación + Proyección:

❖ Estas etapas suelen hacerse de forma simultánea.

3. Iluminación (1):

❖ ¿Cómo se calcula el color de un punto de un objeto?

3. Iluminación (2):

❖ Esta etapa puede hacerse en distintos puntos: a nivel de

vértice o a nivel de fragmento.

Página | 11
4. Ensamblado:

❖ ¿Qué primitivas vamos a pintar?

5. Visibilidad I (1):

❖ Determinar qué puntos caen sobre el plano de la vista:

Culling y Clipping.

5. Visibilidad I (2):

❖ Culling: Eliminación de caras ocultas.

Página | 12
5. Visibilidad I (3):

❖ Clipping: eliminar partes fuera del volumen de vista o

frustum.

6. Rasterizado (1):

❖ ¿Qué píxeles de la pantalla pertenecen a la primitiva que

se está pintando?

❖ Hay que determinar si un píxel está dentro o fuera

de la primitiva.

❖ Además, hay que calcular los valores asociados a

partir de los de los vértices de la misma.

6. Rasterizado (2):

❖ Se calculan los fragmentos:

❖ El valor de los parámetros del fragmento se interpola a

partir del de los padres (sombreado de Gouraud):

Página | 13
7. Sombreado:

❖ ¿Cómo se calcula el color de un fragmento?

❖ Se calcula el color del fragmento con los datos

interpolados por el rasterizador.

❖ Otra opción es evaluar aquí la iluminación

(sombreado de Phong).

❖ Se accede a las texturas.

8. Visibilidad II:

❖ Un píxel puede ocultar a otro. ¿Cómo saber cuál debemos

pintar?

❖ La técnica más utilizada es el z-buffer o buffer de

profundidad:

❖ Se sustituye al píxel actual en el buffer sólo si su

valor de z (profundidad) es menor al del píxel
actual.

Página | 14
9. Operaciones con la Imagen (1):

9. Operaciones con la Imagen (2): Antialiasing.

❖ Aliasing: Frecuencia de muestreo insuficiente.

❖ Las fronteras de las primitivas aparecen escalonadas:

9. Operaciones con la Imagen (3): Antialasing.

❖ Una posible solución es la basada en estrategias de

super/multi sampling:

❖ Repetir el rasterizado desplazando la rejilla (x2,

x4…).

❖ Fusionar los distintos resultados.

Página | 15
9. Operaciones con la Imagen (4): Antialiasing.

❖ Otras soluciones son las basadas en filtros morfológicos,

las cuales consisten en detectar y corregir los siguientes
bordes en sierra.

❖ Ambas soluciones, estrategias de super/multi sampling, y

los filtros morfológicos, pueden fusionarse para conseguir
resultados mejorados.

Página | 16