Introducción a los gráficos 3D OpenGL

Introducción a OpenGL Breve historia: En 1973 se desarrolla GKS (Graphical Kernel System) No se adapta bien a los gráficos 3D y a la continua evolución del hardware. Nacen otras propuestas: Programmers Hierarchical Graphics System (PHIGS) y X Window System. PEX intenta combinar estas soluciones pero el resultado es complejo

Introducción a OpenGL Breve historia: En 1982 una compañía llamada Silicon Graphics (SGI) revoluciona el mercado con una propuesta basada en implementar el pipeline gráfico en hardware. Esta propuesta utiliza una librería gráfica llamada GL. Su diseño hace que sea posible realizar gráficos 3D de forma sencilla.

Introducción a OpenGL Breve historia: En 1992 nace OpenGl basándose en el diseñó en GL. Es un API con muchas ventajas: Es independiente de la plataforma y del lenguaje Es fácil de usar Evita todo lo relativo al sistema de ventanas y se centra en el proceso de renderizado Soportado por multitud de empresas Estable Evoluciona continuamente e incorpora todas las mejoras en hardware.

Introducción a OpenGL El rendimiento se obtiene utilizando la GPU en lugar de usar la CPU Podemos programar la GPU unos programas especiales llamados: “shaders”. Nuestra aplicación debe suministrar los datos para que trabaje la GPU La GPU realiza todo el trabajo “pesado”:

≡ OpenGL Abstract Drawing Machine triangles, lines, points images commands Vertices Per-vertex ops Transformed vertices Rasterizer Texturing Fragments Per-fragment ops Shaded fragments Frame buffer ops pixels in the framebuffer Pixels

Introducción a OpenGL OpenGL OpenGL Utility Library (GLU) OpenGL32 en Windows Se suele llamar GL en unix/linux (libGL.a) OpenGL Utility Library (GLU) Aporta funcionalidad nueva escrita usando OpenGL. Links with window system GLX en sistemas X window systems WGL en Windows AGL en Macintosh

Introducción a OpenGL Otras API y librerías interesantes: GLUT Freeglut GLEW: OpenGL Extension Wrangler Library

Introducción a OpenGL

Introducción a OpenGL Primitivas Atributos Modeling Control (GLUT) Puntos (Points) Líneas (Line Segments) Triángulos (Triangles) Atributos Transformaciones Vista Modeling Control (GLUT) Entrada (Input) (GLUT) Consulta (Query)

p es un puntero a un array Introducción a OpenGL function name dimensiones glUniform3f(x,y,z) x,y,z son floats Forma parte de GL lib. glUniform3fv(p) p es un puntero a un array

Un ejemplo tonto:

El código sería: #include <GL/glut.h> void mydisplay(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_QUAD; glVertex2f(-0.5, -0.5); glVertex2f(-0,5, 0,5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd() } int main(int argc, char** argv){ glutCreateWindow("simple"); glutDisplayFunc(mydisplay); glutMainLoop();

Introducción a OpenGL OpenGL trabaja en un bucle infinito Sitúa elementos en la escena(puntos, líneas, polígonos,..) Describe la cámara (pos., orientación, field of view) Atiende los eventos del teclado (keyboard events) Dibuja la escena

Introducción a OpenGL OpenGL tiene un estado El programa OpenGL tiene multitud de posibles configuraciones. La configuración actual se almacena en el estado de OpenGL Los comandos de OpenGL afectan al estado del programa.

OpenGL: Geometría La geometría en OpenGL es una serie de vértices entre un glBegin() y glEnd() Como ejemplo simple, supongamos un triángulo: glBegin(GL_POLYGON); glVertex3f(x1, y1, z1); glVertex3f(x2, y2, z2); glVertex3f(x3, y3, z3); glEnd(); En la llamada a glBegin(geomtype) indicamos el tipo de geometría que deseamos: puntos, líneas, polígonos, triángulos, cuadrados, etc...

Tipos de primitivas {S | _STRIP | _LOOP} {S | _STRIP | _FAN} GL_POINTS GL_LINE {S | _STRIP | _LOOP} GL_TRIANGLE {S | _STRIP | _FAN} GL_QUAD {S | _STRIP} GL_POLYGON

Primitivas de OpenGL

GL_POLYGON La lista de vértices define un polígono Los polígonos deben ser convexos.

Polígonos no-coplanares Imagina un polígono no-coplanar Según la perspectiva, podría verse como no convexo En general no podemos esperar que se dibujen correctamente. Tenemos que evitar utilizar polígonos que no se sitúen en el mismo plano.

OpenGL: Más ejemplos Ejemplo: glBegin(GL_QUADS); glVertex3f(-1, 1, 0); glVertex3f(-1, -1, 0); glVertex3f(1, -1, 0); glVertex3f(1, 1, 0); glEnd(); Este tipo de operación se llama inmediata: (“immediate-mode rendering”) dado que los comandos se ejecutan de forma instantánea.

