Grficas Interactivas

1
Gráficas Interactivas

• Isaac Rudomín (Instructor)
• rudomin_at_itesm.mx
• Erik Millán (asistente)
• emillan_at_itesm.mx

2
Luz y Color

• Color
• Iluminación y sombreado

3
Luz acromática

• Es luz representada por matices de un solo color
  
• Una TV blanco y negro
• La luz se describe con un solo parámetro
• Intensidad o luminancia (propiedad física)
• Brillo (percibido)

4
Gamma

• La fuente de electrones de un CRT no tiene una
  relación lineal entre voltage e intensidad. Es
• k constante de intensidad total
• N número d eelectrones que caen en el fósforo
• I - intensidad
• El valor g es un parámetro de el CRT y varía
  normalmente entre 2.2-2.5.
• Se llama gamma
• LCDs tienen propiedades similares

5
Corrección de Gamma

• Si gamma no se corrige, habrá no linearidades en
  la salida
• Corrección de Gamma
• K y g son funciones del diseño del monitor.
• En los sistemas reales se hace esto (c entre
  0,1)

6
Curvas de corrección de Gamma
7
Niveles de intensidad

• Sistemas gráficos son discretos
• Hay un número fijo de pasos de intensidad
• Cuantos se necesitan?
• Rango dinámico
• Razón entre valor mas grande y mas pequeño
• Si minuna vela y maxsol, inclusive 65536 pasos
  serán muy perceptibles

8
Comúnmente

• Computer graphics
• 8 bits 256 pasos
• Se nota mucho
• Televisión
• 10 bits 1024 pasos
• Cine
• 10-12 bits 1024-4096 pasos
• Casi imperceptible

9
Luz cromática
Suficiente BN Que tal el COLOR!!!

• Percepción de color (HSL)
• Hue distingue los colores en el espectro
• Saturation Que tan lejos el color esta de un
  gris de la misma intensidad.
• Lightness La intensidad percibida de la luz
  reflejada de un objeto. Si el objeto es radiante,
  lo llamamos brightness.

10
Bases del color

• Elementos del color

11
Psicofísica

• Psicofísica estudia la percepción de la luz
• Colorimetría, en cambio estudia cualidades mas
  físicas (longitud de onda, luminancia)
• Longitud de onda dominante
• Al ver un color, vemos una longitud de onda mas
  que cualquier otra es el hue.
• Hay un número infinito de longitudes de onda,
  pero no podemos poner infinito numero de
  pigmentos en un CRT

12
Teoría Triestimulo de la percepción del color

• Hay tres tipos de sensores de color (conos) en
  los ojos.
• Sensbles a longitudes de onda alrededor del rojo,
  verde, azul
• El color se representa en el cerebro como una
  tripleta que indica la excitación de esos tres
  sensores

13
Sensitividad a color del ojo
Respuesta espectral para los tres tipos de conos
en la retina humana
Cantidad de los tres primarios que se requieren
para capturar todas las longitudes de onda del
espectro
14
Mapeos varios-a-uno

• Un número infinito de distribuciones espectrales
  distintas se verán igual pues se reducen a la
  misma tripleta
• Podemos combinar tres colores combinados,
  entonces para representar muchos posibles
  colores! A esos tres colores se les llama
  primarios.

r
g
b
r
g
b
15
Algunas cuestiones

• Mas sensible verde
• Menos sensible azul
• Sensitividad al color decrece al disminuir la
  iluminación
• Ojo reconoce cientos de miles de colores, y 128
  hues (tintes) saturados

16
Características del Ojo

• Bastones sensores de luminancia
• como 120 millones
• Conos sensores de color
• como 6-7 millones

17
Fisiología de la Visión

• El centro de la retina es llamada la fovea.
• Conos mucho mas densos aqui que en periferia

18
Hecho asombroso

• Las curvas que representan la percepción del cono
  no son picos simples. Son curvas complejas.
• Inclusive son negativas en algunas partes!
• RGB no puede reproducir todos los colores que
  podemos ver.

19
Percepción otras consideraciones

• La percepción de color
• varía de persona a persona
• Es afectada por adaptación
• Es afectada por el color que lo rodea

20
Diagrama de cromacidad CIE

• Debemos poder representar todo color
• La Commission Internationale de lÉclairage
  (CIE) definió en1931 tres primarios estándar que
  pudieran definir todas las luces que podemos ver.
  
• Estas primarias se llaman X, Y, y Z. Están
  diseñadas para reproducir cualquier color visible
  con igual luminancia. Estos primarios no son
  realmente existentes!
• Los colores se representan por una tripleta
  (X,Y,Z)
• Como nos interesa el color en CIE y no la
  luminancia, la normalizamos a 1

21
Diagrama de cromacidad CIE

• Valores de Cromacidad
• Nota xyz1, no requerimos z.
• CIE entonces los valores se representancomo
  duplas (x,y) y podemos dibujar en 2D todos los
  valores de cromaticidad
• Colores CIE colors se representan como
• (x,y,Y)

22
(No Transcript)
23
Mezclando colores en CIE

• Mezclando colores Si dos colores están en el
  diagrama de CIE, el color producido al mezclar
  estos dos colores estará en la línea entre ellas
  en el diagrama.
• Dado cualquier conjunto de colores, cualquier
  combinación de estos estará en la envolvente
  convexa de los puntos en el diagrama CIE
• Este es rango de color
• Dispositivos que utilicen 3 primarios de
  cualquier tipo, para producir colores, tendrán un
  rango de colores triangulares en el diagrama CIE.
  
• Ningún triángulo con primarios dentro del
  diagrama puede cubrir toda la carta. Los
  primarios CIE no existen realmente!

24
RGB Color Gamut
25
Colores no espectrales

• El diagrama CIE reproduce colores que son no
  espectrales, es decir, que no existen en el
  espectro, pero solo son percibidos.

26
RGB

• Nos contentaremos con el subconjunto basado en
  los primarios Rojo, Verde Azul

Blue (0,0,1)
Cyan (0,1,1)
White (1,1,1)
Magenta (1,0,1)
Black (0,0,0)
Green (0,1,0)
Red (1,0,0)
Yellow (1,1,0)
The RGB Color Cube
27
CMY

• RGB supone que están sumando primarios
• Las superficies reflejantes, hacen lo opuesto
• Tienen primarios sustractivos
• Ejemplos Cyan, Magenta, Amarillo
• Cyan (0,1,1) -Rojo (1,0,0)
• Magenta (1,0,1) -Verde (0,1,0)
• Amarillo (1,1,0) -Azul (0,0,1)

28
RGB a CMY

• Simple
• C 1 R
• M 1 G
• Y 1 B
• Inversamente
• R 1 C
• G 1 M
• B 1 - Y

29
CMYK

• La tinta negra es mas barata que los colores
• K is negro
• CMY a CMYK
• Kmin(C,M,Y)
• CC-K
• MM-K
• YY-K

30
Sistemas de color alternativos

• RGB es pobre como sistema perceptual
• HLS es mejor para que un humano seleccione color
• H Hue el color (tinte)
• S Saturation la pureza del color
• L Luminance el brillo

31
Cubo RGB visto desde la línea gris
Blu
Magenta
Cyan
Grn
Red
Yellow
32
Modelo de hexaconos duales HLS

• Parámetros
• H ángulo relativo a rojo
• L altura desde el negro
• S porcentaje del camino desde el centro

33
Algunos ejemplos de colores en HLS
Red (0, 0.5, 1.0) Blue (240, 0.5, 1.0) White
(, 1.0, )
34
HSV

• H - Hue. Ángulo de 0 a 360 grados que representa
  elángulo medido respecto a un vector que va del
  centro al rojo (ángulo 0). Para la línea
  central, grís, está indefinido.
• S - Saturation. Es cuan lejos de la línea del
  centro estamos, normalizada la cara del hexacono
  a 1.0. Para negro, este valor se ignora, pero
  usualmente se pone en 0.
• V - Value. Es que tan lejos estamos
  verticalmente del negro. Es brillantez, pero no
  todos los valores con el mismo valor V serán
  igual de brillantes. Por que?

35
Hexacono HSV
36
Convertiendo entre espacios de color

• Puede expresarse matricialmente
• YIQ es el modelo de color NTSC donde Y es
  luminancia, I Q color
• Se usó ese modelo pues permite compatibilidad con
  TV blanco y negro

37
Iluminación y sombreado
38
Iluminación

• Dado un tríangulo 3-D y un punto de vista podemos
  dibujar los pixeles correctos
• Si queremos crear imágenes realistas debemos
  simular la iluminación de las superficies en la
  escena
• Estamos simulando física y óptica
• Usaremos muchas aproximaciones para lograr
  suficiente velocidad

39
Definiciones

• Iluminación
• el transporte de energía (en particular el flujo
  luminoso de la luz visible) de las fuentes de luz
  a las superficies y puntos
• Incluye iluminación directa e indirecta
• Iluminado el proceso de calcular la intensidad
  luminosa (luz saliente) en un punto 3-D
  particular, usualmente sobre una superficie
• Sombreado el proceso de asignar colores a pixeles

40
Definicioness

• Los modelos de iluminación caen en dos
  categorías
• Empíricos formulaciones sencillas que aproximan
  fenómenos observados
• Basados en física modelos baseados en la física
  real de la luz interactuando con la materia
• En gráficas interactivas se usan sobre todo
  modelos empíricos, pero los modelos basados en
  física son cada vez mas comunes para gráficas
  realistas

41
Componentes de la Iluminación

• Fuentes de Luz
• Espectro de emitancia (color de la luz)
• Atributos geométricos
• Posición
• Dirección
• Forma
• Atenuación direccional
• Propiedades de la superficie
• Espectro de reflejancia (color de la superficie
• Atributos geométricos
• Posición
• Orientación
• Microestructura

42
Simplificaciones para gráficas interactivas

• Solo iluminación directa de emisores a
  superficies
• Simplificar geometría de emisores a casos
  triviales

43
Modelos de Iluminación Global

• Múltiples interacciones de luz y objetos
• Aún no es tiempo real
• Ejemplos Raytracing, radiosity, photon mapping
  

44
Modelos de Iluminación Local

• Una sola interacción de luz y objetos
• Tiempo Real
• OpenGL
• EjemploModelo de iluminación de Phong

45
Elementos del modelo de Iluminación

• Fuentes de luz número, tipo, color
• reflejos
• Propiedades del material reflexión y
  absorción de luz

3D feel, depth perception
lighting model approximation of real-world
lighting!
46
Luz ambiente

• Objectos no iluminados directamente deben verse
• Aproxima trivialmente la iluminación indirecta,
  iluminando por igual a todas las superficies,
  dependiendo solo de materiales de propiedad

47
Luz ambiente

• Para cada longitud de onda, la luz ambiente
  reflejada de una superficie, depende de
• Propiedades de superficie
• La intensidad de la luz ambiente (constante para
  todos los puntos en todas las superficies)
• Ireflected kambient Iambient

48
Fuentes de luz direccionales

• Suponemos que todos los rayos de luz de una
  fuente direccional son paralelos, como si la
  fuente estuviera infinitamente lejos (i.e. el
  sol)
• La dirección de las superficie a la fuente de luz
  es importante para iluminar la superficie
• Con una luz direccioneal, la dirección es
  constante para todas las superficies en la escena

49
Fuentes de luz puntuales

• Emite luz igualmente en todas direcciones a
  partir de un solo punto
• La dirección a la luz desde un punto en la
  superficie difiere para distintos puntos
• Necesitamos calcular un vector normalizado a la
  luz para todo punto a iluminar

50
Otras fuentes de luz

• Spotlights son puntuales, pero con intensidad que
  se corta en ciertas direcciones
• Fuentes de luz de área definen una superficie de
  emisión 2-D, usualmente disco o polígono (luces
  fluorescentes)
• Pueden generar sombras suaves (por que?)

51
Modelos de iluminación discretos

• Lo que ocurre cuando una luz da con una
  superficie es muy complejo.
• Proceso continuo
• Luz de infinitos ángulos se refleja en
  direcciones infinitas
• Nosotros queremos determinar la intensidad de un
  pixel con
• Número finito de luces
• Reflejos finitos en el espacio
• Direcciones de iluminación finitas
• Debemos tener un modelo discreto para iluminación

52
Modelos de Iluminación

• Que debe tener?
• Discreto
• Luces
• Tipos de reflejos
• Los sistemas comerciales llegan a ser bastante
  complejos

53
Elementos de Iluminación en un punto
N normal a la superficie L Vector a la luz V
Vector al ojo R dirección de reflexión
54
Reflexión

• Requerimos saber la cantidad de luz que se
  refleja hacia el ojo

This consists of several components
55
Física de la reflexión

• En el nivel microscópico, la superficie
  reflejante especular es muy suave
• Por tanto, rayos de luz tienen alta probabilidad
  de rebotar de la microgeometría como de un espejo
• Entre mas suave la superficie, mas cercana a un
  espejo perfecto

56
Física de la reflexión

• Reflexión difusa ideal es una superficie muy
  rugosa (ejemplo, gís)
• Debido a las variaciones microscópicas un rayo de
  luz tiene las mismas probabilodades de ser
  reflejada en cualquier dirección sobre el
  hemisferio

57
Reflexión Difusa

• Reflexión Difusa luz reflejada en todas
  direcciones por igual (o casi)
• Aparte de los espejos, que son puramente
  especulares, casi todos los objetos tienen
  reflexión difusa.
• Que determina la intensidad de la reflexión
  difusa?

58
Reflexión Difusa Características

• Como la intensidad es igual entodas direcciones,
  la otra característica es el ángulo entre la luz
  y la normal a la superficie. Entre menor el
  ángulo, mayor la reflexión difusa

59
Ley de Lambert
w
w
L
N
L
N
q
w
La reflexión difusa decrece en intensidad por el
coseno del ángulo entre la luz y la normal a la
superficie
w
60
Ley de Lambert
61
Cálculo de los reflejos difusos

• El ángulo entre la normal a la superficie y la
  luzy la luz entrante, se llama ángulo de
  incidencia
• Idiffuse kd Ilight cos ?
• En la práctica se usa aritmética vectorial
• Idiffuse kd Ilight (n l)

n
l
?
62
Reflexión especular

• Reflexión especular Si al dar con la superficie
  se refleja sobre todo en la dirección de
  reflexión
• Hay usualmente algo de difusión.
• Un objeto especular perfecto, sin difusión, es un
  espejo.
• La mayoría de los objetos tienen algo de
  especular

63
Reflexión especular

• Superficies brillosas exhiben reflexión especular
• Metal pulido
• Terminado automotriz
• La luz que brilla en una luz especular causa un
  punto brillante, que se llama brillo especular
• Donde aparecen esos brillos es función de la
  posición del ojo, o sea, la reflexión especular
  es dependiente de la vista

64
Óptica de Reflexión

• Sigue la Ley de Snell
• El rayo de luz entrante y el reflejado están en
  el mismo plano con la normal a la superficie, y
  elángulo que el rayo reflejado forma con la
  normal es igual al formado por el rayo entrante y
  la normal

?l ?r
65
Reflectancia especular no ideal

• La ley de Snell se aplica a espejps perfectos,
  pero los reflejos de superficies brillantes menos
  perfectamente especulares, como se capturan?
• Una opción modelar explícitamente la
  microgeometría
• Otra opción, una aproximación empírica en
  general, gran parte de la luz reflejada sigue la
  dirección predicha por laLey de Snell, pero
  debido a las variaciones microscópicas de la
  superficie, parte de la luz puede reflejarse en
  direcciones un poco desviadas del rayo ideal.
  Conforme el ángulo a partir del rayo ideal crece,
  habrá menos luz reflejada

66
Reflectancia especular no ideal

• An illustration of this caída según ángulo
• Como modelamos esta caida?

67
Iluminación de Phong

• Este es el modelo de iluminación mas común

• El término nshiny es empírico y aunque el modelo
  no tiene base física, funciona en la práctica

68
Iluminación de Phong nshiny

• Diagrama que muestra el término de reflectancia
  de Phong variando según nshiny

69
Cálculo de iluminación de Phong

• El término cos de la iluminación de Phong se
  puede calcular con aritmética vectorial
• Una manera eficiente de calcular R

70
Modelo de Iluminación de Phong

• Incluyendo todos los componentes

71
Ejemplos

• Incrementar difuso

Incrementar ambiente
Incrementar especular
72
Blinn-Torrence

• Modificación que incrementa velocidad del cálculo

h (l v) / l v halfway
vector cos(alpha) h n alpha ½ phi Es una
aproximación decente
73
Color difuso y especular

• Típicamente los colores reflejados para reflexión
  difusa y especular son distintos
• Diufuso Generalmente la apariencia de la
  superficie
• Especular El color de los brillos, usualmente
  mas blancos que la superficie

74
De donde viene eso?

• La mayoría de las superficies tienen
• Color profundo, el color de la pintura, acabado,
  material, etc.
• Color difuso
• Características de reflejo de la superficie,
  barniz, pulido
• Color especular

75
Otro modelo modelo de Hall
Reflejo especular de fuentes de luz
Transmisión especular de fuentes de luz
Reflejo difuso de fuentes de luz
Reflejo especular de otras superficies
Transmisión especular de otras superficies
Luz ambiente
76
Transmisión

• Transmión es Luz que pasa a través de materiales

77
Transmisión
N
V
T
Lj
-N
Hj
esta vez es
h1 y h2 índices de refracción
78
Índice de Refracción

• Razón de la velocidad dela luz en el vacío a la
  velocidad de la luz en un medio dado

79
Transmisión con refracción

• Dados índices de refracción sobre y bajo una
  superficie, se calcula el ángulo entre el vector
  de vista y de transmisión según la ley de Snell

N
V
qi
hi
hj
qj
T
-N
80
Reflejo interno total

• Si la luz va de un hi a un hj menor (i.e. agua a
  aire) se incrementa el ángulo respecto a la
  normal

Esto puede llevar a un ángulo para T gt90
grados! Esto se llama reflejo interno total, y el
término raiz en la ecuación anterior da negativo
N
V
V
hi
T
hj
T
81
Modelos de sombreado

• Donde calcular los colores
• Simular superficies curvas
• Sombreado suave
• Gouraud
• Phong
• Problemas

82
Iluminación es distinto a sombreado

• Propiedades de fuentes de luz y materiales se
  usan para iluminar un vértice.
• El resultado del algoritmo de iluminación lo
  utilizan los algoritmos de sombreado
• Sombreado poligonal incluye Plano, Interpolado
  (Gouraud y Phong).

83
Sombreado Plano

• Normal antes de vértices
• glNormal3f(nx,ny,nz)
• glVertex3f(x,y,z)
• Sombreado es constante en el polígono!

84
Sombreado Interpolado

• Habilita con glShadeModel(GL_SMOOTH)
• Calcula color en cada vértice
• Interpola color en interior
• Se calcula durante rasterización
• Mejor imagen
• Mas costo
• Simula superficies suaves

85
Normales en los Vértices

• Pueden estar en el modelo
• Calculados
• Aproximados promediando las normales de las caras
  que comparten el vértice

e
f
d
a
c
v1
v2
b
86
Ejemplo -

• Puntos
• Triangula los puntos
• Calcula normales para cada triángulo
• Calcula normales a los vértices
  promediandonormales de polígonos incidentes

87
Sombreado de Gouraud

• Calcula color (usando iluminación de Phong) en
  los vértices
• Interpola color sobre polígono
• Implementado en OpenGL

88
Ejemplo
Notia 2D
(x,y)
intensidad
(80,200)
.7
Que color hay aqui?
(70,150)
(0,120)
.65
(180,80)
.6
(100,0)
.5
89
Interpolación Lineal
(110, 75) 0.7
y60, cuanto vale x?
(70, 50) 0.5
90
Interpolación Bilineal
(80,200)
.7
(30,150) 0.669
(121.7,150) 0.658
(70,150)
(0,120)
.65
(180,80)
.6
(100,0)
.5
91
Sombreado de Gouraud

• Ventajas
• Cálculo de color solo en vértices
• Desventajas
• No simula la curva, solo el hecho de que los
  colores se interpolan, por lo que los colores
  solo están entre los de los vértices

92
Ejemplos
93
Brillos especulares

• Que pasa si el brillo especular esta dentro de un
  poligono?

Brillo
94
Sombreado de Phong

• No confundir con Iluminación de Phong
• Interpola linealmente la normal, aplicando el
  modelo de iluminación de Phong en cada Pixel
• Misma entrada que Gouraud
• Resultados muy suaves
• Mucho mas caro

95
Phong vs Gouraud
96
Sombreado de Phong

• Ventajas
• Muy buena calidad
• Brillos
• Requiere menos polígonos
• Desventajas
• Cálculo de iluminación en cada pixel
• No soportado en OpenGL
• Pero ahora hay pixel shaders por hardware!!!!

97
Problemas con sombreado interpolado

• Silueta poligonal
• Depende de orientación (se interpola en pantalla)

98
Problemas con sombreado interpolado

• Luces en escena con polígonos grandes
• Vértices no compartidos o faltantes

99
Problemas con sombreado interpolado

• Normales de vértices poco representativas

100
Problemas con sombreado interpolado

• Polígonos demasiado grandes

101
Problemas con sombreado interpolado

• Polígonos concavos

Cambio abrupto de color aqui
102
Punto lateral Transformar Normales

• Es irritante, pero la matriz que transforma un
  vector normal no es la misma que transforma los
  puntos correspondientes

103
Transformar Normales

• Si A es la matriz que transforma puntos, (AT)-1
  es la matriz que transforma normales

104
Habilitar luces e iluminación

• Iluminación de be habilitarse
• glEnable(GL_LIGHTING)
• También cada luz,hasta un máximo de 8
• glEnable(GL_LIGHT0)
• LIGHT0 tiene defaults distintas a las demás

105
Luz ambiente global

• Luz ambiente para escena
• GLfloat amb.2,.2,.2,.2,1.0
• glLightModelfv(GL_LIGHT_MODEL_AMBIENT, amb)
• Este es el default
• Ojo local o en el infinito
• glLightModel(GL_LIGHT_MODEL_LOCAL_VIEWER,GL_T
  RUE)

106
Define fuente de luz

• GLfloat amb.2,.2,.2,1.0
• GLfloat diff1.0,1.0,1.0,1.0
• GLfloat spec1.0,1.0,1.0,1.0
• GLfloat pos-1.0,1.0,-1.0,0.0
• glLightfv(GL_LIGHT0, GL_AMBIENT, amb)
• glLightfv(GL_LIGHT0, GL_DIFFUSE, diff)
• glLightfv(GL_LIGHT0, GL_SPECULAR,spec)
• glLightfv(GL_LIGHT0, GL_POSITION, pod)

107
Luces puntuales y direccionales

• GLfloat light_position1.0,1.0,1.0,0.0
• glLightfv(GL_LIGHT0,GL_POSITION,light_position)
• GLfloat light_position1.0,1.0,1.0,1.0
• glLightfv(GL_LIGHT0,GL_POSITION,light_position)

108
Spotlights

• GLfloat spotpos1.0,2.0,3.0,1.0
• glLightfv(GL_LIGHT0,GL_SPOT_DIRECTION,spotpos)
• glLightfv(GL_LIGHT0,GL_SPOT_CUTOFF,spotpos)
• glLightfv(GL_LIGHT0,GL_SPOT_EXPONENT,spotpos)

109
Propiedades de material

• GLfloat mat_d0.1,0.2,0.3,1.0
• GLfloat mat_s1.0,1.0,1.0,1.0
• GLfloat low_sh5.0
• glMaterialfv(GL_FRONT,GL_AMBIENT,mat_d)
• glMaterialfv(GL_FRONT,GL_SPECULAR,mat_s)
• glMaterialfv(GL_FRONT,GL_SHININESS, low_sh)

110
Algunos materiales
r,g,b,alpha ?
111
Mas materiales