Introducción a los gráficos 2D

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

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

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

Plataformas gráficas (1/4)
Aplicación gráfica Generador de IU de escenas Plataforma gráfica Modelo de aplicación Ventana Á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.

Aplicación gráfica Generador de IU de escenas Plataforma gráfica Modelo de aplicación Ventana Á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.

Aplicación gráfica Generador de IU de escenas Plataforma gráfica Modelo de aplicación Ventana Á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.

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.

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.

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

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.

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

Plataformas modernas de gráficos (2/2)
Plataformas GUI: Manejadores de disposición y Controles inteligentes retenido Modo Plantillas/ Reusabilidad Coordenadas abstractas punto flotante inmediato Modo Coordenadas enteras de pixeles

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.

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 Plataforma gráfica en modo retenido Generador de IU Crear objetos gráficos Modelo de aplicación Generador de escenas Grafo escena Sincronizador dispositivo Modificar grafo de la escena Area App Cliente No hay respuesta correcta en cuál usar – ventajas y desventajas dependiendo del contexto

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

OpenGL (2/3) Creado por Silicon Graphics Inc. (SGI, en 1992, ahora dirigido por Khronos Group, una institución sin fines de lucro ( 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

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

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.

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

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"

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

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();

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 ✓ N X

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

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

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, height); glVertex2f(-width, height); glEnd(); glPopMatrix();

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();

Animación por fotogramas
Mostrar rápidamente una secuencia de imágenes para crear una ilusión de movimiento Flipbook ( Animación por fotogramas clave (keyframe): se especifican los keyframes, la computadora interpola (ej. una pelota rebotando) Flipbook Animación por fotogramas

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 𝑠𝑒𝑔 × 360 𝑔𝑟𝑎𝑑𝑜𝑠 1 𝑟𝑒𝑣𝑜𝑙𝑢𝑐𝑖ó𝑛 Por lo tanto Δá𝑛𝑔𝑢𝑙𝑜 =Δ𝑡 𝑠𝑒𝑔× 360 𝑔𝑟𝑎𝑑𝑜𝑠 60 𝑠𝑒𝑔

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 // Girar con el sentido de las // agujas del reloj * secondsElapsed // Δ𝑡 * DEGREES_PER_REVOLUTION // Girar 360 grados ... / SECONDS_PER_REVOLUTION; // ... cada 60 segundos

Tarea 1 Consultar la página del curso para el enunciado Fecha de entrega: ¡Jueves 4 de abril de 2013! Publicado también el enunciado del proyecto 1

Introducción a los gráficos 2D

Presentaciones similares

Presentación del tema: "Introducción a los gráficos 2D"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

Introducción a los gráficos 2D

Presentaciones similares

Presentación del tema: "Introducción a los gráficos 2D"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback