Universidad Nacional Mayor de San Marcos

Facultad de Ingeniería de Sistemas e Informática

Departamento Académico de Ciencias de la Computación
Laboratorio de Computación Visual 2022 - 1
Proyecciones geométricas y cámara móvil con OpenGL

Laboratorio 05

Proyecciones geométricas
y cámara móvil con
Diseño de vistas empleando
proyecciones geométricas.
OpenGL

Objetivo: El objetivo de esta práctica, es que el alumno conozca y sepa manejar apropiadamente las
proyecciones (ortográfica y/o perspectiva) en la elaboración de una aplicación con características
interactivas, para esto se incorporará la cámara móvil obteniéndose una mayor soltura en cuanto al
desplazamiento del usuario.

Duración de la Práctica: 2 Horas.

Lugar de realización: Laboratorio de cómputo.

El conocimiento requerido para realizar esta práctica es de haber asimilado los conceptos básicos
de C/C++ y OpenGL y la teoría necesaria para proyecciones en 2D y 3D.

El desarrollo tendrá la siguiente estructura:

1. Interacción y animación usando GLUT (tercera parte)

a. Proyecciones
b. Proyección ortográfica
c. Proyección en perspectiva
2. La cámara móvil
3. Programa ejemplo con OpenGL
4. Ejercicios propuestos.
5. Referencias

Johnny R. Avendaño Q. Pag. No. 1

 Universidad Nacional Mayor de San Marcos
Facultad de Ingeniería de Sistemas e Informática
Departamento Académico de Ciencias de la Computación
Laboratorio de Computación Visual 2022 - 1
Proyecciones geométricas y cámara móvil con OpenGL

1. INTERACCIÓN Y ANIMACIÓN USANDO GLUT (tercera parte)

Para llevar a cabo una animación no solo se requiere saber transformar la geometría o los
elementos que son parte de la animación, sino que además hay que elegir como proyectarlos en un
sistema de visualización que en este caso es bidimensional (nuestro viewport o monitor). Este
laboratorio describe dos tipos de proyecciones en concreto además de tener un control del movimiento
y posición del observador cuando este se desplaza a través de la escena (alámbrica o sólida).

• PROYECCIONES:

Existen dos tipos de proyecciones que son muy usadas para efectos prácticos, las cuáles son las
siguientes:

• Proyecciones Paralelas. Dependiendo del ángulo que forma con el plano de proyección
pueden ser:
a. Oblicua
b. Ortográfica.

• Proyecciones en Perspectiva. Dependiendo del número de punto de fuga de eje pueden ser:
a. 1 punto de fuga
b. 2 puntos de fuga
c. 3 puntos de fuga

Nosotros nos centraremos en dos de estas proyecciones, la ortográfica y la perspectiva de un sólo

punto de fuga.

• PROYECCIÓN ORTOGRÁFICA:

Como proyección paralela que es, cuenta con

proyectores todos paralelos entre ellos, el centro
de proyección (cop) se encuentra en el infinito
(lo cual es una convención); en el caso de la
ortográfica, los proyectores son perpendiculares
al plano de proyección (lo que se observa mejor
en la figura No 1).

Este tipo de proyección generalmente

preserva las dimensiones reales de los objetos
según la distancia hasta ellos (observe las
aplicaciones desarrolladas en los talleres
previos). Esto quiere decir que aun acercándose Figura No. 1. Proyección ortográfica
o alejándose de ellos no se producen cambios de
tamaño, pero en contraste el realismo no es
percibido en su totalidad; estas se utilizan tradicionalmente en proyectos de ingeniería del tipo de
programas CAD1.

Los parámetros para especificar son las dimensiones de la caja:

(Xmin, Xmax, Ymin, Ymax, Zmin, Zmax)

A los valores Zmax y Zmin también se les denomina FAR o BACK y NEAR o FRONT.
En OpenGL la podemos definir de la siguiente forma (ya lo habíamos visto en algunos ejemplos
desarrollados anteriormente):
1
CAD (Computer Aided Design), se refiere a las herramientas computacionales que permiten asistencia a ingenieros, arquitectos
y áreas de diseño.

Johnny R. Avendaño Q. Pag. No. 2

 Universidad Nacional Mayor de San Marcos
Facultad de Ingeniería de Sistemas e Informática
Departamento Académico de Ciencias de la Computación
Laboratorio de Computación Visual 2022 - 1
Proyecciones geométricas y cámara móvil con OpenGL

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(Xmin, Xmax, Ymin, Ymax, Zmin, Zmax);

la última función puede reemplazarse por:

gluOrtho2D(Xmin, Xmax, Ymin, Ymax);

si se aceptan los valores por defecto de Zmin=-1.0 y Zmax=1.0

• PROYECCIÓN EN PERSPECTIVA:

Esta es la que definitivamente utilizaremos

para dotar del mayor realismo a nuestras
aplicaciones. Las proyecciones en perspectiva no
siempre preservan las dimensiones reales de los
objetos si nos acercamos o alejamos de ellos, pero
el efecto visual es justo el deseado en los casos de
apariencia real.

La perspectiva puede ser estudiada

dependiendo del número de puntos de fuga de eje:
• Con 1 punto de fuga de eje.
• Con 2 puntos de fuga de eje.
• Con 3 puntos de fuga de eje.
Figura No. 2. Proyección en perspectiva

Figura No. 3. Proyección con 2 puntos de fuga

En la figura No 2, tenemos una proyección perspectiva con un sólo COP o punto de fuga. Todos
los proyectores emanan de él (o convergen hacia el) y se dirigen hasta el objeto intersecando el plano
de proyección. Como se puede deducir, los proyectores no son paralelos entre ellos.

En OpenGL la podemos definir mediante el siguiente código:

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(Angulo,Aspecto,Znear,Zfar);

Los parámetros que tenemos que especificar son:

• Angulo: en grados. Es el "field of view" o campo visual. Se refiere al ángulo de abertura

vertical.
• Aspecto: Relación de Aspecto o "aspect ratio". Es el cociente entre la anchura (width) y la
altura (height) del plano de proyección deseado.
• Y Los valores Znear, Zfar que definen el volumen de visualización en perspectiva
análogamente que en la ortográfica.

Johnny R. Avendaño Q. Pag. No. 3

 Universidad Nacional Mayor de San Marcos
Facultad de Ingeniería de Sistemas e Informática
Departamento Académico de Ciencias de la Computación
Laboratorio de Computación Visual 2022 - 1
Proyecciones geométricas y cámara móvil con OpenGL

Figura No. 4. Parámetros de una proyección en perspectiva

También podemos definir también una proyección perspectiva usando la función:

glFrustrum(left,right,bottom,top,near,far);

Figura No. 4. Parámetros de la función glFrustrum

En este caso OpenGL calculará el "frustrum piramidal", es decir, el volumen de visualización

perspectiva más idóneo. Son simplemente dos maneras distintas de acabar creando lo mismo. Las
distancias Znear y Zfar son siempre positivas y medidas desde el COP hasta esos planos, que serán
obviamente paralelos al plano Z=0. Dado que la cámara apunta por defecto en la dirección negativa de
Z, el plano de front (near) estará realmente situado en z=Zmin mientras que el de back (far) estará en
z=-Zmax.

2. LA CÁMARA MÓVIL

Todo lo que ella vea será proyectado, discretizado y finalmente mostrado en nuestra ventana de
visualización grafica. Podemos imaginar que de la cámara emana el volumen de visualización de forma
que se traslada con ella. La función en OpenGL viene a ser:

gluLookAt(eyeX,eyeY,eyeZ,atX,atY,atZ,upX,upY,upZ);

En cuanto a los parámetros que demanda la función gluLookAt son los siguientes:

• Coordenadas del "eye". Es literalmente la posición XYZ dónde colocar la cámara dentro del
mundo.

Johnny R. Avendaño Q. Pag. No. 4

 Universidad Nacional Mayor de San Marcos
Facultad de Ingeniería de Sistemas e Informática
Departamento Académico de Ciencias de la Computación
Laboratorio de Computación Visual 2022 - 1
Proyecciones geométricas y cámara móvil con OpenGL

• Coordenadas del "at". Es el valor XYZ del punto al que queremos que mire la cámara. Un punto
del mundo obviamente.
• Coordenadas del vector "up". Es un vector y no un punto. Con él regularemos la orientación de
la cámara. Este ha de ser el vector que "mira hacia arriba" si entendemos que el vector que
apunta hacia adelante es el que va del "eye" hasta el "at". Variando el "up" variamos la
orientación:

Figura No. 6. La cámara móvil

Esta es la función que determina dónde y cómo está dispuesta la cámara. Hay que tener presente
que la posición de la cámara no tiene nada que ver con el tipo de proyección que hayamos definido.

La proyección se define sólo una vez, típicamente al principio del programa en una función
inicializadora, mientras que la cámara se mueve continuamente según nos convenga. Tome en cuenta
que la matriz que se modifica al llamar a esta función no tiene que ser GL_PROJECTION si no
GL_MODELVIEW. OpenGL calculará todas las transformaciones que aplicará al mundo 3D para que
manteniendo la cámara en el origen de coordenadas y enfocada en la dirección negativa de las Z's nos
dé la sensación de que lo estamos viendo todo desde un cierto lugar. Para ello siempre se debe activar
esta matriz antes de llamar a gluLookAt de esta forma:

glMatrixMode(GL_MODELVIEW);

3. PROGRAMA EJEMPLO CON OPENGL

Implemente funciones que le permitan desplazarse con libertad en un modelo alámbrico (objeto
geométrico); inicialmente, desplazarse hacia delante y hacia atrás, luego girar tanto a la derecha como
a la izquierda, y finalmente tener autonomía total, es decir, desplazarse hacia arriba o hacia abajo. Esta
aplicación incluye también transformaciones geométricas, para ello use el código del taller anterior
(taller 02).

Una posible implementación es como sigue:

#include <stdlib.h>
#include<conio.h>
#include<stdio.h>
#include<math.h>
#include <gl/glut.h>
void ejes(int);
GLdouble angulo=0, incremento_angulo=0.1;
GLdouble const radio=0.5;
GLfloat px0=0,py0=0,pz0=5;
GLfloat px1=0,py1=0,pz1=4;
static GLfloat theta[] = {0.0,0.0,0.0};
static GLint axis = 2 ;

Johnny R. Avendaño Q. Pag. No. 5

 Universidad Nacional Mayor de San Marcos
Facultad de Ingeniería de Sistemas e Informática
Departamento Académico de Ciencias de la Computación
Laboratorio de Computación Visual 2022 - 1
Proyecciones geométricas y cámara móvil con OpenGL

void iniciar(void)
{
glClearColor (1.0, 1.0, 1.0, 0.0);
glShadeModel (GL_FLAT);
}

void display(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glPushMatrix();
glLoadIdentity();
// la camara se desplaza sobre el plano xz
gluLookAt(px0,0.0,pz0,px1,0.0,pz1,0,1,0);
glColor3f (1.0, 0.0, 0.0);
ejes(2);
glRotatef(theta[0],1.0,0.0,0.0);
glRotatef(theta[1],0.0,1.0,0.0);
glRotatef(theta[2],0.0,0.0,1.0);
glColor3f (0.0, 0.0, 1.0);
glutWireDodecahedron();
glFlush();
glPopMatrix();
glutSwapBuffers();
}

void CubeSpin()
{
theta[axis] += .2;
if(theta[axis]>360) theta[axis] -= 360.0;
display();
}

void rotacamara()
{
px1=px0+radio*sin(angulo);
pz1=pz0-radio*cos(angulo);
}

void avanza()
{
px0=px1;pz0=pz1;
px1=px0+radio*sin(angulo);
pz1=pz0-radio*cos(angulo);
}
void retro()
{
px1=px0;pz1=pz0;
px0=px0-radio*sin(angulo);
pz0=pz0+radio*cos(angulo);
}
void teclado(unsigned char tecla,int x,int y)
{
switch(tecla){
case 'i' : avanza();break;
case 'm' : retro(); break;
case 'j' : angulo=angulo+incremento_angulo;rotacamara(); break;
case 'k' : angulo=angulo-incremento_angulo;rotacamara(); break;
case 'a' : axis = 0; break;
case 's' : axis = 1; break;
case 'd' : axis = 2; break;

Johnny R. Avendaño Q. Pag. No. 6

 Universidad Nacional Mayor de San Marcos
Facultad de Ingeniería de Sistemas e Informática
Departamento Académico de Ciencias de la Computación
Laboratorio de Computación Visual 2022 - 1
Proyecciones geométricas y cámara móvil con OpenGL

case 'f' : exit(0); break;

}
}

void ejes(int longitud)

{
glBegin(GL_LINES);
glVertex3d(0,0,longitud);
glVertex3d(0,0,0);
glEnd();
glBegin(GL_LINES);
glVertex3d(0,0,0);
glVertex3d(0,longitud,0);
glEnd();
glBegin(GL_LINES);
glVertex3d(0,0,0);
glVertex3d(longitud,0,0);
glEnd();
}

void myReshape(int w, int h)

