Computación Gráfica

Unidad I: Introducción

Docentes:
Néstor Calvo
Ángel Calegaris
Walter Sotil

2008
Computación Gráfica

• No Es: • Sí Es:
• CAD • Geometría
• Arte o Espacios
• Animación o Transformaciones

• Visualización • Modelado
o Curvas, Superficies, Objetos
• Juegos
o Iluminación, Texturas, Ambiente

o Mecánica – Interacciones

• Programación
o C++ (lógica y flujo del programa)

o OpenGL (presentación gráfica)

o GLUT (interacción con el usuario)

Que sirve para hacer

(no hacemos muebles, hacemos máquinas para hacer muebles)

Introducción 2
 Computación Gráfica

Es una tecnología para presentar información en forma gráfica

Comunicación
Información Usuario

Procesamiento de la Información

Computación Gráfica

Geometría Computación Comunicación Gráfica

Introducción 3
Primeros Pasos

DAC-1, El primer CAD de IBM Sketchpad, Ivan Sutherland

1963!
!
Douglas Engelbart

Introducción 4
Hoy: Ciencia, Tecnología e Industria

Introducción 5
Tendencias  Futuro (??????????????)

Introducción 6
Sistema Gráfico Básico

Introducción 7
 Rendering

Es la transformación de una escena en una imagen

Rendering
Escena 3D Imagen
• Escena:
• Modelo:
o Ensambles de primitivas
o Superficies: Color, Textura, Normales y Normales “truchas”
o Fondo o Ambiente
• Luces: Modelos de iluminación
• Cámara: Proyección
• Animación: sucesión de escenas.
• Imagen:
• Puede realizarse en varios medios (device independence)
• Vector: secuencia de comandos select_pen(1); goto (x,y); pen_down();...
• Raster: framebuffer (array de pixels) (W x H x C) (& cia.)

Introducción 8
Tubo de Rayos Catódicos o CRT

Introducción 9
CRT Vectorial

Introducción 10
CRT Raster

Introducción 11
 Más Monitores Raster

Cristal Líquido (LCD)

Panel de Plasma

Introducción 12
 Rendering

Es la transformación de una escena en una imagen

Rendering
Escena 3D Imagen
• Escena:
• Modelo:
o Ensambles de primitivas
o Superficies: Color, Textura, Normales y Normales “truchas”
o Fondo o Ambiente
• Luces: Modelos de iluminación
• Cámara: Proyección
• Animación: sucesión de escenas.
• Imagen:
• Puede realizarse en varios medios (device independence)
• Vector: secuencia de comandos select_pen(1); goto (x,y); pen_down();...
• Raster: framebuffer (array de pixels) (W x H x C) (& cia.)

Introducción 13
Modelo: Constructive Solid Geometry (CSG)

Introducción 14
Modelo: Boundary Representation (BRep)

Introducción 15
Modelo: Level-Sets y Marching Cubes

Introducción 16
Modelo: Objetos Orgánicos (Metaballs)

Introducción 17
Modelo y Superficie

Introducción 18
Superficie: Textura

Introducción 19
Superficie: Imágenes y Normales

Textura
Decal (calcomanía)

Bump-Map

Bump Real Bump Falso

Introducción 20
Iluminación: Color

• Color 24 BPP 3x1byte/píxel (0-255)

• Escala de Grises (r=g=b=l) 256 colores 1byte/píxel
luminancia=max(r,g,b)

Introducción 21
Iluminación: Mezcla (Blending)

Introducción 22
Iluminación: Luz y Reflejos

Introducción 23
 Iluminación Local

Modelo de Phong

Introducción 24
Iluminación Global

Ray Casting
Ray Tracing
Radiosity
Global
Photon Map

Introducción 25
Iluminación

Bidirectional Reflectance Distribution Function

Introducción 26
Non-Photorealistic Rendering (NPR)

Introducción 27
 Rendering

Es la transformación de una escena en una imagen

Rendering
Escena 3D Imagen
• Escena:
• Modelo:
o Ensambles de primitivas
o Superficies: Color, Textura, Normales y Normales “truchas”
o Fondo o Ambiente
• Luces: Modelos de iluminación
• Cámara: Proyección
• Animación: sucesión de escenas.
• Imagen:
• Puede realizarse en varios medios (device independence)
• Vector: secuencia de comandos select_pen(1); goto (x,y); pen_down();...
• Raster: framebuffer (array de pixels) (W x H x C) (& cia.)

Introducción 28
 Rendering

Es la transformación de una escena en una imagen

TRANSFORMACIONES

• Escena:

)
go 2
s)

(2D)
ale
• Modelo:

