Introducción a los gráficos 3D

OpenGL

Transparencias adaptadas y traducidas de

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Objetivos

• Veamos cómo colorear nuestros modelos para que se perciban en tres dimensiones

• Veamos qué tipos de interacción existen entre la luz y nuestros materiales

• Construiremos un sistema de reflexión básico: El modelo de Phong.

• Veremos cómo utilizar OpenGl

2

• Entendemos por modelo de iluminación el cálculo de la intensidad de cada punto de la escena.

• En el cálculo de la intensidad de un punto intervienen:

– El tipo e intensidad de la fuente de luz tipo e intensidad de la fuente de luz

– El material del objeto

– La orientación del objeto con respecto a la luz

• El modelo más utilizado es el modelo de Phong

Introducción

Necesitamos sombreado (shading)

• Si dibujamos un objeto utilizando únicamente el color glColor. Veríamos algo parecido a:

• Pero a nosotros nos gustaría algo parecido a:

4

Shading

• ¿Qué hace que un objeto real se vea de esta forma?

• La combinación de la luz con un material provoca que cada punto tenga un color diferente. Hablamos que tiene un determinado sombreado o en inglés “shade”.

• Tenemos que tener en cuenta:– Fuentes de luz– Las propiedades de los materiales– Situación de la cámara– Orientación de la superficie– Etc.

5

Dispersión (Scattering)

• Cuando la luz llega a un punto A:– Parte de ella se dispersa

– Y otra parte se absorbe

• Parte de la luz dispersada, llega al punto B– Una parte se dispersa

– Y otra se absorbe

• Y volvemos a repetir

6

¿El cielo tiene color?

7

Dispersión de Rayleigh

8

Ecuaciones de renderizado

• Este proceso infinito de dispersión y absorción se puede describir mediante ecuaciones que forman parte de las ecuaciones de renderizado– Son ecuaciones muy complejas y sin una solución

general– La técnica de “Ray tracing” es un caso especial para

superficies de gran reflexión

• Las ecuaciones de renderizado son globales e incluyen:– Sombras– Dispersiones múltiples de un objeto a otro.

9

Efectos globales

10

Superficies translucidas

Sombras

Reflexiones múltiples

Tratamiento global

11

¿Renderizado local o global?

• Un sombreado correcto requiere un cálculo global que tenga en cuenta todos los objetos y todas las fuentes de luz.– Es incompatible con nuestro sistema de pipeline

que dibuja cada polígono de forma independiente

• Por fortuna, nos solemos conformar cuando la imagen simplemente “parece real”– Existen muchas técnicas para simular ese efecto

12

Interacción luz-material

• La luz cuando choca contra un objeto se absorbe parcialmente, pero otra parte se dispersa (se refleja)

• La cantidad reflejada determina el color y brillo del objeto.– Una superficie se percibe de color rojo bajo un foco

blanco debido a que refleja la componente roja de la luz (frecuencias electromagnéticas en ese espectro)

– El resto de las frecuencias se absorben

• La luz se dispersa según las características de la superficie. Depende del pulido, suavidad, orientación, etc.

13

Fuentes de luz

En general es complejo tratar con fuentes de luz reales. Tendríamos que tener en cuenta todos los puntos:

14

Simplificamos las fuentes de luz

• La fuente es un punto– Se modela mediante una posición y un color– Si la fuente está muy distante asumimos que los rayos

son paralelos

• Spotlight– La luz procede de un punto único ideal

• La luz ambiente– En toda nuestra escena recibe la misma cantidad de

luz, con independencia de la situación de punto– Puede aglutinar la combinación de múltiples fuentes y

tipos de material

15

Tipos de superficie

• Las superficies pulidas reflejan mayor cantidad de luz, creando el efecto de brillo o incluso espejo

• Una superficie rugosa refleja la luz en todas las direcciones.

16

Superficie pulida Superficie rugosa

Sombreados

17

¿Dónde está la diferencia entre estas imágenes?

¿Jugamos a buscar diferencias?

18

Pensemos

• De las transparencias anteriores podemos deducir que:

– La forma del objeto influye en el dibujo,

– Aunque esté formado por triángulos, necesitamos “colorear” la forma,

– Necesitamos tener en cuenta algo que mida esa forma

– Una idea es tener en cuenta el vector normal a la superficie.

19

Modelo de Phong

• Un modelo muy simple que se puede calcular rápidamente. • Ha sido uno de los primeros y sigue siendo muy utilizado.• Tiene tres componentes:

– Luz difusa (Diffuse)– Luz especular (Specular)– Luz ambiente (Ambient)

• Utiliza cuatro vectores

– Hacia la fuente– Hacia el observador– El vector normal– Reflexión perfecta

20

Modelo de Phong

Tipos de luz

Luz difusa

Luz ambienteLuz especular

Tipos de luz

Luz Direccional Luz Focal Luz Puntual

Reflexión ideal

• La normal se determina por la orientación local del polígono.

• El ángulo de incidencia es el ángulo de reflexión

• Los tres vectores son coplanares

24

r = 2 (l · n ) n - l

