Open GL

Dibujando Objetos
Geométricos
Jhelly Pérez Núñez
COMPUTACIÓN
GRÁFICA
Dibujando Objetos Geométricos Introducción
Píxel
puntos, líneas y polígonos Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Especificando un color
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Mag.Jhelly Pérez Núñez Tangram
Universidad Nacional Mayor de San Marcos

1.1
Dibujando Objetos
Contenido Geométricos

Introducción
Píxel
Vértice
Línea
Polígono
Introducción
Dibujando con OpenGL Píxel
Vértice
Modo de dibujo Línea
Especificando un color Polígono
Dibujando con
Características adicionales OpenGL
Modo de dibujo
Puntos Especificando un color
Líneas Características
adicionales
Polígonos Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas 2D
Primitivas I Primitivas I
Primitivas II
Primitivas II
Ejercicios
Ejercicios Tablero de ajedrez

Tangram
Tablero de ajedrez
Tangram
1.2
Dibujando Objetos
Introducción Geométricos
Cuando se aprende a renderizar cualquier tipo de gráfico en

un ordenador, lo normal es empezar con los píxeles.
Píxel
Es el elemento más pequeño en el monitor de un ordenador. Introducción
Píxel
Básicamente se trabaja con un Vértice

Línea
espacio de color (por ejemplo RGBA); Polígono
en dicho espacio de color, este píxel Dibujando con

OpenGL
puede tener cualquiera de los colores Modo de dibujo
disponibles. Así el nivel más simple de Características
gráficos de ordenador, sería: adicionales
Puntos
renderizar un punto en cualquier lugar Líneas
Polígonos
de la pantalla y darle un color
Primitivas 2D
específico. Primitivas I
Primitivas II
A partir de este concepto simple, es posible producir en el Ejercicios

Tablero de ajedrez
lenguaje de computadores favorito líneas, polígonos, círculos y Tangram
otras figuras y gráficos.
1.3
Dibujando Objetos
Vértices Geométricos
Vertex
Un punto es representado por un conjunto de numeros en Introducción
punto flotante, este conjunto de puntos es llamado vertice. Píxel

Vértice
Línea
Polígono
Dibujando con
OpenGL realiza todos los cálculos OpenGL
Modo de dibujo
internos como si los vértices fueran Especificando un color
tridimensionales; es decir los vértices Características

adicionales
especificados por el usuario como Puntos
bidimensionales (solo coordenadas X Líneas

Polígonos
e Y ), son asignados de la coordenada Primitivas 2D

Z igual a cero. Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.4
Dibujando Objetos
Líneas Geométricos
Line
En OpenGL, una línea se refiere a un segmento de línea, no a Introducción
la version matemática (infinita en ambas direcciones). Píxel

Vértice
Línea
Polígono
Dibujando con
OpenGL tiene maneras fáciles de OpenGL
Modo de dibujo
especificar una linea, una series de Especificando un color
líneas conectadas entre si, o incluso Características

adicionales
una serie de líneas cerradas. En todos Puntos
los casos, las líneas son especificadas Líneas

Polígonos
en términos de los vértices de los Primitivas 2D
extremos de cada segmento de linea. Primitivas I

Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.5
Dibujando Objetos
Polígonos Geométricos
Polygon
Un Polígono, es la area cerrada por un ciclo simple de
segmentos de líneas, donde los segmentos de linea son Introducción
Píxel
especificados por los vértices de sus extremos finales Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Los polígonos, típicamente son Características

adicionales
dibujados con los píxeles de su interior Puntos
coloreados, pero también se pueden Líneas

Polígonos
renderizar como líneas o puntos. Primitivas 2D

Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.6
Dibujando Objetos
Polígonos Geométricos

Los polígonos pueden ser complicados, por eso OpenGL hace
algunas restricciones fuertes, en que es lo que constituye una
primitiva polígono.
1 Los bordes de los polígonos OpenGL no se pueden intersecar.
2 Los polígonos OpenGL deben ser convexos.
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Note que OpenGL no restringe el numero de líneas que forman el Tablero de ajedrez
Tangram
polígono, además los polígonos no convexos también son dibujados,
pero al no poder ser dibujados con solo una secuencia cerrada de
líneas, puede que OpenGL no lo dibuje como usted esperaba.
1.7
Dibujando Objetos
Entorno de dibujo Geométricos

Anteriormente, ya vimos que los eventos de animación o
pintado son administrados por la función
glutDisplayFunc(Display )
donde Display es la función en la cual codificamos nuestra Introducción

animación. Píxel
Vértice
Línea
Ejemplo Polígono
Dibujando con
OpenGL
void Display()
Modo de dibujo
{ Especificando un color
glClearColor(0.0,0.0,0.0,0.0);
Características
glClear(GL_COLOR_BUFFER_BIT); adicionales
Puntos
glBegin(Modo); Líneas
Polígonos
.
.
. Primitivas 2D
glEnd(); Primitivas I
Primitivas II
Ejercicios
glFlush();
Tablero de ajedrez
} Tangram
Modo especifica la primitiva que sera creada de los vértices

