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 ● 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. 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? Recordando... conceptos de álgebra lineal y geometría Coordenadas ● Plano cartesiano – Cada punto se define con una dupla de números reales → coordenada. en.wikipedia.org/wiki/Cartesian_coordinate_system 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 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 Coordenadas ● Coordenadas 3D: en.wikipedia.org/wiki/Cartesian_coordinate_system 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 . Coordenadas ● Cilíndricas a cartesianas: x =ρ cos ϕ y=ρ sin ϕ z =z ● Esféricas a cartesianas en.wikipedia.org/wiki/Cylindrical_coordinate_system 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 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 ( ) 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 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 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 Vectores ● Producto escalar (punto, interno): V 1⋅V 2=∣V 1∣∣V 2∣cos θ , 0≤θ≤π en.wikipedia.org/wiki/Euclidean_vector Vectores ● Producto vectorial (cruz): V 1×V 2 =u∣V 1∣∣V 2∣sin θ , 0≤θ≤π en.wikipedia.org/wiki/Euclidean_vector 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. 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 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 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 Introducción a OpenGL 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. 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. 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. 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, ... 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). 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. 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. 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. 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). 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. 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. 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]. 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. 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. Pipeline de visualización 4.Conversión a fragmentos: 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. 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. 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. Pipeline fija de OpenGL (C++) ● Descargue el código base: sophia.javeriana.edu.co/~rueda­and rea/intrCoGr/docs/introOpenGl.cpp 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> 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); } 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); } Pipeline fija de OpenGL (C++) ● Visualización: void myDisplay (void) { glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 0.0, 0.0); Pipeline fija de OpenGL (C++) ● Visualización: glBegin(GL_LINES); glVertex2i(600,15); glVertex2i(10,345); glEnd(); glFlush(); } 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); } 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); Pipeline fija de OpenGL (C++) ● Procedimiento principal: glutCreateWindow(“Graphics Window”); glutDisplayFunc(myDisplay); glutReshapeFunc(myResize); myInit(); glutMainLoop(); return 0; } Ahora... a probar! ● Compile y ejecute: Linux: g++ ­o pruebaApp introOpenGl.cpp ­lGL ­lGLU ­lglut ./pruebaApp 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. Sistemas de referencia 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. http://inventwithpython.com/chapter12.html 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); Sistemas de referencia ● Sistema de referencia de la pantalla: – Gestión de la ventana de visualización: 100 100 300 400 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. 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). Sistemas de referencia Objetos (coordenadas del mundo) Área de los objetos (mundo real) Área de visualización (pantalla) Sistemas de referencia Sistemas de referencia ● Área de los objetos (ventana del mundo real): y ymmax ymmin xmmin xmmax x Sistemas de referencia ● Área de los objetos (ventana del mundo real): y ymmax en OpenGL: gluOrtho2D(xmmin, xmmax, ymmin, ymmax); ymmin xmmin xmmax x Sistemas de referencia ● Área de visualización (en pantalla): yvmax yvmin xvmin xvmax Sistemas de referencia ● Área de visualización (en pantalla): yvmax en OpenGL: glViewport(xvmin, yvmin, xvmax­xvmin, yvmax­yvmin); yvmin xvmin xvmax 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? 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 Sistemas de referencia Diferencias en las proporciones, debido a los tamaños independientes: ● y ymmax yvmax ymmin yvmin xmmin xmmax x xvmin xvmax Sistemas de referencia Diferencias en las proporciones, debido a los tamaños independientes: ● y ymmax yvmax ymmin yvmin xmmin xmmax x xvmin xvmax 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. 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) Primitivas 2D 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). Primitivas 2D OpenGL ● Primitiva punto: glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); Primitivas 2D OpenGL ● Primitiva punto: glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); ● 2D entero: glVertex2i (50, 100); Primitivas 2D OpenGL ● Primitiva punto: glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); ● 2D entero vector: int point[] = {50, 100}; ... glVertex2iv (point1); Primitivas 2D OpenGL ● Primitiva punto: glBegin (GL_POINTS); glVertex* (<coordenadas>); glEnd (); ● 3D real: glVertex3f (­78.5, 14.6, 188.33); Primitivas 2D OpenGL ● Primitiva punto: glBegin (GL_POINTS); glBegin (GL_POINTS); glVertex* (<coordenadas>); glVertex2i (50, 100); glEnd (); glVertex2i (75, 150); glVertex2i (100, 200); glEnd (); Primitivas 2D OpenGL ● Ejercicio: Modificar el programa introOpenGl.cpp para dibujar puntos en varias posiciones. ¿son visibles los puntos? 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). Primitivas 2D OpenGL ● Propiedades de color: glColor* (<R>, <G>, <B>, <A>); ● Valores: 0.0 (intensidad cero) - 1.0 (intensidad completa). 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 (); 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 (); Primitivas 2D OpenGL ● Propiedades de color: 200 175 150 125 100 0 25 50 75 100 125 Primitivas 2D OpenGL ● Ejercicio: Modificar el programa introOpenGl.cpp para dibujar puntos de diferentes colores. ¿son visibles ahora los puntos? Primitivas 2D OpenGL Elemento base de especificación: glVertex* (); ● Propiedades de grosor: glPointSize (1.0); glBegin (GL_POINTS); glVertex2i (150, 200); glEnd (); Primitivas 2D OpenGL ● Propiedades de grosor 200 175 150 125 100 0 25 50 75 100 125 Primitivas 2D OpenGL ● Ejercicio: Modificar el programa introOpenGl.cpp para dibujar puntos de diferentes tamaños. ¿son visibles (ahora sí) los puntos? Próxima clase ● Taller 1: Primitivas 2D 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-2012winter/2D.pdf www.sci.brooklyn.cuny.edu/~weiss/cisc3620/Lectures/02Chapter02.html