{
glViewport (0, 0, (GLsizei) w, (GLsizei) h);
glMatrixMode (GL_PROJECTION);
glLoadIdentity ();
gluPerspective(60.0, (GLfloat) w/(GLfloat) h,0.1, 30.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

int main(int argc, char **argv)

{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
glutInitWindowSize(500,500);
glutCreateWindow("camara movil");
iniciar();
glutReshapeFunc(myReshape);
glutDisplayFunc(display);
glutIdleFunc(CubeSpin);
glutKeyboardFunc(teclado);
glEnable(GL_DEPTH_TEST);
glutMainLoop();
return 0;
}

Johnny R. Avendaño Q. Pag. No. 7

 Universidad Nacional Mayor de San Marcos
Facultad de Ingeniería de Sistemas e Informática
Departamento Académico de Ciencias de la Computación
Laboratorio de Computación Visual 2022 - 1
Proyecciones geométricas y cámara móvil con OpenGL

4. EJERCICIOS PROPUESTOS

Ejercicio 01:

Implemente el código necesario para llevar a cabo las

rotaciones hacia arriba y hacia abajo con los respectivos
desplazamientos en esas direcciones; de esta manera se
debe tener el control total de la cámara. Para esto
considere el diseño de la estructura adyacente:
A
La dimensión de A debe ser especificada por el
usuario al iniciarse la aplicación. Note que la figura central
es un hexágono, tanto en la base como en la parte
superior, con dimensiones especificadas en la figura.
Como resultado final, el usuario tendrá la posibilidad
de desplazarse en cualquier dirección a través de la
estructura graficada.
El grosor de la estructura deberá ser mayor a la de un
píxel siendo predefinida en el programa.

Nota:

Puede consultar las referencias para tener conocimiento de algunas primitivas graficas definidas
en OpenGL como, por ejemplo:

• glutWireCube
• glutWireSphere

Todas estas y otras se hallan en la referencia The OpenGL Utility Toolkit (GLUT) Programming
Interface; también consulte otras referencias con ejemplos.

Ejercicio 02:

Diseñe su propia primitiva grafica para un cilindro alámbrico; esta tendrá una altura y radio iguales
a la unidad, será paralelo al eje Y y centrado en el origen de coordenadas. su formato deberá ser:

Mi_Cilindro_Wire(Npara,Ncortes)

Donde:

• Ncortes: es el número de líneas verticales a lo largo

del cilindro alámbrico; a su vez las circunferencias
serán aproximadas por un polígono regular de Npara
lados.
• Npara: es el número de cortes perpendiculares al
largo del cilindro; este número de cortes coincide con
el número de circunferencias que conformara el
modelo alámbrico para el cilindro.

En el gráfico adjunto se tiene una representación con Npara=15 y Ncortes=10.

Ejercicio 03:

Proceda en el ejercicio anterior para tener una representación sólida.

Johnny R. Avendaño Q. Pag. No. 8

 Universidad Nacional Mayor de San Marcos
Facultad de Ingeniería de Sistemas e Informática
Departamento Académico de Ciencias de la Computación
Laboratorio de Computación Visual 2022 - 1
Proyecciones geométricas y cámara móvil con OpenGL

Ejercicio 04:

Construir un modelo molecular para representar (modelo alámbrico) la

molécula del agua (H20) tal como se sugiere en la gráfica.

Sugerencia 1. Use la primitiva diseñada en el ejercicio

anterior.

Sugerencia 2. Use OpenGL si desea manipular sólidos

(opcional).

Ejercicio 05:

Construir un modelo molecular (alámbrico) para el Cubano, sólido cristalino sintetizado en 1964
por el profesor Philip Eaton de la Universidad de Chicago.

Enlace de referencia:

http://www.quimicaorganica.net/quimica-organica/alcanos/alcanos.htm

Nota:

Inicialmente use la función glutWireSphere de forma apropiada

para diseñar la estructura, cuando todo funcione bien modifique los
parámetros (como un solo sólido).

Importante: centre su estructura en el origen para trabajar

correctamente con las transformaciones involucradas, pues todas las
representaciones estarán girando o rotando.

5. REFERENCIAS

1. Principles and Practice (Second Edition). Foley J. D., A.van Dam, S.K.Feiner and J.F.
Hughes Computer Graphics. Addison-Wesley. 1990
2. OpenGL Superbible. R. Wright and M. Sweet. Waite Group, Inc 1996
3. OpenGL Programming Guide: The Official Guide to Learning OpenGL. D. Sheiner, M.
Wood, J. Neider and T. Davis. Addison Wesley, 2007
4. The OpenGL Utility Toolkit (GLUT) Programming Interface (API Version 3). Mark J. Kilgard,
Silicon Graphics, Inc 1996
5. The OpenGL Graphics System: A Specification (Version 1.2). Mark segal & Kurt Akeley.
Silicon Graphics, Inc 1998

Johnny R. Avendaño Q. Pag. No. 9