Intro OpenGL

1. Intro OpenGL Visualización Computacional 2

2. ¿Qué es OpenGL? • OpenGL es una biblioteca para el desarrollo de gráficos por computadora en 2D y 3D multiplataforma (Linux, Windows, Unix, MacOS, PS3) • Su nombre proviene de Open Graphics Library • Es una especificación que define una API (del inglés Application Programming Interface - Interfaz de Programación de Aplicaciones) para la programación de gráficos en varios lenguajes Nota: Referencias de OpenGL Programming Guide, 3rd Edition ver. 1.2(“The Red Book”).

3. Documentación disponible • El Libro Rojo - The Red Book: The OpenGL Programmer's guide. • Libro de referencia y tutorial. Libro de cabecera para programadores de OpenGL. • El Libro Azul - The Blue Book: The OpenGL Reference manual. • En esencia, una copia de la páginas del manual de OpenGL.

4. Características de OpenGL • Objetivos • Ocultar complejidad de Hardware • Ocultar las capacidades del Hardware • Propósito: Dibujado (puntos, líneas, polígonos) • OpenGL como una Máquina de estados (o switches)

5. OpenGL tiene… • Funciones para dibujar en 2D y 3D • Transformaciones • Algoritmos de iluminación • Z-Buffering • Mapeo de Texturas • Soporte para Shaders • Blending, elementos de antialiasing , efectos de Fog

6. OpenGL no tiene… • Funciones para manejar ventanas, eventos de ratón o teclado  • Funciones o procedimientos para crear un objeto completo a partir de una descripción natural ejemplo: comando drawCar(); • Soporte nativo para dibujado de curvas • Soporte nativo para audio y/o texto • Detección de colisiones • Carga de imágenes

7. Elementos necesarios • Biblioteca OpenGL • Archivos de cabecera (.h, .pas, etc.) • Archivos obj o lib • Verificar el soporte dentro de la plataforma elegida y bibliotecas para su ejecución • Bibliotecas auxiliares (GLU, Glut)

8. Qué pasa con lo que no tiene • Y las ventanas , mouse, teclado???? • GLUT GL Utility Toolkit • API de Win32 • IDE de desarrollo (forms, eventos, etc.) • Imágenes • SDL Image • Devil • Sonido • SDL Mixer • OpenAL • fmod

9. Sintaxis Básica • OpenGL contiene 3 elementos distintos básicos: • Funciones • Constantes • Tipos de datos

10. Funciones • Usos • Dibujado de elementos • Manipulación de proyecciones • Transformaciones Geométricas • Habilitación / Deshabilitación de “switches” • Texturizado • Aplicación de elementos para lograr iluminación • Cuenta con 150 funciones básicas

11. Sintaxis de funciones • Se anteponen gl si pertenecen a la biblioteca OpenGL, glu o glut si son de éstas respectivamente • Contienen información al final de cuántos parámetros reciben y cuál es su tipo • Ejemplos: • glVertex3f • glVertex4fv • glVertex2i

12. OpenGL Vertex/Color Command Formats glVertex3fv( v ) glColor3fv( v ) Data Type Vector Number of components b - byte ub - unsigned byte s - short us - unsigned short i - int ui - unsigned int f - float d - double omit “v” for scalar form– e.g., glVertex2f(x, y) glColor3f(r, g, b) 2 - (x,y) 3 - (x,y,z), (r,g,b) 4 - (x,y,z,w), (r,g,b,a)

13. Constantes • Usos • Activar o desactivar ciertas propiedades de dibujado o switches • Dar ciertos valores a parámetros de funciones que configuran algún elemento • Todos van con mayúsculas empezando con GL y generalmente tienen _ cuando presentan espacios, ya que sus nombres son muy descriptivos acerca de para que sirven

14. Constantes • Ej. • GL_LIGHTING • GL_COLOR_BUFFER_BIT • GL_LINES • También las encontramos en GLUT Ej. • GLUT_LEFT_BUTTON

15. Buffers • Color Buffer • Depth Buffer • Stencil Buffer • Accumulation Buffer • Selection Buffer

16. Window decoration Front Buffer • El Front Buffer es lo que vemos en pantalla finalmente. • Se renderiza en Back buffer, luego se llama a SwapBuffers Texture 1 Accumulation Buffer Stencil Buffer Depth Buffer Texture 2 Back Buffer Texture 3

17. OpenGL – Depth Buffer, Double Buffer • Los buffers almacenan color y profundidad • Eliminación de partes ocultas. • glEnable (GL_DEPTH_TEST); • Double buffering: • Dibujar en un buffer mientras se está mostrando otro. • Cuando se termina de renderizar, se intercambian los dos. • glutSwapBuffers(); // al finalizar el bucle de rendering • Borrando buffers:// Borrar la pantalla con un color específico.glClearColor (0.0, 0.0, 0.0, 0.0);// Borrar color y depth buffers.glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

