Cómo saldremos

1. Cómo saldremos • De aquí saldremos: • Flipando • Alucinando • Con la mirada perdida en el infinito • Queriendo simular o graficar todo • O de plano es que que no entendimos nada

2. Objetivos En este curso se introducirá a los participantes a las técnicas básicas para modelar en 2D y 3D con OpenGL, incluyendo animación, manejo de luces, colores y materiales En estas 40 horas: estarán listos para ponerse a programar aplicaciones 2D y 3D interactivas. Se les presentará el software libre necesario y se les facilitará plantillas para el desarrollo de aplicaciones simples.

3. Panorama de bibliotecas gráficas

4. 1.1 El entorno gráfico Cada sistema operativo ofrecía sus gráficas por software El HW para gráficas requería sus propias bibliotecas Las gráficas avanzadas eran complejas

5. 1.2 Soluciones • GKS • Primera plataforma, introducida en 1977. • PHIGS • Plataforma gráfica montada sobre Xwindow, surgida a principios de los 80’s, disponible de manera separada en sistemas DEC, Sun y otros. • Estandarizada en ANSI, FIPS e ISO en 1989. • OpenGL • Direct3D, lanzado por Microsoft en 1995, siendo el principal competidor de OpenGL, pero limitado a plataformas de MS. • VRML • Diseñado para ser utilizado en la Web, con éxito limitado. • WebGL • También para ser utilizado en la Web, basado en JavaScript.

6. 2. Historia de OpenGL Principios de los 90s: IRIS GL, desarrollado para las estaciones de trabajo de Silicon Graphics (SGI), compitiendo con PHIGS y superándolo. En 1992 SGI decidió convertirlo en estándar abierto para establecer su influencia en el mercado (abierto no significa gratuito ni código abierto). Se delegó las funciones para ventanas al sistema oerativo. Nació OpenGL. En 1993 surge Mesa, que es la versión abierta y libre de OpenGL.

7. 3. Características, alcances y beneficios de OpenGL

8. 3.1 ¿Qué es OpenGL? • OpenGL es una especificación estándar que define un API para el desarrollo de aplicaciones para generar gráficas 2D y 3D. • Soporta: • Diferentes plataformas (Linux, Mac, Windows,etc.) • Diferentes lenguajes (C,C++,Pascal,Java,etc.) • Diferentes compiladores • Diferentes tipos de computadoras (PCs, PDAs, celulares,etc.) • Consiste en bibliotecas de funciones.

9. 3.2 Beneficios de OpenGL Permite la producción de código ejecutable independiente (pero requiere que exista soporte nativo para OpenGL, ya sea en hardware o software) Muy universal Soportado completamente por aceleradores gráficos.

10. 4. Arquitectura de bibliotecas de apoyo en OpenGL Y otros elementos necesarios

11. 4.1 Componentes adicionales a OpenGL • GLU • Utilerías diversas complementarias • Manejadores de ventanas • GLUT • Glut • OpenGlut • FreeGlut • GLAUX • Más elementos interactivos • GLUI: Botones, controles, barras, etc. • OpenAU: Para manejo de sonidos. • Combinación básica recomendada: OpenGL, GLU, GLUT

12. 4.2 Herramientas del curso • Conocimientos previos • Compilador • Bibliotecas • Computadora con Windows • No olvidar que OpenGL es abierto en el sentido de que está disponible para muchas plataformas, y casi con el mismo código (aplican restricciones).

13. 4.3 Compilador para este taller: • DevC++ • Gratuito y abierto, aunque ya no se esté actualizando. • Fácil de instalar y usar (existe versión para usar en memoria USB). • Módulos fáciles de incorporar e incluyen plantillas. • También existe para Linux, pero aún no es muy confiable.

14. 4.4 Conocimientos previos • Programación en lenguaje C • OpenGL está disponible para casi cualquier lenguaje, pero nos basaremos en éste, por ser poderoso. • Geometría y trigonometría • Imaginación espacial • Parece broma, pero a mucha gente le cuesta trabajo crear modelos 3D en su mente para luego implantarlos.

15. 5. Estructura de un programa en OpenGL

16. 5.1 Estructura para el S.O. • Se requiere una estructura muy específica para interactuar con el Sistema Operativo, ya que depende del sistema de ventanas, entradas y salidas • El Sistema Operativo debe informar al programa de eventos: • Cambio de tamaño de la ventana • Es necesario redibujar la ventana • El usuario hizo click • El usuario movió el ratón • Etc.

17. 5.1 Estructura general • Función main: • Inicializar ventana • Establecer modos • Crear ventana(s) • Establecer callbacks (mensajes del sistema) • Iniciar ciclo de operación • Función display: • Redibujar la escena cuando se requiera • Función reshape: • Recalcular razón de aspecto (proporción ancho-alto) • Recalcular dimensiones • Otras funciones en respuesta a callbacks • idle • keyboard • mouse

18. display • Se invoca cada vez que se necesita una imagen fresca • glClear • Borrar pantalla • Código o funciones para dibujar • glFlush • Procesar gráficos pendientes y mostrarlos

19. reshape Se ejecuta cuando se crea una ventana o cambia de tamaño Recibe como parámetros las dimensiones de la ventana Define razón de aspecto y dimensiones

20. 5.2 ¡Un esqueleto! Se les ha proporcionado un programa OpenGL mínimo pero funcional para empezar a experimentar

21. 6. Modelado 2D y 3D Se pueden realizar todo tipo de aplicaciones

22. 6.1 Modelado 2D • Todas las operaciones se hacen en 2 dimensiones • En Reshape (preferentemente) se debe especificar: • gluOrtho2D( izq, der, sup, inf ) • Se utilizan funciones para 2D • 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 • En Reshape (preferentemente) se debe especificar: • gluPerspective( ángulo, aspecto, dist-min, dist-max ) • Angulo: Es el ángulo de visión • Entre más estrecho, abarca menos, pero todo aparece más grande • Razón de aspecto: Relación entre ancho y alto • Aspecto=1: cuadrado • Distancia mínima: Objetos más cercanos serán ignorados • Distancia máxima: Objetos más lejanos serán ignorados

24. 7. Primitivas Algunos elementos básicos para dibujo básico

25. 7.1 Colores planos (o hasta degradados) • Para definir color (sin iluminación): • static GLfloat rojo[] = { 1.0, 0.0, 0.0 }; • glColor3fv ( rojo ); • glColor3f( 1.0, 1.0, 0.0 );

26. 7.2 Pa’l comienzo

27. 7.3 Líneas • glBegin( GL_LINES ); • glVertex2i( 100, 100 ); • glVertex2i( 100, 500 ); • glVertex2i( 100, 100 ); • glVertex2i( 500, 100 ); • glEnd • Otros tipos de líneas: • GL_LINE_STRIP • GL_LINE_LOOP

28. 7.4 Polígonos rellenos • Estos son rellenados • GL_POLYGON • GL_TRIANGLES (de 3 en 3 vértices) • 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_QUADS (de 4 en 4) • GL_QUAD_STRIP (2 primeros, y luego de 2 en 2)

29. 8. Transformaciones A ver, tíos, aquí la cosa se pone buena, pongan atención

30. Transformaciones (cuidado!) Ocurren sobre una matriz de transformaciones Siempre que se convierte algo de 2D a 2D y de 2D a 3D se requiere realizar multiplicaciones de matrices En OpenGL no se requiere programar estas operaciones, pero se debe mantener un ojo en las transformaciones realizadas (o se pierde uno) Las transformaciones modifican las matrices de transformaciones

31. Transformaciones La mejor manera de entenderlas es imaginar que se está transformando a un dibujante Las transformaciones son acumulativas Para evitar acumulación (limpiar toda transformación), se usa glLoadIdentity();

32. Traslación Después de esta transformación, el origen para el dibujante se ha desplazado. glTranslatef( 10.0, 5.0, 0.0 );

33. Escalamiento Después de esta transformación, las dimensiones han cambiado El dibujante se ha hecho más grande o más pequeño Este cambio puede ocurrir de manera diferente en cada eje El desplazamiento después del escalamiento se verá afectado por la nueva escala glScalef( 0.8, 1.2, 1.0 );

