Cómo saldremos. De aquí saldremos: O de plano es que que no entendimos nada

(1)

Cómo saldremos

De aquí saldremos: De aquí saldremos: Flipando Flipando Alucinando Alucinando

Con la mirada perdida en el infinito Con la mirada perdida en el infinito

Queriendo simular o graficar todo Queriendo simular o graficar todo

(2)

Objetivos

En este curso se introducirá a los participantes a las En este curso se introducirá a los participantes a las

técnicas básicas para modelar en 2D y 3D con técnicas básicas para modelar en 2D y 3D con

OpenGL, incluyendo animación, manejo de luces, OpenGL, incluyendo animación, manejo de luces,

colores y materiales colores y materiales

En estas 40 horas: estarán listos para ponerse a En estas 40 horas: estarán listos para ponerse a

programar aplicaciones 2D y 3D interactivas. programar aplicaciones 2D y 3D interactivas.

Se les presentará el software libre necesario y se les Se les presentará el software libre necesario y se les facilitará plantillas para el desarrollo de aplicaciones facilitará plantillas para el desarrollo de aplicaciones

(3)

Panorama de

(4)

1.1 El entorno gráfico

Cada sistema operativo ofrecía sus gráficas por Cada sistema operativo ofrecía sus gráficas por

software software

El HW para gráficas requería sus propias bibliotecas El HW para gráficas requería sus propias bibliotecas

(5)

1.2 Soluciones

GKS GKS

Primera plataforma, introducida en 1977. Primera plataforma, introducida en 1977. PHIGS

PHIGS

Plataforma gráfica montada sobre Xwindow, surgida a Plataforma gráfica montada sobre Xwindow, surgida a principios de los 80’s, disponible de manera separada en principios de los 80’s, disponible de manera separada en sistemas DEC, Sun y otros.

sistemas DEC, Sun y otros.

Estandarizada en ANSI, FIPS e ISO en 1989. Estandarizada en ANSI, FIPS e ISO en 1989. OpenGL

OpenGL

Direct3D, lanzado por Microsoft en 1995, siendo el principal Direct3D, lanzado por Microsoft en 1995, siendo el principal competidor de OpenGL, pero limitado a plataformas de MS. competidor de OpenGL, pero limitado a plataformas de MS.

VRML VRML

Diseñado para ser utilizado en la Web, con éxito limitado. Diseñado para ser utilizado en la Web, con éxito limitado. WebGL

WebGL

(6)

2. Historia de OpenGL

Principios de los 90s: IRIS GL, desarrollado para las Principios de los 90s: IRIS GL, desarrollado para las

estaciones de trabajo de Silicon Graphics (SGI), estaciones de trabajo de Silicon Graphics (SGI),

compitiendo con PHIGS y superándolo. compitiendo con PHIGS y superándolo.

En 1992 SGI decidió convertirlo en estándar abierto para En 1992 SGI decidió convertirlo en estándar abierto para

establecer su influencia en el mercado (abierto no significa establecer su influencia en el mercado (abierto no significa

gratuito ni código abierto). gratuito ni código abierto).

Se delegó las funciones para ventanas al sistema oerativo. Se delegó las funciones para ventanas al sistema oerativo.

Nació OpenGL. Nació OpenGL.

En 1993 surge Mesa, que es la versión abierta y libre de En 1993 surge Mesa, que es la versión abierta y libre de

(7)

(8)

3.1 ¿Qué es OpenGL?

OpenGL es una especificación estándar que define un API OpenGL es una especificación estándar que define un API

para el desarrollo de aplicaciones para generar gráficas 2D para el desarrollo de aplicaciones para generar gráficas 2D

y 3D. y 3D.

Soporta: Soporta:

Diferentes plataformas (Linux, Mac, Windows,etc.) Diferentes plataformas (Linux, Mac, Windows,etc.) Diferentes lenguajes (C,C++,Pascal,Java,etc.)