(ran
(du
o Ensambles de primitivas
o Superficies: Color, Textura, Normales y Normales “truchas”
o Fondo o Ambiente
• Luces: Modelos de iluminación
• Cámara: Proyección
• Animación: sucesión de escenas.
• Imagen:
• Puede realizarse en varios medios (device independence)
• Vector: secuencia de comandos select_pen(1); goto (x,y); pen_down();...
• Raster: framebuffer (array de pixels) (W x H x C) (& cia.)

Introducción 29
 Sistemas de Coordenadas

Ensamble: Primitivas (LCS)  Modelo (MCS)

Textura: Imagen (ICS)  Superficie del modelo (PS: u,v)
Escena: Modelos (MCS)  Universo (WCS)
Iluminación: Luces (LCS)  Universo (WCS)
Proyección: Universo (WCS)  Observador (VCS)
Normalización: Observador (VCS)  Dispositivo Universal (NDCS)
Rasterización: Dispositivo Universal (NDCS)  Dispositivo (DCS)
Pantalla (SCS)
Imagen (ICS)

L: Local M: Model
I: Image W: World
V: Viewer ND: Normalized Device
D: Device S: Screen
PS: Parameter Space
Introducción 30
Sistemas de Coordenadas

ND

Introducción 31
Rasterizado: Color, Z, y otros buffers

Framebuffer (memoria de video)

Color: Display (front, back, layers)
Z o Depth: Oclusión de superficies.
Stencil: Restricción del área de dibujo. Reflejos y Sombras.
Accumulation: Movimiento, Antialiasing, Prof. de Campo.
Stereo: Visión estereoscópica (left/right color buffers).

Introducción 32
Animación

Introducción 33
Pipeline

• Programa: La CPU, por si sola o interactuando con el usuario alimenta

de datos al sistema geométrico

• Sistema Geométrico: recibe los datos y realiza las operaciones per-vertex

sobre los objetos geométricos: transformaciones, clipping, iluminación.
Suele estar acelerado por hardware (implementada en la GPU)

• Sistema Gráfico: Recibe los datos vectoriales proyectados (NDC) y con

ellos procesa o arma los distintos buffers; realiza operaciones per-pixel
como rasterizado, mapeo de la textura, alpha-blending (mezcla de capas)
y z-buffering (ocultamiento de objetos) para luego enviar el framebuffer
al dispositivo gráfico y, posiblemente, realimentar el programa. También
suele estar implementado en la GPU

Rendering
•Vertex: Vecinos geométricos
Pipeline •Pixel: Vecinos gráficos

Introducción 34
Rendering Pipeline

Introducción 35
 “Computer” Graphics

API: Application Programming Interface

Es un programa para programar. Provee piezas de alto nivel (lenguaje,
bibliotecas) que se ensamblan para armar una aplicación.
En otra acepción es una biblioteca de rutinas para interactuar con el
hardware.

GUI: Graphical User Interface

Es una biblioteca para programar la interacción del usuario con el programa
mediante dispositivos de entrada y utilizando ventanas y otras metáforas
gráficas. Normalmente proveen funciones tipo callback para reaccionar a la
entrada de datos a través de:
• Teclado
• Mouse: Botones y Cursor
• Menú: texto, iconos
• Widgets (artilugios) gráficos: slider, dial, cuadros de diálogo …
• Otros: Joystick, Tablero Digitalizador, Trackball….

Introducción 36
“Computer” Graphics

API´s Gráficas
• OpenGL: Provee funciones para casi todo el pipeline y es soportado por casi
todos los sistemas operativos. Está implementado en hardware en casi todas
las placas gráficas (la GPU se encarga de hacer las operaciones).
• Direct3D: idem pero solo para Windows.
• X11, Postscript, PDF…. Solo 2D y por software.
• HPGL: caído en desuso, pero es un ejemplo de API vectorial.

GUI´s gratuitas con ventana OpenGL

• AUX: para aprender OpenGL, excesivamente simple, ya no se utiliza.
• GLUT: simple y estable, no cubre todas las necesidades.
• QT, FLTK, wxWidgets… muy completas (hay que estudiar para usarlas)

Introducción 37
OpenGL, ¿Por que?

• ESTABLE
El trabajo hecho perdura y se puede reutilizar
¡Cuidado con las extensiones! (en lo posible no usar)
• PORTABLE
Exactamente el mismo código en cualquier sistema
• EFICIENTE
Casi todo el trabajo lo hace la GPU
Implementado en cualquier placa gráfica estándar
Aun por software es eficiente
• GRATUITO
OpenGL tiene copyright de Silicon Graphics
Pero hay implementaciones realmente libres (Mesa)

Introducción 38
Funcionamiento de OpenGL

• Máquina de Estados
• Procedural (Assembler de rutinas gráficas)
• OpenGL es un renderizador, no es modelador
ni GUI (Las bibliotecas asociadas GLU y GLUT
tienen algo de modelado y algo de GUI)

Introducción 39
OpenGL Utility Library (GLUT)

• Abre ventanas de OpenGL

• Callbacks para interacción con hardware
• Recibir input del teclado y mouse
• Temporizador (idle callback)
• Resize y Redraw (render)
• Menús (muy modestos)

• Estable, sencillo y eficiente

• No posee widgets (sliders, cuadros de diálogo)

• No posee selector de archivos
• No soporta la ruedita del ratón
• No se actualiza desde hace mucho tiempo

Introducción 40
Lineamientos de un programa gráfico

• Creación de la ventana de aplicación

• Creación de ventanas de dibujo e interacción
• GUI:
• Declaración de callbacks
• Funciones del mouse
• Funciones de los menús
• Funciones del teclado
• OpenGL:
• Variables de estado usuales

• Sistema de coordenadas estándar

• Iluminación inicial

• Cámara y sistema de proyección usual

• loop de ejecución
• Dibujar
• Reaccionar a los eventos
• Alterar el contenido o los métodos

Introducción 41
Lineamientos de un programa gráfico

Crear ventanas
Definir callbacks
Inicializar OpenGL

Reaccionar a eventos

Actualizar variables
(animación)

Redibujar
Loop de Eventos

Introducción 42
 Llamada Típica a Funciones del OpenGL

glAlgunaFuncion[234][dfis][v](.....);

Siempre Parámetros

Nombre Tipo Puntero

Dimensión

Ejemplos:
glBegin(GL_LINE_LOOP);
glVertex3d(x,y,z);
...........
glEnd();
glLightfv(GL_LIGHT0,GL_POSITION,lpos);
Introducción 43
Secuencia típica de dibujo en OpenGL

Avisar como se dibujan las cosas

Dibujar algunas cosas

Avisar como se dibujan las cosas

Dibujar algunas cosas

Introducción 44
Rendering Pipeline (simplificada) de OpenGL

Introducción 45
Fin

Introducción 46