Visualización Computacional 2 Intro OpenGL Visualización Computacional 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”).

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.

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)

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

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

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)

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

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

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

Sintaxis de funciones Ejemplos: 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

OpenGL Vertex/Color Command Formats glVertex3fv( v ) glColor3fv( v ) Number of components Data Type Vector 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)

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

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

Buffers Color Buffer Depth Buffer Stencil Buffer Accumulation Buffer Selection 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 Window decoration Front Buffer Texture 3

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);

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

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).

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

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.

MVPV

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

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))

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

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

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();

OpenGL: Normales y Luces Especificar normales de manera simple como especificamos geometría. Normalizar vectores de normales. // each vertex has a different normal here glColor3f (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 here glBegin(GL_TRIANGLES); glNormal3fv (n0); glVertex3fv (v0); glVertex3fv (v1); glVertex3fv (v2); glEnd();

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.

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

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

OpenGL: Texturing Cargar los datos en crudo Setear valores de entorno 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.

OpenGL: Texturing Crear nombre de textura 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(…);

Creación de apps GLUT Forms y handles Api de Windows

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; }

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

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;

Api de Windows Ejemplo código: 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 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;

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

Ejemplos - Tutoriales BSP Loader

Ejemplos - Tutoriales Fog

Ejemplos - Tutoriales Fuentes

Ejemplos - Tutoriales Heightmap, Multitextura, Skybox

Ejemplos - Tutoriales MD3 Loader - Animación

Ejemplos - Tutoriales Wavefront OBJ Loader

Ejemplos - Tutoriales Selección

Ejemplos - Tutoriales Partículas

Ejemplos - Tutoriales Render to texture

Ejemplos - Tutoriales Skyboxes

Ejemplos - Tutoriales Variados

Trabajos Prácticos Salón de exposiciones: Datos en pantalla Environment Mapping (modelo) Sombras y/o reflejos (habitación) Efecto adicional (blending, lightmaps)

Trabajos Prácticos Juego de ajedrez: Transparencias (piezas) Reflejos (sobre tablero) o Environment Mapping (piezas) Sombras (tablero) Selección de objetos en 3D

Trabajos Prácticos Shoot Game: Efectos con partículas Modelos animados Transparencias o máscaras de textura Selección de objetos en 3D

Trabajos Prácticos Mundos virtuales (elegir algunas): Niebla Máscaras de textura Transparencias Reflejos y/o environment mapping Sombras Sistemas de partículas Modelos 3D

Trabajos Prácticos Otros: Heightmap (niveles) Sombras Modelos animados Colisiones Skyboxes Efectos de partículas Técnicas + DOC

Próximos pasos En Diciembre: Definición de que trabajo van a realizar. En la web: (próximamente) Tutoriales y ejemplos. Lista de trabajos posibles para realizar. Links de interés. Busquen (o nos piden): Recursos (3ds, bsp, MD3) En Diciembre: Definición de que trabajo van a realizar. Consultas vía MAIL (claridad e info): jpdamato@exa.unicen.edu.ar cristianGB@gmail.com