34
 Gráficas Computacionales OpenGL ITESM-CEM Departamento de Ciencias Computacion ales Contenido Historia Metas de Diseño de OpenGL Estructura de un Programa Primitivas de Dibujo y Polígonos Interpolación Lineal de Color  Propiedades de Puntos, Líneas, etc.

1.2a OpenGL

Embed Size (px)

Citation preview

Page 1: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 1/34

 

Gráficas Computacionales

OpenGL

ITESM-CEM Departamento de Ciencias Computacionales

Contenido

Historia

Metas de Diseño de OpenGL

Estructura de un Programa

Primitivas de Dibujo y Polígonos Interpolación Lineal de Color

Propiedades de Puntos, Líneas, etc.

Page 2: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 2/34

 

Historia

Recuerda el proceso de síntesis: Transforma geometría (objeto ->mundo,

mundo ->ojo)

Aplica proyección de perspectiva (ojo ->pantalla)

Recorta al fustrum de vista

Procesa superficies visibles (Z-buffer)

Calcula iluminación de superficie

Implementar todo este proceso esmucho trabajo

Historia

En 1982 Silicon Grahics (SGI) revolucionalas estaciones de trabajo gráficasimplementando el proceso de síntesis en“hardware”.

Los programadores de aplicacionesusaban una librería llamada GL parautilizar el sistema.

Page 3: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 3/34

 

Historia

Con GL era relativamente simpleprogramar aplicaciones 3-D interactivas,así que su éxito lleva a la creación deOpenGL en 1992.

 

Metas de Diseño de OpenGL

SGI diseñó OpenGL para lograr un APIgráfico: Con cierta independencia del “hardware”

Natural y compacto

Fácil de usar Suficientemente cercano al “hardware”, para tener

un excelente desempeño (usando aceleración por“hardware”)

Enfocado en el dibujo (“render”)

Independiente de cualquier sistemas de ventanas

Page 4: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 4/34

 

Metas de Diseño de OpenGL

Para usarse con C y C++ (pero que también puedeusarse con Java, Visual Basic, etc.)

Estándar gratuito y con código abierto

Controlado y revisado por un consejo que incluye aSGI, Microsoft, Nvidia, HP, 3DLabs, IBM, etc.

Muy estable

Extensible (su evolución refleja las nuevascapacidades del “hardware”)

Lo que OpenGL hace

OpenGL se ha vuelto un estándar pues:No trata de hacer demasiadas cosas

Sólo dibuja la imagen, no maneja ventanas, modelado,sonido o animación de alto nivel

Hace lo suficiente

Efectos útiles de síntesis con alto rendimientoDibuja ObjetosVe ObjetosEspecifica modelos de colorAplica IluminaciónMejora ImágenesManipula Bitmaps e ImágenesMapea Texturas

Page 5: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 5/34

 

OpenGL para el Programador

Aplicación

Paquete de GráficasAplicación

API de OpenGL

Hardware y Software

Dispositivos de Entrada Dispositivos de Salida

OpenGL Rendering Pipeline

La mayor parte de las implementaciones de OpenGLsiguen un mismo orden en sus operaciones, lo que seconoce como “rendering pipeline” de OpenGL

Geometry

PrimitiveOperations

Pixel

Operations

Scan

Conversion

Texture

Memory

Fragment

Operations

F r  a m e  b   uf   f    e r 

Vertex

Images

Page 6: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 6/34

 

Librerías de OpenGL

OpenGL Core Library OpenGL32 en Windows

Provee principalmente funcionalidad pararealizar el “rendering”

OpenGL Utility Library (GLU) Provee funcionalidad de una nivel más alto

que utiliza los comandos de bajo nivel de

OpenGL Proyecciones, superficies, etc.

Librerías de OpenGL

OpenGL Utility Toolkit (GLUT)

Provee capacidades básicas de ventanas

Utilizado para el manejo de eventos de entrada:

Mouse, teclado, meús

Rutinas “callback”

Interface común para múltiples plataformas (puedenportarse entre X Windows y MS Windows e inclusiveMac)

GLUT no tiene todo (no hay deslizadores (sliders), cajasde diálogo, barras de menu (menu bar) bar, etc.)

Page 7: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 7/34

 

Librerías de OpenGL

Estructura de un Programa

1. Configura y abre ventana (GLUT)2. Registra funciones de captura de eventos

(callback GLUT) Dibuja (render)

Cambia de tamaño (Resize) Entrada: teclado, ratón, etc.