Diferentes lenguajes (C,C++,Pascal,Java,etc.) Diferentes compiladores

Diferentes compiladores

Diferentes tipos de computadoras (PCs, PDAs, celulares,etc.) Diferentes tipos de computadoras (PCs, PDAs, celulares,etc.)

(9)

3.2 Beneficios de

OpenGL

Permite la producción de código ejecutable Permite la producción de código ejecutable

independiente (pero requiere que exista soporte independiente (pero requiere que exista soporte

nativo para OpenGL, ya sea en hardware o software) nativo para OpenGL, ya sea en hardware o software)

Muy universal Muy universal

(10)

4. Arquitectura de

bibliotecas de apoyo en

OpenGL

(11)

4.1 Componentes

adicionales a OpenGL

GLU GLU

Utilerías diversas complementarias Utilerías diversas complementarias Manejadores de ventanas Manejadores de ventanas GLUT GLUT Glut Glut OpenGlut OpenGlut FreeGlut FreeGlut GLAUX GLAUX Más elementos interactivos Más elementos interactivos

GLUI: Botones, controles, barras, etc. GLUI: Botones, controles, barras, etc.

OpenAU: Para manejo de sonidos. OpenAU: Para manejo de sonidos.

(12)

4.2 Herramientas del

curso

Conocimientos previos Conocimientos previos Compilador Compilador Bibliotecas Bibliotecas

Computadora con Windows Computadora con Windows

No olvidar que OpenGL es abierto en el sentido de que No olvidar que OpenGL es abierto en el sentido de que está disponible para muchas plataformas, y casi con el está disponible para muchas plataformas, y casi con el

(13)

4.3 Compilador para

este taller:

DevC++ DevC++

Gratuito y abierto, aunque ya no se esté actualizando. Gratuito y abierto, aunque ya no se esté actualizando.

Fácil de instalar y usar (existe versión para usar en Fácil de instalar y usar (existe versión para usar en

memoria USB). memoria USB).

Módulos fáciles de incorporar e incluyen plantillas. Módulos fáciles de incorporar e incluyen plantillas.

También existe para Linux, pero aún no es muy También existe para Linux, pero aún no es muy

(14)

4.4 Conocimientos

previos

Programación en lenguaje C Programación en lenguaje C

OpenGL está disponible para casi cualquier lenguaje, OpenGL está disponible para casi cualquier lenguaje,

pero nos basaremos en éste, por ser poderoso. pero nos basaremos en éste, por ser poderoso.

Geometría y trigonometría Geometría y trigonometría

Imaginación espacial Imaginación espacial

Parece broma, pero a mucha gente le cuesta trabajo Parece broma, pero a mucha gente le cuesta trabajo

(15)

(16)

5.1 Estructura para el

S.O.

Se requiere una estructura muy específica para Se requiere una estructura muy específica para

interactuar con el Sistema Operativo, ya que depende interactuar con el Sistema Operativo, ya que depende

del sistema de ventanas, entradas y salidas del sistema de ventanas, entradas y salidas

El Sistema Operativo debe informar al programa de El Sistema Operativo debe informar al programa de

eventos: eventos:

Cambio de tamaño de la ventana Cambio de tamaño de la ventana Es necesario redibujar la ventana Es necesario redibujar la ventana

El usuario hizo click El usuario hizo click

El usuario movió el ratón El usuario movió el ratón

(17)

5.1 Estructura general

Función main: Función main: Inicializar ventana Inicializar ventana Establecer modos Establecer modos Crear ventana(s) Crear ventana(s) Establecer callbacks Establecer callbacks (mensajes del sistema) (mensajes del sistema) Iniciar ciclo de operación Iniciar ciclo de operación

Función display: Función display:

(18)

display

Se invoca cada vez que se necesita una imagen fresca Se invoca cada vez que se necesita una imagen fresca

glClear glClear

Borrar pantalla Borrar pantalla

