Sistemas de referencia Introducción a OpenGL

Transcripción

1 Sistemas de referencia Introducción a OpenGL Introducción a la Computación Gráfica Andrea Rueda Pontificia Universidad Javeriana Departamento de Ingeniería de Sistemas

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? Cuál es la ecuación de una línea?

4 Recordando... conceptos de álgebra lineal y geometría

5 Coordenadas Plano cartesiano Cada punto se define con una dupla de números reales coordenada. en.wikipedia.org/wiki/cartesian_coordinate_system

6 Coordenadas Coordenadas cartesianas: desplazamiento en los ejes de coordenadas (x, y). Coordenadas polares: distancia radial al centro de coordenadas y desplazamiento angular sobre el eje horizontal. en.wikipedia.org/wiki/polar_coordinate_system

7 Coordenadas Polares a cartesianas: x =r cos θ y=r sin θ Cartesianas a polares: r = x + y 2 θ=tan 1 2 y x () en.wikipedia.org/wiki/polar_coordinate_system

8 Coordenadas Coordenadas 3D: en.wikipedia.org/wiki/cartesian_coordinate_system

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: x =ρ cos ϕ y=ρ sin ϕ z =z Esféricas a cartesianas en.wikipedia.org/wiki/cylindrical_coordinate_system

11 Coordenadas Cilíndricas a cartesianas Esféricas a cartesianas: x =r cos θ sin ϕ y=r sin θ sin ϕ z =r cos ϕ en.wikipedia.org/wiki/spherical_coordinate_system

12 Vectores Vector: diferencia entre dos puntos. V =P 2 P 1 =( x 2 x 1, y 2 y 1) =(V x,v y ) en.wikipedia.org/wiki/file:vector_by_zureks.svg Segmento de línea dirigido, con magnitud (módulo) y dirección. 2 x V = V + V 2 y α=tan 1 Vy Vx ( )

13 Vectores Vector cartesiano tridimensional: V =(V x, V y, V z ) 2 x 2 y V = V + V +V Vx cos α= V 2 z cos β= Vy V Vz cos γ= V emweb.unl.edu/math/mathweb/vectors/vectors.html

14 Vectores Suma de vectores: V 1 +V 2=(V 1x + V 2x, V 1y +V 2y, V 1z + V 2z ) Multiplicación por un escalar: s V =( s V x, s V y, s V z ) en.wikipedia.org/wiki/euclidean_vector

15 Vectores a b Resta de vectores: V 1 V 2=(V 1 x V 2 x, V 1 y V 2 y, V 1 z V 2 z) Normalización vector unitario: V1 V 2 V3 V V^ = = + + V V V V en.wikipedia.org/wiki/euclidean_vector

16 Vectores Producto escalar (punto, interno): V 1 V 2= V 1 V 2 cos θ, 0 θ π en.wikipedia.org/wiki/euclidean_vector

17 Vectores Producto vectorial (cruz): V 1 V 2 =u V 1 V 2 sin θ, 0 θ π en.wikipedia.org/wiki/euclidean_vector

18 Vectores base Vectores de eje: u k, k =1, 2,..., n Vector de posición: r = x u x + y u y + z u z Vectores base unitarios: u k uk= u k Vectores base mutuamente perpendiculares base ortogonal. Vectores base unitarios y perpendiculares base ortonormal.

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. [] vx V = vy vz

20 Matrices Suma de matrices: A y B, tamaño n x m (A+B)i,j = Ai,j + Bi,j, 1 i n;1 j m Multiplicación por un escalar: A, tamaño n x m (ca)i,j = c Ai,j, 1 i n;1 j 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 m (A B)i,j = A k =1 Bk,j, 1 i n; 1 j p; 1 k m i,k

22 Introducción a OpenGL

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). Java 2D y 3D.

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 OpenGL Architecture Review Board.

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 OpenGL, utilizaremos la pipeline fija.

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 escena 3D en una imagen 2D. Rasterización (rasterization): proceso de renderización a partir de triángulos.

31 Pipeline de visualización Proceso de rasterización: Secuencia de triángulos Operaciones Matriz de pixeles Triángulos: definidos por tres vértices, coordenadas (X,Y,Z).

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. Triángulos fuera del volumen son descartados.

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 4.Conversión a fragmentos:

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. Procedimiento principal.

41 Pipeline fija de OpenGL (C++) Descargue el código base: sophia.javeriana.edu.co/~rueda and rea/intrcogr/docs/introopengl.cpp

42 Pipeline fija de OpenGL (C++) Librerías: Windows: #include <GL/glut.h> Linux: #include <GL/freeglut.h> #include <GL/gl.h> Mac: #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); glutinitwindowposition(100, 100);

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 un color diferente.

52 Sistemas de referencia

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 Sistema de referencia de la pantalla: 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 Sistema de referencia de la pantalla: Gestión de la ventana de visualización:

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 originales (relación de aspecto).

58 Sistemas de referencia Objetos (coordenadas del mundo) Área de los objetos (mundo real) Área de visualización (pantalla)

59 Sistemas de referencia

60 Sistemas de referencia Área de los objetos (ventana del mundo real): y ymmax ymmin xmmin xmmax x

61 Sistemas de referencia Área de los objetos (ventana del mundo real): y ymmax en OpenGL: gluortho2d(xmmin, xmmax, ymmin, ymmax); ymmin xmmin xmmax x

62 Sistemas de referencia Área de visualización (en pantalla): yvmax yvmin xvmin xvmax

63 Sistemas de referencia Área de visualización (en pantalla): yvmax en OpenGL: glviewport(xvmin, yvmin, xvmax xvmin, yvmax yvmin); yvmin xvmin xvmax

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 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? Ejercicio: en el archivo introopengl.cpp, analizar el comportamiento al usar o no glviewport

66 Sistemas de referencia Diferencias en las proporciones, debido a los tamaños independientes: y ymmax yvmax ymmin yvmin xmmin xmmax x xvmin xvmax

67 Sistemas de referencia Diferencias en las proporciones, debido a los tamaños independientes: y ymmax yvmax ymmin yvmin xmmin xmmax x xvmin xvmax

68 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), ACTUALIZAR el tamaño del área de visualización para mantener la relación de aspecto.

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) nueva coordenada: (2, -1) (5,7)

70 Primitivas 2D

71 Primitivas 2D OpenGL Elemento base de especificación: glvertex* (); Sufijos (*): - Dimensionalidad: 2, 3, 4 - 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: glbegin (GL_POINTS); glvertex* (<coordenadas>); glend (); 2D entero: glvertex2i (50, 100);

74 Primitivas 2D OpenGL Primitiva punto: glbegin (GL_POINTS); glvertex* (<coordenadas>); glend (); 2D entero vector: int point[] = {50, 100};... glvertex2iv (point1);

75 Primitivas 2D OpenGL Primitiva punto: glbegin (GL_POINTS); glvertex* (<coordenadas>); glend (); 3D real: glvertex3f ( 78.5, 14.6, );

76 Primitivas 2D OpenGL Primitiva punto: glbegin (GL_POINTS); glbegin (GL_POINTS); glvertex* glvertex2i(<coordenadas>); (50, 100); glend (); (75, 150); glvertex2i 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: glcolor* (); Sufijos (*): - Dimensionalidad: 3 (RGB), 4 (RGBA) - Tipo de dato: (i) entero, (s) entero corto, (f) real, (d) real de doble precisión. - Especificación vectorial (v).

79 Primitivas 2D OpenGL Propiedades de color: glcolor* (<R>, <G>, <B>, <A>); Valores: 0.0 (intensidad cero) (intensidad completa).

80 Primitivas 2D OpenGL Elemento base de especificación: glvertex* (); Propiedades de color: glcolor3f (1.0, 0.0, 0.0); glbegin (GL_POINTS); glvertex2i (150, 200); glend ();

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

82 Primitivas 2D OpenGL Propiedades de color:

83 Primitivas 2D OpenGL Ejercicio: Modificar el programa introopengl.cpp para dibujar puntos de diferentes colores. son visibles ahora los puntos?

84 Primitivas 2D OpenGL Elemento base de especificación: glvertex* (); Propiedades de grosor: glpointsize (1.0); glbegin (GL_POINTS); glvertex2i (150, 200); glend ();

85 Primitivas 2D OpenGL Propiedades de grosor

86 Primitivas 2D OpenGL Ejercicio: Modificar el programa introopengl.cpp para dibujar puntos de diferentes tamaños. son visibles (ahora sí) los puntos?

87 Próxima clase Taller 1: Primitivas 2D

88 Referencias D. Hearn, M.P. Baker. Gráficos por computadora con OpenGL, 3a edición. Pearson Prentice Hall, J.D. Foley, A. van Dam, S.K. Feiner, J.F. Hughes. Computer graphics: principles and practice, 2nd edition in C. Addison-Wesley, en.wikipedia.org/wiki/opengl