OpenGL - Color Iluminación y Materiales

37
Eduardo Rivera ([email protected] ) http://eriveraa.wordpress.com OPENGL Color, Iluminación y Materiales (Color, Lighting and Materials)

Transcript of OpenGL - Color Iluminación y Materiales

Page 1: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

OPENGLColor, Iluminación y Materiales

(Color, Lighting and Materials)

Page 2: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR

El fin de todos los cálculos (tomando en cuenta

comandos, estado, parámetros) de OpenGL es

determinar el color final de cada pixel que se

dibuja en la pantalla.

Page 3: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

PERCEPCIÓN DEL COLOR

La luz está compuesta de fotones (photons).

Los fotones son pequeñas partículas de luz

Tienen su propio camino (onda)

Vibran en su propia frecuencia

Tiene su propia longitud de onda (wavelength)

Tiene su propia posición y dirección

El espectro visible de fotones

De 390 nanómetros (nm) que es el violeta

Hasta 720 nm que es el rojo

Forman un arcoiris (violeta, indigo, azul, verde,

amarillo, naranja y rojo)

Page 4: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

PERCEPCIÓN DEL COLOR

Nuestros ojos ven una mixtura de fotones de diferentes frecuencias.

La fuentes de luz reales se caracterizan por la distribución de las frecuencias de los fotones que emiten.

El ojo humano percibe el color cuando las celdas de la retina (cone cells) son impactadas por los fotones!!

Hay 3 tipos de celdas que responden a 3 diferentes longitudes de onda:

Una celda responde a la luz ROJA

Una celda responde a la luz VERDE

Una celda responde a la luz AZUL

Page 5: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

PERCEPCIÓN DEL COLOR

Los fotones que impactan

la retina, generan

excitación en ella

La mixtura excita las 3

celdas en diferentes

magnitudes generando

diferentes colores.

De esta manera se

generan un cantidad

inmensa de colores

(además de los colores del

espectro visible).

Page 6: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR GENERADO POR COMPUTADOR

Los monitores emiten fotones (disparan rayos de fotones).

Los monitores emiten 3 tipos de luz (rojo, verde y azul).

El monitor emula los colores visibles iluminando los píxeles

Usa una combinación de rojo, verde y azul.

Excita las celdas de la retina de una manera que perciban el color.

Page 7: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

HISTORIA

1982, tarjetas Hercules: cada pixel solo podía tener 2 colores (monocromáticos) o 1 bit.

1983, tarjetas CGA (computer graphics adapter)

Resolución de 320 x 200 píxeles.

Solo podía mostrar 4 de 16 colores en la pantalla (4 bits).

1984, tarjetas EGA (enhanced graphics adapter)

Resolución de 640 x 350 píxeles.

Podía mostrar 16 colores en pantalla

1987, tarjetas VGA (video graphics array)

16 colores en resolución de 640 x 480 píxeles.

256 colores en resolución de 320 x 200 píxeles (8 bits).

Se acercaba a lo foto-realista.

Comenzaron a existir los juegos en 3D y aplicaciones gráficas interesantes.

Page 8: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

HISTORIA

1988, tarjetas SVGA (Super-VGA)

Resoluciones de 800 x 600 y luego 1024 x 768.

256 colores, luego 32000 y luego 65000.

Monitores actuales

16 millones de colores (32 bits).

Resoluciones mayores a 1024 x 768 píxeles.

Tarjetas de video externas: Nvidia, ATI.

Page 9: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

OpenGL especifica un color por sus intensidades

de rojo, verde y azul (RGB).

Los monitores actuales soportan cualquier

combinación RGB.

Los colores pueden ser expresados:

RGBA Mode, como una combinación RGB y Alpha

para cada color de un píxel.

Color-index Mode, un número identifica cada color

de un píxel.

El mas utilizado es el RGBA Mode, y será el que

utilicemos.

Page 10: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

RGB Mode

Page 11: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

Color-index Mode:

Page 12: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

Los valores de R, G y B van de 0 (cero), mínima intensidad

Hasta 1, máxima intensidad o mayor brillo.

RGB (0,0,0) es el color negro (ausencia de color).

RGB (1,1,1) es el color blanco.

Utiliza 8 bits para cada color 8 bits para el rojo

8 bits para el verde

8 bits para azul

Total = 24 bits

Adicionalmente se utilizan 8 bits para el valor Alpha (transparencia).