Código o funciones para dibujar Código o funciones para dibujar

glFlush glFlush

(19)

reshape

Se ejecuta cuando se crea una ventana o cambia de Se ejecuta cuando se crea una ventana o cambia de

tamaño tamaño

Recibe como parámetros las dimensiones de la Recibe como parámetros las dimensiones de la

ventana ventana

(20)

5.2 ¡Un esqueleto!

Se les ha proporcionado un programa OpenGL Se les ha proporcionado un programa OpenGL

(21)

6. Modelado 2D y 3D

(22)

6.1 Modelado 2D

Todas las operaciones se hacen en 2 dimensiones Todas las operaciones se hacen en 2 dimensiones

En Reshape (preferentemente) se debe especificar: En Reshape (preferentemente) se debe especificar:

gluOrtho2D( izq, der, sup, inf ) gluOrtho2D( izq, der, sup, inf )

Se utilizan funciones para 2D Se utilizan funciones para 2D

De ser necesario se pueden utilizar 3D, poniendo en 0 el De ser necesario se pueden utilizar 3D, poniendo en 0 el valor para Z.

(23)

6.2 Modelado 3D

Las operaciones se realizan en 3 dimensiones Las operaciones se realizan en 3 dimensiones

En Reshape (preferentemente) se debe especificar: En Reshape (preferentemente) se debe especificar: gluPerspective( ángulo, aspecto, dist-min, dist-max ) gluPerspective( ángulo, aspecto, dist-min, dist-max ) Angulo: Es el ángulo de visión

Angulo: Es el ángulo de visión

Entre más estrecho, abarca menos, pero todo aparece más grande Entre más estrecho, abarca menos, pero todo aparece más grande Razón de aspecto: Relación entre ancho y alto

Razón de aspecto: Relación entre ancho y alto Aspecto=1: cuadrado

Aspecto=1: cuadrado

Distancia mínima: Objetos más cercanos serán ignorados Distancia mínima: Objetos más cercanos serán ignorados

(24)

7. Primitivas

(25)

7.1 Colores planos (o

hasta degradados)

Para definir color (sin iluminación): Para definir color (sin iluminación):

static GLfloat

static GLfloat rojo[] = { 1.0, 0.0, 0.0 };rojo[] = { 1.0, 0.0, 0.0 }; glColor3fv ( rojo );

glColor3fv ( rojo );

(26)

(27)

7.3 Líneas

glBegin( GL_LINES ); glBegin( GL_LINES ); glVertex2i( 100, 100 );glVertex2i( 100, 100 ); glVertex2i( 100, 500 );glVertex2i( 100, 500 ); glVertex2i( 100, 100 );glVertex2i( 100, 100 ); glVertex2i( 500, 100 );glVertex2i( 500, 100 ); glEnd glEnd

Otros tipos de líneas: Otros tipos de líneas:

(28)

7.4 Polígonos rellenos

Estos son rellenados Estos son rellenados

GL_POLYGON GL_POLYGON

GL_TRIANGLES (de 3 en 3 vértices) GL_TRIANGLES (de 3 en 3 vértices)

GL_TRIANGLE_STRIP (3 primeros, y luego de 1 en 1) GL_TRIANGLE_STRIP (3 primeros, y luego de 1 en 1)

GL_TRIANGLE_FAN (1 vértice central, y luego de 1 en 1) GL_TRIANGLE_FAN (1 vértice central, y luego de 1 en 1)

GL_QUADS (de 4 en 4) GL_QUADS (de 4 en 4)

(29)

8. Transformaciones

(30)

Transformaciones

(cuidado!)

Ocurren sobre una matriz de transformaciones Ocurren sobre una matriz de transformaciones

Siempre que se convierte algo de 2D a 2D y de 2D a 3D Siempre que se convierte algo de 2D a 2D y de 2D a 3D

se requiere realizar multiplicaciones de matrices se requiere realizar multiplicaciones de matrices

