Story Transcript
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