Introducción a los gráficos 3D OpenGL. Introducción a OpenGL Breve historia: – En 1973 se...
-
Upload
irene-serrano-hernandez -
Category
Documents
-
view
228 -
download
5
Transcript of Introducción a los gráficos 3D OpenGL. Introducción a OpenGL Breve historia: – En 1973 se...
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 CPUPodemos programar la GPU unos programas especiales llamados: “shaders”.Nuestra aplicación debe suministrar los datos para que trabaje la GPULa GPU realiza todo el trabajo “pesado”:
OpenGL ≡ Abstract Drawing Machine
Per-vertex ops
Rasterizer
Per-fragment ops
Texturing
Vertices
Shaded
fragments
Fragments
Transformed
vertices
Frame buffer ops
Pixels
OpenGL
commands
pixels in the
framebuffer
triangles, lines, points
images
OpenGL 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
Introducción a OpenGLPrimitivas
Puntos (Points) Líneas (Line Segments) Triángulos (Triangles)
Atributos Transformaciones Vista
ModelingControl (GLUT)Entrada (Input) (GLUT)Consulta (Query)
Introducción a OpenGL
glUniform3f(x,y,z)
Forma parte de GL lib.
function name
x,y,z son floats
glUniform3fv(p)
p es un puntero a un array
dimensiones
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
• 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
v1v3
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.
100
010
001
Uso de matrices. Ejemplo con escalado
Una operación de escalado:
O en la forma matricial:
by
ax
y
x
'
'
y
x
b
a
y
x
0
0
'
'
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-Dx = r cos ()y = r sin ()x’ = r cos ( + )y’ = r sin ( + )
Es igual a …x’ = r cos() cos() – r sin() sin()y’ = r sin() sin() + r cos() cos()
Que resulta …x’ = x cos() - y sin()y’ = x sin() + y cos()
(x, y)
(x’, y’)
Rotación 2-DEsto lo podemos expresar en una matriz:
Incluso si sin() y cos() no son funciones lineales de ,x’ es una combinación lineal de x e yy’ es una combinación lineal de x e y
Una matriz es un operador lineal.Más adelante veremos la importancia de este hecho.
y
x
y
x
cossin
sincos
'
'
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
001
010
100
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.
ihg
fed
cba
100
010
001
001
010
100
=
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)
ihg
fed
cba
100
010
001
001
010
100
=
'
'
'
001
010
100
k
j
i
k
j
i
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);glMatrixMode (MODELVIEW);
glLoadIdentity();glLoadIdentity();
glMultMatrix(N);glMultMatrix(N);
glMultMatrix(M);glMultMatrix(M);
glMultMatrix(L);glMultMatrix(L);
glBegin(POINTS);glBegin(POINTS);
glVertex3f(v);glVertex3f(v);
glEnd();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
• 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 la Pila
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 ( );
Global – Bottom Up
Start RotTrans
RRT
RTv
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 ( );
Local – Top Down
Start Rot Trans
RRT
RTv
Manipulando las transformaciones
Jugando con las transformaciones
Jugando con las transformaciones
Jugando con las transformaciones
Jugando con las transformaciones
Transformaciones básicas en 2DTranslación:
x’ = x + tx
y’ = y + ty
Escalado:x’ = x * sx y’ = y * sy
Cizalla (Shear):x’ = x + hx*yy’ = y + hy*x
Rotación:x’ = x*cos - y*sin y’ = x*sin + y*cos
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
yx
dcba
yx''
dcba
dycxy
byaxx
'
'
Representación matricial
• Las transformaciones se concadenan al multiplicar matrices:
yx
lkji
hgfe
dcba
yx''
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
yyxx
''
yx
yx
1001
''
Escalado en 2D sobre el origen (0,0)
ysy
xsx
y
x
*'
*'
y
x
s
s
y
x
y
x
0
0
'
'
Matrices de 2x2
• ¿Qué podemos representar con matrices de 2x2?
Rotaciones en 2D
yxyyxx
*cos*sin'*sin*cos'
y
x
y
x
cossin
sincos
'
'
Cizalla en 2D
yxshy
yshxx
y
x
*'
*'
y
x
sh
sh
y
x
y
x
1
1
'
'
Matrices de 2x2
• ¿Qué podemos representar con matrices de 2x2?
Operación espejo sobre el eje Y
yyxx
''
yx
yx
1001
''
Operación espejo sobre el origen
yyxx
''
yx
yx
1001
''
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
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
'
'
¿Y qué hacemos con la translación?
¿Se puede representar una translación con una matriz 2x2?
y
x
tyy
txx
'
'
Las matrices 2x2 únicamente se pueden utilizar para representar transformaciones lineales
NO!
Coordenadas homogéneas
• 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.
1
coords shomogeneou y
x
y
x
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!!
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
'
'
Translación
• Ejemplo
11100
10
01
1
'
'
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2ty = 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
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
1100
0cossin
0sincos
1
'
'
y
x
y
x
1100
10
01
1
'
'
y
x
t
t
y
x
y
x
1100
01
01
1
'
'
y
x
sh
sh
y
x
y
x
Translación
Rotación Shear
1100
00
00
1
'
'
y
x
s
s
y
x
y
x
Escalado
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
wzyx
ponmlkjihgfedcba
wzyx
''''
Transformaciones en 3D
wzyx
wzyx
1000010000100001
'''
w
z
y
x
t
t
t
w
z
y
x
z
y
x
1000
100
010
001
'
'
'
w
z
y
x
s
s
s
w
z
y
x
z
y
x
1000
000
000
000
'
'
'
wzyx
wzyx
1000010000100001
'''
Identidad Escalado
Translación Espejo
Transformaciones en 3D
wzyx
wzyx
1000010000cossin00sincos
'''
Giro sobre el eje Z:
w
z
y
x
w
z
y
x
1000
0cos0sin
0010
0sin0cos
'
'
'
Giro sobre el eje Y:
wzyx
wzyx
10000cossin00sincos00001
'''
Giro sobre el eje X: