Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Tema 6: Realismo Visual Jos´e Ribelles

VJ1221 Inform´ atica Gr´ afica Departamento de Lenguajes y Sistemas Inform´ aticos, Universitat Jaume I

Tema 6: Realismo Visual

1

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Contenido

1

Introducci´ on

2

Transparencia

3

Sombras Sombras proyectivas Shadow Mapping Shadow Mapping

4

Espejos

5

Ambient occlusion

Tema 6: Realismo Visual

2

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Hoy veremos...

1

Introducci´ on

2

Transparencia

3

Sombras

4

Espejos

5

Ambient occlusion

Introducci´ on

Tema 6: Realismo Visual

3

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Introducci´on

¿Qu´e podemos hacer a´ un para mejorar la calidad visual?

Introducci´ on

Tema 6: Realismo Visual

4

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Hoy veremos...

1

Introducci´ on

2

Transparencia

3

Sombras

4

Espejos

5

Ambient occlusion

Transparencia

Tema 6: Realismo Visual

5

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Transparencia Descripci´ on Los objetos transparentes son muy habituales. Es un problema complejo. Suelen ir asociados con un efecto de refracci´ on de la luz (agua, vidrio, etc.). Pueden cambiar el color de la luz al atravesarlos.

Transparencia

Tema 6: Realismo Visual

6

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Transparencia ¿Qu´e podemos hacer nosotros? Nos vamos a centrar en el caso de objetos trasparentes: delgados, con superficies muy finas, y en c´ omo afectan a los objetos que se ven a trav´es de ellos.

¿Es simplificar mucho el problema? Sin duda, pero a´ un as´ı la ganancia visual que vamos a obtener va a ser muy alta.

Aleksandar Rodic, http://aleksandarrodic.com/p/jellyfish/ Transparencia

Tema 6: Realismo Visual

7

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Transparencia ¿C´ omo procedemos? Si hay alg´ un objeto trasparente, el color de los p´ıxeles cubiertos por dicho objeto depende de sus propiedades y las de los objetos que hayan detr´as de ´el. Hay que mezclar el color del objeto transparente con lo que haya detr´as. Alpha Blending: el grado de trasparencia se suministra a la GPU como cuarta componente en las propiedades de material, conocida como componente alpha. Si alpha es 1 el objeto es totalmente opaco, y 0 significa que es trasparente: Cfinal = alpha · Cfragment + (1 − alpha) · Cframebuffer

(1)

Para que esto funcione, hay que dibujar en primer lugar los objetos que sean opacos para despu´es dibujar los trasparentes. Transparencia

Tema 6: Realismo Visual

8

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Ejemplo de transparencia

Alpha: 0.3, 0.5, 0.7

Transparencia

Tema 6: Realismo Visual

9

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Transparencia ¿Y si se ve un objeto transparente a trav´es de otro transparente? El resultado depende del orden. Hay que pintar de atr´as hacia delante los objetos transparentes. Y desactivar la actualizaci´ on del buffer de profundidad.

Transparencia

Tema 6: Realismo Visual

10

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Transparencia ¿Y qu´e pasa con los objetos cerrados? ¿Deber´ıan verse las caras traseras? Tenemos tres posibilidades No hacer nada (izqda). Que se eliminen las caras traseras (centro). Que se eliminen las caras delanteras, pintar, que se eliminen las caras traseras y pintar de nuevo (derecha).

Transparencia

Tema 6: Realismo Visual

11

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Transparencias con WebGL

Listado 1: Objetos transparentes // P r i m e r o p i n t a r l o s o b j e t o s o p a c o s .... // D e s p u e s l o s t r a n s p a r e n t e s g l . b l e n d F u n c ( g l . SRC ALPHA , g l . ONE MINUS SRC ALPHA ) ; g l . e n a b l e ( g l . BLEND) ; g l . e n a b l e ( g l . CULL FACE ) ; g l . d i s a b l e ( g l . DEPTH TEST) ;

// o p e r a d o r o v e r // h a b i l i t a l a t r a n s p a r e n c i a // h a b i l i t a e l f a c e c u l l i n g

g l . c u l l F a c e ( g l . FRONT) ; // s e e l i m i n a r a n l o s t r i a n g u l o s c a r a a l o b s e r v a d o r d r a w S o l i d ( exampleCube ) ; // s e han o m i t i d o s u s t r a n s f o r m a c i o n e s p o r c l a r i d a d g l . c u l l F a c e ( g l . BACK) ; // s e e l i m i n a r a n l o s d r a w S o l i d ( exampleCube ) ;

t r i a n g u l o s de l a p a r t e t r a s e r a d e l o b j e t o

