Transcript Modelo de aplicación

Computación Gráfica
Introducción a los
gráficos 2D
Usando OpenGL
Semestre 201321
CRN
Septiembre 2012 – Febrero 2013
Ciro Durán
Ingeniero en Computación
[email protected]
http://www.ciroduran.com
@chiguire
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
¿Por qué aprender OpenGL?
• Un estándar muy conocido de la industria para
gráficos 2D y 3D en tiempo real.
• Disponible en la mayoría de las plataformas
– Sistemas operativos de escritorio, dispositivos móviles
(OpenGL ES), browsers (WebGL).
• El API viejo (OpenGL 1.0) provee características para
prototipado rápido; el API más nuevo (OpenGL 2.0 y
posterior) provee más flexibilidad y control.
– Muchas características viejas disponibles en el nuevo API
como funcionalidad “obsoleta”.
– Hoy nos limitaremos al API viejo exclusivamente.
– Usaremos posteriormente una mezcla de API viejo y
nuevo.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
¿Por qué aprender 2D primero?
• Un buen primer paso hacia 3D - muchos
problemas son más fácil de entender en 2D.
– No hace falta simular luces, cámaras, la física de
la luz interactuando con objetos, etc.
– Introducción al modelaje vs. rendering y otras
nociones.
– Acostumbrarse al prototipado rápido en OpenGL,
tanto de diseño como de conceptos.
– 2D es todavía muy importante y de uso común en
computación gráfica, ej. en interfaces de usuario,
documentos y navegadores.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Plataformas gráficas (1/4)
Ventana
Aplicación gráfica
Generador
de escenas
Plataforma
gráfica
Pantalla
Modelo de
aplicación
Área app cliente
Generador
de IU
• Las aplicaciones que sólo escriben píxeles son
raras.
– El Modelo de la Aplicación (MA), son los datos
representados por una imagen renderizada.
• Modelo manipulado por la interacción del usuario con la
aplicación.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Plataformas gráficas (2/4)
Ventana
Aplicación gráfica
Generador
de escenas
Plataforma
gráfica
Pantalla
Modelo de
aplicación
Área app cliente
Generador
de IU
• Se ejecuta en conjunto con el manejador de
ventanas.
– Determina qué sección de la pantalla se le ubica a la
aplicación.
– Maneja el "chrome/cromado" (barra de título, manubrios
de redimensionamiento); área del cliente es controlada por
la aplicación.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Plataformas gráficas (3/4)
Ventana
Aplicación gráfica
Generador
de escenas
Plataforma
gráfica
Pantalla
Modelo de
aplicación
Área app cliente
Generador
de IU
• Típicamente el MA usa el área del cliente para:
– Interfaces de usuario para recolectar entradas al MA.
– Desplegar alguna representación del MA en el viewport.
• Esto usualmente se llama la escena, tanto en el contexto de 2D como
en 3D.
• La escena es renderizada por el generador de escenas, el
cual es comúnmente separado del generador de UI, el cual
renderiza el resto del UI.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Plataformas gráficas (4/4)
• Paquetes/librerías/plataformas iniciales de gráficos rasterizados
– Librería de RamTek (1981), Apple QuickDraw (1984)
– Microsoft Graphics Display Interface (GDI 1990, ahora GDI+),
Java.awt.Graphics2D
• Estos paquetes preliminares usualmente tienen estas
características:
– primitivas o formas geométricas, atributos de apariencia
especificados en conjuntos de atributos (también conocidos como
"contextos gráficos" o "brochas"),
• aplicadas modalmente en vez de una lista de parámetro para cada primitiva
(demasiado parámetros para hacer eso)
– coordenadas enteras que se corresponden directamente con los
píxeles de pantalla sobre el dispositivo de salida
– modo inmediato (no hay registro mantenido de los comandos de
despliegue)
– no hay funciones incorporadas para aplicar transformaciones a
primitivas
– no hay soporte incorporado para jerarquía de componetes (no hay
formas compuestas)
• Los paquetes preliminares eran poco más que lenguajes
ensamblador para los dispositivos de despliegue.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Problemas con Plataformas
Gráficas Tempranas (1/3)
• Escalabilidad geométrica
Las coordenadas enteras correspondidas
con los pixeles del dispositivo afecta el
tamaño aparente de la imagen: grande sobre
un dispositivo de baja resolución y pequeña
sobre dispositivos de alta resolución.
• La aplicación necesita una representación
flexible de coordenadas internas.
– Esencial que sea de punto flotante.
– Requiere convertir de punto flotante a fijo; una
correspondencia general, de hecho.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Problemas con Plataformas
Gráficas Tempranas (2/3)
• Actualizaciones
de dispositivo
Para ejecutar operaciones sobre objetos en la escena, la aplicación debe
•
•
•
mantener la lista de todas las primitivas y sus atributos (junto con los datos
específicos de la aplicación).
Algunas actualización son unas "animaciones de feedback" transitorias, un
cambio de dispositivo.
Considera la disposición de una aplicación de diseño interior
–
–
–
–
Cuando un usuario toma un objeto y lo arrastra a una nueva ubicación, el objeto sigue
el movimiento del cursor
Los movimientos intermedios no se relacionan con cambios de datos en el modelo de la
aplicación, puramente cambios visuales.
El modelo de la aplicación sólo se actualiza cuando el usuario suelta el objeto (suelta el
botón del mouse)
En un modo inmediato, la aplicación debe re-especificar la escena entera cada vez que
el cursor se mueve.
Alternativamente, usar una plataforma de modo retenido que almacenarán una
representación interna de todos los objetos en la escena.
–
Llamemos esto un modelo de despliegue para diferenciarlo de un modelo de aplicación
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Problemas con Plataformas
Gráficas Tempranas (3/3)
Interacción
• Considera un ejemplo de un reloj simple:
• El usuario hace click sobre el minutero, la ubicación debe ser
mapeada al objeto de la aplicación relevante; llamada
correlación de la selección (pick correlation).
• El desarrollador responsable de la correlación de la selección
(usualmente una especie de prueba de "punto-en-rectángulode-bounding-box" basada en coordenadas de selección).
– Encontrar el objeto más cercano a la ubicación clickeada.
– Puede que necesite buscar la jerarquía completa del objeto
compuesto desde la primitiva de más bajo nivel a la composición
de mayor nivel.
– Ejemplo, triángulo -> manecilla -> reloj.
• Solución: modo retenido puede hacer una correlación de la
selección, ya que tiene una representación de la escena.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Plataformas modernas de gráficos
(1/2)
• Sistema de coordenadas de punto flotante independientes del
dispositivo
– Los paquetes convierten coordenadas del "espacio de la
aplicación" a "coordenadas del dispositivo"
• Especificación de la jerarquía
– soporte de construcción de escenas como jerarquía de objetos,
utilizando transformaciones (escalar, rotar, trasladar) para
colocar hijos en los sistemas de coordenadas de los padres
– soporte de manipulación de compuestos como objetos
coherentes
• Objetos inteligentes (Widgets, etc.)
– objetos gráficos tienen comportamientos innatos y respuestas
de interacción
– ejemplo, un botón que se remarca automáticamente cuando el
cursor pasa encima del mismo
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Plataformas modernas de gráficos
(1/2)
• Sistema de coordenadas de punto flotante independientes del
dispositivo
– Los paquetes convierten coordenadas del "espacio de la
aplicación" a "coordenadas del dispositivo"
• Especificación de la jerarquía
– soporte de construcción de escenas como jerarquía de objetos,
utilizando transformaciones (escalar, rotar, trasladar) para
colocar hijos en los sistemas de coordenadas de los padres
– soporte de manipulación de compuestos como objetos
coherentes
• Objetos inteligentes (Widgets, etc.)
– objetos gráficos tienen comportamientos innatos y respuestas
de interacción
– ejemplo, un botón que se remarca automáticamente cuando el
cursor pasa encima del mismo
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Plataformas modernas de gráficos
(2/2)
Plataformas GUI:
Manejadores de
disposición y
Controles inteligentes
Plantillas/
Reusabilidad
Coordenadas
abstractas
punto flotante
Coordenadas
enteras de
pixeles
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Modo inmediato vs. Modo retenido
• Modo inmediato (OpenGL, DirectX)
Modelo de aplicación: almacena tanto la información
geométrica y no-geométrica en la Base de datos de la
Aplicación.
• La plataforma no mantiene un registro de las primitivas de
esas escenas compuestas.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Modo inmediato vs. Modo retenido
•
•
•
•
Modo retenido (WPF, SVG)
Modelo de aplicación dentro de la aplicación y Modelo de despliegue en
la plataforma.
El Modelo de la despliegue contiene información que define a la
geometría que será vista.
El Modelo de despliegue es un subconjunto geométrico del Modelo de la
aplicación (típicamente un grafo de escena)
Una aplicación simple de dibujo no necesita un Modelo de aplicación (ej.
el ejemplo del reloj)
Aplicación gráfica
Generador de IU
Modelo de
aplicación
Generador
de escenas
Plataforma gráfica
en modo retenido
Crear objetos gráficos
Grafo
escena
Modificar grafo de la escena
Sincronizador
dispositivo
Area App Cliente
• No hay respuesta correcta en cuál usar – ventajas y desventajas
dependiendo del contexto
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
OpenGL (1/3)
• API de gráficos en modo inmediato
– No hay modelo de despliegue, la aplicación debe dirigir a
OpenGL para dibujar las primitivas
• Implementado en C, también funciona en C++
– Bindings disponibles para muchos otros lenguajes de
programación
• Multi-plataforma
– También disponible en móviles (OpenGL ES*) y en el
navegador (WebGL)
– Diferentes plataformas proveen código "pegamento" para
inicializar OpenGL dentro del manejador de escritorio (ej.
GLX, WGL)
• Processing hace gran parte del trabajo para esto
*ES - Sistemas Embebidos
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
OpenGL (2/3)
• Creado por Silicon Graphics Inc. (SGI, http://sgi.com) en 1992,
ahora dirigido por Khronos Group, una institución sin fines de lucro
(http://khronos.org)
• Inicialmente dirigido a permitir que cualquier programa de OpenGL
corriera en una variedad de hardware gráfico.
• Inventado cuando el hardware de "función fija" era la norma
– Las ténicas fueron implementadas en hardware; las llamadas de
OpenGL enviaba comandos al hardware para activar/configurar
diferentes características
• Ahora soporta hardware programable
– La mayoría de las tarjetas gráficas con computadoras miniatura
altamente paralelas, con GPUs multi-núcleo, RAM interno, etc.
– Los GPUs pueden correr programas simples (llamados "shaders"), los
cuales renderizan la escena mientras el CPU está ocupado haciendo
otro trabajo
– Los programadores pueden implementar nuevas características en los
shaders en vez de esperar a que los vendedores de hardware lo
soporten en hardware
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
OpenGL (3/3)
• Los APIs de función fija proveen características
que hacen más fácil el prototipado
– ej. el paquete implementa mucha del álgebra lineal
necesario para mover objetos en pantalla
– La librería de utilidades GL ("GLU") provee utilidades
adicionales de alto-nivel
• El API programable implementa la mayoría del API
de función fija para compatibilidad “hacia atrás",
pero usa shaders en el fondo
– Esto sólo es verdad para el escritorio; es obligatorio
usar shaders para programar con OpenGL ES 2.0+ o
WebGL
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Representando formas
• Los objetos en OpenGL se componen de
triángulos y cuadrángulos (quads). Podemos usar
éstos para construir polígonos arbitrarios, y
formas aproximadamente lisas.
Un polígono
complejo hecho de
primitivas
triangulares.
Un polígono
complejo hecho de
primitivas
cuadrangulares.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Un círculo
aproximado hecho
de primitivas
triangulares.
Sistemas de coordenadas (1/6)
• Coordenadas cartesianas en
matemática, ingeniería
– Típicamente modelada como punto
flotante
– Típicamente X aumenta hacia la
derecha, Y hacia arriba
• Coordenadas del dispositivo (físicas)
– Enteros solamente
– Típicamente X aumenta hacia la
derecha, Y hacia abajo
– 1 unidad = 1 pixel
• Pero queremos aislarnos de las
coordenadas físicas del dispositivo
– OpenGL es el intermediario
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Sistemas de coordenadas (2/6)
•
Coordenadas de OpenGL
– Escoger una convención
•
Para nosotros: X aumenta hacia la derecha, Y hacia
arriba
– Las unidades están basadas en el tamaño de la
ventana o la pantalla
•
•
•
El área visible se estira para llenar la ventana
Las unidades son un porcentaje del tamaño de la
ventana, y no se corresponden a unidades físicas o
pixeles.
Definir un sistema de coordenadas usando una
matriz de proyección (Los siguientes son los
ajustes que vienen en OpenGL por defecto
glMatrixMode(GL_PROJECTION_MATRIX); // Seleccionar la matriz de proyección
glOrtho(-1, //Coordenada en X del borde izquierdo
1, //Coordenada en X del borde derecho
-1, //Coordenada en Y del borde de abajo
1, //Coordenada en Y del borde arriba
1, //Coordenada en Z del plano "cercano"
-1); //Coordenada en Z del plano "lejano"
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Sistemas de coordenadas (3/6)
• Dos formas de pensar
– Dibujar todo en el sistema de coordenadas de OpenGL
– Esto es incoveniente: en vez de ello escoge tu propio
sistema de coordenadas abstracto de objetos que se
ajuste a tus necesidades, y luego especifica todas las
primitivas en tu objeto a OpenGL usando estas
coordenadas. Esepcifica una transformación para
mapear las coordenadas de objeto a las coordenadas de
OpenGL
• Estas últimas transformaciones se llaman "coordenadas de
aplicación" en 2D, o "coordenadas del mundo" en 3D
– Cuando decimos "transformación", por lo común nos
referimos a una composición de transformaciones de
escalamiento, rotación y traslación.
Coordenadas
del objeto
Dispositivo
Coordenadas de OpenGL
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Sistemas de coordenadas (4/6)
• Ahora ilustraremos el uso de OpenGL yendo paso a paso
con la demostración de la creación de una aplicación de un
reloj simple
• Comenzaremos
dibujando un cuadrado para la cara del
glBegin(GL_QUADS);
reloj:glVertex2f(-.7, -.7);
glVertex2f( .7, -.7);
glVertex2f( .7, .7);
glVertex2f(-.7, .7);
glEnd();
• El resultado es un cuadrado
centrado en la ventana:
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Orden de declaración (winding
order)
• El orden es importante: los vértices deben ser especificados
en orden contrario a las agujas del reloj relativo al
observador. De otra manera, ¡no se verá nada!
– El orden de declaración determina la dirección del vector normal
de iluminación; si la normal apunta a la dirección equivocada, no
veremos nada.
– El orden contrario a las agujas del reloj es consistente con la
regla de la mano derecha
glVertex2f(-.7, -.7);
glVertex2f( .7, -.7);
glVertex2f( .7, .7);
glVertex2f(-.7, .7);
glVertex2f(-.7, -.7);
glVertex2f(-.7, .7);
glVertex2f( .7, .7);
glVertex2f( .7, -.7);
N✓
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
NX
Transformaciones
• Las transformaciones geométricas en 2D
(relativas al centro de la figura para
Escalar y Rotar)v
Original
Trasladar
glTranslatef(.1, .1, 0);
Original
glScalef(2, 2, 1);
Escalar
Original
Rotar
glRotatef(-45, 0, 0, 1);
• Los ángulos positivos rotan
contrario a las agujas del reloj.
• Las transformaciones pueden ser
compuestas (composición de matrices)
pero NO son conmutativas, así que el
orden correcto es vital.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Sistemas de coordenadas (5/6)
• Para mapear desde las coordenadas de objeto a las coordenadas
de OpenGL, usa la matriz modelview (o matrix de
vistamodelo):
glMatrixMode(GL_MODELVIEW);
// llamadas a glTranslatef / glRotatef / etc van acá
• OpenGL provee una estructura de datos de pila para que puedas
borrar las transformaciones modelview del objeto después de que
hayas dibujado el objeto:
glMatrixMode(GL_MODELVIEW);
glPushMatrix();
// Guardar la matriz modelview actual
// <aplicar transformaciones a la matriz de modelview
(glTranslatef, etc.)>
// <dibujar un objeto (glBegin, glVertex, etc.)>
glPopMatrix();
// Recuperar la matriz modelview
guardada
// Repetir para otros objetos
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Sistemas de coordenadas (6/6)
•
Ahora dibujaremos una manecilla de hora en el reloj usando un quad rotado
alrededor del origen. Uno podría hacer lo mismo para dibujar el minutero y
el segundero:
float hourAngle = -45;
// Rotar 45 grados en sentido
agujas del reloj
float width = .01, height = .4;
glMatrixMode(GL_MODELVIEW);
glPushMatrix();
glRotatef(hourAngle, 0, 0, 1); // Rotar alrededor del eje Z
glBegin(GL_QUADS);
glVertex2f(-width,
glVertex2f( width,
glVertex2f( width,
glVertex2f(-width,
glEnd();
0);
0);
height);
height);
glPopMatrix();
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Bosquejo del ejemplo del reloj
// Establecer el sistema de coordenadas
glMatrixMode(GL_PROJECTION);
glOrtho(-1, 1, -1, 1, 1, -1);
// La ventana se extiende de (-1, -1) a
(1, 1)
// Dibujar la base del reloj
glMatrixMode(GL_MODELVIEW);
glPushMatrix();
glColor3f(.7, .7, .7); // gris claro
// <dibujar un quad para la base del
// reloj (glBegin, glVertex, glEnd)>
glPopMatrix();
// Dibujar el horario
// (no hace falta llamar nuevamente a
// glMatrixMode, está todavía en
// GL_MODELVIEW)
glPushMatrix();
glRotatef(...);
glColor3f(0, 0, .5); // Azul marino
// <ibujar un quad para el horario>
glPopMatrix();
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Animación (1/3)
• Mostrar rápidamente una secuencia de
imágenes para crear una ilusión de
movimiento
– Flipbook (http://youtu.be/_D9P5HZkPys)
– Animación por fotogramas clave (keyframe): se
especifican los keyframes, la computadora
interpola (ej. una pelota rebotando)
Flipbook
Animación por fotogramas
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Animación (2/3)
• Idea: mover el segundero incrementalmente cada vez
que hacemos render.
• Dado el número de segundos transcurridos, ¿cuántos
grados deberíamos rotar el segundero?
– Necesitamos convertir de segundos a grados
• Idea: usar rotaciones alrededor del reloj como un
factor de conversión común
– Segundos por revolución: 60
– Grados por revolución: 360
– Δá𝑛𝑔𝑢𝑙𝑜 = Δ𝑡 𝑠𝑒𝑔 ×
1 𝑟𝑒𝑣𝑜𝑙𝑢𝑐𝑖ó𝑛
60 𝑠𝑒𝑔
– Por lo tanto Δá𝑛𝑔𝑢𝑙𝑜 = Δ𝑡 𝑠𝑒𝑔
360 𝑔𝑟𝑎𝑑𝑜𝑠
×
1 𝑟𝑒𝑣𝑜𝑙𝑢𝑐𝑖ó𝑛
360 𝑔𝑟𝑎𝑑𝑜𝑠
×
60 𝑠𝑒𝑔
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Animación (3/3)
float secondsElapsed = ...; // número de segundos desde último render
const float SECONDS_PER_REVOLUTION = 60;
const float DEGREES_PER_REVOLUTION = 360;
secondsAngle += -1
* secondsElapsed
* DEGREES_PER_REVOLUTION
/ SECONDS_PER_REVOLUTION;
//
//
//
//
//
Girar con el sentido de las
agujas del reloj
Δ𝑡
Girar 360 grados ...
... cada 60 segundos
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Tarea 1
• Consultar la página del curso para el
enunciado
http://ciroduran.com/disenajuegos
• Fecha de entrega: ¡Jueves 4 de abril de
2013!
• Publicado también el enunciado del
proyecto 1
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán