Sistemas de referencia Introducción a OpenGL

(1)

Sistemas de referencia

Introducción a OpenGL

Introducción a la Computación Gráfica

Andrea Rueda

Pontificia Universidad Javeriana

(2)

● The implementation principle:

If you understand a mathematical process well enough, you can write a program that executes it.

J.D. Foley, A. van Dam, S.K. Feiner, J.F. Hughes. Computer graphics: principles and practice, 3rd_{edition. Addison-Wesley, 2013.}

(3)

Quiz diagnóstico

● ¿Qué es una coordenada y cómo se expresa?

● ¿Qué es un sistema de referencia y qué relación

tiene con las coordenadas?

● Siendo A = [1 2 3]T y B = [0 1 1], calcular AB y BA

● ¿La definición ||v|| ||w|| |sin θ|, a qué concepto

corresponde y qué representa?

(4)

Recordando...

conceptos de álgebra lineal

y geometría

(5)

Coordenadas

● Plano cartesiano

– Cada punto se define con una dupla de números

(6)

Coordenadas

● Coordenadas cartesianas:

desplazamiento en los ejes de coordenadas (x, y).

● Coordenadas polares:

distancia radial al centro de coordenadas y

(7)

Coordenadas

● Polares a cartesianas: ● Cartesianas a polares:

x

=

r

cos

θ

y

=

r

sin

θ

r

=

√

x

2

+

y

2

θ=

tan

−1

(

y

x

)

(8)

Coordenadas

(9)

Coordenadas

● Coordenadas cartesianas:

desplazamiento en los ejes de coordenadas (x, y, z).

● Coordenadas cilíndricas:

distancia radial al centro de coordenadas, desplazamiento angular en el plano x-y, desplazamiento en el eje z.

● Coordenadas esféricas (polares en 3D):

distancia radial al centro de coordenadas, desplazamiento angular en el plano x-y, desplazamiento angular desde el eje z .

(10)

Coordenadas

● Cilíndricas a cartesianas: ● Esféricas a cartesianas

x

=ρ

cos

ϕ

y

=ρ

sin

ϕ

z

=

z

(11)

Coordenadas

● Cilíndricas a cartesianas ● Esféricas a cartesianas:

x

=

r

cos

θ

sin

ϕ

y

=

r

sin

θ

sin

ϕ

z

=

r

cos

ϕ

(12)

Vectores

● Vector: diferencia entre dos puntos.

● Segmento de línea dirigido, con magnitud

(módulo) y dirección.

V

=

P

₂

−

P

₁

=(

x

₂

−

x

_1,

y

₂

−

y

₁

)

=(

V

_x

,V

_y

)

√

2 2 −1

(

V

y

)

en.wikipedia.org/wiki/File:Vector_by_Zureks.svg

(13)

Vectores

● Vector cartesiano tridimensional:

V

=(

V

_x

, V

_y

, V

_z

)

∣

V

∣

=

√

V

2_x

+

V

2_y

+

V

2_z

cos

α=

V

x

∣

_V

∣

cos

β=

V

_y

∣

_V

∣

cos

γ=

V

z

∣

V

∣

(14)

Vectores

● Suma de vectores:

● Multiplicación por un escalar:

V

₁

+

V

₂

=(

V

_1x

+

V

_2x

, V

_1y

+

V

_2y

, V

_1z

+

V

_2z

)

(15)

Vectores

● Resta de vectores:

● Normalización → vector unitario:

V

₁

−

V

₂

=(

V

₁_x

−

V

₂_x

, V

₁ _y

−

V

₂ _y

, V

₁ _z

−

V

₂ _z

)

^

V

=

V

|

V

|

=

V

₁

|

V

|

+

V

₂

|

V

|

+

V

₃

|

V

|

a−b

(16)

Vectores

● Producto escalar (punto, interno):

(17)

Vectores

● Producto vectorial (cruz):

(18)

Vectores base

● Vectores de eje:

● Vector de posición:

● Vectores base unitarios:

● Vectores base mutuamente perpendiculares →

base ortogonal.

⃗

u

_k

, k

=

1, 2,...

, n

⃗

r

=

x

u

⃗

_x

+

y

u

⃗

_y

+

z

u

⃗

_z

u

_k

=

u

⃗

k

∣

u

⃗

_k

∣

(19)

Matrices

● Disposición rectangular de magnitudes,

organizadas en filas y columnas.

● Colección de vectores fila, o colección de

vectores columna.

● Como convención, un vector suele

representarse como una matriz columna.

V

=

