Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán Computación Gráfica Semestre 201321 CRN Septiembre 2012 – Febrero 2013 Ciro Durán

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


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

• 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



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


Generadorde IU

Generadorde escenas


deaplicació

n

Ventana

Áre

a a

pp c

liente

Panta

lla



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


Generadorde IU

Generadorde escenas


deaplicació

n

Ventana

Áre

a a

pp c

liente

Panta

lla


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.


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.



• 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



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



• 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



Mod

oin

med

iato

Mod

ore

ten

ido

Coordenadasenteras de

pixeles

Coordenadasabstractas

punto flotante

Plantillas/Reusabilidad

Plataformas GUI:Manejadores de

disposición yControles inteligentes


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)

• 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


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, 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

about:blank

about:blank


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ó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"



• 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



• 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

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


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.



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


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


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

http://youtu.be/_D9P5HZkPys)


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


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


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

http://ciroduran.com/disenajuegos

Documents

Universidad Católica Andrés Bello » Computación Gráfica » Ciro Durán Computación Gráfica Semestre 201321 CRN Septiembre 2012 – Febrero 2013 Ciro Durán