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