3. Entra en el ciclo de procesamiento deeventos (GLUT)

Page 8: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 8/34

 

Programa Sencillo

Dibujar un cuadro blanco en una ventanade fondo negro

simple1.c

#include <GL/gl.h>#include <GL/glu.h>#include <GL/glut.h>

void myDisplay(){glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_POLYGON);

glVertex2f(-0.5, -0.5);

glVertex2f(0.5,-0.5);glVertex2f(0.5, 0.5);glVertex2f(0.5, -0.5);

glEnd();glFlush();

}int main(){

glutCreateWindow("simple1");glutDisplayFunc(myDisplay);glutMainLoop();

}

1. Creación de una ventana

2. Registro de la función“callback” de exposición

(“display”)

3. Entrada al ciclo de eventos

Función “callback” de dibujo

(corregir error)

Librería necesaria

Page 9: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 9/34

 

#include

La mayoría de los elementos (funciones,constantes, tipos de datos) están definidasen los archivos:

gl.h, glu.h y glut.h

Nota: glut.h incluye automáticamente a las otras

Ejemplos de elementos definidos:

Funciones: glBegin, glClear, …

Constantes: GL_POLYGON, …

Tipos de datos: Glfloat, Gldouble, …

Ciclo de Eventos

La función principal (main) siempre termina conel programa introduciéndose en un ciclo infinitode eventos: glutMainLoop()

Casi todos los programas de ventanas estánbasados en eventos. Así, no se realiza ningunaacción hasta que sucede un evento quedesencadena una acción (“callback”).

Page 10: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 10/34

 

Funciones de Callback

En el ejemplo se registra una función“callback” de desplegado: myDisplay()

Esta función “callback” será llamada cadavez que sea necesario refrescar lospixeles de la ventana

La función “callback” termina con un

glFlush() (que obliga a ejecutar cualquierinstrucción que haya quedado pendiente)

Algunas Primitivas de Dibujo

PuntosGL_POINTS

LíneasGL_LINESGL_LINE_STRIPGL_LINE_LOOP

FormasGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_POLYGONGL_QUAD_STRIP

Objetos 3D

Page 11: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 11/34

 

Puntos y Líneas (ver simple3.c)

Formas (ver simple4.c)

Page 12: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 12/34

 

Objetos 3-D

Cube Sphere

Teapot

Polígonos

OpenGL desplegará correctamente únicamentepolígonos que cumplan con ser:

Simples

Convexos

Planos

El programa del usuario debe verificar que loanterior se cumpla

Nota: Los triángulos satisfacen todas estascondiciones

Page 13: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 13/34

 

Polígonos Simples

Las aristas no se cruzan

Polígonos Convexos

Todos los puntos en un segmento de líneaentre dos puntos dentro del polígonoquedarán también dentro del polígono

Page 14: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 14/34

 

Polígonos Planos

Todos los vértices están dentro del mismoplano

Polígonos: Front/Back

Cada polígono tiene 2 lados: frente y tras

OpenGL puede dibujarlos de maneradistinta

El órden de los vértices en la listadetermina cuál es el frente, en 3-D:

En el frente los vértices van contra el reloj(regla de la mano derecha)

Page 15: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 15/34

 

Visualizar en 3D

X

Y

Z

z=1.0

x=1.0

y=1.0

A B

CD

E F

GH

Contra Reloj

Ejemplo: dibujar una caja

Se dibujan las 6 caras como polígonos

Cada car se especifíca como lista de vértices

Los vértices se especifícan ¡contra reloj!

A B

CD

E F

GHGLdouble size = 1.0;

glBegin(GL_POLYGON); // cara de frenteglVertex3d(0.0, 0.0, size);glVertex3d(size, 0.0, size);glVertex3d(size, size, size);glVertex3d(0.0, size, size);

glEnd();

Page 16: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 16/34

 

Ejemplo: con cuadriláteros

Cuadriláteros:glBegin(GL_QUADS);

glVertex3f(-1, 1, 0);

glVertex3f(-1, -1, 0);

glVertex3f(1, -1, 0);

glVertex3f(1, 1, 0);

glEnd();

Este tipo de operaciones se conoce comoimmediate-mode rendering ; cada comando seejecuta de inmediato

Ejemplo: con triángulos

Triángulos:float v1[3], v2[3], v3[3], v4[3];

...

glBegin(GL_TRIANGLES);

glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);glVertex3fv(v1); glVertex3fv(v3); glVertex3fv(v4);

