Sistemas Grficos y

Modelos
 La Computacion Grfica involucra todos los
aspectos de producir ilustraciones o imgenes
usando un computador.
Se inicia hace 50 aos mostrando unas pocas lneas
en un tubo de rayos catdicos(CRT) y hoy podemos
generar imgenes que son indistinguibles de las
fotografas de objetos reales.
WebGL, un software para grficos soportado por la
mayora de navegadores modernos. Es una versin
de OpenGL.
 De dnde proviene esta imagen?

Que hardware/software se us para producirlo?

1. Aplicaciones de la computacin
grfica
1. Mostrar informacin
2. Diseo
3. Simulacin
4. Animacin
1.1 Mostrar informacin
Las tcnicas grficas clsicas eran un medio para
dar informacin a la gente.
Los babilonios mostraban planos en piedras. Hoy
usamos modelos generados por computador.
Los cartgrafos desarrollaron mapas para mostrar
informacin espacial y geogrfica. Hoy tenemos mapas
interactivos.
La informacin visual es muy importante para
lograr comprender fenmenos complejos
Tomografa computacional (CT)
Resonancia magntica (MRI)
Tomografa de emisin de positrones(PET)
 Los supercomputadores permiten resolver
problemas intratables.
La visualizacin cientfica provee herramientas
grficas que ayudan a interpretar los datos
generados.
1.2 Diseo
Es un proceso interactivo que busca una solucin
esttica y de costo eficiente que puede ser probada
y sus resultados se pueden usar para otras
soluciones.
El uso de herramientas grficas interactivas en el
CAD (Computer-aided design) de partes mecnicas
y de circuitos VLSI (Very large scale integrated)
1.3 Simulacin y Animacin
Cuando los sistemas grficos fueron capaces de
generar grficos en tiempo real se empezaron a
usar en los simuladores. Por ejemplo en el
entrenamiento de pilotos y software educativo.
La realidad virtual (VR) ha abierto nuevos
horizontes. Se pueden ver imgenes separadas con
visin estereoscpica.
Las pelculas stereo 3D y los efectos eseciales con
simulacin de fsica y de fluidos.
1.4 Interfaces de usuario
Nuestra interaccin con los computadores est
dominado por el paradigma visual, tanto que
hemos dejado de darnos cuenta.
2. Sistema Grfico
Es un sistema de computo y como tal tiene los
elementos que componen un sistema de computo
de propsito general:
1. Dispositivos de entrada
2. Unidad Central de proceso
3. Unidad procesadora de grficos
4. Memoria
5. Framebuffer
6. Dispositivos de salida
2.1 Pixeles y el framebuffer
Virtualmente todos los sistemas de grficos
modernos son basados en raster donde la imagen
que vemos es un arreglo de puntos o pixeles.
 El framebufer es el elemento principal de todo sistema
grfico. Su resolucin determina el detalle que puedes
ver en la imagen.
La profundidad del framebuffer, es el nmero de bits
que se usan por cada pixel y esto determina la cantidad
de colores que se pueden representar.
En sisemas full-color hay 24 o ms bits por pixel. Y se
llaman tambin sistemas true-color o sistemas RGB.
Los sistemas HDR (High dynamic range) usan 12 o mas
bits para cada color.
Los framebuffer almacenan informacin en formato
entero pero los ms modernos utilizan punto flotante.
2.2 El CPU y el GPU
En los sistemas simples puede haber solo un
procesador el CPU (central processing unit) el cual
realiza tambin los proceso grficos.
La funcin del procesador es tomar las
especificaciones de las primitivas grficas y asignar
valores a los pixeles en el framebuffer que mejor
represente a estas entidades. A esto se le conoce
como rasterizacin o scan conversin.
El GPU es un porcesador de diseado para realizar
funciones grficas. Son tanto o ms complejos que
el CPU y tienen alto grado de paralelismo
2.3 Dispositivos de salida
Hasta hace poco el tipo dominante de pantalla era
el CRT
 Para que se pueda ver una imagen sin parpadeo se
debe refrescar a una tasa suficientemente alta o
refresh rate. En dispositivos antiguos es de 60 Hz pero
en los modernos puede llegar a 85 Hz.
En los sistemas raster se muestran los puntos en dos
caminos fundamentales
No entrelazado. Se muestran los pixeles lnea por lnea.
Entrelazado. Las filas pares son refrescadas alternativamente
con las filas impares.
En las pantallas de color hay tres tipos diferentes de
fsforo arreglados en grupos llamados triadas. Estas
son activadas por un rayo diferente cada vez.
 Los CRT estn siendo reemplazados con pantallas
plana basados en raster
LCD. Liquid cristal display
LED. Light-emitting diodes
Plasma
2.4 Dispositivos de entrada
2. Imgenes fsicas y sintticas

Las imgenes generadas en el computador son

sintticas en el sentido de que no existen
fsicamente
3.1 Objetos y observadores
El objeto existe en el espacio independientemente
de cualquier observador.
En computacin grfica representamos objetos
sintticos por medio de primitivas geomtricas
como puntos, lneas y polgonos.
 El objeto y el observador existen en tres
dimensiones, pero la imagen que se define es de
dos dimensiones.
3.2 Luz e imgenes
Sin luz los objetos no se veran
La cantidad de luz que entra en la cmara depende
de las interacciones que tiene la luz con los
diferentes objetos antes de entrar en la cmara
 El espectro visible tiene una longitud de onda entre
350 y 780 nanmetros.
Las fuentes de luz pueden emitir luz en frecuencias
discretas o sobre rangos contnuos
3.3 Modelos de representacin
Se puede construir un modelo de representacin
siguiendo la luz desde el origen.
Un rayo es una lnea semi-infinita que emana de un
punto y viaja al infinito en una direccin particular.
 Algunos rayos se pierden en el infinito y solo
algunos entran en la cmara
 El trazado de rayos y el mapeo de fotones son
tcnicas de formacin de imgenes y son la bases
de la produccin de imgenes generadas por
computador.
Otros enfoques se basan en la conservacin de la
energa. Radiosity.
4. Sistemas de Representacin
4.1 La cmara Pinhole
Es una caja con un
agujero en el medio
La pelcula est
dentro de la caja en
el lado opuesto al
agujero.
El agujero es tan
pequeo que solo un
rayo emanado de un
punto puede entrar
en la camara
 Conociendo la distancia
desde el agujero se
puede sabe dnde esta
cada punto de la
imagen en la pelcula
La cmara pinole, tiene
una profundidad de
campo infnita
Se puede reemplazar el
agujero por un lente
5. Modelo de la cmara sinttica
La especificacin de los objetos es independiente
de la especificacin del observador. Tienen
funciones separadas en la biblioteca grfica.
Se puede computar la imagen usando clculos
geomtricos simples.
 Podemos delimitar la imagen estableciendo un
rectngulo de recorte en el plano de proyeccin
que funciona como una ventana a travs del cual
un observador ve el mundo
6. La interface de programador
Es un conjunto de funciones que residen en una biblioteca
grfica. Y se llaman Interface de programacin de aplicacin
(API).
Los drivers son responsables de interpretar la salida del API y
convertir estos datos a una forma que pueda ser entendida
por el hardware.
Las funciones del API deben coincidir con el modelo
conceptual que el usuario desea emplear para especificar las
imgenes.
6.1 El modelo pen-plotter
Un pen-plotter produce imgenes mediante un lpiz que
pude moverse en dos direcciones ortogonales. Adems
puede levantar y bajar el lpiz para crear la imagen deseada.
Varios APIs como LOGO y PostScript tienen su origen en este
modelo. Tambin el Canvas de HTML5.
No se extiende bien a los modelos en 3D.
Las impresoras 3D construyen las piezas por capas, cada
capa puede ser descrita usando un modelo pen-plotter
6.2 APIs 3D
OpenGL, Direct3D son las mas populares.
Permiten especificar:
Objetos
Un observador
Fuentes de luz
Propiedades de materiales
Los objetos se definen por conjuntos de
vrtices.
La mayora de APIs proporcionan un conjunto
de primitivas para el usuario. Estas pueden
ser mostradas rpidamente en el hardware.
(puntos, lneas, tringulos)
WebGL especifica las primitivas como listas
de vrtices.
 El arreglo de puntos puede ser enviado al GPU cada
vez que se quiera mostrar o almacenarlo en el GPU
para mostrar luego.
Podemos definir observadores o cmaras de varias
formas:
Posicin
Orientacin
Longitud focal
Plano de pelcula
7. Arquitecturas Grficas
7.1 Procesadores de display
Incluyen instrucciones para mostrar primitivas en el
CRT
Las imgenes se podan procesar una vez y enviar al
procesador de display para ser almacenado
7.2 Arquitecturas Pipeline
Ejercicios
Ejecute triangulo.html y analice el script triangulo.js
Cree un nuevo documento tringulos.html y dibuje
2 tringulos
Pruebe cambiar colores
Prueba cambiar coordenadas
Describa sus observaciones y dificultades
Dibuje ahora 3 tringulos.