Superficie ideal

• Refleja la luz de forma perfecta.

• La luz se dispersa idealmente en todas las direcciones.

• La cantidad de luz reflejada es proporcional a la componente vertical de la luz que incide. – La luz reflejada ~cos i

– cos i = l · n si los vectores están normalizados

– Introducimos tres componentes, kr, kg, kb, que indican la cantidad de color reflejada.

25

Superficies especulares

• La mayoría de las superficies no son perfectamente difusas o perfectamente especulares.

• Las superficies pulidas producen una mayor reflexión en direcciones cercanas al ángulo ideal o de refleción perfecta.

26

Reflexión

especular

Modelo de la luz reflejadaPhong propuso un modelo en el que la luz reflejada pierde intensidad según el ángulo formado entre el observador y la dirección de reflexión ideal.

27

Ir ~ ks I cos

Grado de brillo

Coeficiente

de absorción

Intensidad originalIntensidad

reflejada

El coeficiente de brillo(Shininess Coefficient)

• Valores de entre 100 y 200 se corresponden con metales

• Valores de entre 5 y 10 generan aspectos similares al plástico.

28

cos

90-90

29

Luz ambiente

• La luz ambiente es el resultado de aplicar múltiples interacciones entre numerosas fuentes de luz y los objetos del entorno.

• La intensidad y el color dependen tanto del color de la luz como del material del que está hecho el objeto.

• Añade ka Ia a la fórmula

Coef Intensidad de la luz ambiental

30

Distancia

• La luz pierde intensidad conforme viaja en el espacio (inversamente al cuadrado de la distancia)

• Podríamos añadir el factor 1/(ad + bd +cd2)

31

Fuentes de luz

• En el modelo de Phong, sumamos la influencia de cada una de las fuentes de luz

• Cada fuente de luz tiene términos independientes para los tres términos: difusión, especular y ambiente.

• Separamos los componentes RGB: red, green y blue

• Por eso, definimos 9 coeficientes para cada foco de luz– Idr, Idg, Idb, Isr, Isg, Isb, Iar, Iag, Iab

32

Las propiedades del material

• El material tiene propiedades que configuran al modelo

– Nueve parámetros de absorción

• kdr, kdg, kdb, ksr, ksg, ksb, kar, kag, kab

– Un coeficiente de brillo

33

Sumando todo

Para cada fuente de luz y para cada componente de corlor, el modelo Phong puede escribirse según:

I =kd Id l · n + ks Is (v · r )+ ka Ia

Para cada componente decolor, añadimos la influencia de cada fuente de luz

34

Modelo de Phong Modificado

• El término especular de Phong resulta complejo de calcular (requiere el computo de un nuevo vector de reflección y un vector de visión por cada vértice)

• Blinn propone una aproximación más eficiente

35

The Halfway Vector

• h es un vector normaliza a medio camino entre l y v

h = ( l + v )/ | l + v |

36

Utilizando el “halfway vector”

• reemplazando (v · r )por (n · h )

• se elige para que represente el brillo

• EL modelo resultante se conoce como modificado de Phong o de Blinn

– Se incluye en OpenGL

37

Ejemplo

38

Cálculo de vectores

• l y v son dados por la aplicación

• Podemos calcular r dados l y n

• El problema es determinar n

• En general depende del modelo a representar

• OpenGL nos deja a nosotros determinar la normal

La normal en un vértice

Las normales nos permiten aplicar técnicas de iluminación suaves

No tienen que ser la normal de la cara

Se utilizan únicamente para la iluminación

Es una forma (mejor) de aproximar la superficie real.

Normales

Las normales:

Se introducen con el modelo

Se calculan usando principios básicos

Se aproximan interpolando las normales de los vértices

41

La importancia de normalizar

• El término Coseno supone que los vectores están normalizado

• Utilizando vectores normalizados simplifica los cálculos

• Tenemos funciones que nos permiten normalizar nuestros vectores

42

La normal de un triángulo

p0

p

1

p

2

n

plano n ·(p - p0 ) = 0

n = (p2 - p0 ) ×(p1 - p0 )

Normalizado n n/ |n|

p

43

Recordando el concepto de Normal

• Ecuación de un plano: ax+by+cz+d = 0

• Un plano se determina por tres puntos p0, p2, p3 o por un punto n y su normal p0

• La normal se puede obtener

n = (p2-p0) × (p1-p0)

44

La normal en una esfera

• Dada una función f(x,y.z)=0

• La normal viene dada por su gradiente

• En la espera f(p)=p·p-1

• n = [∂f/∂x, ∂f/∂y, ∂f/∂z]T=p

45

Forma paramétrica

• Para la esfera

• El plano tangente viene dado por

• Y la normal por el producto

x=x(u,v)=cos u sin v

y=y(u,v)=cos u cos v

z= z(u,v)=sin u

∂p/∂u = [∂x/∂u, ∂y/∂u, ∂z/∂u]T

∂p/∂v = [∂x/∂v, ∂y/∂v, ∂z/∂v]T

n = ∂p/∂u × ∂p/∂v

46

Cómo funciona OpenGL

