universidad católica andrés bello » computación gráfica » ciro durán computación gráfica...
TRANSCRIPT
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Computación Gráfica
Semestre 201321CRN
Septiembre 2012 – Febrero 2013
Ciro DuránIngeniero en Computación
[email protected]://www.ciroduran.com
@chiguire
Introducción a los gráficos 2D
Usando OpenGL
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)
• 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.
Aplicación gráfica
Generadorde IU
Generadorde escenas
PlataformagráficaModelo
deaplicació
n
Ventana
Áre
a a
pp c
liente
Panta
lla
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Plataformas gráficas (2/4)
• 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.
Aplicación gráfica
Generadorde IU
Generadorde escenas
PlataformagráficaModelo
deaplicació
n
Ventana
Áre
a a
pp c
liente
Panta
lla
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Plataformas gráficas (3/4)
• 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.
Aplicación gráfica
Generadorde IU
Generadorde escenas
PlataformagráficaModelo
deaplicació
n
Ventana
Áre
a a
pp c
liente
Panta
lla
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étricaLas 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 dispositivoPara 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ángulo-de-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)
Mod
oin
med
iato
Mod
ore
ten
ido
Coordenadasenteras de
pixeles
Coordenadasabstractas
punto flotante
Plantillas/Reusabilidad
Plataformas GUI:Manejadores de
disposición yControles inteligentes
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)
• No hay respuesta correcta en cuál usar – ventajas y desventajas dependiendo del contexto
Aplicación gráficaGenerador de IU
Generadorde escenas
Plataforma gráficaen modo retenido
Modelo deaplicación
Area App Cliente
Crear objetos gráficos
Modificar grafo de la escena
Grafoescena
Sincronizadordispositivo
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.
Un círculo aproximado hecho
de primitivas triangulares.
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
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ónglOrtho(-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.
Coordenadasdel 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 reloj:
• El resultado es un cuadrado centrado en la ventana:
glBegin(GL_QUADS);glVertex2f(-.7, -.7);glVertex2f( .7, -.7);glVertex2f( .7, .7);glVertex2f(-.7, .7);glEnd();
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
NXN✓
glVertex2f(-.7, -.7);glVertex2f( .7, -.7);glVertex2f( .7, .7);glVertex2f(-.7, .7);
glVertex2f(-.7, -.7);glVertex2f(-.7, .7);glVertex2f( .7, .7);glVertex2f( .7, -.7);
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Transformaciones
• Las transformaciones geométricas en 2D (relativas al centro de la figura para Escalar y Rotar)v
Original TrasladarglTranslatef(.1, .1, 0); glRotatef(-45, 0, 0, 1);
Original Rotar
Escalar
glScalef(2, 2, 1);
Original
• 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 relojfloat width = .01, height = .4;
glMatrixMode(GL_MODELVIEW);glPushMatrix();glRotatef(hourAngle, 0, 0, 1); // Rotar alrededor del eje Z
glBegin(GL_QUADS); glVertex2f(-width, 0); glVertex2f( width, 0); glVertex2f( width, height); glVertex2f(-width, height);glEnd();
glPopMatrix();
Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán
Bosquejo del ejemplo del reloj
// Establecer el sistema de coordenadasglMatrixMode(GL_PROJECTION);glOrtho(-1, 1, -1, 1, 1, -1);// La ventana se extiende de (-1, -1) a (1, 1)
// Dibujar la base del relojglMatrixMode(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)
Animación por fotogramasFlipbook
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
– Por lo tanto
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 renderconst float SECONDS_PER_REVOLUTION = 60;const float DEGREES_PER_REVOLUTION = 360;
secondsAngle += -1 // Girar con el sentido de las // agujas del reloj * secondsElapsed // * DEGREES_PER_REVOLUTION // Girar 360 grados ... / SECONDS_PER_REVOLUTION; // ... 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 enunciadohttp://ciroduran.com/disenajuegos
• Fecha de entrega: ¡Jueves 4 de abril de 2013!
• Publicado también el enunciado del proyecto 1