34. Rotación Después de esta transformación, la orientación ha cambiado El dibujante ha girado en torno a uno o más ejes El desplazamiento después de la rotación se realizará de acuerdo a la nueva orientación glRotatef( 45.0, 0.0, 0.0, 1.0 );

35. 9. Proyecciones Además de movernos en la superficie o en el espacio, se necesita establecer cómo mira la cámara (o el usuario) la escena. Los elementos básicos ya los mencionamos en el punto 6. Las operaciones de proyección ocurren sobre la matriz de proyección

36. 9.1 Resultado de la proyección Es importante saber que el resultado de la proyección y las transformaciones es convertir coordenadas (2D y 3D) de objetos, a coordenadas 2D de la pantalla, pues ésta siempre es plana.

37. ¡¡ Proyección 3D !! • Ya no es un simple lienzo para dibujar. Es necesario establecer: • Modo de proyección • Ubicación del observador • Cada vértice es 3D • Al colocar objetos en el espacio, es muy fácil perderlos (que no aparezcan en la ventana)

38. Proyección y modelado 3D • Matriz de proyección • glMatrixMode( GL_PROJECTION ); • gluPerspective( 90.0, (float)w/(float)h, 10.0, 40.0 ); • Ángulo de apertura: 90º • Razón de aspecto: w/h • Lo más cercano visible: 10 • Lo más lejano visible: 40 • Modelado • glMatrixMode( GL_MODELVIEW ) • glTranslatef( 0.0, 0.0, -20.0 ); • Desplazo al dibujante hacia delante para que yo vea lo que dibuja

39. Proyección 3D

40. 10. Búfer de profundidad En la vida real no vemos lo que se oculta.

41. 10.1 Líneas y superficies ocultas Normalmente, si no se considera la profundidad, lo último que se dibuja es lo que se impone Es muy difícil organizar los objetos para que se dibujen en orden inverso a la profundidad Se requiere guardar información sobre la profundidad de cada pixel dibujado: búfer de profundidad Si un píxel nuevo es más profundo que otro anterior: no se pone Si un píxel nuevo es más cercano que otro, lo reemplaza (y se actualiza la profundidad)

42. 10.2 Búfer de profundidad • Al inicializar el despliegue se debe indicar la utilización del búfer: • glutInitDisplayMode( GLUT_DEPTH | otros-modos ) • Al borrar un lienzo, se debe borrar también el búfer de profundidad: • glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); • Al dibujar, se debe habilitar la prueba de profunidad: • glDepthFunc(GL_LEQUAL); • glEnable(GL_DEPTH_TEST); • glClearDepth(1.0);

43. Líneas y superficies ocultas

44. 11. Animación Si no se mueve, no parece vivo

45. ¡¡ Animación !! • Requiere que el programa dibuje continuamente la escena, introduciendo cambios • Una función (idle) será invocada continuamente • Esta función definirá los cambios e invocará el refresco de pantalla • main: • gluIdleFunc( idle )

46. Animación • Se deben usar variables globales para mantener los estados de la animación • Se debe usar búfer doble: • glutInitDisplayMode( GLUT_DOUBLE | otros-modos ); • Búfer doble: dibujar en un lienzo mientras muestra el otro • Cambio de lienzo: • glutSwapBuffers();

47. 12. Iluminación, materiales y vector normal Que se haga la luz

48. Iluminación • Se debe establecer la ubicación de las fuentes de luz • Coordenadas • Vector de dirección (distancia infinita) • Cada píxel en cada línea o superficie tiene un vector normal (perpendicular) • El color de cada píxel se calcula de acuerdo al color del material, la luz ambiental y el ángulo de su normal con respecto a cada fuente de luz.

49. Iluminación • Habilitar iluminación: • glEnable(GL_LIGHTING); • glEnable(GL_LIGHT0); • Establecer posición: • GLfloat light_position0[] = { 1.0, 1.0, 0.5, 0.0 }; • glLightfv( GL_LIGHT0, GL_POSITION, light_position0 ); • Establecer color de luz • glLightfv( GL_LIGHT0, GL_DIFFUSE, azul ); • glLightfv( GL_LIGHT0, GL_SPECULAR, azul );

50. Tipos de fuentes de luz