OpenGL

OPENGL
Color, Iluminación y Materiales

(Color, Lighting and Materials)
Eduardo Rivera (eriveraa@gmail.com)

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.

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)

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

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

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.

COLOR EN OPENGL
 RGB Mode

COLOR EN OPENGL
 Color-index Mode:

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.
COLOR EN OPENGL
 El espacio de colores RGB. (RGB colorspace)

COLOR EN OPENGL
 Establecer el color en OpenGL:
void glColor<x><t>(red, green, blue, alpha);
 <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)
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!

COLOR EN OPENGL
 Como se aplica el sombreado en una línea:

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)

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

glVertex3f(200.0f,-70.0f,0.0f);
// Blue on the left bottom corner

glVertex3f(-200.0f, -70.0f, 0.0f);
glEnd();
COLOR EN OPENGL
 Ejemplo de sombreado

COLOR EN OPENGL
 Otro ejemplo:
glBegin(GL_POLYGON);
glColor3f(1.0f,1.0f,1.0f);
glVertex3f(-10,15,0);
glVertex3f(10,5,0);
glVertex3f(10,-5,0);
glVertex3f(0,-10,0);
glVertex3f(-10,-5,0);
glEnd();
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.

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).
ILUMINACIÓN
 Ambiente sin iluminación

ILUMINACIÓN
 Ambiente con iluminación

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.
ILUMINACIÓN
 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!

ILUMINACIÓN
 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.

ILUMINACIÓN
 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)

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.

ILUMINACIÓN
 Iluminación Ambiental (Ambient)
GLfloat globala[] = { 0.1, 0.1, 0.1 };

glLightModelfv( GL_LIGHT_MODEL_AMBIENT, globala );
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”.
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)
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”.

ILUMINACIÓN
 Iluminación Especular (Specular)
GLfloat light0_pos[] = { 1.0, 2.0, 3.0, 1.0 };

glLightfv(
Eduardo GL_LIGHT0, GL_POSITION, light0_pos );
Rivera (eriveraa@gmail.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.

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

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/

OpenGL - Color Iluminación y Materiales

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

OpenGL - Color Iluminación y Materiales

Uploaded by

Copyright:

Available Formats

Color, Iluminación y Materiales

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

 <x> : número de argumentos. Pueden ser 3 o 4 (para

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

// Draw the triangle

// Green on the right bottom corner

// Blue on the left bottom corner

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

 Y puede reflejar un porcentaje de la luz recibida en una

Eduardo Rivera (eriveraa@gmail.com)

 Iluminación ESPECULAR (Specular)

 Iluminación EMISIVA (Emissive)

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

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

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

NOTE: 4th component of vector indicates either a positional

Eduardo Rivera (eriveraa@gmail.com)

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

Eduardo Rivera (eriveraa@gmail.com)

Eduardo Rivera (eriveraa@gmail.com)

You might also like