glEnd();

Cada 3 vertices forma un triángulo

Page 17: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 17/34

 

Ejemplo: con tiras de triángulos

Una primitiva OpenGL triangle strip reduce redundancia

compartiendo vértices:

glBegin(GL_TRIANGLE_STRIP);

glVertex3fv(v0);

glVertex3fv(v1);

glVertex3fv(v2);

glVertex3fv(v3);

glVertex3fv(v4);

glVertex3fv(v5);

glEnd();

triángulo 0 es v0, v1, v2 triángulo 1 es v2, v1, v3 (¿por qué no v1, v2, v3? )

triángulo 2 es v2, v3, v4

triángulo 3 es v4, v3, v5

v0

v2

v1

v3

v4

v5

OpenGL: Máquina de Estados

Hay estados por omisión (“default”) para todo

Los estados internos de OpenGL no cambian hastaque uno los cambia

Se pueden cambiar los estados de dibujo (“render”),ejemplo:

glPointSize(4.0);

Se pueden recuperar los estados actuales, ejemplo:

glGetFloat(GL_POINT_SIZE_RANGE, sizes);

Page 18: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 18/34

 

OpenGL no es OO

OpenGL no es Orientado a Objetos

Lo que existe son múltiples funciones parauna operación lógica, por ejemplo:

glVertex3f

glVertex2i

glVertex3dv

Nombres de Funciones

Las funciones de OpenGL siguen unaconvención de nombre que se refiere a:

A qué librería pertenece dicha función

El nombre de la función, y

El número y tipo de los argumentos que recibe

Page 19: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 19/34

 

Nombres de Funciones

glVertex3f v(p)El argumento es un

apuntador a un arreglo

glColor3f (x,y,z)Pertenece a la

librería GL

Nombre de laFunción

Número deargumentos

Tipo deargumentos

Tipos de Datos

OpenGL define sus propios tipos de datos,para portar código de una plataforma aotra de manera fácil

Todos los tipos de datos empiezan con GLpara denotar que vienen de la libreríaOpenGL, seguidos del tipo de datocorrespondiente a C

Page 20: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 20/34

 

Tipos de Datos

Tipos de Datos

u denota un tipo de dato sin signo

size el valor de longitud o profundidad

clamp es usado para la composición ycolocación de la amplitud del color

boolean indica condiciones de verdaderoo falso

enum variables enumeradas

bitfield variables de campos de bits

Page 21: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 21/34

 

Defaults

GLUT provee valores por definición (“default”) paracámaras, colores, parámetros de la ventana, etc.

simple1.c hace uso de los valores por omisón(“default”); de ahí su sencillez

Ahora haremos cambios en diferentes propiedades de:Ventana

Colores

Vistas

simple2.c

#include <GL/glut.h>

int main( ){

glutInitDisplayMode(GLUT_RGB);glutInitWindowSize(300,300);glutInitWindowPosition(0,0);

glutCreateWindow("simple2");glutDisplayFunc(myDisplay);

initializeGL();

glutMainLoop();}

Definición de propiedades de la ventana

Inicialización de propiedades(nuestra función)

Page 22: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 22/34

 

Propiedades de la Ventana

glutInitDisplayMode Color RGB

glutWindowSizeTamaño en pixeles

glutWindowPosition Posición de la esquina superior izquierda

glutCreateWindow Creación dando el título “simple2”

Inicialización

void initializeGL()

{

glClearColor (0.0, 0.0, 0.0, 1.0);

glColor3f(1.0, 1.0, 1.0);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(-1.0, 1.0, -1.0, 1.0);

}

Color negro de fondoOpaco

Color blanco para pintar

Vista

Inicialización de la matriz de la vista

Dibujo en 2D

Page 23: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 23/34

 

Sistemas Coordenados

No se tiene que usar toda la ventana paramostrar (“display”) la imagen: glViewport(x,y,width,height)

x, y: definen la esquina inferior izquierda

width, height: el ancho y alto

parámetros en pixeles

Atributos

Los atributos son:

Parte de la librería OpenGL

Determinan la apariencia de los objetos

Ejemplos

Color (puntos, líneas, polígonos) Tamaño y ancho (puntos, líneas)

Patrones (líneas, polígonos)

Modo poligonal

Desplegado relleno

Desplegado sólo de aristas

Page 24: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 24/34

 

Atributos -- Color

glColor3f(Glfloat rojo, Glfloat verde, Glfloat azul)