entre las subsecuencias glBegin y glEnd. 1.8
Dibujando Objetos
Modo de dibujo Geométricos
Especificación
void glBegin(GLenum mode);
..
.
void glEnd( void); Introducción
Píxel
Donde Modo especifica la forma en la que será creada la primitiva de Vértice

Línea
los vértices entre las subsecuencias glBegin y glEnd. Modo puede ser Polígono
cualquiera de las siguientes constantes simbólicas Dibujando con

OpenGL
GL_POINTS Trata cada vértice como un solo punto. Modo de dibujo
GL_LINES Trata cada par de vértice como una linea Características

adicionales
independiente. Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.9
Dibujando Objetos

GL_LINE_STRIP Dibuja una secuencia de líneas conectando desde
el primer hasta el ultimo vértice.
GL_LINE_LOOP Igual a GL_LINE_STRIP, pero cerrando el gráfico.
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
GL_TRIANGLES Trata cada terna de vértices como un triángulo Modo de dibujo
independiente. Características
adicionales
GL_TRIANGLE_STRIP Dibuja un grupo conectado de triángulos. Puntos
Cada triángulo se define (V1 , V2 , V3 ) luego (V2 , V3 , V4 ) Líneas

Polígonos
luego (V3 , V4 , V5 ) y así sucesivamente.
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.10
Dibujando Objetos
GL_TRIANGLE_FAN Dibuja un grupo conectado de triángulos. Cada

triángulo se define (V1 , V2 , V3 ) luego (V1 , V3 , V4 )
luego (V1 , V4 , V5 ) y así sucesivamente.
GL_QUADS Trata cada grupo de cuatro vértices como un
cuadrilátero independiente. Introducción
Píxel
GL_QUAD_STRIP Dibuja cuadriláteros conectados. Cada Vértice
cuadrilátero es definido análogamente a Línea

Polígono
GL_TRIANGLE_STRIP. Dibujando con
OpenGL
GL_POLYGON Dibuja un solo polígono convexo. Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.11
Dibujando Objetos
Dibujando Vértices Geométricos
Para especificar un punto dibujado en la paleta 3D, se utiliza la

función OpenGL glVertex, sin ninguna duda la función más
utilizada de todas las que ofrece la API de OpenGL. Es el
mínimo común denominador de todas las primitivas de Introducción
OpenGL. La función glVertex toma como argumentos de 2 a 4 Píxel

Vértice
parámetros de tipo numérico, de bytes a dobles. Línea

Polígono
Dibujando con
Especificación OpenGL
Modo de dibujo
void glVertex*(Argumentos); Especificando un color
Características
adicionales
* representa la cantidad y el sufijo para los argumentos que se Puntos
van a utilizar. Por ejemplo Líneas

Polígonos
glVertex2s(2, 3); Primitivas 2D

Primitivas I
glVertex3d(0.0, 0.0, 3.141592); Primitivas II
Ejercicios
glVertex4f(2.3, 1.0, -2.2, 2.0); Tablero de ajedrez
Tangram
1.12
Dibujando Objetos
Especificando un color Geométricos
En OpenGL, la descripción de la forma de un objeto que esta siendo

dibujado es independiente de la descripción de su color. Cualquier
objeto geométrico que es dibujado con el esquema de color
especificado actualmente (por defecto se dibujan en color blanco).
Introducción
En general, primero activamos un esquema de color y después Píxel
dibujamos los objetos. Hasta que el esquema de color es cambiado Vértice

Línea
todos los objetos se dibujan del mismo color del esquema. Polígono
Dibujando con
Por ejemplo para renderizar objetos de diversos colores, podemos OpenGL
considerar el siguiente pseudocódigo Modo de dibujo

Características
adicionales
establecer_color_actual(rojo); Puntos
dibujar_objeto(A); Líneas
Polígonos
dibujar_objeto(B);
Primitivas 2D
establecer_color_actual(verde); Primitivas I
dibujar_objeto(C); Primitivas II
establecer_color_actual(azul); Ejercicios
Tablero de ajedrez
dibujar_objeto(D); Tangram
1.13
Dibujando Objetos
Especificando un color Geométricos
Para establecer un color, utilizamos la instrucción glColor*() la

cual toma de tres a cutro parámetros, todos ellos numeros en
punto flotante entre 0.0 y 1.0.
Especificación
Introducción
void glColor*(Argumentos); Píxel
Vértice
Línea
Esta instrucción es parecida a glVertex*, de igual manera su Polígono
Dibujando con
formato depende del numero de argumentos y el tipo de OpenGL
argumentos que va a recibir, por ejemplo Modo de dibujo

glVertex3d(0.0, 0.0, 1.0); Características

adicionales
glVertex4f(0.5, 0.0, 0.2, 0.5); Puntos