• Ahora veremos el funcionamiento de OpenGL

– Cómo elegir entre sombreado por vértice o por fragmento.

• Modelos de sombreado

– Plano (Flat)

– Suave (Smooth)

– Gouraud

Modelos de sombreado

Flat Shading

• Se calcula una única vez para todo el polígono.

Gouraud Shading

• Se calcula para cada vértice y despues interpolamos

Phong Shading

• Interpolamos la normal y para cada pixel se calcula la iluminación

Sombreado de Gouraud

Es el más común de los métodosRealiza la iluminación de Phong en los vértices

Realiza una interpolación linear

A lo largo de los vértices

A lo largo de las líneas C1

C2

C3

c1 + t1(c2-c1)

c1 + t2(c3-c1)c1 + t1(c2-c1) + t3(c1 + t2(c3-c1)- c1 + t1(c2-c1))

Sombreado de Gouraud

Ventajas e inconvenientes:

• Es rápido y sencillo en calcular

• Es un modelo inexacto y puede generar efectos extraños

Sombreado de Phong

• Utiliza el modelo de iluminación de Phong (no confundir uno con otro) pero realiza una interpolación lineal entre las normales de los vértices.

• Aplica el modelo de iluminación de Phong en cada pixel.

Utiliza los mismos parámetros que el modelo de Gouraud

En general genera resultados más

Suaves pero es más lento.

Sombreado de Phong

Interpola las normales (en lugar del color)

Calcula la iluminación en cada pixel

N1

N2

N3

N4

lights

i

n

isidiambientatotal

shiny

RVkLNkIIkI#

1

ˆˆˆˆ

Recuerda que las normales

se utilizan para los

términos de luz difusa y

especular.

52

Sombreado en OpenGL

• Necesitamos especificar

– Normales

– Propiedades del material

– Luces

53

Definiendo un foco de luz

• Por cada punto de luz, podemos definir el RGBA de los componentes difuso, especular y ambiente

• Además damos la posición.

vec4 diffuse0 =vec4(1.0, 0.0, 0.0, 1.0);

vec4 ambient0 = vec4(1.0, 0.0, 0.0, 1.0);

vec4 specular0 = vec4(1.0, 0.0, 0.0, 1.0);

vec4 light0_pos =vec4(1.0, 2.0, 3,0, 1.0);

54

Spotlights

• Funcionan parecido a los puntos de luz pero damos:

– Dirección

– Umbral de corte (Cutoff)

– Atenuación Proporcional a cos

55

Luz ambiente

• Depende del color de la luz

– Una luz roja tiñe de color rojo todo lo que ilumina

• Suele sernos útil al principio para probar

56

Propiedades del material

• Tienen que estar conforme con el modelo de iluminación

• La componente w nos puede indicar el grado de transparencia (opacidad)

vec4 ambient = vec4(0.2, 0.2, 0.2, 1.0);

vec4 diffuse = vec4(1.0, 0.8, 0.0, 1.0);

vec4 specular = vec4(1.0, 1.0, 1.0, 1.0);

GLfloat shine = 100.0

Fuentes de luz

GLfloat light_ambient[]={0.0, 0.0, 0.0, 1.0};

GLfloat light_diffuse[]={1.0, 1.0, 1.0, 1.0};

GLfloat light_specular[]={1.0, 1.0, 1.0, 1.0};

GLfloat light_position[]={1.0, 1.0, 1.0, 0.0};

glLightfv(GL_LIGHT0, GL_AMBIENT, light_ambient);

glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);

glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);

glLightfv(GL_LIGHT0, GL_POSITION, light_position);

glEnable(GL_LIGHT0);

“spotlight” blanca atenuada

GLfloat light1_ambient[ ]={0.2, 0.2, 0.2, 1.0};

GLfloat light1_diffuse[ ]={1.0, 1.0, 1.0, 1.0};

GLfloat light1_specular[ ]={1.0, 1.0, 1.0, 1.0};

GLfloat light1_position[ ]={-2.0, 2.0, 1.0, 1.0};

GLfloat spot_direction[ ]={-1.0, -1.0, 0.0};

glLightfv(GL_LIGHT1, GL_AMBIENT, light1_ambient);

glLightfv(GL_LIGHT1, GL_DIFFUSE, light1_diffuse);

glLightfv(GL_LIGHT1, GL_SPECULAR, light1_specular);

glLightfv(GL_LIGHT1, GL_POSITION, light1_position);

glLightf(GL_LIGHT1, GL_CONSTANT_ATTENUATION, 1.5);

glLightf(GL_LIGHT1, GL_LINEAR_ATTENUATION, 0.5);

glLightf(GL_LIGHT1, GL_QUADRATIC_ATTENUATION, 0.2);

glLightf(GL_LIGHT1, GL_SPOT_CUTOFF, 45.0);

glLightfv(GL_LIGHT1,GL_SPOT_DIRECTION,spot_direction);

glLightf(GL_LIGHT1, GL_SPOT_EXPONENT, 2.0);

glEnable(GL_LIGHT1);

Jugando

Jugando

Jugando