Introducción A Opengl: Facultad De Cs. De La Computación Juan Carlos Conde Ramírez

Introducción a OpenGL Facultad de Cs. de la Computación Juan Carlos Conde Ramírez Computer Graphics

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Contenido

1

Introducción

2

Conceptos

3

Cámara Sintética

4

Arquitectura

5

Funciones y Primitivas

6

Visualización

1 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Contenido

1

Introducción

2

Conceptos

3

Cámara Sintética

4

Arquitectura

5

Funciones y Primitivas

6

Visualización

2 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Objetivo El objetivo principal de esta unidad es comenzar una exploración de las grácas por computadora utilizando el API (Application Programming Interface) de OpenGL como nuestro estándar. Aplicaremos un enfoque de experimento-discusión-repetición donde se debe ejecutar el código de los ejemplos y preguntar lo que se ve. Obtendremos así una comprensión no sólo de las funciones de la API, sino de los conceptos subyacentes a las grácas por computadora. En particular, profundizaremos en dos ideas: 1. El modelo de la cámara sintética para trabajar con escenas 3D 2. El enfoque de aproximación de objetos complejos, usando primitivas geométricas como líneas, circulos, triángulos, esferas, etc.

3 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

OpenGL parte 1

OpenGL es un estándar creado por Silicon Graphics en el año 1992 para el diseño de una librería 2D/3D portable. Actualmente es una de las tecnologías más empleadas en el diseño de aplicaciones 3D. Se divide en tres partes funcionales: I I I

Librería OpenGL - Funciones de dibujado Librería GLU (OpenGL Utility Library) - Acceso rápido a funciones de la librería de OpenGL a travéz se comandos de bajo nivel. Librería GLUT (OpenGL Utility Tolkit) proporciona una interfaz independiente de la plataforma para crear aplicaciones de ventanas totalmente portables.

4 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Librería GLUT

Además de las 3 librerías anteriores, se tienen las siguientes variantes: I I

Librería GLX (OpenGL Extension to the X Window System) - Acceso a OpenGL para interactuar con un sistema de ventanas X Window. Librería GLAUX (OpenGL Auxiliar library) - Muy parecida a GLUT, es la que Microsoft ha desarrollado para Windows. Mantiene practicamente la misma estructura que la GLUT con el defecto de que solo sirve para Windows, mientras que GLUT sirve para cualquier plataforma.

5 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

OpenGL parte 2

Al mismo tiempo OpenGL es la interfaz de software del hardware gráco. Es un motor 3D cuyas rutinas están integradas en tarjetas grácas 3D. Basada en SO's y lenguajes de SGI (Silicon Graphics Inc.), es perfectamente portable a otros lenguajes como C, C++, donde las librerías dinámicas permiten usarlo bajo Windows.

6 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Contenido

1

Introducción

2

Conceptos

3

Cámara Sintética

4

Arquitectura

5

Funciones y Primitivas

6

Visualización

7 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Preeliminares parte 1

I

I

I

I

I

OpenGL es una máquina de estados. Cuando se activan o conguran varios estados de la máquina, sus efectos perduran hasta que sean desactivados. Todos los estados tienen un valor por defecto. Existen estados que funcionan como booleanos. Estos se activan con las funciones glEnable() y glDisable(). La mayor parte de las implementaciones de OpenGL siguen un mismo orden en sus operaciones. Utiliza una serie de procesos base, que en su conjunto crean lo que se denomina "pipeline gráco".

8 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Preeliminares parte 2

I

Un sistema gráco típico se compone de los siguientes elementos físicos:

9 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Preeliminares

Elementos de un Sistema Gráco

I

I

Entradas: Todo aquello que nuestro programa ha calculado para dibujar. Es el nuevo estado de nuestro mundo después de algún evento que lo ha hecho cambiar. Ejemplo: La cámara se ha movido o alejado de la escena.

CPU: Administra la comunicación entre todos los módulos. Realiza operaciones con ayuda de una(s) ALU(s) y consulta la memoria cuando sea necesario.

I

Memoria: Indispensable en grácas, nos interesa una cierta parte de la memoria

I

Frame buer: Almacena todo aquello que debe ser dibujado antes de presentar

llamada el "frame buer".

la información por pantalla. Nuestro programa OpenGL escribe en esta área de memoria.

10 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Preeliminares

Elementos de un Sistema Gráco

I

Look up table (LUT): Contiene todos los colores disponibles en nuestro sistema.

I

Convertidor D/A: Convierte la información contenida en el frame buer a nivel

I

Salidas: Después del convertidor, visualización en nuestra pantalla.

I

Pixel: Es la unidad mínima de pantalla, de manera que el conglomerado de pixeles

A menudo nos referimos a la paleta. En general se trabaja con (RGB).

de bits es digital en analógica para poder ser procesada por un CRT (tubo de rayos catódicos) y proyectada en la pantalla.

con sus colores da lugar a una imagen.

11 / 70

Conceptos

Introducción

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Anotaciones

I

I

I

El frame buer se caracteriza por su resolución y por su profundidad. La resolución viene dada por el producto ancho x alto, es decir el número de renglones multiplicado por el número de columnas análogamente a las resoluciones que nuestro monitor puede tener (640 x 480, 800 x 600, ...). La profundidad es el número de bits que utilizamos para guardar la información de cada píxel. Este número depende de la cantidad de colores que deseamos mostrar en nuestra aplicación.

12 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Caso de Estudio

Si deseamos color real, necesitaremos mostrar 16,7 millones de colores simultáneamente que es la capacidad aproximada de nuestro sistema visual. Si suponemos una resolución de 800 x 600 píxeles; 800 píxeles/la x 600 las x 24 bits/píxel = 1.37 Megabytes de memoria para el frame buer. Dado que el color real implica 256 posibles valores de rojo, 256 de verde y 256 de azul por píxel, esto implica un byte/píxel para cada una de estas componentes, es decir, 3 bytes por píxel. La librería OpenGL, por si sola se encarga de reservar este espacio de memoria. Por lo tanto, esto será totalmente transparente y no deberá preocuparnos.

13 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Ejemplos en OpenGL

14 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Contenido

1

Introducción

2

Conceptos

3

Cámara Sintética

4

Arquitectura

5

Funciones y Primitivas

6

Visualización

15 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

El módelo de la cámara parte 1

Se trata de imaginar un objeto situado en un determinado lugar y lmado por una cámara. OpenGL utiliza este modelo sintético para dibujar una escena que puede ser 3D pero su proyección en un plano es 2D (plano de proyección). Observamos un mundo 3D desde una determinada posición. La posición se llama centro de proyección.

16 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

El módelo de la cámara parte 2

El modelo se compone de los siguientes elementos: I

I

I

LUCES. Que iluminen nuestro mundo 3D. Será necesario especicar su localización, su intensidad y sus colores. CÁMARA. Que "lme" nuestro mundo y lo muestre en la pantalla. Esta cámara es nuestro punto de vista del mundo a cada momento. Se caracteriza por su posición en el mundo, su orientación y su apertura o "campo visual". El campo visual es la "cantidad" de mundo que la cámara alcanza a ver. OBJETOS. Que formen parte de nuestro mundo y que precisamente serán los lmados por nuestra cámara. Se caracterizan por sus atributos de color, material, grado de transparencia, etc.

17 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

QUIZ

18 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

