Introducción: Computación Gráfica

UNIDAD I
COMPUTACIÓN GRÁFICA I
 Semana 01
▪ Computación Gráfica, Visión Computacional, historia,
aplicaciones.
▪ Dispositivos de visualización
▪ Jerarquía de software gráfico, uso de API’s gráficas.
Logro de
Aprendizaje
Al término de la sesión, el estudiante tiene conocimientos generales de computación gráfica,
Dispositivos de visualización y uso de API’s gráficas, realiza un One Pague sobre un caso de
estudio real donde se haya aplicado Computación Gráfica.
 ¿Qué entiendes por computación gráfica?

Responder en el foro
Computación gráfica

Definición 1: La computación gráfica es el área

de la informática dedicada a la generación,
diseño y presentación de imágenes visuales en
una computadora, ya sean de naturaleza
bidimensional o tridimensional del mundo real.

Definición 2:

Estructura de datos adecuados para computación gráfica

Algoritmos adecuados para la generación y transformación de imágenes
Un lenguaje apropiado construido para la generación de objetos gráfico
¿Qué es la computación gráfica?
Computación Gráfica (GC), es el uso de computadoras para generar imágenes.
El producto final de CG: imágenes generadas por computadoras (computer-generated imagery: CGI)

Áreas:
Modelado: (formas) crear y representar la
geometría de los objetos en un mundo 3D.
Rendering: (iluminación y perspectiva) a
partir de un modelo 2D o 3D.
Animación: (movimiento) describir como
los objetos cambian en el tiempo
¿Qué es la computación gráfica?
CGI (imágenes generadas por computadoras ) está presentes todos los días de nuestra vida

Gráfico de apertura de noticias

Teléfono celular
Al ver películas

Video juegos
Aplicaciones
Campos Interrelacionados a la computación gráfica

Diversas disciplinas han aportado a su desarrollo, como el arte cinematográfico y ha sido una de las áreas de
mayor crecimiento dentro de la ciencia de la computación.

❑ La animación por computadora es la técnica de creación de imágenes en movimiento, que combina los gráficos
vectoriales con el movimiento programado.
❑ Mayor libertad en la obtención de imágenes que no serían factibles de ningún otro modo.
❑ Ahorro en recursos de métodos físicos, como construcción de maquetas para creación de efectos, maquillaje,
vestuarios, paisajes y mejores efectos especiales.
Aplicaciones
Campos Interrelacionados a la computación gráfica

El diseño 3D, consiste en la generación de imágenes mediante cálculos matemáticos complejos, realizados
por equipos de computación, en base a algoritmos que se fundamentan en las leyes naturales para calcular
colores, luces, sombras, texturas.

❑ RENDERIZADO: proceso de transformar un modelo 3D a su representación 2D en la pantalla de nuestro

computador.
❑ Una de las primeras películas famosas, que utilizo una mezcla de imágenes reales con renders, fue Jurassic Park
en 1993, mientras que la primera película totalmente compuesta por CGI fue Toy Story de 1995.
Aplicaciones
Campos Interrelacionados a la computación gráfica

La visualización, busca presentar información de un conjunto de datos a manera de imágenes, de tal manera
que se incremente el entendimiento de éstos, por ejemplo simulaciones

Simulación de un coche que se deforma tras un choque

frontal asimétrico Simulación de una inestabilidad Rayleigh–Taylor
causada por la mezcla de dos fluidos
Aplicaciones
Campos Interrelacionados a la computación gráfica

La visualización, busca presentar información de un conjunto de datos a manera de imágenes, de tal manera
que se incremente el entendimiento de éstos, por ejemplo: arquitectura, mécanica o imágenes médicas.

Arquitectura

Medicina

Mecánica
Aplicaciones
Campos Interrelacionados a la computación gráfica

La realidad virtual (VR) presenta un entorno virtual en 3D generado usando computación gráfica y otras
modalidades sensoriales, de tal manera que la interacción de un usuario y el mundo virtual creado sea lo más
real posible

https://www.youtube.com/watch?v=uflTK8c4w0c
Aplicaciones
Campos Interrelacionados a la computación gráfica