En OpenGL no se requiere programar estas En OpenGL no se requiere programar estas

operaciones, pero se debe mantener un ojo en las operaciones, pero se debe mantener un ojo en las

transformaciones realizadas (o se pierde uno) transformaciones realizadas (o se pierde uno)

Las transformaciones modifican las matrices de Las transformaciones modifican las matrices de

(31)

Transformaciones

La mejor manera de entenderlas es imaginar que se La mejor manera de entenderlas es imaginar que se

está transformando a un dibujante está transformando a un dibujante

Las transformaciones son acumulativas Las transformaciones son acumulativas

Para evitar acumulación (limpiar toda Para evitar acumulación (limpiar toda

(32)

Traslación

Después de esta transformación, el origen para el Después de esta transformación, el origen para el

(33)

Escalamiento

Después de esta transformación, las dimensiones han Después de esta transformación, las dimensiones han

cambiado cambiado

El dibujante se ha hecho más grande o más pequeño El dibujante se ha hecho más grande o más pequeño

Este cambio puede ocurrir de manera diferente en Este cambio puede ocurrir de manera diferente en

cada eje cada eje

El desplazamiento después del escalamiento se verá El desplazamiento después del escalamiento se verá

afectado por la nueva escala afectado por la nueva escala

(34)

Rotación

Después de esta transformación, la orientación ha Después de esta transformación, la orientación ha

cambiado cambiado

El dibujante ha girado en torno a uno o más ejes El dibujante ha girado en torno a uno o más ejes

El desplazamiento después de la rotación se realizará El desplazamiento después de la rotación se realizará

de acuerdo a la nueva orientación de acuerdo a la nueva orientación

(35)

9. Proyecciones

Además de movernos en la superficie o en el espacio, Además de movernos en la superficie o en el espacio,

se necesita establecer cómo mira la cámara (o el se necesita establecer cómo mira la cámara (o el

usuario) la escena. usuario) la escena.

Los elementos básicos ya los mencionamos en el Los elementos básicos ya los mencionamos en el

punto 6. punto 6.

Las operaciones de proyección ocurren sobre la Las operaciones de proyección ocurren sobre la

(36)

9.1 Resultado de la

proyección

Es importante saber que el resultado de la proyección Es importante saber que el resultado de la proyección

y las transformaciones es convertir coordenadas (2D y las transformaciones es convertir coordenadas (2D

y 3D) de objetos, a coordenadas 2D de la pantalla, y 3D) de objetos, a coordenadas 2D de la pantalla,

(37)

¡¡ Proyección 3D !!

Ya no es un simple lienzo para dibujar. Es necesario Ya no es un simple lienzo para dibujar. Es necesario

establecer: establecer:

Modo de proyección Modo de proyección

Ubicación del observador Ubicación del observador

Cada vértice es 3D Cada vértice es 3D

Al colocar objetos en el espacio, es muy fácil Al colocar objetos en el espacio, es muy fácil

(38)

Proyección y modelado

3D

Matriz de proyección Matriz de proyección glMatrixMode( GL_PROJECTION ); glMatrixMode( GL_PROJECTION ); gluPerspective( 90.0, (float)w/(float)h, 10.0, 40.0 ); gluPerspective( 90.0, (float)w/(float)h, 10.0, 40.0 ); Ángulo de apertura: 90º Ángulo de apertura: 90º Razón de aspecto: w/h Razón de aspecto: w/h Lo más cercano visible: 10 Lo más cercano visible: 10 Lo más lejano visible: 40 Lo más lejano visible: 40 Modelado Modelado glMatrixMode( GL_MODELVIEW ) glMatrixMode( GL_MODELVIEW ) glTranslatef( 0.0, 0.0, -20.0 ); glTranslatef( 0.0, 0.0, -20.0 );

Desplazo al dibujante hacia delante para que yo vea lo que Desplazo al dibujante hacia delante para que yo vea lo que dibuja

(39)

(40)

10. Búfer de

profundidad

(41)

10.1 Líneas y superficies

ocultas

Normalmente, si no se considera la profundidad, lo último Normalmente, si no se considera la profundidad, lo último

que se dibuja es lo que se impone que se dibuja es lo que se impone

Es muy difícil organizar los objetos para que se dibujen en Es muy difícil organizar los objetos para que se dibujen en

orden inverso a la profundidad orden inverso a la profundidad

Se requiere guardar información sobre la profundidad de Se requiere guardar información sobre la profundidad de

cada pixel dibujado: búfer de profundidad cada pixel dibujado: búfer de profundidad

Si un píxel nuevo es más profundo que otro anterior: no se Si un píxel nuevo es más profundo que otro anterior: no se

pone pone

Si un píxel nuevo es más cercano que otro, lo reemplaza (y Si un píxel nuevo es más cercano que otro, lo reemplaza (y

(42)

10.2 Búfer de

profundidad

Al inicializar el despliegue se debe indicar la utilización del Al inicializar el despliegue se debe indicar la utilización del

búfer: búfer:

glutInitDisplayMode( GLUT_DEPTH | otros-modos ) glutInitDisplayMode( GLUT_DEPTH | otros-modos )

Al borrar un lienzo, se debe borrar también el búfer de Al borrar un lienzo, se debe borrar también el búfer de

profundidad: profundidad:

glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );

Al dibujar, se debe habilitar la prueba de profunidad: Al dibujar, se debe habilitar la prueba de profunidad:

(43)

Líneas y superficies

(44)

11. Animación

(45)

¡¡ Animación !!

Requiere que el programa dibuje continuamente la Requiere que el programa dibuje continuamente la

escena, introduciendo cambios escena, introduciendo cambios

Una función (idle) será invocada continuamente Una función (idle) será invocada continuamente

Esta función definirá los cambios e invocará el Esta función definirá los cambios e invocará el

(46)

Animación

Se deben usar variables globales para mantener los Se deben usar variables globales para mantener los

estados de la animación estados de la animación

Se debe usar búfer doble: Se debe usar búfer doble:

glutInitDisplayMode( GLUT_DOUBLE | otros-modos ); glutInitDisplayMode( GLUT_DOUBLE | otros-modos );

Búfer doble: dibujar en un lienzo mientras muestra el Búfer doble: dibujar en un lienzo mientras muestra el

(47)

12. Iluminación,

materiales y vector

normal

(48)

Iluminación

Se debe establecer la ubicación de las fuentes de luz Se debe establecer la ubicación de las fuentes de luz

Coordenadas Coordenadas

Vector de dirección (distancia infinita) Vector de dirección (distancia infinita)

Cada píxel en cada línea o superficie tiene un vector Cada píxel en cada línea o superficie tiene un vector

normal (perpendicular) normal (perpendicular)

El color de cada píxel se calcula de acuerdo al color El color de cada píxel se calcula de acuerdo al color

del material, la luz ambiental y el ángulo de su normal del material, la luz ambiental y el ángulo de su normal

(49)

Iluminación

Habilitar iluminación: Habilitar iluminación: glEnable(GL_LIGHTING); glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_LIGHT0); Establecer posición: Establecer posición: GLfloat light_position0[] = { 1.0, 1.0, 0.5, 0.0 }; GLfloat light_position0[] = { 1.0, 1.0, 0.5, 0.0 };

glLightfv( GL_LIGHT0, GL_POSITION, light_position0 ); glLightfv( GL_LIGHT0, GL_POSITION, light_position0 );

Establecer color de luz Establecer color de luz

glLightfv( GL_LIGHT0, GL_DIFFUSE, azul ); glLightfv( GL_LIGHT0, GL_DIFFUSE, azul );

(50)

(51)

Material

Cada objeto dibujado está asociado a un material Cada objeto dibujado está asociado a un material

definido por sus modos de iluminación: definido por sus modos de iluminación:

Color con luz ambiental Color con luz ambiental

Cuando no le incide la luz de alguna fuente Cuando no le incide la luz de alguna fuente

Color con luz difusa Color con luz difusa

Cuando le incide una luz de una fuente Cuando le incide una luz de una fuente

Color con luz especular Color con luz especular

Cuando el ángulo entre el observador y el píxel con el Cuando el ángulo entre el observador y el píxel con el

vector normal es el mismo que entre el vector normal y la vector normal es el mismo que entre el vector normal y la fuente, y están en el mismo plano (¡como en espejo,

fuente, y están en el mismo plano (¡como en espejo, vaya!)

(52)

(53)

Material

Definir color de ambiente para objeto Definir color de ambiente para objeto

glMaterialfv( GL_FRONT, GL_AMBIENT, gris1 ); glMaterialfv( GL_FRONT, GL_AMBIENT, gris1 );

Definir color difuso de objeto Definir color difuso de objeto

glMaterialfv( GL_FRONT, GL_DIFFUSE, gris1 ); glMaterialfv( GL_FRONT, GL_DIFFUSE, gris1 );

Definir brillo de objeto Definir brillo de objeto

glMaterialf( GL_FRONT, GL_SHININESS, 50.0 ); glMaterialf( GL_FRONT, GL_SHININESS, 50.0 );

Definir color especular de objeto Definir color especular de objeto

(54)

Vector normal

Para cada superficie o para cada vértice se debe Para cada superficie o para cada vértice se debe

especificar su vector normal especificar su vector normal

Si es para un vértice, se especifica justo antes. Si es para un vértice, se especifica justo antes.

Si es para la superficie, se especifica antes de los tres Si es para la superficie, se especifica antes de los tres

(55)

Vector normal

Si se usan primitivas de objetos 3D, los vectores Si se usan primitivas de objetos 3D, los vectores

normales ya están calculados. normales ya están calculados.

Si uno traza polígonos, es necesario definir el vector Si uno traza polígonos, es necesario definir el vector normal para cada superficie, o mejor aún: para cada normal para cada superficie, o mejor aún: para cada

vértice. vértice.

La magnitud del vector normal debe ser siempre 1.0. La magnitud del vector normal debe ser siempre 1.0. Se puede habilitar la normalización automática, y así Se puede habilitar la normalización automática, y así

(56)

Vector normal

Si se especifican diferentes normales para un Si se especifican diferentes normales para un

(57)

13. Aplicaciones de

textos

Las imágenes son geniales, pero los textos también Las imágenes son geniales, pero los textos también

(58)

Técnicas para textos

Por vectores Por vectores

Están sujetos a las transformaciones Están sujetos a las transformaciones

No se ven tan bien No se ven tan bien

No maneja acentos, eñes ni otros símbolos No maneja acentos, eñes ni otros símbolos

Por mapa de bits Por mapa de bits

Se ven mejor Se ven mejor

(59)

14. Texturas

Si lo pensamos bien, es como ponerle ropa a nuestras Si lo pensamos bien, es como ponerle ropa a nuestras

(60)

Texturas 2D

(61)

Texturas 3D

La textura no es una imagen, sino imágenes por La textura no es una imagen, sino imágenes por

capas capas

La figura 3D adopta la textura por capas, de acuerdo La figura 3D adopta la textura por capas, de acuerdo

(62)

15. Técnicas avanzadas

(63)

Qué técnicas avanzadas

(64)

¿Qué sigue?

Se ha visto lo básico e incompleto Se ha visto lo básico e incompleto

Para continuar: Para continuar:

Practicar lo ya visto Practicar lo ya visto

Investigar qué más es básico y faltó por cubrir Investigar qué más es básico y faltó por cubrir

(65)

¡Gracias!

Luis Ansemo Zarza López Luis Ansemo Zarza López

[email protected] [email protected]