Atributos basados en Vértices

glBegin(GL_POLYGON);glColor3f(1.0, 1.0, 1.0); // blanco

glVertex2f(-0.5, -0.5);

glColor3f(1.0, 0.0, 0.0); // rojo

glVertex2f(-0.5, 0.5);

glColor3f(0.0, 0.0, 1.0); // azul

glVertex2f( 0.5, 0.5);

glColor3f(1.0, 0.0, 1.0); // morado

glVertex2f( 0.5, -0.5);

glEnd();

ver simple5.c

Page 25: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 25/34

 

Interpolación Lineal

glBegin(GL_LINES);

glColor3f(1.0, 0.0, 0.0); // rojo

glVertex2f( 0, 0);

glColor3f(0.0, 0.0, 1.0); // azul

glVertex2f( 1, 0);

glEnd();

Interpolación Lineal

Interpolar significa estimar el valor de unafunción o una serie entre dos valores conocidos.

La interpolación lineal supone:

Que conoces dos valores particulares (colores en lospuntos extremos)

Que quieres conocer el valor en un punto intermedioentre esos dos valores conocidos (color intermedio)

Que el proceso cambio a razón constante

Page 26: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 26/34

 

Segmentos Paramétricos

La parametrización puede utilizarse paracambiar o moverse entre dos posiciones

Segmento de línea entre v1 y v2:

v(u) = (1 – u) v1 + (u) v2

0 ≤ u ≤ 1

Interpolación Lineal de Color

Color en v1 : c1 = [1, 0, 0]

Color en v2 : c2 = [0, 0, 1]

Color en v(u) : c(u) = (1 – u) c1 + (u) c2

Page 27: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 27/34

 

Polígonos Vecinos

?

Polígonos Vecinos

incorrecto

Page 28: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 28/34

 

?

Polígonos Vecinos

correcto

Polígonos Vecinos

Page 29: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 29/34

 

correcto

Polígonos Vecinos

Transparencia

Conocida como el canal Alfa del color,determina que tanto se puede ver a través delobjeto

El color necesita 4 componentes ahora:

glColor4f(R, G, B, Alfa);

El parámetro alpha cambia el nivel de opacidadglColor4f(R, G, B, 1.0); // opacoglColor4f(R, G, B, 0.0); // transparenteglColor4f(R, G, B, 0.5); // semi-transparente

Page 30: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 30/34

 

Transparencia

Se necesita habilitar la mezcla detransparecia:glEnable(GL_BLENDING)

Además, se necesita cambiar el métodode mezcla con:glBlendFunc(GL_SRC_ALPHA,

GL_ONE_MINUS_SRC_ALPHA)

Esto hace que la función sea controlada por elcuarto canal del color que es alfa

Transparente Parcial

habilitar mezcla de transparencia

glEnable(GL_BLEND);

cambiar el modo de mezcla

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

glBegin(GL_LINES);

glColor4f(0, 1.0, 0, 1.0); verde opaco

glVertex2f(0.0, 0.0);

glColor4f(0, 1.0, 0, 0.0); verde transparente

glVertex2f(1.0, 0.0);

glEnd();

Page 31: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 31/34

 

ver simple7.c

Transparente Parcial

Modelos de Sombreado

El modo por default es el sombreadosuave (“smooth shading”)

glShadeModel(GL_SMOOTH)

OpenGL interpola los colores en losvértices a través del polígono

Page 32: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 32/34

 

Modelos de Sombreado

Otro modo es el sombreado plano (“flat shading”)

glShadeModel(GL_FLAT)

El color del primer vértice determina el color derelleno de todo el polígono

Modo de Dibujo de Líneas

El modo por default es “jagged lines”

glDisable(GL_LINE_SMOOTH)

Rápido de calcular, pero no se ve bien

50x de aumento:

Page 33: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 33/34

 

Líneas Suaves – Anti-Aliasing

Puede habilitarse el modo de dibujo suavepara líneas

glEnable(GL_LINE_SMOOTH)

Más lento de calcular, pero se ve mejor

50x de aumento:

 

Material elaborado por:

Isaac Rudomín [email protected]

Erik Millán [email protected]

Ma.Elena Melón [email protected]

Page 34: 1.2a OpenGL

5/12/2018 1.2a OpenGL - slidepdf.com

http://slidepdf.com/reader/full/12a-opengl 34/34

 

Material suplementario yExpositor:

José Luis Gordillo

[email protected]