Líneas
En general los tres primeros argumentos corresponden a las Polígonos
Primitivas 2D
componentes rojo, verde y azul respectivamente, y el cuarto Primitivas I
corresponde al parámetro alfa del modelo de color RGBA. Primitivas II
Ejercicios
Cuando solo se utilizan 3 argumentos, por defecto, alfa toma el Tablero de ajedrez
valor de 1.0. El color inicial es (1,1,1,1) correspondiente al Tangram
blanco y puede cambiarse en cualquier momento.

1.14
Dibujando Objetos
Cambiando el color Geométricos
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.15
Dibujando Objetos
Cambiando el tamaño de los puntos Geométricos
Para controlar el tamaño con el cual se renderizará un punto, Jhelly Pérez Núñez
podemos utilizar la instrucción glPointSize()

Especificación
void glPointSize(GLfloat size);
El argumento size especifica el diámetro con el cual se renderizarán Introducción

Píxel
los puntos, su valor por defecto es 1. Vértice
Línea
Ejemplo Polígono
Dibujando con
Renderizar los cuatro vertices de un cuadrado, pero con diferente OpenGL
Modo de dibujo
color y tamaño. Especificando un color
Características
adicionales
glColor3f(1.0,0.0,1.0); Puntos
Líneas
glPointSize(1.0); Polígonos
Primitivas 2D
Primitivas I
glBegin(GL_POINTS); Primitivas II
glVertex2d(-0.5,0.5); Ejercicios
glVertex2d(0.5,0.5); Tablero de ajedrez
Tangram
glVertex2d(0.5,-0.5);
glVertex2d(-0.5,-0.5);
glEnd();
1.16
Dibujando Objetos
Cambiando el tamaño de los puntos Geométricos
Resultados
Una implementación de la porción de código mostrada
anteriormente da los siguientes resultados para los siguientes Introducción
valores de size Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
(3,0) (6,0) (9,0) Ejercicios

Tablero de ajedrez
Tangram
1.17
Dibujando Objetos
Líneas con diferentes patrones Geométricos
Con OpenGL, puedes especificar líneas con diferente ancho y líneas Jhelly Pérez Núñez
que son trazadas con diferentes patrones como puntos, guiones,

puntos y guiones alternados, etc.
Especificación
void glLineWidth(GLfloat width);
Introducción
Píxel
width especifica el ancho con el cual las líneas son dibujadas. el valor Vértice
inicial, por defecto, es 1. Línea

Polígono
Dibujando con
Para hacer líneas con algún patrón, debemos utilizar la instrucción OpenGL
Modo de dibujo
glLineStipple() para definir un patrón, y después activarlo y Especificando un color
desactivarlo respectivamente con glEnable() y glDisable(). Características

adicionales
Puntos
Especificación Líneas
Polígonos
void glLineStipple(GLint factor , GLushort pattern); Primitivas 2D
Primitivas I
factor especifica el múltiplo para cada bit en la linea del patrón. por Primitivas II
ejemplo si factor es 3, entonces cada bit del patrón se utiliza 3 veces Ejercicios
Tablero de ajedrez
antes del siguiente bit del patrón. Tangram
pattern especifica un entero de 16-bit, cuyos bits determinan los

patrones a usar. El patrón por defecto es puros 1. 1.18
Dibujando Objetos

Algunos patrones bastante utilizados son los siguientes
Patrón Descripción
0x0101 Linea construida a base de puntos
0xAAAA Linea construida a base de puntos estrechos
0x00FF Linea construida a base de guiones Introducción
0x0C0F Linea construida a base de guión punto Píxel

Vértice
0x1C47 Linea construida a base de guión punto guión Línea

Polígono
El formato para utilizar estas características es el siguiente Dibujando con

OpenGL
Modo de dibujo
glEnable(GL_LINE_STIPPLE); Características
glLineStipple (1, 0x0101); adicionales
Puntos
Líneas
Polígonos
glBegin(GL_LINES); Primitivas 2D
glVertex2d(-0.5,0.0); Primitivas I
Primitivas II
glVertex2d(0.5,0.0);
Ejercicios
glEnd(); Tablero de ajedrez
Tangram
glDisable(GL_LINE_STIPPLE);
1.19
Dibujando Objetos
Ejemplo
Renderizar líneas con cada uno de los patrones mencionados
anteriormente. Una implementación de la porción de código
mostrada anteriormente da los siguientes resultados para los Introducción
Píxel
siguientes valores de factor Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
(1,0) (3,0) (6,0) Tangram
1.20
Dibujando Objetos
Cambiando el relleno de un polígono OpenGL Geométricos
Los polígonos son dibujados típicamente llenando todos los píxeles Jhelly Pérez Núñez
encerrados por su frontera, pero se pueden renderizar solo el

contorno, o tan simple como puntos en los vertices. Un polígono
rellenado, puede tener relleno solido (un solo color) o un patrón como
relleno.
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Un polígono tiene dos caras frontal y posterior y pueden ser Primitivas II
dibujados de formas diferentes, dependiendo de que lado estemos Ejercicios