[

v

_x

v

_y

(20)

Matrices

● Suma de matrices: A y B, tamaño n x m

(A+B)_i,j = A_i,j + B_i,j, 1 ≤ i ≤ n ; 1 ≤ j ≤ m

● Multiplicación por un escalar: A, tamaño n x m

(21)

Matrices

● Transpuesta de una matriz: A, tamaño n x m

(AT₎

i,j = Aj,i, 1 ≤ i ≤ n ; 1 ≤ j ≤ m

● Multiplicación de matrices: A, tamaño n x m, B,

tamaño m x p

(A B)_i,j =

∑

A_i,kB_k,j, 1 ≤ i ≤ n; 1 ≤ j ≤ p; 1 ≤ k ≤ m

k =1 m

(22)

(23)

Software gráfico

● Sistemas de propósito específico:

– Photoshop (Adobe). – AutoCAD (Autodesk). – SolidEdge (Siemens).

● Paquetes de programación general:

– GL (Graphics Library), OpenGL (Silicon Graphics). – VRML (Virtual-Reality Modelling Language).

(24)

GL

Graphics Library (Silicon Graphics):

● Uno de los primeros paquetes gráficos, muy

popular debido a su uso en las estaciones gráficas de Silicon Graphics.

● Su creciente popularidad y extensión a otros

sistemas de hardware, generó el desarrollo y liberación de OpenGL.

(25)

OpenGL

● Interfaz de programación de aplicaciones (API)

que provee un amplio rango de funciones de renderizado, mapeo de texturas, efectos

especiales y visualización de elementos 2D y 3D.

● Desarrollado y actualizado por la organización

(26)

OpenGL

● Independiente del sistema operativo:

Funcional en Windows, Linux, Mac, …

● Independiente del lenguaje de programación:

API implementada mayoritariamente en hardware.

Correspondencia de lenguajes en C, C++, Java, ...

(27)

OpenGL

● Librerías asociadas:

– GLU (OpenGL Utility Library):

subrutinas de visualización y proyección adicionales, incluída en todas las implementaciones de OpenGL.

– GLUT (OpenGL Utility Toolkit):

añade la funcionalidad para el manejo de ventanas de visualización (independientes del dispositivo).

(28)

OpenGL

● Dos aproximaciones:

– Pipeline fija (OpenGL v 1.x):

transformaciones y caracterizaciones de los pixeles se encuentran definidos en el hardware (GPU) y no se pueden modificar.

– Pipeline programable (OpenGL v 2.0 en adelante):

las etapas para visualización se pueden modificar por el usuario a través de “shaders”, permitiendo mayor flexibilidad.

(29)

OpenGL

● Las nuevas versiones siempre son para

mejorar, sin embargo...

– La pipeline programable hace que las tareas

difíciles se puedan programar fácilmente, pero algunas tareas simples ahora resultan más

complejas de programar.

– La pipeline programable es más robusta, pero es

menos intuitiva.

● Como no estamos en un curso de sólo

(30)

Pipeline

de visualización

● Elemento básico de visualización: pixel (picture

element).

● Imagen: arreglo bidimensional (matriz) de

pixeles.

● Visualización 3D: aplicar efectos a los pixeles

para crear la sensación de tridimensionalidad.

● Renderización (rendering): convertir una

(31)

Pipeline

de visualización

● Proceso de rasterización:

● Triángulos: definidos por tres vértices,

Secuencia de triángulos Operaciones

(32)

Pipeline

de visualización

● Proceso de rasterización (simplificación):

1.Transformación al espacio de visualización (clip space).

2.Normalización de coordenadas.

3.Transformación a la ventana de visualización. 4.Conversión a fragmentos.

5.Procesamiento de fragmentos. 6.Escritura de fragmentos.

(33)

Pipeline

de visualización

1.Transformación al espacio de visualización:

● Clip space: volumen de visualización.

● Clip coordinates: coordenadas de visualización.

Coordenadas 3D espaciales: 3 componentes.

Coordenadas 3D de visualización: 4 componentes.

(X,Y,Z,W) → W indica pertenencia al volumen de visualización

● Triángulos con vértices fuera del volumen son

divididos (clipping) en triángulos más pequeños.

(34)

Pipeline

de visualización

2.Normalización de coordenadas:

Se dividen las coordenadas X,Y,Z por W, para que el rango efectivo esté en [-1,1].

(35)

Pipeline

de visualización

3.Transformación a la ventana de visualización: X de izquierda a derecha.

Y de abajo a arriba.

Z de adelante hacia atrás.

ahora con respecto a la ventana en la que se está ejecutando OpenGL.

(36)

Pipeline

de visualización

4.Conversión a fragmentos:

Cada triángulo se analiza en términos de los pixeles que cubre.

De esta forma, cada triángulo es una secuencia de fragmentos que lo cubren.

Se utiliza solamente la información de las coordenadas X,Y.

(37)

Pipeline

de visualización

(38)

Pipeline

de visualización

5.Procesamiento de fragmentos:

Por cada triángulo, los fragmentos se procesan para transformarlos en valores de color y

profundidad.

Para evitar sobrelapamientos en la información entre triángulos, todos los fragmentos de un

triángulo se procesan primero antes de pasar al siguiente triángulo.

(39)

Pipeline

de visualización

6.Escritura de fragmentos:

Escribir cada fragmento a la imagen final

(búfer), teniendo en cuenta la información de color y profundidad.

(40)

Pipeline

fija de OpenGL (C++)

● Requiere la definición de:

– Procedimiento de inicialización:

iniciación de la ventana de visualización, parámetros.

– Procedimiento de visualización:

generación del contenido de la ventana de visualización.

– Procedimiento de actualización de ventana:

actualización del contenido cuando la ventana cambia de tamaño.

(41)

Pipeline

fija de OpenGL (C++)

● Descargue el código base:

sophia.javeriana.edu.co/~ruedaand rea/intrCoGr/docs/introOpenGl.cpp

(42)

Pipeline

fija de OpenGL (C++)

● Librerías: – Windows: – Linux: – Mac: #include <GL/glut.h> #include <GL/freeglut.h> #include <GL/gl.h> #include <GLUT/GLUT.h> #include <OpenGL/OpenGL.h>

(43)

Pipeline

fija de OpenGL (C++)

● Inicialización: void myInit (void) { glClearColor(1.0,1.0,1.0,1.0); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0, 640, 0, 480);

(44)

Pipeline

fija de OpenGL (C++)

● Inicialización: void myInit (void) { glClearColor(1.0,1.0,1.0,1.0); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0, 640, 0, 480, 1.0, 1.0);

(45)

Pipeline

fija de OpenGL (C++)

● Visualización: void myDisplay (void) { glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 0.0, 0.0);

(46)

Pipeline

fija de OpenGL (C++)

● Visualización: glBegin(GL_LINES); glVertex2i(600,15); glVertex2i(10,345); glEnd(); glFlush();

(47)

Pipeline

fija de OpenGL (C++)

● Actualización: void myResize (int w, int h) { glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0, w, 0, h);

(48)

Pipeline

fija de OpenGL (C++)

● Procedimiento principal: int main (int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(640, 480);

(49)

Pipeline

fija de OpenGL (C++)

● Procedimiento principal: glutCreateWindow(“Graphics Window”); glutDisplayFunc(myDisplay); glutReshapeFunc(myResize); myInit(); glutMainLoop(); return 0;

(50)

Ahora... a probar!

● Compile y ejecute: Linux: g++ o pruebaApp introOpenGl.cpp lGL lGLU lglut ./pruebaApp

(51)

Ahora... a probar!

● Modifique el programa para:

– Añadir una línea de color azul que cruce la línea ya

pintada.

– Dibujar un triángulo usando 3 líneas, cada una de

(52)

(53)

Sistemas de referencia

● Sistema de referencia de la pantalla:

– Origen (0,0): punto superior-izquierdo de la pantalla.

Coordenada x se incrementa hacia la derecha. Coordenada y se incrementa hacia abajo.

(54)

Sistemas de referencia

– Gestión de la ventana de visualización:

- Creación (Título): glutCreateWindow(“Graphics Window”); - Posición en la pantalla: glutInitWindowPosition(100,100); - Tamaño: glutInitWindowSize(640,480);

(55)

Sistemas de referencia

– Gestión de la ventana de visualización:

100

300 400

(56)

Sistemas de referencia

● Sistema de coordenadas cartesianas:

– Origen (0,0): punto inferior-izquierdo de la ventana.

Coordenada x se incrementa hacia la derecha. Coordenada y se incrementa hacia arriba.

(57)

Sistemas de referencia

● Sistema de coordenadas de la pantalla:

Definido de forma relativa a la ventana.

● Desventajas:

– Tamaño de la ventana puede variar.

– Especificación de los objetos en sus tamaños

(58)

Sistemas de referencia

Objetos

(coordenadas del mundo) Área de los objetos

(mundo real)

Área de visualización (pantalla)

(59)

(60)

Sistemas de referencia

● Área de los objetos (ventana del mundo real):

y

ym

(61)

Sistemas de referencia

● Área de los objetos (ventana del mundo real):

y

ymmin

ymmax

en OpenGL:

(62)

Sistemas de referencia

● Área de visualización (en pantalla):

yv

(63)

Sistemas de referencia

● Área de visualización (en pantalla):

yvmin

yvmax

en OpenGL:

glViewport(xvmin, yvmin, xvmaxxvmin, yvmaxyvmin);

(64)

Sistemas de referencia

● En el procedimiento de inicialización, el área de

visualización se fija al mismo tamaño de la ventana.

● Al cambiar el tamaño de la ventana

(procedimiento de actualización), ¿qué pasa con el tamaño del área de visualización?

(65)

Sistemas de referencia

(procedimiento de actualización), ¿qué pasa con el tamaño del área de visualización?

● Ejercicio:

en el archivo introOpenGL.cpp, analizar el

(66)

Sistemas de referencia

● Diferencias en las proporciones, debido a los

tamaños independientes: x y xmmax xmmin ymmin ymmax xvmax xvmin yvmin yvmax

(67)

Sistemas de referencia

● Diferencias en las proporciones, debido a los

tamaños independientes: x y xmmax xmmin ymmin ymmax xvmax xvmin yvmin yvmax

(68)

Sistemas de referencia

(procedimiento de actualización), ACTUALIZAR el tamaño del área de visualización para

(69)

Sistemas de referencia

● Coordenadas absolutas:

Posiciones reales dentro del sistema de coordenadas.

● Coordenadas relativas:

Desplazamiento a partir de la última posición a la que se ha hecho referencia (posición actual). posición actual: (3,8)

(70)

(71)

Primitivas 2D OpenGL

Elemento base de especificación:

● Sufijos (*):

- Dimensionalidad: ₂, ₃, ₄

- Tipo de dato: (_i) entero, (_s) entero corto, (_f) real, (_d) real de doble precisión.

- Especificación vectorial (_v).

(72)

Primitivas 2D OpenGL

● Primitiva punto:

glBegin (GL_POINTS);

glVertex* (<coordenadas>); glEnd ();

(73)

Primitivas 2D OpenGL

● Primitiva punto: ● 2D entero: glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glVertex2i (50, 100); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd ();

(74)

Primitivas 2D OpenGL

● Primitiva punto: ● 2D entero vector: glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); int point[] = {50, 100}; ... glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd ();

(75)

Primitivas 2D OpenGL

● Primitiva punto: ● 3D real: glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glVertex3f (78.5, 14.6, 188.33); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd ();

(76)

Primitivas 2D OpenGL

● Primitiva punto: glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); glBegin (GL_POINTS); glVertex2i (50, 100); glVertex2i (75, 150); glVertex2i (100, 200); glEnd ();

(77)

Primitivas 2D OpenGL

● Ejercicio:

Modificar el programa_{introOpenGl.cpp}

para dibujar puntos en varias posiciones. ¿son visibles los puntos?

(78)

Primitivas 2D OpenGL

● Propiedades de color:

● Sufijos (*):

- Dimensionalidad: _3 (RGB), _4 (RGBA)

- Tipo de dato: (_i) entero, (_s) entero corto, (_f) real, (_d) real de doble precisión.

(79)

Primitivas 2D OpenGL

● Valores:

0.0 (intensidad cero) - 1.0 (intensidad completa).

(80)

Primitivas 2D OpenGL

glVertex* ();

glColor3f (1.0, 0.0, 0.0); glBegin (GL_POINTS);

(81)

Primitivas 2D OpenGL

● Propiedades de color: glBegin (GL_POINTS); glColor3f (1.0, 0.0, 0.0); glVertex2i (50, 100); glColor3f (0.0, 1.0, 0.0); glVertex2i (75, 150); glColor3f (0.0, 0.0, 1.0); glVertex2i (100, 200);

(82)

Primitivas 2D OpenGL

● Propiedades de color: 100 125 150 175 200

(83)

Primitivas 2D OpenGL

● Ejercicio:

para dibujar puntos de diferentes colores. ¿son visibles ahora los puntos?

(84)

Primitivas 2D OpenGL

● Propiedades de grosor:

glVertex* ();

glPointSize (1.0);

glBegin (GL_POINTS); glVertex2i (150, 200);

(85)

Primitivas 2D OpenGL

● Propiedades de grosor 100 125 150 175 200

(86)

Primitivas 2D OpenGL

● Ejercicio:

para dibujar puntos de diferentes tamaños. ¿son visibles (ahora sí) los puntos?

(87)

Próxima clase

● Taller 1:

(88)

Referencias

● D. Hearn, M.P. Baker. Gráficos por computadora con

OpenGL, 3a edición. Pearson Prentice Hall, 2006.

● J.D. Foley, A. van Dam, S.K. Feiner, J.F. Hughes.

Computer graphics: principles and practice, 2nd_{edition in}

C. Addison-Wesley, 1996. ● en.wikipedia.org/wiki/OpenGL ● www.opengl.org/about/ ● www.arcsynthesis.org/gltut/ ● www.cse.ohio-state.edu/~whmin/courses/cse581-2012-winter/2D.pdf