La visión computacionales, persigue construir máquinas que sean capaces de interpretar y diferenciar imágenes
(machine learning). La visión computacional es totalmente basada en la visión humana y trabaja con el proceso
de modelado y réplica de esa visión usando software y hardware ultra avanzados.
Dispositivos de visualización
Tubos de rayos catódicos (CRT - Cathode Ray Tube)

El principal dispositivo de salida de un sistema gráfico es el monitor de vídeo, existen algunos basados en el
diseño estándar de tubos de rayos catódicos (CRT - Cathode Ray Tube) y por otra en forma mayoritaria por
monitores de estado sólido.

Hasta hace relativamente pocos años, el tubo de rayos catódicos (TRC) constituyó prácticamente el único
dispositivo capaz de reproducir imágenes, sin embargo, en las últimas décadas se han desarrollado otros
dispositivos cuyo uso y evolución va en aumento (pantallas planas).
Dispositivos de visualización
Sistema de procesamiento de gráficos

Un sistema de gráfico en una visualización de TRC se compone:

❑ Entradas : aquello que nuestro programa ha calculado y desea dibujar.

❑ Procesador (CPU): realizará operaciones según se le pida con ayuda de las unidades aritméticas y consultara la memoria
cuando le sea necesario.
❑ Memoria - Frame Buffer: Zona de memoria destinada a almacenar todo aquello que debe ser dibujado.
❑ Look Up Table (LUT): "tabla" que contiene todos los colores que tenemos disponibles en nuestro sistema.
❑ Conversor D/A(Digital-Analógico): la información contenida en el Frame Buffer es digital (nivel de bit) y debe convertirse a su
homónimo analógico para poder ser procesada por un CRT (Tubo de rayos catódicos) y proyectada en la pantalla.
❑ Salidas : tras el conversor ya disponemos de información analógica para ser visualizada en nuestra pantalla.
Dispositivos de visualización
Sistema de procesamiento de gráficos: Pixel

Un píxel es la unidad mínima de pantalla y los encontramos dispuestos

en filas en cualquier monitor o televisor de manera que el
conglomerado de pixeles con sus colores asociados dan lugar a la
imagen.

El frame buffer se caracteriza por su resolución y por su profundidad.

❑ La resolución viene dada por el producto ancho x alto, es decir,

el número de filas x el número de columnas análogamente a
las resoluciones que nuestro monitor puede tener (640 x 480,
800 x 600 ...).

❑ La profundidad es el número de bits que utilizamos para guardar

la información de cada píxel. Este número dependerá de la
cantidad de colores que deseemos mostrar en nuestra aplicación.
Dispositivos de visualización
Sistema de procesamiento de gráficos: Resolución

❑ VGA – SD (Standard Definition, Definición estándar) 640 x 480 píxeles.

❑ HD (High Definition, Alta definición) 1280 x 720 píxeles.
❑ Full HD (Full High Definition, Alta definición completa) 1920 x 1080 píxeles.
❑ QHD 2K (Quad High Definition) 2560 x 1440 píxeles
❑ UHD (Ultra High Definition) 3840 × 2160 píxeles
Dispositivos de visualización
Sistema de procesamiento de gráficos: profundidad de un pixel
❑ 1 Píxel tiene profundidad de color, la profundidad de color es la capacidad que tiene un píxel de almacenar
datos que describen su color. Cuantos más datos, más variedad de colores puede tener ese píxel.

❑ MODO de color MAPA DE BITS: donde la profundidad mínima de un pixel es: un Bit (la mínima unidad de
información digital)

❑ En la imagen el píxel solo tiene 2 posibilidades para determinar cuanta luz se proyecta en ese píxel: 1 = LUZ
(blanco), o 0 = no LUZ (negro). Solo son posibles 2 colores.
Dispositivos de visualización
Sistema de procesamiento de gráficos: profundidad de un pixel

❑ MODO ESCALA DE GRISES : Profundidad de 8 BITS, podemos tener 2 datos posibles por cada bit y dan un total de
256 combinatorias posibles. 256 tonalidades diferentes de luces:

❑ 1byte= 8bits

❑ En el caso de una imagen de ESCALA DE GRISES solo hay un canal de información de color
Dispositivos de visualización
Sistema de procesamiento de gráficos: profundidad de un pixel

❑ RGB: un pixel digital en color se genera con sus componentes rojo, verde y azul (3 canales).
Entonces hay 8 BITS diferentes para cada canal (24 en total), es decir 8bits para el rojo, 8 bits para el verde y otros 8
para el azul.

Entonces, cada píxel está definido por 24 bits (3 Bytes, un byte por el rojo, el verde y el azul). Si cada uno de ellos puede
tener una gama de 256 tonos, en la imagen final habrá una gama de 16,777.216 colores posibles (256 x 256 x 256).
Dispositivos de visualización
Sistema de procesamiento de gráficos: Tamaño de una pantalla

Suponiendo que tenemos una pantalla con resolución de 800 x 600 pixeles, necesitaremos:

800 píxeles/fila x 600 filas x 24 bits/píxel = 1.37 Megabytes

de memoria para el frame buffer

Dado que color real implica 256 posibles valores de rojo, 256 de verde y 256 de azul por píxel, esto implica un
byte/píxel para cada una de estas componentes, es decir, 3 bytes por píxel.
Dispositivos de visualización
Sistema de procesamiento de gráficos: profundidad de un pixel

Un megapíxel o megapíxel (Mpx) equivale a 1 millón de píxeles, se usa la base de 1000 para prefijos a
diferencia de otras medidas usadas en la computación en donde se suele utilizar la base de 1024 debido
a su conveniencia respecto del uso del sistema binario.

Usualmente se utiliza esta unidad para expresar la resolución de imagen de cámaras digitales.

Por ejemplo, una cámara que puede tomar fotografías con una resolución de 2048 × 1536 píxeles se dice
que tiene 3,1 megapíxeles (2048 × 1536 = 3.145.728).
Dispositivos de visualización
Ejercicio

En un sistema con 24 bits por píxel y una resolución de pantalla de

1024 por 1024, ¿Cuántos Mb de almacenamiento se requieren
para el frame buffer?
Jerarquía de software gráfico
Software para Gráficos

• Diseñados para quienes no saben programar y desean

simplemente usar los gráficos.
Paquetes de propósito específico
• CAD (Computer Aided Design).
• Arquitectura, empresas, médicos e ingeniería.

• Se proporciona bibliotecas de funciones gráficas basada

en lenguajes de programación, como por ejemplo C++,
java, etc., que proporciona facilidades para construir
Paquetes de programación programas gráficos.
general • Bibliotecas gráficas que incluyen manipulado de
imágenes, color, vistas y transformaciones.
• Computer Graphics Application Programming interface
(CG API)
Jerarquía de software gráfico
Software para Gráficos: paquetes de programación general

GL (Graphics Library; biblioteca gráfica)

VRML (Virtual Reality Modeling Language; El

lenguaje de modelado de realidad virtual)

J3DGraphics2D (Lenguaje para el modelado de

realidad virtual)
API’s gráficas.
API (Application Programming Interface) o Interfaz de Programación de Aplicaciones.

API gráfica es un conjunto de funciones para inicializar por ejemplo modos

gráficos, realizar copiado de datos de la memoria del computador a la tarjeta
de video.

Las API's Gráficas más usadas son:

OpenGL: Proporciona una biblioteca de funciones básica para primitivas

gráficas, transformaciones y diversas operaciones.

DirectX: La API de Microsoft para Windows y Xbox, estaba dividida en varias

versiones según plataforma, pero recientemente la han unificado en una sola
versión.
API’s gráficas.
Open GL

Code Blocks
http://www.codeblocks.org/downloads/binaries
https://www.transmissionzero.co.uk/software/freeglut-devel/

https://sourceforge.net/projects/mingw/
❑ ¿Qué aprendí?

❑¿Qué necesito reforzar?

¿Preguntas o dudas?
Referencias

Benstead, Luke. (2012) Programación de videojuegos con OpenGL.

https://upn.vitalsource.com/books/9786074817621.

Bosque, Jose. (2007). Introducción a OpenGL.

https://elibro-net.eu1.proxy.openathens.net/es/ereader/upnorte/35680?page=2

Donald, Hearn. (2006). Gráficos por computadora con OpenGL: Pearson Educación