OpenGL: Dibujando triángulos Podemos dibujar triángulos con glBegin(GL_TRIANGLES) and glEnd(): float v1[3], v2[3], v3[3], v4[3]; ... glBegin(GL_TRIANGLES); glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3); glVertex3fv(v1); glVertex3fv(v3); glVertex3fv(v4); glEnd(); Cada conjunto de 3 vértices forma un triángulo ¿Qué crees que se dibujaría? ¿Crees que es redundante?

OpenGL: Dibujando tiras En OpenGL un “triangle strip“ es una primitiva que reduce el trabajo reutilizando los vértices: glBegin(GL_TRIANGLE_STRIP); glVertex3fv(v0); glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3); glVertex3fv(v4); glVertex3fv(v5); glEnd(); Triángulo 0 es v0, v1, v2 Triángulo 1 es v2, v1, v3 (no v1, v2, v3?) Triángulo 2 es v2, v3, v4 Triángulo 3 es v4, v3, v5 (de nuevo, no v3, v4, v5) v0 v2 v1 v3 v4 v5

OpenGL: Cara frontal y trasera Cada polígono tiene dos caras: una frontal y otra trasera. OpenGL puede dibujar de dos formas diferentes El orden de los vértices define la cara frontal: Cuando lo vemos desde la cara frontal, los vértices se definen en el orden contrario a las agujas del reloj (counterclockwise)

Doble Buffering Evita que se dibujen imágenes a medio construir OpenGL genera una imagen mientras presenta otra en el monitor glxSwapBuffers (Display *dpy, Window, w) glutSwapBuffers (void)

Jugando con OpenGL

Jugando con OpenGL

Introducción a OpenGL OpenGL utiliza matrices (Matrix) Las matrices describen el tipo de cámaras Las matrices describen la configuración actual del espacio 3D

Introducción a OpenGL Sistema de coordenadas en OpenGL De “mano derecha” Por defecto, la cámara mira hacia el eje z en sentido negativo (hacia abajo).

Introducción a OpenGL Por lo tanto… X-axis = pulgar = 1, 0, 0 Y-axis = índice = 0, 1, 0 Z-axis = medio = 0, 0, 1 Supongamos que queremos cambiar la cámara Y que deseamos mirar hacia abajo en el eje X. Antes de ver la solución, veamos la importancia de las matrices.

Uso de matrices. Ejemplo con escalado Una operación de escalado: O en la forma matricial: scaling matrix

 Rotación en 2-D (x’, y’) (x, y) x’ = x cos() - y sin() y’ = x sin() + y cos()

 Rotación en 2-D (x’, y’) (x, y) f x = r cos (f) y = r sin (f) Es igual a … x’ = r cos(f) cos() – r sin(f) sin() y’ = r sin(f) sin() + r cos(f) cos() Que resulta … x’ = x cos() - y sin() y’ = x sin() + y cos()  (x, y) (x’, y’) f

Rotación 2-D Esto lo podemos expresar en una matriz: Incluso si sin(q) y cos(q) no son funciones lineales de q, x’ es una combinación lineal de x e y y’ es una combinación lineal de x e y Una matriz es un operador lineal. Más adelante veremos la importancia de este hecho.

Introducción a OpenGL Retomemos nuestros ejes, si queremos cambiar la forma de presentar los ejes Entonces utilizaríamos una matriz de transformación Si eje x  eje z negativo x  -z y  y z  x

Introducción a OpenGL = La matriz a i define una transformación: ¿Qué opináis? ¿Guardamos la matriz de transformación o el resultado final de aplicarla? Guardamos la matriz de transformación. =

Introducción a OpenGL = La transformada se aplicará a muchos puntos Si la transformada mueve los ejes, La misma transformada moverá todos los demás puntos Ejemplo: (1, 1, -1)  (-1, 1, -1) = 

Introducción a OpenGL Esta matriz es MUY importante y se denomina la matriz MODELVIEW Esta matriz MODELVIEW es tan importante que OpenGL mantiene una pila de ellas. Tenemos el control de dicha pila mediante glPushMatrix y glPopMatrix. La matriz es realmente de 4x4, pero esos detalles los vermos en breve. Además, OpenGL tiene una matriz similar para describir la cámara. Esta matriz se llama PROJECTION_MATRIX

Introducción a OpenGL Un pequeño ejemplo: Vamos a ver cómo manejar MODELVIEW Para ello vamos a utilizar: glLoadIdentity(); glTranslatef(GLfloat x, y, z); glRotatef(GLfloat degrees, x, y, z); glScalef (GLfloat x, y, z); glPushMatrix(), glPopMatrix();

Trabajando con Transformaciones glTranslate (x, y, z) Post-multiplica la matriz actual por una matriz que mueve los objetos a los valores x, y, z glRotate (theta, x, y, z) Post-multiplica la matriz actual por una matriz que rota el objeto de forma “counterclockwise” sobre la línea que forma el origen y el punto (x, y, z)

Trabajando con Transformaciones glScale (x, y, z) Post-multiplica la matriz actual por una matriz que escala el objeto en cada eje.

Trabajando con Transformaciones Es importante que entendamos cómo funciona el orden de las transformaciones. glMatrixMode (MODELVIEW); glLoadIdentity(); glMultMatrix(N); glMultMatrix(M); glMultMatrix(L); glBegin(POINTS); glVertex3f(v); glEnd(); El valor de Modelview es: I(dentity), N, NM, NML El vértice es: NMLv = N(M(Lv))

Manipulando la Pila Algunas transformaciones se comparten entre varios modelos Nos gustaría evitar tener que cargar continuamente la misma secuencia de transformaciones. glPushMatrix ( ) Guarda (apila) una matriz en la pila glPopMatrix ( ) Extrae (desapila) la última matriz almacenada

Manipulando la Pila Veamos cómo se comporta este ejemplo draw_wheel( ); for (j=0; j<5; j++) { glPushMatrix (); glRotatef(72.0*j, 0.0, 0.0, 1.0); glTranslatef (3.0, 0.0, 0.0); draw_bolt ( ); glPopMatrix ( ); }

Manipulando las transformaciones draw_wheel( ); for (j=0; j<5; j++) { glPushMatrix (); glRotatef(72.0*j, 0.0, 0.0, 1.0); glTranslatef (3.0, 0.0, 0.0); draw_bolt ( ); glPopMatrix ( ); R RT RTv Global – Bottom Up Start Rot Trans

Manipulando las transformaciones draw_wheel( ); for (j=0; j<5; j++) { glPushMatrix (); glRotatef(72.0*j, 0.0, 0.0, 1.0); glTranslatef (3.0, 0.0, 0.0); draw_bolt ( ); glPopMatrix ( ); R RT RTv Local – Top Down Start Rot Trans

Jugando con las transformaciones

Jugando con las transformaciones

Jugando con las transformaciones

Jugando con las transformaciones

Transformaciones básicas en 2D Translación: x’ = x + tx y’ = y + ty Escalado: x’ = x * sx y’ = y * sy Cizalla (Shear): x’ = x + hx*y y’ = y + hy*x Rotación: x’ = x*cosQ - y*sinQ y’ = x*sinQ + y*cosQ Las transformaciones se pueden combinar (utilizando álgebra básica)

Representación matricial Una transformación se puede representar por una matriz: Multiplicando la matriz por una vector columna  estamos aplicando una transformada a un vértice

Representación matricial Las transformaciones se concadenan al multiplicar matrices: Las matrices son realmente útiles para representar una sucesión de transformaciones!

Matrices de 2x2 ¿Qué podemos representar con matrices de 2x2? Identidad en 2D Escalado en 2D sobre el origen (0,0)

Matrices de 2x2 ¿Qué podemos representar con matrices de 2x2? Rotaciones en 2D Cizalla en 2D

Matrices de 2x2 ¿Qué podemos representar con matrices de 2x2? Operación espejo sobre el eje Y Operación espejo sobre el origen

Transformaciones lineales Las transformaciones lineales son una combinación de … Escalado, Rotación, Cizalla, y Espejo Recuerda que las propiedades de una transformada lineal garantizan que: El origen se convierte en origen Las líneas se transforman en líneas Las líneas paralelas se conservan Las proporciones se conservan Es una operación cerrada

¿Y qué hacemos con la translación? ¿Se puede representar una translación con una matriz 2x2? NO! Las matrices 2x2 únicamente se pueden utilizar para representar transformaciones lineales

Coordenadas homogéneas Representan coordenadas en 2D pero utilizan un vector de 3D Fueron introducidas por el matemático alemán August Ferdinand Möbius en el año 1837. Aunque no son nada intuitivas son de gran utilidad para los sistemas gráficos!!

Coordenadas homogéneas ¿Y de qué nos sirve para la translación? De mucho!!

Translación Ejemplo tx = 2 ty = 1

Coordenadas homogéneas Añade una tercera coordenada a cada punto 2D (x, y, w) representa un punto en la posición (x/w, y/w) (x, y, 0) representa un punto en el infinito (0, 0, 0) no está permitido 1 2 (2,1,1) O (4,2,2) O (6,3,3) x y

Transformaciones básicas en 2D Las transformaciones básicas en 2D se realizan utilizando matrices de 3x3 Translación Escalado Rotación Shear

Transformaciones en 3D Utilizamos la misma idea que en 2D Coordenadas homogéneas: (x,y,z,w) Las matrices de transformación es de 4x4

Transformaciones en 3D Identidad Escalado Espejo Translación

Transformaciones en 3D Giro sobre el eje Z: Giro sobre el eje Y: Giro sobre el eje X: