1. Ingeniería

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 recta?
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”);
- Posición en la pantalla
glutInitWindowPosition(50,100);
- Tamaño
glutInitWindowSize(400,300);
Sistemas de referencia
●
Sistema de referencia de la pantalla
–
Gestión de la ventana de visualización
100
50
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);
glBegin (GL_POINTS);
glVertex*
(<coordenadas>);
glVertex* (<coordenadas>);
glEnd
();
glEnd ();
●
2D entero:
glVertex2i (50, 100);
Primitivas 2D OpenGL
●
Primitiva punto
glBegin
(GL_POINTS);
glBegin (GL_POINTS);
glVertex*
(<coordenadas>);
glVertex* (<coordenadas>);
glEnd
();
glEnd ();
●
2D entero vector:
int point[] = {50, 100};
...
glVertex2iv (point1);
Primitivas 2D OpenGL
●
Primitiva punto
glBegin
(GL_POINTS);
glBegin (GL_POINTS);
glVertex*
(<coordenadas>);
glVertex* (<coordenadas>);
glEnd
();
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?
Tarea
●
Para el tema de la próxima clase
Traer una hoja de papel milimetrado
(adicional a la que se utilizará en el taller)
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