18. Máquina de estados • Set: • glPointSize(size); • glLineWidth(width); • glLineStipple(repeat, pattern); • glShadeModel(GL_SMOOTH); • Get: • glGet*(); • Habilitaciones: • glEnable(GL_LIGHTING); • glDisable(GL_TEXTURE_2D); • glIsEnable(GL_DEPTH_TEST);

19. Seteando estados • OpenGL es una máquina de estados: los polígonos son afectados por el color, la transformación, el modo de render actuales. • Habilitar y deshabilitar opciones como iluminación, uso de texturas y alpha blending. • glEnable (GL_LIGHTING); // habilitar lighting (disabled por default) • Olvidarse de habilitar/deshabilitar algo es el origen más común de los bugs. Corroborar siempre el estado de las variables que necesitamos y sus valores por default. (lista de defaults en Apéndice B).

20. Mini “engine” (método draw) • Borrar contenido del buffer actual • Setear transformaciones (View Projection, Viewport transf.) • Loop para cada primitiva: • Transformaciones • Tipo de primitiva, atributos, estados de render • Flush o Swap buffers

21. Transformaciones y Vista (Cap.3) OpenGL tiene 3 modos distintos de matrices: • GL_MODELVIEW • GL_PROJECTION • GL_TEXTURE • Por ejemplo, para trabajar con modo projection matrix: glMatrixMode(GL_PROJECTION); • La matriz Modelview se usa para las transformaciones en los objetos. • La matrix Projection setea la transformación de perspectiva. Generalmente se setea una vez al comienzo del programa. • La matriz Texture es usada para aplicar transformaciones a las coordenadas de textura.

22. MVPV

23. Operaciones de matrices • glMatrixMode() • GL_PROJECTION • GL_MODELVIEW • GL_TEXTURE • glLoadIdentity() • glLoadMatrix() • glMultMatrix() • glPushMatrix() • glPopMatrix()

24. Multiplicación de matrices • glMatrixMode(GL_MODELVIEW); • glLoadIdentity(); • glMultMatrix(N); • glMultMatrix(M); • glMultMatrix(L); • glBegin(GL_POINTS); • glVertex3f(v); • glEnd(); • La transormación final es N(M(Lv))

25. Transformaciones de modelos • Mover/trasladar objeto glTranslate{234}{fd}( x, y, z ) • Rotar el objeto en un eje arbitrario glRotate{234}{fd}( angle, x, y, z ) • Escalar, deformar, espejar objeto glScale{234}{fd}( x, y, z ) Tutoriales de Nate Robins: http://www.xmission.com/~nate/tutors.html

26. El orden es importante Internamente se define un nuevo espacio de coordenadas “local” en términos del espacio de coordenadas anterior.

27. Primitivas en glBegin (Cap.2, p.44) • Puntos GL_POINTS • Líneas GL_LINES, GL_LINE_STRIP, GL_LINE_LOOP • Triángulos GL_TRIANGLES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN • Cuadrados GL_QUADS, GL_QUAD_STRIP • Polígonos GL_POLYGON glBegin(GL_LINES); [invocaciones glVertex];glEnd(); glBegin(GL_QUADS); [invocaciones glVertex];glEnd();

28. OpenGL: Normales y Luces • Especificar normales de manera simple como especificamos geometría. • Normalizar vectores de normales.// each vertex has a different normal hereglColor3f (0.8, 1.0, 0.5);glBegin(GL_TRIANGLES); glNormal3fv (n0); glVertex3fv (v0); glNormal3fv (n1); glVertex3fv (v1); glNormal3fv (n2); glVertex3fv (v2);glEnd();// all vertices have the same normal hereglBegin(GL_TRIANGLES); glNormal3fv (n0); glVertex3fv (v0); glVertex3fv (v1); glVertex3fv (v2);glEnd();

29. OpenGL: Luces (Cap.5 p.173) • glEnable (GL_LIGHTING); • OpenGL soporta un máximo de 8 luces. • glEnable (GL_LIGHT0);...glEnable (GL_LIGHT7); • Las luces tienen una posición, un tipo, color, etc. • Posición: • float light0Position[4] = {1.0, 0.0, 4.0, 1.0};glLightfv (GL_LIGHT0, GL_POSITION, light0Position); • El tipo de una luz es puntual, direccional y spot. El cuarto componente de la posición (1.0 en el ejemplo) determina el tipo. 0 es para luces direccionales, 1 es para luces puntuales o spots. (pág. 187) • Podemos setear componentes de : Ambient, Diffuse, Specular para cada luz.Mirar el texto en el libro.

30. OpenGL: Lighting (cont.) • OpenGL soporta 2 modelos básicos de shading: flat y smooth. • glShadeModel(GL_FLAT); glShadeModel(GL_SMOOTH);