En algunos comandos OpenGL (glColor3ub, glColor4ub) se puede utiliza el rango de 0 a 255.

Page 13: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

El espacio de colores RGB. (RGB colorspace)

Page 14: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

Establecer el color en OpenGL:

<x> : número de argumentos. Pueden ser 3 o 4 (para el componente Alpha).

<t>: tipo de dato. Puede ser:

b (byte)

d (double)

f (float)

i (integer)

s (short)

ub (unsigned byte)

ui (unsigned int)

us (unsigned short)

void glColor<x><t>(red, green, blue, alpha);

Page 15: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

Shading (Sombreado)

La función glColor establece el color utilizado para

los vértices dibujados (dependiendo del comando

utilizado).

Si especificamos el color de cada vértice de una línea,

cual es el color del punto medio?

Shading nos permite realizar una transición suave

entre un color y otro.

Cualquier par de puntos dentro del espacio de colores

RGB puede ser conectado mediante una línea.

OpenGL hace el trabajo de la transición de colores

por nosotros!

Page 16: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

Como se aplica el sombreado en una línea:

Page 17: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

Hay 2 tipos de modelo de sombreado (Shading

Model)

Smooth shading (suave): transición suave entre

colores.

Flat shading (plano): no hay transición entre

colores.

Se aplica mediante la función glShadeModel()

glShadeModel(GL_SMOOTH) ó

glShadeModel(GL_FLAT)

Page 18: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

Ejemplo de sombreado// Enable smooth shading

glShadeModel(GL_SMOOTH);

// Draw the triangle

glBegin(GL_TRIANGLES);

// Red Apex

glColor3ub((GLubyte)255,(GLubyte)0,(GLubyte)0);

glVertex3f(0.0f,200.0f,0.0f);

// Green on the right bottom corner

glColor3ub((GLubyte)0,(GLubyte)255,(GLubyte)0);

glVertex3f(200.0f,-70.0f,0.0f);

// Blue on the left bottom corner

glColor3ub((GLubyte)0,(GLubyte)0,(GLubyte)255);

glVertex3f(-200.0f, -70.0f, 0.0f);

glEnd();

Page 19: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

Ejemplo de sombreado

Page 20: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

COLOR EN OPENGL

Otro ejemplo:

glBegin(GL_POLYGON);

glColor3f(1.0f,1.0f,1.0f);

glVertex3f(-10,15,0);

glColor3f(0.0f,0.0f,0.0f);

glVertex3f(10,5,0);

glColor3f(1.0f,0.0f,0.0f);

glVertex3f(10,-5,0);

glColor3f(0.0f,1.0f,0.0f);

glVertex3f(0,-10,0);

glColor3f(0.0f,0.0f,1.0f);

glVertex3f(-10,-5,0);

glEnd();

Page 21: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

El ojo humano percibe los colores mediante los fotones que llegan a la retina.

Los colores que percibimos dependen del color del objeto y de la iluminación aplicada.

El color percibido también depende de cómo los objetos reflejan o absorben la luz.

Page 22: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Ejemplo: El color del océano depende de la iluminación

del día. Es decir se ve diferente si es un día soleado y despejado o si es un día oscuro y nublado.

Inclusive los objetos no se perciben tridimensionales hasta que son iluminados !!

Es importante comprender la interacción entre los objetos y la luz (iluminación que reciben).

OpenGL aproxima el mundo real en términos de iluminación (no es exacto).

Page 23: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Ambiente sin iluminación

Page 24: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Ambiente con iluminación

Page 25: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación Real

Existen múltiples fuentes que emiten luz (focos,

lámparas, sol, etc.)

Las superficies de los objetos pueden absorber y/o

reflejar la luz.

Nosotros percibimos la luz emitida por las fuentes de

luz, así como la luz reflejada por los objetos.

Iluminación OpenGL

El color de una fuente de luz está caracterizado por

las cantidades RGB que ella emite.

El material de la superficie (del objeto) está

caracterizado por los porcentajes RGB que refleja de

la luz aplicada sobre el mismo.

Page 26: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación OpenGL

La luz puede venir de diferentes fuentes, las cuales

pueden ser encendidas/apagadas.

Algunas luces vienen de una posición específica y con

una dirección determinada.

Algunas luces son dispersadas alrededor de la escena.

En OpenGL, las fuentes de luz solo tienen efecto si es

que existen superficies que las absorban y/o las

reflejen!

Page 27: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación OpenGL

Se asume que las superficies están compuestas de un

material con sus propiedades particulares.

Un material puede…

emitir su propia luz,

dispersar la luz que recibe,

Y puede reflejar un porcentaje de la luz recibida en una

dirección particular.

Page 28: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación OpenGL

La luz real es compleja de modelar, sin embargo

OpenGL sigue un modelo simplificado.

El modelo de iluminación OpenGL está dividido en:

Iluminación AMBIENTAL (Ambient)

Iluminación DIFUSA (Diffuse)

Iluminación ESPECULAR (Specular)

Iluminación EMISIVA (Emissive)

Page 29: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación Ambiental (Ambient) Es luz que se ha dispersado

totalmente en el ambiente.

Su dirección es imposible de determinar.

Parece que viniera en todas las direcciones.

La luz ambiental ilumina los objetos en todas las superficies y en todas las direcciones.

Los objetos son siempre visibles y coloreados (o sombreados) independientes de su rotación o ángulo de visualización.

Se puede interpretar como un “factor de brillo global” aplicado por una fuente de luz.

Page 30: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación Ambiental (Ambient)

GLfloat globala[] = { 0.1, 0.1, 0.1 };

glLightModelfv( GL_LIGHT_MODEL_AMBIENT, globala );

Page 31: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación Difusa(Diffuse) Es la luz que viene en una determinada

dirección desde un punto muy lejano (El Sol)

Los rayos de luz son considerados paralelos.

Al impactar la superficie de un objeto, se dispersa por igual en todas las direcciones.

Se refleja con una intensidad proporcional al ángulo entre el rayo de luz y la superficie (utiliza la normal de la superficie)

No es afectada por la posición del observador.

En esencia, la luz difusa es la que genera el sombreado (cambio de color) en la superficie alumbrada.

Es llamada comúnmente “iluminación suave”.

Page 32: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación Difusa(Diffuse)

GLfloat light0_pos[] = { 1.0, 2.0, 3.0, 0.0 };

glLightfv( GL_LIGHT0, GL_POSITION, light0_pos );

NOTE: 4th component of vector indicates either a positional

source (1.0) or a directional source (0.0)

Page 33: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación Especular (Specular) Es parecida a la difusa pero es altamente

direccional.

Tiene como origen un punto en el espacio, desde el cual es emitido en todas las direcciones.

Interactúa profundamente con la superficie impactada.

Tiende a generar una mancha brillosa (bright spot) en la superficie que alumbra.

Está muy relacionada con el brillo de la superficie.

Se refleja en una dirección determinada.

Es afectada por la posición de la luz y la posición del observador.

Es llamada comúnmente “iluminación fuerte”.

Page 34: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación Especular (Specular)

GLfloat light0_pos[] = { 1.0, 2.0, 3.0, 1.0 };

glLightfv( GL_LIGHT0, GL_POSITION, light0_pos );

Page 35: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Iluminación Emisiva (Emissive)

Es una manera de emular los objetos que “emiten”

luz.

Los objetos tienen un color emisivo que simula luz

que brota de ellos.

El color emisivo…

simplemente agrega intensidad al objeto.

no es afectado por ninguna fuente de luz.

tampoco introduce una luz adicional al ambiente, es decir

NO alumbra ni afecta a los objetos de los alrededores.

Page 36: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

ILUMINACIÓN

Uniendo todo!

Una fuente de luz está compuesta por los 3 tipos de

iluminación (ambiental, difusa y especular) en

diferentes magnitudes.

Cada uno de los tipos de iluminación tiene un color

RGB determinado.

Ejemplo de un rayo láser rojo (mayormente

especular):

Page 37: OpenGL - Color Iluminación y Materiales

Eduardo Rivera ([email protected])

http://eriveraa.wordpress.com

REFERENCIAS

OpenGL Programming Guide : Capítulos 4,5

OpenGL SuperBible: Capítulos 5,6

Beginning OpenGL Game Programming: Capítulo 5

Tutoriales Fallout Software: http://www.falloutsoftware.com/tutorials/gl/gl8.htm

Tutoriales BlackByte:

http://black-byte.com/general/superfices-e-iluminacion-en-opengl/

Tutoriales Programación Gráfica:

http://pgrafica.webideas4all.com/Contenido.html

Tutoriales Flipcode:

http://www.flipcode.com/archives/Light_Mapping_Theory_and_Implementation.shtml

NeHe Productions:

http://nehe.gamedev.net/