g l . d i s a b l e ( g l . CULL FACE ) ; g l . d i s a b l e ( g l . BLEND) ; g l . e n a b l e ( g l . DEPTH TEST) ;

Transparencia

Tema 6: Realismo Visual

12

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

WebGL, ¿d´onde ocurren las cosas?

Transparencia

Tema 6: Realismo Visual

13

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Transparencia Algunas pegas... La ordenaci´ on no siempre es trivial, por ejemplo, si un objeto transparente cruza a otro transparente ... Hay soluciones m´as complejas, pero tambi´en mucho m´as caras y no libres de problemas. No es un tema resuelto completamente en la GPU.

Transparencia

Tema 6: Realismo Visual

14

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Hoy veremos...

1

Introducci´ on

2

Transparencia

3

Sombras Sombras proyectivas Shadow Mapping Shadow Mapping

4

Espejos

5

Ambient occlusion

Sombras

Tema 6: Realismo Visual

15

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Sombras

Introducci´ on La ausencia de sombras en la escena es algo que, adem´as de incidir negativamente en el realismo visual de la imagen sint´etica, nos dificulta de manera importante su comprensi´ on. Pr´acticamente cualquier m´etodo que nos permita a˜ nadir sombras, por sencillo que sea, puede ser m´as que suficiente para aumentar el realismo y que el usuario se sienta c´ omodo al observar el mundo 3D. Sombras

Tema 6: Realismo Visual

16

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Sombras proyectivas Descripci´ on Consiste en obtener la proyecci´ on del objeto situando la c´amara en el punto de luz y estableciendo como plano de proyecci´on aquel en el que queramos que aparezca su sombra. El resultado de la proyecci´ on, al que llamamos objeto sombra, se dibuja como un elemento m´as de la escena pero sin propiedades de material ni iluminaci´ on, simplemente de color oscuro.

Sombras

Tema 6: Realismo Visual

17

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Sombras proyectivas

Dada una fuente de luz, LP , y un plano de proyecci´ on, N · x + d = 0, la matriz de proyecci´ on M es la siguiente.   M= 

Sombras

N · LP + d − LPx Nx −LPy Nx −LPz Nx −Nx

−LPx Ny N · LP + d − LPy Ny −LPz Ny −Ny

Tema 6: Realismo Visual

−LPx Nz −LPy Nz N · LP + d − LPz Nz −Nz

 −LPx d −LPy d   −LPz d  N · LP (2)

18

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Sombras proyectivas Este m´etodo presenta una serie de problemas Hay que controlar que el objeto sombra no vaya m´as all´a de la superficie sobre la que recae, por ejemplo, usando el buffer de plantilla. Las sombras son muy oscuras, pero utilizando trasparencia se puede conseguir un resultado mucho m´as agradable al dejar entrever el plano sobre el que se asientan. Muy complicado para superficies curvas o sombras de un objeto sobre ´el mismo. Como el objeto sombra es coplanar con el plano que se ha utilizado para el c´alculo de la proyecci´ on, habr´ıa que a˜ nadir un peque˜ no desplazamiento a uno de ellos para evitar el efecto conocido como stitching. WebGL proporciona la orden gl.polygonOffset para especificar el desplazamiento que se sumar´a a la profundidad de cada fagmento siempre y cuando se haya habilitado con gl.enable(gl.POLYGON OFFSET FILL). Sombras

Tema 6: Realismo Visual

19

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Shadow Mapping Descripci´ on Dibujar la escena desde el punto de luz. Lo que la luz ve es lo que se ilumina. Si la luz no ve la superficie, es que est´ a en sombra.

La profundidad se almacena en una textura. La escena se vuelve a dibujar desde el punto de vista de la c´amara y se consulta la textura para saber si est´a o no en sombra.

Sombras

Tema 6: Realismo Visual

20

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Almacena el buffer de profundidad en una textura

Framebuffer Object Un FBO permite crear framebuffers definidos por el usuario. La GPU puede dibujar pero su contenido no aparece en pantalla (off-screen rendering). Necesitas crear un buffer para almacenar la profundidad al pintar la escena. Y crear un objeto textura. Al dibujar, en el fragment shader, accedes al valor de profundidad de cada fragmento y lo asignas a gl FragColor (que resulta ser el objeto textura). gl FragColor = packDepth(gl FragCoord.z);

Sombras

Tema 6: Realismo Visual

21

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Resultado de la textura Los valores m´as oscuros son los m´as cercanos.

Sombras

Tema 6: Realismo Visual