QUIZ Pistas: 1. Conjunto de subrutinas, funciones y procedimientos (o métodos, en la programación orientada a objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción. Son usadas generalmente en las bibliotecas. 2. Estandar de software para la generación de grácos creado por Silicon Graphics. 3. Librería de acceso rápido a funciones de OpenGL usando comandos de bajo nivel 4. Librería que proporciona una interfaz independiente de la plataforma para crear aplicaciones portables basadas en ventanas. 5. Dado que los efectos de los cambios efectuados con OpenGL perduran hasta desactivarlos, se considera a OpenGL como una máquina de... 6. Función de OpenGL para activar estados. 7. Función de OpenGL para desactivar estados. 8. Es un tipo de memoria que almacena todo lo que va a ser dibujado antes de presentar la información en pantalla. 9. Unidad mínima de pantalla de manera que un conglomerado de este o estos y sus colores dan lugar a una imagen. 10. Junto con la profunidad es una de las características de este. 11. Es un modelo sintético para dibujar una escena que puede ser 2D o 3D

19 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Contenido

1

Introducción

2

Conceptos

3

Cámara Sintética

4

Arquitectura

5

Funciones y Primitivas

6

Visualización

20 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Pipeline gráco parte 1

La geometría que deseamos dibujar será la entrada de nuestro pipeline gráco y como salida tendremos una imagen en pantalla.

21 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Pipeline gráco parte 2

Objeto geométrico:

Nuestro mundo se compone de puntos, líneas, polígonos, etc. Inicialmente estos objetos pueden ser movibles o jos, deformables o rígidos, y por lo tanto podemos trasladarlos, rotarlos y escalarlos antes de dibujarlos en pantalla. Transformación del modelo:

Este modulo se encarga de trasladar, rotar, escalar e incluso torcer cualquier objeto para que sea dibujado en pantalla tal y como debe estar colocado en el mundo. OpenGL realiza estas funciones multiplicando nuestra geometría (vértices) por varias matrices, cada una de las cuales implementa un proceso (rotar, trasladar, etc.). Se usan las funciones de OpenGL para "crear" estas matrices y operarlas con nuestra geometría. Coordenadas del mundo:

Después de transformas los vértices, ya conocemos las posiciones de todos los objetos en nuestro mundo. No son relativas a la cámara, más bien se reeren a un sistema de coordenadas que denimos única y exclusivamente para el mundo creado.

22 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Pipeline gráco parte 2

Transformación de visión:

Necesitamos saber "cómo" se ven esos objetos posicionados correctamente en el mundo desde nuestra cámara. Por lo tanto, los "iluminamos" para que sean visibles y tomamos sus posiciones tal y como se ven desde la cámara. Coordenadas de la cámara:

Después de aplicar luces, ya sabemos cuáles son las coordenadas de todos los objetos respecto a nuestra cámara, es decir, como los vemos nosotros desde nuestra posición en el mundo. Clipping:

Este consiste en recortar (ocultar) todo aquello que "esta" pero "no se ve" desde la cámara. Es decir, todo aquello que la cámara no puede ver, porque no entra en su ángulo de visión, se elimina.

Proyección: Pasamos de coordenadas 3D del mundo a coordenadas 2D de nuestro plano de proyección. DISC (Device independent screen coordinates):

Después se proyectan las coordenadas de pantalla independientemente de dispositivo. 23 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Pipeline gráco parte 3

Hasta este punto las coordenadas calculadas todavía no se han asociado a ningún tipo de pantalla o monitor. Esto para nosotros es transparente, no lo controlamos directamente. Se trata de asociar la imagen recortada 2D que se encuentra en el frame buer con los pixeles de la pantalla. Según sea la resolución de la pantalla, un punto de la escena ocupará mas o menos pixeles Rasterización:

O también llamado scan conversion. Se asocian todos nuestros puntos a píxeles en pantalla. Es un proceso físico realizado por el dispositivo de salida. Imagen de la pantalla:

Aquí termina nuestro proceso. Ya tenemos la imagen de lo que nuestra cámara ve en el monitor.

24 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Pipeline gráco parte 4

25 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Pipeline de renderizado parte 1

Por un lado tenemos el "vertex data", que describe los objetos de nuestra escena, y por el otro, el "píxel data", que describe las propiedades de la escena que se aplican sobre la imagen tal y como se representan en el buer.

26 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Pipeline de renderizado parte 2

Ambas se pueden guardar en una "display list", que es un conjunto de operaciones que se guardan para ser ejecutadas en cualquier momento. Sobre el "vertex data" se pueden aplicar "evaluators", para describir curvas o supercies parametrizadas mediante puntos de control. Luego se aplicaran las "per-vertex operations", que convierten los vértices en primitivas. Aquí es donde se aplican las transformaciones geométricas como rotaciones, traslaciones, etc., por cada vértice. En la sección de "primitive assembly", se hace clipping de lo que queda fuera del plano de proyección, entre otros. Por la parte de "píxel data", tenemos las "píxel operations". Aquí los pixeles son desempaquetados desde algún array del sistema (como el frame buer ) y tratados (escalados, etc.).

27 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Pipeline de renderizado parte 3

Luego, si estamos tratando con texturas, se preparan en la sección "texture assembly". Ambos caminos convergen en la "Rasterization", donde son convertidos en fragmentos. Cada fragmento será un píxel del frame buer. Aquí es donde se tiene en cuenta el modelo de sombreado, la anchura de las líneas, o el antialiassing. En la última etapa, las "per-fragmet operations", es donde se preparan los texels (elementos de texturas) para ser aplicados a cada píxel, la niebla (fog ), el zbuering, el blending, etc. Todas estas operaciones desembocan en el frame buer, donde obtenemos el render nal.

28 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Contenido

1

Introducción

2

Conceptos

3

Cámara Sintética

4

Arquitectura

5

Funciones y Primitivas

6

Visualización

29 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Sintaxis de las funciones Todos los nombres de funciones de OpenGL siguen una convención en cuanto a sintaxis, que es: <Tipos argumentos (opcional)>

donde: I I I

Prejo indica la librería de la que procede. Puede ser glut, gl, aux, glu. Raíz indica qué realiza la función. No. Argumentos y Tipos argumentos como vemos son opcionales. Los posibles tipos se verán posteriormente.

30 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Tipos de datos de OpenGL OpenGL incorpora tipos de datos propios para facilitar la portabilidad. Los tipos de datos con su correspondencia en C y el sujo que se suele utilizar habitualmente.

31 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 1

El diseño en OpenGL se realiza utilizando tres primitivas básicas: y polígonos. Todas ellas se basan en un elemento fundamental:

puntos, líneas

los vértices.

La función de creación de vértices es glVertex(). Esta función tiene alrededor de 25 versiones en función del número y tipo de los argumentos. Algunas versiones más utilizadas son: I I I

void glVertex2f(GLfloat x, GLfloat y) void glVertex3f(GLfloat x, GLfloat y, GLfloat z) void glVertex4f(GLfloat x, GLfloat y, GLfloat z, GLfloat w)

x, y, z son las coordenadas de la posición del vértice. Si z no se especica vale 0. W es la cuarta coordenada cuando se utilizan coordenadas homogéneas, si no se especica vale 1.

32 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 2

I

La denición de primitivas inicia siempre con la función glBegin y naliza con glEnd. Entre estas dos funciones debemos denir los vértices que forman la primitiva. void glBegin(GLenum primitiva) - Marca el inicio de un conjunto de vértices que denen una o varias primitivas. primitiva: tipo de primitiva que iniciamos. Puede valer... GL_POINTS GL_LINES GL_TRIANGLES GL_LINE_LOOP GL_TRIANGLE_FAN GL_QUADS GL_QUAD_STRIP GL_POLYGON

puntos líneas triángulos polilíneas cerradas triángulos alrededor de un punto cuadriláteros cuadriláteros encadenados polígono convexo con cualquier número de vértices

33 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 3

I

I

I

void glEnd(void) Marca el nal de la última primitiva que se haya iniciado con glBegin.

Entre las sentencias glBegin y glEnd puede aparecer código adicional para el cálculo de los vértices y para jar algunos atributos de las primitivas. Sólo las siguientes llamadas a funciones OpenGL se permiten dentro del bloque glBegin-glEnd: * * * * *

glVertex glTextCoord glNormal glCallList glEdgeFlag

* * * * *

glColor glIndex glMaterial glCallLists glEvalCoord

34 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 4

35 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 5

I

Los puntos son las primitivas más sencillas. Se pueden denir varios puntos dentro de un solo bloque. glBegin(GL_POINTS); glVertex3f(0.0, 0.0, 0.0); glVertex3f(50.0, 50.0, 50.0); glEnd()

I

Uno de los atributos de los puntos que se puede alterar es su tamaño. La siguiente función permite cambiar el tamaño del punto y tiene que ser llamada fuera del bloque. void glPointSize(GLfloat tamaño)

tamaño: diámetro en píxeles del punto. I

La primitiva para el diseño de líneas permite trazar segmentos de línea independientes entre dos puntos sucesivos. El número de puntos debe ser par (si es impar, se ignora el último). 36 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 6

I

I

En el caso de poli-líneas , los segmentos de líneas se encuentran unidos unos con otros. En el caso de poli-líneas cerradas, se traza un segmento entre los puntos inicial y nal para cerrarla. Existe una función que nos permite alterar el grosor de la línea. Esta función se debe llamar fuera del bloque glBegin-glEnd. void glLineWidth(GLfloat grosor) grosor: grosor en píxeles de la línea.

I

El orden de denición de los vértices es fundamental, OpenGL utiliza la orientación de los mismos para determinar las caras delantera y trasera.

37 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 7

I

I

I

I

La función de creación de triángulos se utiliza para denir triángulos independientes. Estos triángulos deben denirse de tal manera que la cara delantera quede en sentido anti-horario. Para los triángulos encadenados, cada nuevo punto sirve para incorporar un nuevo triángulo al conjunto. No es necesario tener en cuenta el sentido, OpenGL lo mantiene. Para los triángulos que giran alrededor de un vértice, el vértice inicial sirve como central del conjunto y también OpenGL mantiene el sentido. Los triángulos independientes generan caras diferentes, mientras que los encadenados forman una única cara

38 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 8

glBegin(GL_TRIANGLES); glVertex3f(0, 0, 0); glVertex3f(50, 0, 0); glVertex3f(25, 50, 0); glVertex3f(25, 50, 0); glVertex3f(75, 50, 0); glVertex3f(50, 100, 0); glEnd();

39 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 9

glBegin(GL_TRIANGLES_STRIP); glVertex3f(0, 0, 0); glVertex3f(50, 0, 0); glVertex3f(25, 50, 0); glVertex3f(75, 50, 0); glVertex3f(50, 100, 0); glEnd();

40 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 10

glBegin(GL_TRIANGLES_FAN); glVertex3f(25, 50, 0); glVertex3f(0, 0, 0); glVertex3f(50, 0, 0); glVertex3f(75, 50, 0); glVertex3f(50, 100, 0); glEnd();

41 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 11

42 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 12

I

I

El caso de los cuadriláteros es muy similar al de los triángulos. Se pueden denir cuadriláteros independientes o encadenados. En ambos casos debe mantenerse la orientación horaria, aunque en el caso de los encadenados, esto lo realiza OpenGL. glBegin(GL_QUADS); glVertex3f(0, 0, 0); glVertex3f(0, 50, 0); glVertex3f(50, 50, 0); glVertex3f(50, 0, 0); glEnd();

43 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 13

glBegin(GL_QUAD_STRIP); glVertex3f(0, 0, 0); glVertex3f(0, 50, 0); glVertex3f(50, 50, 0); glVertex3f(50, 0, 0); glVertex3f(100, 50, 0); glVertex3f(100, 0, 0); glEnd();

I

OpenGL permite generar polígonos con cualquier número de vértices. La ordenación de éstos es horaria. 44 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 14

I

Todos los polígonos denidos en OpenGL, independientemente del número de lados que tengan, deben cumplir tres condiciones: a) deben ser planares b) sus aristas no pueden cortarse entre sí c) deben ser convexos

I

Los triángulos son los polígonos más utilizados, pues cumplen todas las condiciones, cualquier polígono puede descomponerse en un conjunto de triángulos glBegin(GL_POLYGON); glVertex3f(0, 0, 0); glVertex3f(25, 50, 0); glVertex3f(50, 100, 0); glVertex3f(75, 50, 0); glVertex3f(50, 0, 0); glEnd(); 45 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Primitivas de diseño parte 15

46 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

QUIZ

Arquitectura, Funciones y Primitivas

47 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

QUIZ

Arquitectura, Funciones y Primitivas

48 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Librerías de OpenGL

TAREA INVESTIGACIÓN. Investigar qué signica el concepto de "anti-liassing" en el contexto de los grácos por computadora. Además descargar, probar y comentar los dos primeros códigos de ejemplo. Se deberá hacer lo siguiente en base a esto: 1. Comentar las líneas de código 2. Investigar el algoritmo de la línea de Bresenham *La investigación deberá presentarse escrito a mano y con lapicero. Además del contenido se evaluará la presentación para contar como tarea completa.

49 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Contenido

1

Introducción

2

Conceptos

3

Cámara Sintética

4

Arquitectura

5

Funciones y Primitivas

6

Visualización

50 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Visualización de poligonos parte 1

I

I

I

I

Hemos visto como denir polígonos, lo que sigue es saber como se representan en la pantalla. La ordenación de los vértices en el polígono marca la interioridad o exterioridad de la cara que dene. Por defecto, cuando estamos en la cara exterior del objeto, los vértices aparecen en sentido anti-horario; cuando estamos en el interior en sentido anti-horario. La función glFrontFace puede alterar el sentido. void glFrontFace(Glenum modo) modo: sentido que deben tener los vértices cuando se miran desde el exterior GL_CW GL_CCW

sentido horario sentido anti-horario

51 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Visualización de polígonos parte 2

I

Los polígonos pueden visualizarse de tres modos: Modo sólido (rellenados con el color actual). Modo alambre (sólo se visualizan las aristas). Modo puntos (sólo se visualizan los vértices).

I

I

Es posible visualizar la parte exterior y la parte interior de los polígonos de dos modos diferentes. La función que cambia el modo de visualización es glPolygonMode.

52 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Visualización de polígonos parte 3

I

Los polígonos que se denan a continuación de esta función, se visualizarán en ese modo. void glPolygonMode(Glenum cara, Glenum modo) cara: indica la cara a la que aplicamos el modo de visualización. Puede valer... GL_FRONT GL_BACK GL_FRONT_AND_BACK