31. OpenGL: Propiedades de material (Cap.5) • Se pueden especificar diferentes propiedades de material para los polígonos. • Usar glMaterial*(GLenum face, GLenum pname, TYPE param); • Ejemplos (pname), pág. 202: • GL_AMBIENT: Ambient color del material • GL_DIFFUSE: Diffuse color del material • GL_SPECULAR: Componente Specular • GL_SHININESS: Exponente Specular

32. OpenGL: Texturing • Cargar los datos en crudo • Provienen de una imagen: tga, bmp, jpg • Creados en tiempo de ejecución • El resultado final es siempre un arreglo • Setear valores de entorno • Crear nombres de textura, construir Mipmaps, setear filtros, etc. • Mapear la textura a los polígonos • Especificar coordenadas s,t para los vértices del polígono.

33. OpenGL: Texturing • Cargar los datos • Unidades y clases que cargan imágenes. • Setear valores de entorno • Crear nombre de textura • glGenTextures(int num, int* texNames) • glBindTexture(GL_TEXTURE_2D, texName); • Escala, aplicación y Mipmapping • gluScaleImage(…) • glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP); • glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP); • gluBuild2DMipmaps(…);

34. Creación de apps • GLUT • Forms y handles • Api de Windows

35. GLUT – OpenGL Utility Toolkit (Apéndice D) • GLUT es una librería que maneja los eventos del sistema y las ventanas de la aplicación en múltiples plataformas. Ejemplo código: int main (int argc, char *argv[]) {glutInit(&argc, argv); glutInitDisplayMode (GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGBA); glutInitWindowSize (windowWidth, windowHeight); glutInitWindowPosition (0, 0); glutCreateWindow (“248 Video Game!"); SetStates(); // Initialize any rendering states (your code). RegisterCallbacks(); // Set up event callbacks (your code, coming up). glutMainLoop(); // Transfer control to GLUT. Doesn’t return. return 0; }

36. GLUT Event Callbacks • Registrar funciones que son llamadas cuando un determinado evento ocurre. Ejemplos: glutDisplayFunc( Display ); // called when its time to draw glutKeyboardFunc( Keyboard ); // receives key input glutReshapeFunc( Reshape ); // called when window reshapes glutMouseFunc( Mouse ); // called when button changes glutPassiveMotionFunc( PassiveFunc ); // mouse moves, no buttons glutMotionFunc( MouseDraggedFunc ); // mouse moves, some buttons glutIdleFunc( Idle ); // called whenever idle

37. Forms y Handles (llamadas a API win32) Ejemplo código: procedure TForm1.FormCreate(Sender: TObject); begin initOpengl; dc:=GetDC(Panel1.Handle); initPixelFormat(); rc :=wglCreateContext(dc); wglMakeCurrent(dc,rc); glInit; Resize(); end;

38. Api de Windows • Utilizamos la API de windows para crear nuestra propia ventana y manejar nuestros eventos. Ejemplo código: function glCreateWnd(Width, Height : Integer; Fullscreen : Boolean; PixelDepth : Integer) : Boolean; var … begin h_Instance := GetModuleHandle(nil); //Grab An Instance For Our Window ZeroMemory(@wndClass, SizeOf(wndClass)); // Clear the window class structure with wndClass do // Set up the window class begin style := CS_HREDRAW or // Redraws entire window if length changes CS_VREDRAW or // Redraws entire window if height changes CS_OWNDC; // Unique device context for the window lpfnWndProc := @WndProc; // Set the window procedure to our func WndProc hInstance := h_Instance; hCursor := LoadCursor(0, IDC_ARROW); lpszClassName := 'OpenGL'; end; … … …

39. Bindings - OpenGL http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=02 • LWJGL • Mac OS • Mac OS X/Cocoa • MASM • Power Basic • Pelles C • Perl • Python • QT/C++ • REALbasic • Ruby • Scheme • Solaris • Visual Basic • Visual Fortran • Visual Studio .NET • ASM Code • Borland C++ Builder 6 • BeOS • C# Code • VB.Net CsGL • Code Warrior 5.3 • Cygwin • D Language • Delphi • Dev C++ • Game GLUT • GLUT Code • Irix Code • Java Code • Java/SWT C • Jedi-SDL • JoGL • LCC Win32 • Linux • Linux/GLX • Linux/SDL

40. Ejemplos - Tutoriales BSP Loader

41. Ejemplos - Tutoriales Fog

42. Ejemplos - Tutoriales Fuentes

43. Ejemplos - Tutoriales Heightmap, Multitextura, Skybox

44. Ejemplos - Tutoriales MD3 Loader - Animación

45. Ejemplos - Tutoriales Wavefront OBJ Loader

46. Ejemplos - Tutoriales Selección

47. Ejemplos - Tutoriales Partículas

48. Ejemplos - Tutoriales Render to texture

49. Ejemplos - Tutoriales Skyboxes

50. Ejemplos - Tutoriales Variados