Tablero de ajedrez
mirando. Esto nos permite tener ilustraciones diferentes de objetos Tangram
solidos en los que hay una distinción obvia entre las partes que están
afuera y las que están adentro. por defecto ambas caras son
dibujadas de la misma manera. 1.21
Dibujando Objetos
Para cambiar la forma en la cual se dibujan las caras de nuestro Jhelly Pérez Núñez
polígono, podemos utilizar la instrucción glPolygonMode().
Especificación
void glPolygonMode(GLenum face, GLenum mode);
Introducción
face especifica el modo que se esta aplicando a los polígonos, el Píxel
argumento face puede ser GL_FRONT_AND_BACK, GL_FRONT o Vértice

Línea
GL_BACK. Polígono
Dibujando con
mode especifica como serán dibujado los polígonos, este argumento OpenGL
acepta alguno de los siguientes valores GL_POINT, GL_LINE, o Modo de dibujo
GL_FILL. El valor inicial , por defecto, es GL_FILL para ambas caras Características
del polígono. adicionales
Puntos
Líneas
El formato para utilizar estas características es el siguiente Polígonos
Primitivas 2D
glPolygonMode(GL_FRONT_AND_BACK, GL_POINT); Primitivas I
Primitivas II
Ejercicios
glBegin(GL_POLYGON); Tablero de ajedrez
Tangram
glVertex2d(-0.5,0.5); glVertex2d(0.5,0.5);
glVertex2d(0.5,-0.5); glVertex2d(-0.5,-0.5);
glEnd();
1.22
Dibujando Objetos
Ejemplo
Renderizar polígonos con cada uno de los modos
mencionados anteriormente. Una implementación de la
porción de código mostrada anteriormente da los siguientes Introducción
Píxel
resultados para los siguientes valores de mode Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
GL_POINT GL_LINE GL_FILL Tangram
1.23
Dibujando Objetos
Por defecto, los polígonos son dibujados con un patrón solido, pero Jhelly Pérez Núñez
también pueden ser llenados con un patrón alineado en un marco de

32-bits por 32-bits, lo cual se especifica con glPolygonStipple().
Especificación
void glPolygonStipple(const GLubyte *mask );
Introducción
Píxel
mask define el patrón actual para llenar los polígonos, este Vértice
Línea
argumento es un puntero a un bitmap de 32 × 32, que es interpretado Polígono
como una mascara de ceros y unos. Donde aparece un 1 se dibuja el Dibujando con
OpenGL
pixel correspondiente en el relleno, y donde aparece un cero nada se Modo de dibujo
dibuja. Especificando un color
Ejemplo de mascara de 32 × 32 Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.24
Dibujando Objetos
Una ves especificado el patrón con el cual rellenaremos

nuestros polígonos, lo activamos y desactivamos con
glEnable() y glDisable() respectivamente.
Ejemplo Introducción
Píxel
Renderizar polígonos con diferentes patrones de relleno, como Vértice
por ejemplo el patrón correspondiente a la imagen anterior Línea

Polígono
Dibujando con
OpenGL
Modo de dibujo
GLubyte mosca[] = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, Especificando un color
0x03, 0x80, 0x01, 0xC0, 0x06, 0xC0, 0x03, 0x60,
Características
0x04, 0x60, 0x06, 0x20, 0x04, 0x30, 0x0C, 0x20,
adicionales
0x04, 0x18, 0x18, 0x20, 0x04, 0x0C, 0x30, 0x20,
0x04, 0x06, 0x60, 0x20, 0x44, 0x03, 0xC0, 0x22, Puntos
0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22, Líneas
0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22, Polígonos
0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22,
0x66, 0x01, 0x80, 0x66, 0x33, 0x01, 0x80, 0xCC, Primitivas 2D
0x19, 0x81, 0x81, 0x98, 0x0C, 0xC1, 0x83, 0x30, Primitivas I
0x07, 0xe1, 0x87, 0xe0, 0x03, 0x3f, 0xfc, 0xc0, Primitivas II
0x03, 0x31, 0x8c, 0xc0, 0x03, 0x33, 0xcc, 0xc0,
0x06, 0x64, 0x26, 0x60, 0x0c, 0xcc, 0x33, 0x30, Ejercicios
0x18, 0xcc, 0x33, 0x18, 0x10, 0xc4, 0x23, 0x08, Tablero de ajedrez
0x10, 0x63, 0xC6, 0x08, 0x10, 0x30, 0x0c, 0x08, Tangram
0x10, 0x18, 0x18, 0x08, 0x10, 0x00, 0x00, 0x08 } ;
1.25
Dibujando Objetos
Ejemplo
Renderizar polígonos con cada uno de los patrones mencionados
anteriormente. Una implementación utilizando GL_FILL y
GL_POLYGON_STIPPLE con dos patrones diferentes, se muestra a
continuación Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.26
Dibujando Objetos
Dibujando polígonos no convexos Geométricos

OpenGL solo puede renderizar polígonos convexos, pero muchos
polígonos no convexos aparecen en la practica, para renderizar estos
polígonos no convexos , típicamente los disidimos en polígonos
convexos, usualmente utilizamos triángulos para estas divisiones.
Desafortunadamente si descomponemos el polígono en triángulos y
luego los dibujamos no podemos utilizar glPolygonMode() para Introducción
renderizar los contornos, porque obtendríamos los contornos de Píxel

Vértice
todos los triángulos que lo conforman. Por ejemplo consideremos Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.27
Dibujando Objetos
Dibujando polígonos no convexos Geométricos
Implementamos lo anterior, con sus respectivos modos; las tres Jhelly Pérez Núñez
primeras GL_POLYGON y las otras GL_TRIANGLE_STRIP
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
GL_POINT GL_LINE GL_FILL adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
GL_LINE GL_FILL 1.28

Dibujando Objetos
Primitivas I Geométricos

En el mundo físico los objetos poseen formas variadas que no
necesariamente guardan relación con los objetos en la
geometría básica. por lo que en sew aproximan de la mejor
forma posible teniendo en cuenta las limitaciones del
hardware. ya que al fin y al cabo hay un dicho en computación
Introducción
gráfica “si luce bien, esta bien”. Píxel
Vértice
Línea
OpenGL hace uso del lo que sus creadores llaman el Polígono
“paradigma Begin/End”. que simplemente es la forma en que Dibujando con

OpenGL
se pasan las instrucciones para indicar al API como se deben Modo de dibujo
armar las primitivas, a través de dos funciones: Características
adicionales
Puntos
void glBegin( enum modo ); Líneas
Polígonos
void glEnd( void )
Primitivas 2D
Primitivas I
Seleccionando un modo, anteriormente ya vimos los valores Primitivas II
que puede tomar, y en adición con la instrucción glVertex*() Ejercicios

Tablero de ajedrez
construimos nuestras primitivas básicas (líneas, triángulos y Tangram
polígonos).
1.29
Dibujando Objetos
En la practica suelen repetirse constantemente ciertas primitivas, ¿Es

necesario cuantificar sus vertices para poder renderizar cada una de
ellas?
Ejemplo
Introducción
Renderizar tres cuadrados como se Píxel
Vértice
muestra en la figura Línea
Polígono
Observaciones Dibujando con

OpenGL
Modo de dibujo
Para realizar el dibujo, Especificando un color
necesitamos conocer los 16 Características

adicionales
vertices Puntos
Líneas
Se pudo haber utilizado 3 Polígonos
modos diferentes de dibujo, Primitivas 2D

así como uno solo Primitivas I
Primitivas II
Mientras más objetos Ejercicios
renderizamos mas líneas de Tablero de ajedrez

Tangram
código necesitamos
1.30
Dibujando Objetos

Por ejemplo, escogiendo tres modos diferentes, se puede renderizar la escena
pedida, mediante la siguiente función
Display()
glClear(GL_COLOR_BUFFER_BIT);
glColor3f (1.0, 0.0, 1.0); Introducción

Píxel
glBegin(GL_QUADS); Vértice
glVertex2f(-0.8,-0.4); Línea
glVertex2f(-0.4,-0.4); Polígono
glVertex2f(-0.4,-0.8);
glVertex2f(-0.8,-0.8); Dibujando con
glEnd(); OpenGL
Modo de dibujo
glColor3f (0.0, 1.0, 1.0); Especificando un color
glBegin(GL_TRIANGLE_STRIP); Características
glVertex2f(-0.2,-0.2); adicionales
glVertex2f(0.2,-0.2); Puntos
glVertex2f(-0.2,0.2);
Líneas
glVertex2f(0.2,0.2);
Polígonos
glEnd();
Primitivas 2D
glColor3f (1.0, 1.0, 0.0);
Primitivas I
glBegin(GL_POLYGON); Primitivas II
Ejercicios
Tablero de ajedrez
glVertex2f(0.8,0.8); Tangram
glEnd();
glFlush ();
1.31
Dibujando Objetos
Creando nuestras propias primitivas: Cuadrado Geométricos
Una forma alternativa de renderizar la figura anterior, es

utilizando los mismos modos para cada cuadrado, así hubiera
sido más fácil notar que podemos usar técnicas de la
programación modular (funciones) para reducir el número de
líneas de código, así como la posibilidad insertar nuevos Introducción
errores al codificar. Píxel

Vértice
Línea
Polígono
Ejemplo Dibujando con

OpenGL
Modo de dibujo
Para esto creemos la función Cuadrado(), con las siguientes Especificando un color
características Características
adicionales
1 Se ubicará el cuadrado en base al vértice superior Puntos
Líneas
izquierdo (argumentos X , Y ) Polígonos
Primitivas 2D
2 Se renderizará el cuadrado en base a la medida su lado Primitivas I
(argumento lado) Primitivas II
Ejercicios
3 Se renderizará el cuadrado con un color especifico Tablero de ajedrez
Tangram
(argumentos R, V , A)
1.32
Dibujando Objetos
Creando nuestras propias primitivas: Cuadrado Geométricos

Una posible implementación para dicha función, seria la siguiente
void Cuadrado (float X , float Y, float Lado, float R, float V, float A)

{
glColor3f(R,V,A) Introducción
Píxel
Vértice
glBegin(GL_QUADS); Línea
Polígono
glVertex2f(X, Y);
Dibujando con
glVertex2f(X + Lado, Y); OpenGL
Modo de dibujo
glVertex2f(X + Lado, Y - Lado ); Especificando un color
glVertex2f(X, Y - Lado ); Características
glEnd(); adicionales
Puntos
Líneas
} Polígonos
Primitivas 2D
Primitivas I
De esta manera el código de la escena anterior se reduce Primitivas II
drásticamente, ya que conjunto de líneas referentes a un cuadrado Ejercicios

son reemplazadas por solo una, por ejemplo Tablero de ajedrez
Tangram
Cuadrado(-0.8,-0.4,0.4,1.0,0.0,1.0);
1.33
Dibujando Objetos
Creando nuestras propias primitivas: Recta Geométricos
No solo podemos considerar el color como argumento en Jhelly Pérez Núñez
nuestras primitivas, también podemos considerar otros

atributos como por ejemplo el grosor, modo y el patrón.
Ejemplo
Codifiquemos la función Recta(), con las siguientes Introducción
características Píxel
Vértice
1 Se ubicará la recta en base a sus extremos (argumentos Línea

Polígono
X0 , Y0 , X1 , Y1 ) Dibujando con
OpenGL
2 Se renderizará la recta con un color especifico Modo de dibujo
(argumentos R, V , A) Características
adicionales
3 Se renderizará la recta con un ancho especifico Puntos
(argumento A) Líneas
Polígonos
4 Se renderizará la recta con alguno de los 5 patrones Primitivas 2D

Primitivas I
vistos antes, sin necesidad de que el usuario sepa como Primitivas II
escribir dicho patrón (argumento P) Ejercicios

Tablero de ajedrez
Tangram
Mientras más características agreguemos a la función, más
argumentos necesitamos, entonces se podría usar arreglos
para disminuir en cierto modo la cantidad de argumentos. 1.34
Dibujando Objetos

Como los argumentos A y P, no siempre van a ser utilizados, podemos declararlos con
valores por defecto a 1 y 0xFFFF respectivamente.
Ejemplo: posible codificación

void Recta(float *X0, float *X1, float *C, float A = 1, int P = 0)
{
glColor3fv(C); Introducción
glLineWidth(A); Píxel
Vértice
glEnable(GL_LINE_STIPPLE); Línea
Polígono
switch (P) Dibujando con

{ OpenGL
case 1: glLineStipple (1, 0x0101); break; Modo de dibujo
case 2: glLineStipple (1, 0xAAAA); break;
case 3: glLineStipple (1, 0x00FF); break; Características
case 4: glLineStipple (1, 0x0c0F); break; adicionales
Puntos
case 5: glLineStipple (1, 0x1C47); break;
Líneas
default: glLineStipple (1, 0xFFFF); break; Polígonos
}
Primitivas 2D
Primitivas I
glBegin(GL_LINES); Primitivas II
glVertex2fv(X0);
Ejercicios
glVertex2fv(X1);
Tablero de ajedrez
glEnd(); Tangram
glDisable(GL_LINE_STIPPLE);
}
1.35
Dibujando Objetos

Ejemplo
Diversas combinaciones para los argumentos de nuestra primitiva Recta()
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.36
Dibujando Objetos
Creando nuestras propias primitivas: Rectángulo Geométricos
Así mismo las ideas utilizadas, en la construcción de la

primitiva Recta(), pueden utilizarse para mejorar un poco la
primitiva Cuadrado(), así tendríamos la primitiva Rectangulo() Introducción
con las siguientes características Píxel

Vértice
Línea
1 Se ubicará el rectángulo en base al vértice superior Polígono
izquierdo (argumentos X , Y ) Dibujando con

OpenGL
2 Se renderizará el rectángulo en base a la medida su lado Modo de dibujo
y ancho (argumento lado, ancho ) Características
adicionales
3 Se renderizará el cuadrado con un color especifico Puntos
(argumentos R, V , A) Líneas
Polígonos
4 Se renderizará el cuadrado con un modo especifico i.e. Primitivas 2D

Primitivas I
puntos, rectas o relleno (argumento Modo) Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.37
Dibujando Objetos

Una posible implementación para dicha función, seria la siguiente
Ejemplo: Posible implementación

void Rectangulo (float *XY , float *S, float *C, int M = 1 , float G = 1)
{
glColor3fv(C);
switch (M) Introducción
{ Píxel
case 2: { Vértice
glPolygonMode(GL_FRONT_AND_BACK,GL_POINT); Línea
glPointSize(G); Polígono
break; Dibujando con

} OpenGL
case 3: { Modo de dibujo
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
glLineWidth(G); Características
break; adicionales
Puntos
} Líneas
default: glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); Polígonos
}
Primitivas 2D
Primitivas I
glBegin(GL_QUADS); Primitivas II
glVertex2f(XY[0], XY[1]);
Ejercicios
glVertex2f(XY[0] + S[1], XY[1]);
Tablero de ajedrez
glVertex2f(XY[0] + S[1], XY[1] - S[0] ); Tangram
glVertex2f(XY[0], XY[1] - S[0] );
glEnd();
}
1.38
Dibujando Objetos
Creando nuestras propias primitivas Geométricos
Ejemplo
Construir la siguiente escena, utilizando las primitivas que
codificaron anteriormente
Introducción
Píxel
Vértice
Observaciones Línea
Polígono
Combinar de manera Dibujando con

OpenGL
adecuada los parámetros Modo de dibujo
R,G y B para obtener los Especificando un color
Características
colores deseados adicionales
Puntos
Tener en cuenta el orden Líneas
Polígonos
en el que se crean los
Primitivas 2D
objetos, ya que Primitivas I
Primitivas II
visualizamos en orden
Ejercicios
contrario a su creación Tablero de ajedrez
Tangram
1.39
Dibujando Objetos
Una posible implementación para crear la escena pedida es Jhelly Pérez Núñez
glClear(GL_COLOR_BUFFER_BIT);
float x1[] ={-0.8,0.6}, x2[]={-0.6,0.4}, x3[] ={0.3,0.4};

Introducción
float x4[] ={-0.6,-0.4}, x5[]={-0.15,0.15}; x6[]={0.8,0.63}; Píxel
float x7[]={-0.8,0.63}, x8[]={0,0,0}, S1[] = {1.2,1.6}; Vértice

Línea
float S2[] = {0.2,0.3}, S3[] = {0.1,1.2}, S4[] = {0.3,0.3}; Polígono
float c1[] ={0.9,0.6,0.6}, c2[] ={1,1,1}, c3[] ={1,0,0}; Dibujando con

OpenGL
float c4[] ={0.89,0.37,0}; Modo de dibujo
Rectangulo(x1,S1,c1,0,1); Características
adicionales
Rectangulo(x2,S2,c2,0,1); Puntos
Líneas
Rectangulo(x3,S2,c2,0,1); Polígonos
Rectangulo(x4,S3,c3,0,1); Primitivas 2D
Rectangulo(x5,S4,c4,0,1); Primitivas I
Primitivas II
Cuadrado(-0.6,-0.3,0.1,1,0,0);
Ejercicios
Cuadrado(0.5,-0.3,0.1,1,0,0); Tablero de ajedrez
Cuadrado(-0.5,0.35,0.1,0,1,0); Tangram
Cuadrado(0.4,0.35,0.1,0,1,0);
Linea(x6,x7,x8,10,13,2);
1.40
Dibujando Objetos
Ajedrez Geométricos
El ajedrez es un juego entre dos personas, cada una de las cuales Jhelly Pérez Núñez
dispone de 16 piezas móviles que se colocan sobre un tablero

dividido en 64 escaques. Se juega sobre un tablero cuadriculado de
8 × 8 casillas, alternadas en colores blanco y negro, que constituyen
las 64 posibles posiciones para el desarrollo del juego.
Introducción
Al principio del juego cada jugador tiene Píxel
dieciséis piezas: un rey, una dama, dos Vértice

Línea
alfiles, dos caballos, dos torres y ocho Polígono
peones. Se trata de un juego de estrategia Dibujando con

OpenGL
en el que el objetivo es “derrocar” al rey Modo de dibujo
del oponente. Especificando un color
Características
adicionales
Esto se hace amenazando la casilla que Puntos
Líneas
ocupa el rey con alguna de las piezas Polígonos
propias sin que el otro jugador pueda Primitivas 2D
proteger a su rey interponiendo una pieza Primitivas I
Primitivas II
entre su rey y la pieza que lo amenaza,
Ejercicios
mover su rey a un escaque libre o capturar Tablero de ajedrez
a la pieza que lo está amenazando, lo que Tangram
trae como resultado el jaque mate y el fin

de la partida.
1.41
Dibujando Objetos
Tablero de ajedrez Geométricos

Ejercicio 2
Renderizar el siguiente tablero de ajedrez, utilizando las
primitivas, que hemos visto, de forma conveniente
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.42
Dibujando Objetos

Ejercicio 2
primitivas, que hemos visto, de forma conveniente
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.43
Dibujando Objetos

Ejercicio 3
primitivas, que hemos visto, de forma sistematizada
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.44
Dibujando Objetos
Tangram Geométricos
El Tangram es un que juguete surgió en China y se le llamó Jhelly Pérez Núñez
“Chi Chiao Pan”. También se le conoce como Juego de los

siete elementos o Tabla de la sabiduría. Mucho se dice sobre
este ancestral juego, pero realmente no se sabe quién fue su
inventor ni cuándo se creó.
Introducción
Las primeras publicaciones relativas a este juguete datan del Píxel
Vértice
siglo XVIII. Este juego, conocido también como el Línea
Polígono
rompecabezas chino, se hizo tan popular que jugaban con el
Dibujando con
niños y adultos. OpenGL
Modo de dibujo
El Tangram es un juego Características

adicionales
educativo que incentiva la Puntos
Líneas
imaginación de niños y adultos. Polígonos
Es un puzzle que está formado Primitivas 2D

Primitivas I
por varias piezas que pueden Primitivas II
unirse de multitud de maneras, Ejercicios
permitiendo así, la creación de Tablero de ajedrez

Tangram
miles de figuras o imágenes.
1.45
Dibujando Objetos
Dibujando un tangram Geométricos

Ejercicio 4
Renderizar la estructura del tangram, utilizando los modos y
sus características de forma conveniente
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.46
Dibujando Objetos

Ejercicio 5
Renderizar la estructura del tangram, utilizando los modos y
sus características de forma conveniente
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.47
Dibujando Objetos
Ejercicio 6
Ahora practiquemos armando una de las mil y un posibles
figuras, por decir el cisne
Introducción
Píxel
Vértice
Línea
Polígono
Dibujando con
OpenGL
Modo de dibujo
Características
adicionales
Puntos
Líneas
Polígonos
Primitivas 2D
Primitivas I
Primitivas II
Ejercicios
Tablero de ajedrez
Tangram
1.48

Open GL

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Open GL

Cargado por

Copyright:

Formatos disponibles

Dibujando Objetos

Jhelly Pérez Núñez

Mag.Jhelly Pérez Núñez Tangram

Universidad Nacional Mayor de San Marcos

Jhelly Pérez Núñez

Especificando un color Polígono

Puntos Especificando un color

Ejercicios Tablero de ajedrez

Jhelly Pérez Núñez

Cuando se aprende a renderizar cualquier tipo de gráfico en

Básicamente se trabaja con un Vértice

en dicho espacio de color, este píxel Dibujando con

A partir de este concepto simple, es posible producir en el Ejercicios

otras figuras y gráficos.

Jhelly Pérez Núñez

punto flotante, este conjunto de puntos es llamado vertice. Píxel

tridimensionales; es decir los vértices Características

bidimensionales (solo coordenadas X Líneas

e Y ), son asignados de la coordenada Primitivas 2D

Jhelly Pérez Núñez

la version matemática (infinita en ambas direcciones). Píxel

líneas conectadas entre si, o incluso Características

los casos, las líneas son especificadas Líneas

en términos de los vértices de los Primitivas 2D

extremos de cada segmento de linea. Primitivas I

Jhelly Pérez Núñez

Los polígonos, típicamente son Características

coloreados, pero también se pueden Líneas

renderizar como líneas o puntos. Primitivas 2D

Jhelly Pérez Núñez

Jhelly Pérez Núñez

donde Display es la función en la cual codificamos nuestra Introducción

Modo especifica la primitiva que sera creada de los vértices

Jhelly Pérez Núñez

Donde Modo especifica la forma en la que será creada la primitiva de Vértice

cualquiera de las siguientes constantes simbólicas Dibujando con

GL_LINES Trata cada par de vértice como una linea Características

Jhelly Pérez Núñez

Cada triángulo se define (V1 , V2 , V3 ) luego (V2 , V3 , V4 ) Líneas

Jhelly Pérez Núñez

GL_TRIANGLE_FAN Dibuja un grupo conectado de triángulos. Cada

cuadrilátero es definido análogamente a Línea

Jhelly Pérez Núñez

Para especificar un punto dibujado en la paleta 3D, se utiliza la

OpenGL. La función glVertex toma como argumentos de 2 a 4 Píxel

parámetros de tipo numérico, de bytes a dobles. Línea

van a utilizar. Por ejemplo Líneas

glVertex2s(2, 3); Primitivas 2D

glVertex3d(0.0, 0.0, 3.141592); Primitivas II

Jhelly Pérez Núñez

En OpenGL, la descripción de la forma de un objeto que esta siendo

dibujamos los objetos. Hasta que el esquema de color es cambiado Vértice

considerar el siguiente pseudocódigo Modo de dibujo

Jhelly Pérez Núñez

Para establecer un color, utilizamos la instrucción glColor*() la

Esta instrucción es parecida a glVertex*, de igual manera su Polígono

argumentos que va a recibir, por ejemplo Modo de dibujo

glVertex3d(0.0, 0.0, 1.0); Características

glVertex4f(0.5, 0.0, 0.2, 0.5); Puntos

En general los tres primeros argumentos corresponden a las Polígonos

corresponde al parámetro alfa del modelo de color RGBA. Primitivas II

valor de 1.0. El color inicial es (1,1,1,1) correspondiente al Tangram

blanco y puede cambiarse en cualquier momento.