cara exterior cara interior ambas caras

modo: indica el modo de visualización que se aplica. Puede valer... GL_FILL GL_LINE GL_POINT

modo sólido, es el modo por default modo alambre modo puntos

53 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Visualización de polígonos parte 3

I

I

I

Podemos escoger que ciertas aristas del objeto no se visualicen en modo alambre. Las aristas que hemos añadido para formar los triángulos no deben visualizarse, puesto que no forman parte del polígono. La función glEdgeFlag, nos permite ocultar ciertas aristas y vértices en modo alambre o en modo puntos (no afecta cuando visualizamos en modo sólido). La función se utiliza en la denición del polígono, es decir dentro del bloque glBegin-glEnd e indica que se altera la forma de visualizar las aristas que unen los vértices que se denen a continuación.

54 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Visualización de polígonos parte 3

I

La función afecta a todos los puntos siguientes hasta que se cambie de nuevo. void glEdgeFlag (Glboolean flag) void glEdgeFlagv(const Glboolean *flag) flag: vale true cuando la arista forma parte del polígono, es decir, cuando debe visualizarse. Vale false cuando no debe visualizarse.

55 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Color parte 1

I

I

I

I

I

OpenGL incorpora dos modelos de color: modo RGBA y modo índices de color. En el primer modelo, el color se dene a partir de 3 valores de color (correspondientes al rojo, verde y azul), y opcionalmente un valor alfa (translucidez del color). En el modo de índices de color, los colores se encuentran ordenados y se accede a ellos, a través de un único valor que se corresponde con un índice asociado al color. El modo RGBA es más versátil y el más utilizado. Los colores en el modo RGB (no detallamos la componente alfa) se pueden representar utilizando un cubo de lado 1, donde cada eje representa uno de los tres colores.

56 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Color parte 2

I

I

I

Los demás vértices representan los colores amarillo, magenta, cian, blanco y negro. Cada punto en el interior del cubo representa un color, y sus coordenadas indican la cantidad de rojo verde y azul que lo componen. Sobre la línea que une dos colores (dos puntos) se encuentra toda la graduación existente entre los dos. 57 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Color parte 3

I

I

I

sss

Para seleccionar un color, se utiliza la función glColor, cuyos parámetros son los valores RGB del color. Un vez seleccionado el color, todo lo que se dibuje será de ese color, hasta que se cambie a otro. Esta función tiene varias versiones, según se utilice la componente alfa y según el tipo de argumentos. void void void void

glColor3f (GLfloat red, GLfloat green, GLfloat blue); glColor4f(GLfloat red, GLfloat green, GLfloat blue, GLfloat alfa); glColor3ub(GLubyte red, GLubyte green, GLubyte blue); glColor4ub(GLubyte red, GLubyte green, GLubyte blue, GLubyte alfa);

red, green, blue:

valores para el rojo, verde y azul. En las versiones de tipo real toman valores en el intervalo [0,1]; en las de tipo entero en [0,255]. El valor alfa para la componente de translucidez toma los mismos intervalos que las 3 componentes anteriores, según sea el caso.

58 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Color parte

I

I

I

La cantidad de colores que la computadora es capaz de representar, depende de la tarjeta de video. Si al utilizar la función glColor seleccionamos un color del que no dispone nuestro sistema, OpenGL se encarga de seleccionar en su lugar el color más cercano al elegido. Para colorear el fondo, OpenGL dispone de las siguientes funciones: void glClearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alfa)

red, green, blue, alfa son las cuatro componentes del color. GLclampf es un tipo real, así que toma valores en el intervalo [0,1]

Esta función indica el color con que debe inicializarse el buer de color.

void glClear(GLuint bits)

bits indica el elemento que se inicializa.

Para inicializar el buer de color debemos utilizar el valor GL_COLOR_BUFFER_BIT.

59 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Color parte 5

I

Puesto que habitualmente tanto el buer de color como el de profundidad deben ser inicializados cada vez que se redibuja la escena, puede llamarse una sola vez a la función glClear utilizando un conector tipo OR: glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT)

I

I

I

La función glColor sirve para seleccionar el color con que se dibujan todos los elementos que se diseñan a continuación. Cuando denimos una primitiva de diseño, el color se asigna a cada uno de sus vértices y no a la primitiva completa. Puede haber primitivas como líneas o polígonos en las que cada vértice se dibuje de un color.

60 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Mi primer programa con OpenGL

61 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Ventana OpenGL y coordenadas de pantalla

I

I

I

Ya hemos tenido la ocasión de utilizar el comando glutInitWindowSize(w, h), que dene el tamaño de la ventana de OpenGL con anchura w y altura h, en pixeles. Un comando similar es glutInitWindowPosition(x, y) que sirve para especicar la ubicación (x, y) de la esquina superior izquierda de la ventana de OpenGL en la pantalla de la computadora. El origen (0, 0) de la pantalla resulta que está en la esquina superior izquierda, mientras que el aumento de la dirección de su eje x es horizontal hacia la derecha y la de su eje y es verticalmente hacia abajo y, además, una unidad a lo largo de cualquiera de los ejes es absoluta y representa un pixel.

62 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Ventana OpenGL y coordenadas de pantalla

63 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Mi primer Figura parte 1

# include // Rutina de dibujado (display) void drawScene(void) { glOrtho(0.0, 100.0, 0.0, 100.0, -1.0, 1.0); glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0, 0.0, 0.0); glBegin(GL_POLYGON); glVertex3f(20.0, 20.0, 0.0); glVertex3f(80.0, 20.0, 0.0); glVertex3f(80.0, 80.0, 0.0); glVertex3f(20.0, 80.0, 0.0); glEnd(); glFlush(); } // Rutina de inicialización void setup(void) { glClearColor(1.0, 1.0, 1.0, 0.0); }

64 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Mi primer Figura parte 2

// OpenGL window reshape routine. void resize(int w, int h) { glViewport(0, 0, (GLsizei)w, (GLsizei)h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void keyInput(unsigned char key, int x, int y) { switch(key) { // Presiona ESC para EXIT case 27: exit(0); break; default: break; } }

65 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Mi primer Figura parte 3

int main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowSize(500, 500); glutInitWindowPosition(100, 100); glutCreateWindow("Cuadrado"); setup(); glutDisplayFunc(drawScene); glutReshapeFunc(resize); glutKeyboardFunc(keyInput); glutMainLoop(); return 0; }

66 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

¾Cómo construir otro tipo de formas?

67 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

¾Y en 3D?

68 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

Librerías de OpenGL

TAREA LECTURA. Realizar una lectura de comprensión del documento PDF titulado "GLUT" disponible en el directorio Web del curso y realizar un breve resumen* (min. 1 cuartilla) que responda a las siguientes preguntas: 1. 2. 3. 4. 5.

¾Qué es GLUT? ¾Cuál es su propósito? ¾Qué funciones especícas cumple? ¾Qué consideraciones especiales hay que tener en cuenta? En base a la descripción de algunas funciones y la presentación de los ejemplos, en tus palabras ¾Cómo es la forma de implementación de este tipo de código en comparación con lo que conoces hasta ahora de programación?

*El resumen deberá presentarse escrito a mano y con lapicero. Además del contenido se evaluará la presentación para contar como tarea completa.

69 / 70

Introducción

Conceptos

Cámara Sintética

Arquitectura

Funciones y Primitivas

Visualización

El único lugar en el que Éxito viene antes que Trabajo es en el diccionario

[Vidal Sassoon]

Juan Carlos Conde Ramírez

[email protected] 70 / 70