Introducci´ on
Transparencia
Sombras
Espejos
Tema 7: Realismo Visual Jos´e Ribelles
SIU020 S´ıntesis de Imagen y Animaci´ on Departamento de Lenguajes y Sistemas Inform´ aticos, Universitat Jaume I
Tema 7: Realismo Visual
1
Introducci´ on
Transparencia
Sombras
Espejos
Hoy veremos...
1
Introducci´ on
2
Transparencia
3
Sombras
4
Espejos
Introducci´ on
Tema 7: Realismo Visual
2
Introducci´ on
Transparencia
Sombras
Espejos
Introducci´on ¿Qu´e podemos hacer para mejorar la calidad visual?
Introducci´ on
Tema 7: Realismo Visual
3
Introducci´ on
Transparencia
Sombras
Espejos
Hoy veremos...
1
Introducci´ on
2
Transparencia
3
Sombras
4
Espejos
Transparencia
Tema 7: Realismo Visual
4
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
5
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
6
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
7
Introducci´ on
Transparencia
Sombras
Espejos
Ejemplo de transparencia
Alpha: 0.3, 0.5, 0.7
Transparencia
Tema 7: Realismo Visual
8
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
9
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
10
Introducci´ on
Transparencia
Sombras
Espejos
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 . depthMask ( f a l s e ) ;
// 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 . depthMask ( t r u e ) ;
Transparencia
Tema 7: Realismo Visual
11
Introducci´ on
Transparencia
Sombras
Espejos
WebGL, ¿d´onde ocurren las cosas?
Transparencia
Tema 7: Realismo Visual
12
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
13
Introducci´ on
Transparencia
Sombras
Espejos
Hoy veremos...
1
Introducci´ on
2
Transparencia
3
Sombras Sombras proyectivas
4
Espejos
Sombras
Tema 7: Realismo Visual
14
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
15
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
16
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
−LPx Nz −LPy Nz N · LP + d − LPz Nz −Nz
−LPx d −LPy d −LPz d N · LP (2)
17
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
18
Introducci´ on
Transparencia
Sombras
Espejos
Hoy veremos...
Espejos
1
Introducci´ on
2
Transparencia
3
Sombras
4
Espejos
Tema 7: Realismo Visual
19
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
20
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
21
Introducci´ on
Transparencia
Sombras
Espejos
L´ımites
Espejos
Tema 7: Realismo Visual
22
Introducci´ on
Transparencia
Sombras
Espejos
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 7: Realismo Visual
23