22

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Dibujado En drawScene() Se establece como destino el FBO creado para la ocasi´on. Se dibuja la escena vista desde la posici´ on de la fuente de luz. El shader que necesito u ´nicamente almacena la profundidad en la textura. Se establece como destino el framebuffer por defecto. Se pinta la escena con tu shader preferido, pero adem´as: En el vertex shader, necesitas otra variable que almacene el resultado de multiplicar cada v´ertice por la matriz de transformaci´on correspondiente a la fuente de luz. En el fragment shader, para cada fragmento, has de: divisi´ on perspectiva, normalizar el resultado entre 0 y 1, acceder a la textura, y comparar la profundidad del fragmento con la almacenada en la textura. Sombras

Tema 6: Realismo Visual

23

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Ejemplo de resultado

Sombras

Tema 6: Realismo Visual

24

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Problemas - depth bias

Sombras

Tema 6: Realismo Visual

25

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Problemas - texture resolution

Sombras

Tema 6: Realismo Visual

26

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Percentage-closer filtering

Muestrea el ´area de la textura alrededor del fragmento, ¿cu´anto?. ¿Qu´e porcentaje de texeles est´an en sombra? Utilizar el resultado como valor de atenuaci´ on de la luz. Se emborronan los l´ımites de las sombras.

Sombras

Tema 6: Realismo Visual

27

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Hoy veremos...

Espejos

1

Introducci´ on

2

Transparencia

3

Sombras

4

Espejos

5

Ambient occlusion

Tema 6: Realismo Visual

28

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Espejos Descripci´ on Ya vimos como simular reflejos sobre superficies curvas. Para una superficie plana, lo puedes obtener as´ı: Coloca tu espejo en la escena. Sit´ ua una c´ amara detr´ as de tu espejo y dibuja la escena a una textura como ya viste antes. La direcci´ on de la c´ amara del espejo es el vector de reflexi´ on de la c´ amara de la escena respecto a la normal del plano del espejo. Dibuja tu escena desde tu c´ amara y utiliza la textura obtenida para el objeto espejo.

Espejos

Tema 6: Realismo Visual

29

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Espejo por simetr´ıa Descripci´ on El m´etodo consiste en dibujar la escena de forma sim´etrica respecto al plano que contiene al objeto reflejante. Conlleva dos tareas extra: Obtener la transformaci´ on de simetr´ıa. Evitar que la escena sim´etrica se observe fuera de los l´ımites del objeto reflejante.

Espejos

Tema 6: Realismo Visual

30

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

L´ımites

Espejos

Tema 6: Realismo Visual

31

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Espejo por simetr´ıa Procedimiento Utiliza un buffer de plantilla y dibuja sobre ´el el espejo. Con el test de plantilla activado, dibuja la escena reflejada. Desactiva el test de plantilla. Dibuja la escena normal. Dibuja el espejo con transparencia.

Espejos

Tema 6: Realismo Visual

32

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Hoy veremos...

1

Introducci´ on

2

Transparencia

3

Sombras

4

Espejos

5

Ambient occlusion

Ambient occlusion

Tema 6: Realismo Visual

33

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Ambient Occlusion

Descripci´ on El modelo de Phong utiliza un valor constante para la iluminaci´on ambiente. La cantidad de luz ambiente que alcanza un punto de una superficie depende de su entorno. Por ejemplo, un punto de una pared cerca de una esquina recibe menos iluminaci´ on que uno de enmedio. Ambient occlusion

Tema 6: Realismo Visual

34

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Ambient Occlusion Descripci´ on Ambient Occlusion simula ese efecto. La idea es calcular la accesibilidad de cada punto de la superficie y atenuar su iluminaci´ on. La accesibilidad es una medida de cu´anta luz ambiente puede alcanzar un punto sin ser bloqueada por superficies cercanas. Se puede calcular lanzando rayos desde el punto y comprobar si intersectan en una distancia pr´ oxima.

Ambient occlusion

Tema 6: Realismo Visual

35

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Ambient Occlusion

Screen Space Ambient Occlusion Ideal para ser implementada en tiempo real. Para un pixel, la cantidad de oclusi´ on producida por sus vecinos se obtiene a partir de las diferencias de profundidad. En primer lugar, se dibuja la escena y en un FBO se almacena normal y profundidad por p´ıxel. Entonces se calcula la oclusi´ on por p´ıxel: max(0, dot(n, v )) ∗ (1,0/(1,0 + d)) Los vecinos se muestrean de forma aleatoria. El resultado se almacena en un nuevo FBO para ser suavizado.

Ambient occlusion

Tema 6: Realismo Visual

36

Introducci´ on

Transparencia

Sombras

Espejos

Ambient occlusion

Ambient Occlusion

http://alteredqualia.com/three/examples/webgl postprocessing ssao.html Ambient occlusion

Tema 6: Realismo Visual

37