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: