Introducción a los gráficos 3D

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

1 Introducción a los gráficos 3D
OpenGL

2 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

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

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

5 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”:

6 ≡ 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

7 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

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

9 Introducción a OpenGL

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

11 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

12 Un ejemplo tonto:

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

14 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

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

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

17 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

18 Primitivas de OpenGL

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

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

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

22 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?

23 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

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

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

26 Jugando con OpenGL

27 Jugando con OpenGL

28 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

29 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).

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

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

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

33  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

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

35 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

36 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. =

37 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) = 

38 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

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

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

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

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

43 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

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

45 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

46 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

47 Jugando con las transformaciones

48 Jugando con las transformaciones

49 Jugando con las transformaciones

50 Jugando con las transformaciones

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

52 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

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

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

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

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

57 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

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

59 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 Aunque no son nada intuitivas son de gran utilidad para los sistemas gráficos!!

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

61 Translación Ejemplo tx = 2 ty = 1

62 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

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

64 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

65 Transformaciones en 3D Identidad Escalado Espejo Translación

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