Introducción a los gráficos 2D

1. Introducción a los gráficos 2D Usando OpenGL

2. ¿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.

3. ¿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.

4. Plataformas gráficas (1/4) Ventana Aplicacióngráfica Generador de IU Plataforma gráfica Generador de escenas Modelode aplicación Área app cliente Pantalla • 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.

5. Plataformas gráficas (2/4) Ventana Aplicacióngráfica Generador de IU Plataforma gráfica Generador de escenas Modelode aplicación Área app cliente Pantalla • 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.

6. Plataformas gráficas (3/4) Ventana Aplicacióngráfica Generador de IU Plataforma gráfica Generador de escenas Modelode aplicación Área app cliente Pantalla • 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.

7. Plataformas gráficas (4/4) • Paquetes/librerías/plataformas iniciales de gráficos rasterizados • Librería de RamTek (1981), Apple QuickDraw (1984) • Microsoft GraphicsDisplay 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.

8. 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.

9. 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

10. 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.

11. 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

12. 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

13. Plataformas modernas de gráficos (2/2) Plataformas GUI: Manejadores de disposición y Controlesinteligentes Modo retenido Plantillas/ Reusabilidad Coordenadas abstractas puntoflotante Modo inmediato Coordenadasenteras de pixeles

14. 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.

15. Modo inmediato vs. Modo retenido Aplicacióngráfica Plataformagráfica en modoretenido Generadorde IU Crearobjetosgráficos Modelode aplicación Generador de escenas Grafoescena Sincronizadordispositivo Area App Cliente Modificargrafo de la escena • No hay respuesta correcta en cuál usar – ventajas y desventajas dependiendodel contexto 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)

16. 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

17. OpenGL(2/3) • Creado por SiliconGraphics Inc. (SGI, http://sgi.com) en 1992, ahora dirigido por KhronosGroup, 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 GPUsmulti-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

18. 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

19. Representando formas Un círculo aproximado hecho de primitivas triangulares. Un polígono complejo hecho de primitivas cuadrangulares. Un polígono complejo hecho de primitivas triangulares. 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.

20. 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

21. Sistemas de coordenadas (2/6) 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" • 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

22. Sistemas de coordenadas (3/6) Coordenadasdel objeto Dispositivo Coordenadas de OpenGL • 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.

23. Sistemas de coordenadas (4/6) glBegin(GL_QUADS); glVertex2f(-.7, -.7); glVertex2f( .7, -.7); glVertex2f( .7, .7); glVertex2f(-.7, .7); glEnd(); 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:

24. Orden de declaración (windingorder) N ✓ N X glVertex2f(-.7, -.7); glVertex2f( .7, -.7); glVertex2f( .7, .7); glVertex2f(-.7, .7); glVertex2f(-.7, -.7); glVertex2f(-.7, .7); glVertex2f( .7, .7); glVertex2f( .7, -.7); • 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

25. Transformaciones Rotar glRotatef(-45, 0, 0, 1); glTranslatef(.1, .1, 0); Original Original Trasladar Original Escalar • 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. glScalef(2, 2, 1); Las transformaciones geométricas en 2D (relativas al centro de la figura para Escalar y Rotar)v

26. 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 / etcvan 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 matrizmodelviewguardada// Repetirparaotrosobjetos

27. 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 sentidoagujas del relojfloat width = .01, height = .4; glMatrixMode(GL_MODELVIEW);glPushMatrix();glRotatef(hourAngle, 0, 0, 1); // Rotaralrededordel eje ZglBegin(GL_QUADS); glVertex2f(-width, 0); glVertex2f( width, 0); glVertex2f( width, height); glVertex2f(-width, height);glEnd();glPopMatrix();

28. 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); // grisclaro // <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();

29. Animación (1/3) Animaciónporfotogramas Flipbook • 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)

30. 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

31. Animación (3/3) float secondsElapsed = ...; // número de segundosdesdeúltimo render const 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

32. Tarea 1 Consultar la página del cursopara el enunciadohttp://ciroduran.com/disenajuegos Fecha de entrega:¡Jueves 4 de abril de 2013! Publicadotambién el enunciado del proyecto 1