Transcript S2K Arial, Bold, 37 points, 105% line spacing

Intro OpenGL
Visualización Computacional 2
1
¿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”).
2
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.
3
Características de OpenGL



Objetivos
1. Ocultar complejidad de Hardware
2. Ocultar las capacidades del Hardware
Propósito: Dibujado (puntos, líneas,
polígonos)
OpenGL como una Máquina de estados
(o switches)
4
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
5
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
6
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)
7
Qué pasa con lo que no tiene

Y las ventanas , mouse, teclado????




Imágenes



GLUT GL Utility Toolkit
API de Win32
IDE de desarrollo (forms, eventos, etc.)
SDL Image
Devil
Sonido



SDL Mixer
OpenAL
fmod
8
Sintaxis Básica

OpenGL contiene 3 elementos distintos
básicos:



Funciones
Constantes
Tipos de datos
9
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
10
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
11
OpenGL Vertex/Color
Command Formats
glVertex3fv( v )
glColor3fv( v )
Number of
components
2 - (x,y)
3 - (x,y,z),
(r,g,b)
4 - (x,y,z,w),
(r,g,b,a)
Data Type
b
ub
s
us
i
ui
f
d
-
byte
unsigned byte
short
unsigned short
int
unsigned int
float
double
Vector
omit “v” for
scalar form–
e.g.,
glVertex2f(x, y)
glColor3f(r, g, b)
12
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
13
Constantes

Ej.




GL_LIGHTING
GL_COLOR_BUFFER_BIT
GL_LINES
También las encontramos en GLUT
Ej.

GLUT_LEFT_BUTTON
14
Buffers





Color Buffer
Depth Buffer
Stencil Buffer
Accumulation Buffer
Selection Buffer
15


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
Back Buffer
Texture 2
Window decoration
Front Buffer
Texture 3
16
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();
rendering
// al finalizar el bucle de
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);
17
Máquina de estados

Set:





Get:


glPointSize(size);
glLineWidth(width);
glLineStipple(repeat, pattern);
glShadeModel(GL_SMOOTH);
glGet*();
Habilitaciones:



glEnable(GL_LIGHTING);
glDisable(GL_TEXTURE_2D);
glIsEnable(GL_DEPTH_TEST);
18
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).
19
Mini “engine”



Borrar contenido del buffer actual
Setear transformaciones (View Projection,
Viewport transf.)
Loop para cada primitiva:



(método draw)
Transformaciones
Tipo de primitiva, atributos, estados de render
Flush o Swap buffers
20
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.
21
MVPV
22
Operaciones de matrices






glMatrixMode()
 GL_PROJECTION
 GL_MODELVIEW
 GL_TEXTURE
glLoadIdentity()
glLoadMatrix()
glMultMatrix()
glPushMatrix()
glPopMatrix()
23
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))


24
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
25
El orden es importante
Internamente se define un nuevo espacio de coordenadas “local” en
términos del espacio de coordenadas anterior.
26
Primitivas en glBegin





(Cap.2, p.44)
Puntos
GL_POINTS
LíneasGL_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();
27
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();
28
OpenGL: Luces

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:


(Cap.5 p.173)
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.
29
OpenGL: Lighting (cont.)

OpenGL soporta 2 modelos básicos de shading: flat y smooth.

glShadeModel(GL_FLAT);
glShadeModel(GL_SMOOTH);
30
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
31
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
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.
32
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(…);
33
Creación de apps



GLUT
Forms y handles
Api de Windows
34
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();
return 0;
}
// Transfer control to GLUT. Doesn’t return.
35
GLUT Event Callbacks

Registrar funciones que son llamadas cuando un
determinado evento ocurre.
Ejemplos:
glutDisplayFunc( Display );
glutKeyboardFunc( Keyboard );
glutReshapeFunc( Reshape );
glutMouseFunc( Mouse );
glutPassiveMotionFunc( PassiveFunc );
glutMotionFunc( MouseDraggedFunc );
glutIdleFunc( Idle );
//
//
//
//
//
//
//
called when its time to draw
receives key input
called when window reshapes
called when button changes
mouse moves, no buttons
mouse moves, some buttons
called whenever idle
36
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;
37
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);
38
lpszClassName := 'OpenGL';
Bindings - OpenGL
http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=02





















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
















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
39
Ejemplos - Tutoriales
BSP Loader
40
Ejemplos - Tutoriales
Fog
41
Ejemplos - Tutoriales
Fuentes
42
Ejemplos - Tutoriales
Heightmap, Multitextura, Skybox
43
Ejemplos - Tutoriales
MD3 Loader - Animación
44
Ejemplos - Tutoriales
Wavefront OBJ Loader
45
Ejemplos - Tutoriales
Selección
46
Ejemplos - Tutoriales
Partículas
47
Ejemplos - Tutoriales
Render to texture
48
Ejemplos - Tutoriales
Skyboxes
49
Ejemplos - Tutoriales
Variados
50
Trabajos Prácticos

Salón de exposiciones:




Datos en pantalla
Environment Mapping (modelo)
Sombras y/o reflejos (habitación)
Efecto adicional (blending, lightmaps)
51
Trabajos Prácticos

Juego de ajedrez:




Transparencias (piezas)
Reflejos (sobre tablero) o Environment
Mapping (piezas)
Sombras (tablero)
Selección de objetos en 3D
52
Trabajos Prácticos

Shoot Game:




Efectos con partículas
Modelos animados
Transparencias o máscaras de textura
Selección de objetos en 3D
53
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
54
Trabajos Prácticos

Otros:







Heightmap (niveles)
Sombras
Modelos animados
Colisiones
Skyboxes
Efectos de partículas
Técnicas + DOC
55
Próximos pasos

En la web: (próximamente)




Busquen (o nos piden):


Recursos (3ds, bsp, MD3)
En Diciembre:


Tutoriales y ejemplos.
Lista de trabajos posibles para realizar.
Links de interés.
Definición de que trabajo van a realizar.
Consultas vía MAIL (claridad e info):


[email protected]
[email protected]
56