Page 1


Informática Gráfica José Ribelles Ángeles López

Departament de Llenguatges i Sistemes Informàtics Codi d’assignatura VJ1221

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Edita: Publicacions de la Universitat Jaume I. Servei de Comunicació i Publicacions Campus del Riu Sec. Edifici Rectorat i Serveis Centrals. 12071 Castelló de la Plana http://www.tenda.uji.es e-mail: publicacions@uji.es Col·lecció Sapientia 107 www.sapientia.uji.es Primera edició, 2015 ISBN: 978-84-16356-29-4

Publicacions de la Universitat Jaume I és una editorial membre de l’une, cosa que en garanteix la difusió de les obres en els àmbits nacional i internacional. www.une.es

Reconeixement-CompartirIgual CC BY-SA Aquest text està subjecte a una llicència Reconeixement-CompartirIgual de Creative Commons, que permet copiar, distribuir i comunicar públicament l’obra sempre que s’especifique l’autor i el nom de la publicació fins i tot amb objectius comercials i també permet crear obres derivades, sempre que siguen distribuïdes amb aquesta mateixa llicència. http://creativecommons.org/licenses/by-sa/3.0/legalcode Aquest llibre, de contingut científic, ha estat avaluat per persones expertes externes a la Universitat Jaume I, mitjançant el mètode denominat revisió per iguals, doble cec.

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


´ Indice general Prefacio 1

2

3

13

Introducci´on a WebGL 1.1 Antecedentes . . . . . . . . . . . . . 1.2 Prueba de WebGL . . . . . . . . . . . 1.3 Aplicaci´on WebGL . . . . . . . . . . 1.3.1 HTML5 y canvas . . . . . . . 1.3.2 Contexto WebGL . . . . . . . 1.4 El m´ınimo programa . . . . . . . . . 1.5 El pipeline . . . . . . . . . . . . . . . 1.6 G LSL . . . . . . . . . . . . . . . . . 1.7 Compilaci´on y enlazado de un shader

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

15 15 17 18 19 19 20 21 22 23

Modelado poligonal 2.1 Representaci´on . . . . . . . . . . . . . 2.1.1 Caras independientes . . . . . . 2.1.2 V´ertices compartidos . . . . . . 2.1.3 Tiras y abanicos de tri´angulos . 2.2 La normal . . . . . . . . . . . . . . . . 2.3 Mallas y WebGL . . . . . . . . . . . . 2.3.1 Tipos de primitivas geom´etricas 2.3.2 Descripci´on de la geometr´ıa . . 2.3.3 Visualizaci´on . . . . . . . . . . 2.3.4 Variables uniform . . . . . . . . 2.3.5 Variables varying . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

26 27 28 28 29 30 31 31 32 32 38 39

Transformaciones geom´etricas 3.1 Transformaciones b´asicas . . . . . . . 3.1.1 Traslaci´on . . . . . . . . . . . 3.1.2 Escalado . . . . . . . . . . . 3.1.3 Rotaci´on . . . . . . . . . . . 3.2 Concatenaci´on de transformaciones . 3.3 Matriz de transformaci´on de la normal 3.4 Giro alrededor de un eje arbitrario . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

43 43 43 44 45 45 48 48

. . . . . . .

2

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

2

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


3.5 3.6 4

5

6

La biblioteca GL M ATRIX . . . . . . . . . . . . . . . . . . . . . . Transformaciones en WebGL . . . . . . . . . . . . . . . . . . . .

Viendo en 3D 4.1 Transformaci´on de la c´amara . . 4.2 Transformaci´on de proyecci´on . 4.2.1 Proyecci´on paralela . . . 4.2.2 Proyecci´on perspectiva . 4.3 Transformaci´on al a´ rea de dibujo 4.4 Eliminaci´on de partes ocultas . . 4.5 Viendo en 3D con WebGL . . .

. . . . . . .

Modelos de iluminaci´on y sombreado 5.1 Modelo de iluminaci´on de Phong . 5.1.1 Luz ambiente . . . . . . . 5.1.2 Reflexi´on difusa . . . . . 5.1.3 Reflexi´on especular . . . . 5.1.4 Materiales . . . . . . . . . 5.1.5 El modelo de Phong . . . 5.2 Tipos de fuentes de luz . . . . . . 5.3 Modelos de sombreado . . . . . . 5.4 Implementa Phong con WebGL . . 5.4.1 Normales en los v´ertices . 5.4.2 Materiales . . . . . . . . . 5.4.3 Fuente de luz . . . . . . . 5.5 Iluminaci´on por ambas caras . . . 5.6 Sombreado c´omic . . . . . . . . . 5.7 Niebla . . . . . . . . . . . . . . . Texturas 6.1 Coordenadas de textura . . . . 6.2 Leyendo t´exeles . . . . . . . . 6.2.1 Magnificaci´on . . . . 6.2.2 Minimizaci´on . . . . . 6.2.3 Texturas 3D . . . . . . 6.2.4 Mapas de cubo . . . . 6.3 T´ecnicas avanzadas . . . . . . 6.3.1 Normal mapping . . . 6.3.2 Displacement mapping 6.3.3 Alpha mapping . . . . 6.4 Texturas en WebGL . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . .

49 50

. . . . . . .

54 54 55 56 57 58 58 59

. . . . . . . . . . . . . . .

63 63 64 64 65 66 66 67 69 72 72 75 76 77 77 79

. . . . . . . . . . .

81 81 86 86 87 88 88 92 92 94 94 95

3 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

3

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


7

Realismo visual 7.1 Transparencia . . . . . . . . 7.2 Sombras . . . . . . . . . . . 7.2.1 Sombras proyectivas 7.2.2 Shadow mapping . . 7.3 Reflejos . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

100 100 104 104 105 106

8

Texturas procedurales 8.1 Rayado . . . . . 8.2 Damas . . . . . . 8.3 Enrejado . . . . . 8.4 Ruido . . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

110 111 112 113 115

9

Interacci´on y animaci´on con shaders 9.1 Selecci´on . . . . . . . . . . . . 9.1.1 Utiliza un FBO . . . . . 9.2 Animaci´on . . . . . . . . . . . . 9.2.1 Eventos de tiempo . . . 9.2.2 Encendido / apagado . . 9.2.3 Texturas . . . . . . . . . 9.2.4 Desplazamiento . . . . . 9.3 Sistemas de part´ıculas . . . . . .

. . . . . . . .

117 117 119 119 120 120 121 122 123

. . . . . . . . . . .

127 127 127 129 130 131 131 131 132 132 133 134

. . . .

. . . .

. . . .

. . . .

. . . .

10 Proceso de im´agenes 10.1 Apariencia visual . . . . . 10.1.1 Antialiasing . . . . 10.1.2 Correcci´on gamma 10.2 Postproceso de imagen . . 10.2.1 Brillo . . . . . . . 10.2.2 Contraste . . . . . 10.2.3 Saturaci´on . . . . 10.2.4 Negativo . . . . . 10.2.5 Escala de grises . . 10.2.6 Convoluci´on . . . 10.3 Transformaciones . . . . .

. . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

4 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

4

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


´ Indice de figuras 1.1 1.2 1.3 1.4 1.5

Ejemplo de objeto tridimensional dibujado con WebGL . . . . . . Ejemplos de objetos dibujados mediante shaders . . . . . . . . . Resultado con e´ xito del test de soporte de WebGL en un navegador proporcionado por la p´agina http://get.webgl.org . . . . Contenido de la p´agina http://webglreport.org . . . . . Secuencia b´asica de operaciones del pipeline de OpenGL . . . . .

A la izquierda, objeto representado mediante cuadril´ateros y a la derecha, objeto representado mediante tri´angulos . . . . . . . . . 2.2 Representaci´on poligonal de una copa y resultado de su visualizaci´on 2.3 Ejemplos de mallas poligonales . . . . . . . . . . . . . . . . . . . 2.4 Esquema de almacenamiento de una malla poligonal mediante la estructura de caras independientes . . . . . . . . . . . . . . . . . 2.5 Esquema de almacenamiento de una malla poligonal mediante la estructura de v´ertices compartidos . . . . . . . . . . . . . . . . . 2.6 Ejemplo de abanico y tira de tri´angulos . . . . . . . . . . . . . . 2.7 Visualizaci´on del modelo poligonal de una tetera. En la imagen de la izquierda se pueden obervar los pol´ıgonos utilizados para representarla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.8 Ejemplo de estrella . . . . . . . . . . . . . . . . . . . . . . . . . 2.9 Estrella dibujada con l´ıneas (izquierda) y con tri´angulos (derecha) 2.10 Ejemplo de dos estrellas: una aporta el color interior y la otra el color del borde . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.11 Resultado de visualizar un tri´angulo con un valor de color diferente para cada v´ertice . . . . . . . . . . . . . . . . . . . . . . . . . . 2.12 Resultado de visualizar un tri´angulo con un valor de color diferente para cada v´ertice . . . . . . . . . . . . . . . . . . . . . . . . . .

15 16 17 18 22

2.1

3.1 3.2

26 27 27 28 29 30

30 34 35 40 41 42

Ejemplos de objetos creados utilizando transformaciones geom´etricas 43 En la imagen de la izquierda se representa un pol´ıgono y su normal n. En la imagen de la derecha se muestra el mismo pol´ıgono tras aplicar una transformaci´on de escalado no uniforme S(2, 1). Si se aplica esta transformaci´on a la normal n, se obtiene p como vector normal en lugar de m, que es la normal correcta . . . . . . . . . . 48 5

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

5

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


3.3 3.4 3.5 3.6 4.1 4.2

4.3 4.4 4.5 4.6 4.7 4.8 4.9

5.1 5.2

5.3

5.4 5.5 5.6 5.7 5.8

La nueva base formada por los vectores d, e y f se transforma para coincidir con los ejes de coordenadas . . . . . . . . . . . . . . . . Ejemplo de una gr´ua de obra . . . . . . . . . . . . . . . . . . . . Juego de bloques de madera coloreados . . . . . . . . . . . . . . Otros ejemplos de juegos de bloques de madera coloreados. . . . . Par´ametros para ubicar y orientar una c´amara: p, posici´on de la c´amara; U P , vector de inclinaci´on; i, punto de inter´es . . . . . . . Transformaci´on de la c´amara. La c´amara situada en el punto p en la imagen de la izquierda se transforma para quedar como se observa en la imagen de la derecha. Dicha transformaci´on se aplica al objeto de tal manera que lo que se observa sea lo mismo en ambas situaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vista de un cubo obtenida con: (a) vista perspectiva y (b) vista paralela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Esquema del volumen de la vista de una proyecci´on paralela . . . Volumen can´onico de la vista, cubo de lado 2 centrado en el origen de coordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . Esquema del volumen de la vista de una proyecci´on perspectiva . Ejemplo de escena visualizada: (a) sin resolver el problema de la visibilidad y (b) con el problema resuelto . . . . . . . . . . . . . En color amarillo, las tareas principales que se realizan en la etapa correspondiente al procesado de la primitiva . . . . . . . . . . . . En color amarillo, las tareas principales que se realizan en la etapa correspondiente al procesado del fragmento donde se indica que el test de profundidad se realiza con posterioridad a la ejecuci´on del shader de fragmentos . . . . . . . . . . . . . . . . . . . . . . . . Ejemplo obtenido utilizando el modelo de iluminaci´on de Phong . Ejemplo de las componentes del modelo de iluminaci´on de Phong: (a) Luz ambiente; (b) Reflexi´on difusa; (c) Reflexi´on especular. La combinaci´on de estos tres aspectos produce el resultado que se muestra en la figura 5.1 . . . . . . . . . . . . . . . . . . . . . Ejemplos de iluminaci´on: (a) Solo luz ambiente; (b) Luz ambiente y reflexi´on difusa; (c) Luz ambiente, reflexi´on difusa y especular . . . . . . . . . . . Geometr´ıa del modelo de iluminaci´on de Phong . . . . . . . . . . Ejemplos de iluminaci´on con diferentes valores de α para el c´alculo de la reflexi´on especular . . . . . . . . . . . . . . . . . . . . . Ejemplo de escena iluminada: a la izquierda, con una luz posicional y a la derecha, con la fuente convertida en foco . . . . . . . . Par´ametros caracter´ısticos de un foco de luz . . . . . . . . . . . . Ejemplos de modelos de sombreado: (a) Gouraud; (b) Phong . . .

49 52 53 53 55

55 56 56 57 57 59 61

61 63

64

64 65 66 69 69 71

6 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

6

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


5.9 5.10 5.11 5.12 5.13 6.1 6.2 6.3 6.4

6.5 6.6 6.7 6.8

6.9 6.10 6.11

6.12 6.13 6.14

6.15 6.16

6.17 6.18

Ejemplos obtenidos con el modelo de iluminaci´on de Phong y el modelo de sombreado de Gouraud . . . . . . . . . . . . . . . . . Ejemplos obtenidos con el modelo de sombreado de Phong . . . . Ejemplo de modelo en el que hay que aplicar iluminaci´on en ambas caras para una correcta visualizaci´on . . . . . . . . . . . . . . . . Resultado de la funci´on toonShading con diferentes valores de la variable levels . . . . . . . . . . . . . . . . . . . . . . . . . . . . Resultados obtenidos utilizando niebla en el shader . . . . . . . . Resultados obtenidos al aplicar diferentes texturas 2D sobre el mismo objeto 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . Correspondencia entre coordenadas de textura y coordenadas de un objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . En el espacio del objeto, cada fragmento recibe las coordenadas de textura interpoladas . . . . . . . . . . . . . . . . . . . . . . . . . Ejemplos de aplicaci´on de textura 2D. En estos casos el color definitivo de un fragmento se ha obtenido a partir de la textura y del modelo de iluminaci´on de Phong . . . . . . . . . . . . . . . . . . Resultado de combinar dos texturas . . . . . . . . . . . . . . . . Ejemplos de repetici´on de textura . . . . . . . . . . . . . . . . . . Ejemplos de extensi´on del borde de la textura . . . . . . . . . . . Comparaci´on entre la repetici´on de la textura de manera sim´etrica (imagen de la izquierda) y repetici´on normal como la de la figura 6.6 (imagen de la derecha) . . . . . . . . . . . . . . . . . . . . . Filtro caja de WebGL, devuelve el valor del t´exel m´as cercano y produce el efecto de pixelado . . . . . . . . . . . . . . . . . . . . Filtro bilineal de WebGL, devuelve la interpolaci´on lineal de cuatro t´exeles y produce el efecto de borrosidad . . . . . . . . . . . . . . Mipmapping de WebGL, se construye un conjunto de texturas, cada una de ellas un cuarto m´as peque˜na que la anterior. Observa la diferencia entre aplicar o no este tipo de filtro . . . . . . . . . . . Ejemplos de texturas de mapa de cubo . . . . . . . . . . . . . . . Vectores involucrados en reflection mapping . . . . . . . . . . . . En la imagen de la izquierda se muestra el mapa de cubo con las seis texturas en forma de cubo desplegado. En la imagen de la derecha, el mapa de cubo se ha utilizado para simular que el objeto central est´a reflejando su entorno . . . . . . . . . . . . . . . . . . Ejemplo de refraction mapping . . . . . . . . . . . . . . . . . . . Objetos texturados con la t´ecnica de bump mapping. La modificaci´on de la normal produce que aparentemente la superficie tenga bultos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La normal del plano se perturba utilizando una funci´on de ruido, haciendo que parezca que tenga peque˜nas ondulaciones . . . . . . Mapa de normales y su resultado aplicado sobre un modelo . . . .

77 77 78 79 80 81 82 82

83 84 85 85

85 86 87

87 88 89

90 91

93 93 93

7 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

7

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


6.19 Ejemplo de desplazamiento de la geometr´ıa . . . . . . . . . . . . 6.20 Ejemplos de aplicaci´on de la t´ecnica alpha mapping . . . . . . . . 6.21 Ejemplos de aplicaci´on de diferentes alpha maps sobre el mismo objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.22 Ejemplos obtenidos utilizando texturas en WebGL . . . . . . . . . 6.23 Ejemplos obtenidos utilizando reflection mapping en WebGL . . . 6.24 Ejemplos obtenidos utilizando refraction y reflection mapping en WebGL. El ´ındice de refracci´on es, de izquierda a derecha, de 0,95 y 0,99 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7.1 7.2 7.3 7.4 7.5

7.6 7.7

7.8 8.1

Tres ejemplos de transparencia con, de izquierda a derecha, alf a = 0,3, 0,5 y 0,7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dos resultados diferentes en los que u´ nicamente se ha variado el orden en el dibujado de los objetos transparentes . . . . . . . . . . Ejemplo de objeto transparente con, de izquierda a derecha, alf a = 0, 3, 0, 5 y 0, 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ejemplo de sombras proyectivas transparentes . . . . . . . . . . . Ejemplo de shadow mapping. A la izquierda se observa el mapa de profunidad obtenido desde la fuente de luz; a la derecha se muestra la escena con sus sombras . . . . . . . . . . . . . . . . . . . . . . Ejemplo de objeto reflejado en una superficie plana . . . . . . . . Al dibujar la escena sim´etrica es posible observarla fuera de los l´ımites del objeto reflejante (izquierda). El buffer de plantilla se puede utilizar para resolver el problema (derecha) . . . . . . . . . Ejemplo de reflejo plano . . . . . . . . . . . . . . . . . . . . . .

94 94 95 97 98

99 101 102 103 105

106 107

108 108

8.9

Ejemplo de objeto dibujado con una textura procedural. En este caso, el valor devuelto por la funci´on de textura se utiliza para determinar si hay que eliminar un determinado fragmento . . . . . . Ejemplo de combinaci´on de texturas 2D y textura procedural . . . Ejemplos del shader de rayado . . . . . . . . . . . . . . . . . . . Ejemplos del shader de damas . . . . . . . . . . . . . . . . . . . Ejemplos del shader de enrejado . . . . . . . . . . . . . . . . . . Ejemplos de enrejados circulares . . . . . . . . . . . . . . . . . . Ejemplos obtenidos utilizando una funci´on de ruido como textura procedural . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Objetos que hacen uso de una funci´on de ruido para colorear su superficie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ejemplos obtenidos con la funci´on de ruido de Perlin . . . . . . .

9.1 9.2 9.3 9.4

Las dos escenas pintadas para la selecci´on de objetos . . . . . . . 118 Objetos animados con la t´ecnica de desplazamiento . . . . . . . . 123 Animaci´on de un mosaico implementado como sistema de part´ıculas124 Animaci´on de banderas implementada como sistema de part´ıculas 124

8.2 8.3 8.4 8.5 8.6 8.7 8.8

110 111 111 113 114 115 115 116 116

8 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

8

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


9.5

Ejemplo de sistema de part´ıculas dibujado con tama˜nos de punto diferentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

10.1 Ejemplo de procesado de imagen. A la imagen de la izquierda se le ha aplicado un efecto de remolino, generando la imagen de la derecha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.2 En la imagen de la izquierda se observa claramente el efecto escalera, que se hace m´as suave en la imagen de la derecha . . . . . . 10.3 Ejemplo de funcionamiento del supersampling . . . . . . . . . . 10.4 Esquema de funcionamiento de la correci´on gamma . . . . . . . 10.5 Ejemplos de correcci´on gamma: 1.0 (izquierda) y 2.2 (derecha) . 10.6 Ejemplos de postproceso de imagen . . . . . . . . . . . . . . . . 10.7 Ejemplos de modificaci´on del brillo de la imagen con factores de escala 0,9, 1,2 y 1,5 . . . . . . . . . . . . . . . . . . . . . . . . 10.8 Ejemplos de modificaci´on del contraste de la imagen: 0,5, 0,75 y 1,0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.9 Ejemplos de modificaci´on de la saturaci´on de la imagen: 0,2, 0,5 y 0,8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.10Ejemplo del resultado del negativo de la imagen . . . . . . . . . 10.11Ejemplo del resultado de la imagen en escala de grises . . . . . . 10.12Ejemplo de resultado de la operaci´on de convoluci´on con el filtro de detecci´on de bordes . . . . . . . . . . . . . . . . . . . . . . . 10.13Warping de una imagen: imagen original en la izquierda, malla modificada en la imagen del centro y resultado en la imagen de la derecha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

127 128 128 129 130 130 131 132 132 133 133 134

135

9 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

9

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


´ Indice de listados 1.1 1.2 1.3 1.4 1.5 2.1

Ejemplo de creaci´on de un canvas con HTML5 . . . . . . . . . . Obtenci´on de un contexto WebGL . . . . . . . . . . . . . . . . . Inclusi´on de o´ rdenes WebGL . . . . . . . . . . . . . . . . . . . . Un shader muy b´asico . . . . . . . . . . . . . . . . . . . . . . . Compilaci´on y enlazado de un shader . . . . . . . . . . . . . . . Estructura correspondiente a la representaci´on de caras independientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Estructura correspondiente a la representaci´on de v´ertices compartidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3 Ejemplo de modelo de un cubo definido con tri´angulos preparado para ser utilizado con WebGL . . . . . . . . . . . . . . . . . . . 2.4 C´odigo m´ınimo que se corresponde con la estructura b´asica de un programa que utiliza WebGL (disponible en c02/visualiza.js) . . . 2.5 C´odigo HTML que incluye un canvas y los dos shaders b´asicos (disponible en c02/visualiza.html) . . . . . . . . . . . . . . . . . 2.6 Ejemplo de variable uniform en el shader de fragmentos . . . . . 2.7 Ejemplo de asignaci´on de una variable uniform . . . . . . . . . . 2.8 Ejemplo de modelo con dos atributos por v´ertice: posici´on y color 2.9 Ejemplo de shader con dos atributos por v´ertice: posici´on y color . 2.10 Localizaci´on y habilitaci´on de los dos atributos: posici´on y color . 2.11 Dibujo de un modelo con dos atributos por v´ertice . . . . . . . . . 3.1 Visualizaci´on en alambre de un modelo . . . . . . . . . . . . . . 3.2 Ejemplo de los pasos necesarios para dibujar un objeto transformado 3.3 Shader de v´ertices para transformar la posici´on de cada v´ertice . . 4.1 Algoritmo del z-buffer . . . . . . . . . . . . . . . . . . . . . . . 4.2 Shader de v´ertices para transformar la posici´on de cada v´ertice . . 5.1 Funci´on que implementa para una fuente de luz el modelo de iluminaci´on de Phong sin incluir el factor de atenuaci´on . . . . . . . 5.2 Shader para el foco de luz . . . . . . . . . . . . . . . . . . . . . 5.3 Shader para realizar un sombreado de Gouraud . . . . . . . . . . 5.4 Shader para realizar un sombreado de Phong . . . . . . . . . . . 5.5 Modelo de un cubo con la normal definida para cada v´ertice . . . 5.6 Obtenci´on de referencias para el uso de las normales . . . . . . .

19 20 21 24 25 28 29 33 35 38 39 39 40 41 42 42 51 51 52 59 60 68 70 71 72 73 73

10

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

10

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


5.7 5.8 5.9 5.10

5.11 5.12 5.13 5.14 5.15 6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9 6.10 6.11 7.1 7.2 7.3 8.1 8.2 8.3 9.1 9.2 9.3 9.4 9.5 9.6 9.7 9.8 9.9 9.10 10.1

Funciones para el c´alculo y la inicializaci´on de la matriz de la normal en el shader a partir de la matriz modelo-vista . . . . . . . . 74 Nueva funci´on de dibujo que incluye dos atributos: posici´on y normal 74 Obtenci´on de las referencias a las variables del shader que contendr´an el material . . . . . . . . . . . . . . . . . . . . . . . . . 75 La funci´on setShaderMaterial recibe un material como par´ametro e inicializa las variables del shader correspondientes. En la funci´on drawScene se establece un valor de material antes de dibujar el objeto 75 Obtenci´on de las referencias a las variables del shader que contendr´an los valores de la fuente de luz . . . . . . . . . . . . . . . 76 La funci´on setShaderLight inicializa las variables del shader correspondientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Iluminaci´on en ambas caras, modificaci´on en el shader de fragmentos 77 Iluminaci´on en ambas caras, modificaci´on en el shader de fragmentos 78 Shader de niebla . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Cambios necesarios para que un shader utilice una textura 2D . . 83 Cambios en el shader de fragmentos para utilizar varias texturas 2D 84 Cambios en el shader para reflection mapping . . . . . . . . . . . 90 Cambios en el shader para refraction mapping . . . . . . . . . . . 91 Cambios en el shader para skybox . . . . . . . . . . . . . . . . . 92 Creaci´on de una textura en WebGL . . . . . . . . . . . . . . . . . 96 Asignaci´on de unidad a un sampler2D . . . . . . . . . . . . . . . 96 Habilitaci´on del atributo de coordenada de textura . . . . . . . . . 96 Especificaci´on de tres atributos: posici´on, normal y coordenadas de textura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Shader para skybox y reflection mapping . . . . . . . . . . . . . . 98 Funci´on para crear la textura de mapa de cubo . . . . . . . . . . . 99 Secuencia de operaciones para dibujar objetos transparentes . . . 101 Objetos transparentes . . . . . . . . . . . . . . . . . . . . . . . . 103 Secuencia de operaciones para dibujar objetos reflejantes . . . . . 109 Shader de rayado . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Shader de damas . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Shader de enrejado . . . . . . . . . . . . . . . . . . . . . . . . . 114 Conversi´on de coordenadas para ser utilizadas en WebGL . . . . . 118 Acceso al color de un p´ıxel en el framebuffer . . . . . . . . . . . 118 Acceso al color de un p´ıxel en el FBO . . . . . . . . . . . . . . . 119 Shader para encendido / apagado . . . . . . . . . . . . . . . . . . 121 Funci´on que controla el encendido / apagado . . . . . . . . . . . . 121 Funci´on que actualiza el desplazamiento de la textura con el tiempo 122 Shader para actualizar las coordenadas de textura con el tiempo . 122 Cortina de part´ıculas . . . . . . . . . . . . . . . . . . . . . . . . 125 Dibujado del sistema de part´ıculas . . . . . . . . . . . . . . . . . 125 Shader de v´ertices para el sistema de part´ıculas . . . . . . . . . . 126 Shader de fragmentos para la correci´on gamma . . . . . . . . . . 130 11

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

11

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


10.2 10.3 10.4 10.5 10.6

Modificaci´on del brillo de una imagen . . . Modificaci´on del contraste de una imagen . Modificaci´on de la saturaci´on de la imagen Negativo del fragmento . . . . . . . . . . . C´alculo de la imagen en escala de grises . .

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

12

12

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

131 131 132 132 133

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Prefacio La materia Inform´atica Gr´afica forma parte de los grados en Ingenier´ıa Inform´atica, Dise˜no y Desarrollo de Videojuegos y tambi´en del m´aster universitario en Sistemas Inteligentes, todos ellos de la Universitat Jaume I. El objetivo de este libro es proporcionar suficiente material te´orico y pr´actico para apoyar la docencia, tanto presencial, desarrollada en clases de teor´ıa o en laboratorio, como no presencial, proporcionando al estudiante un material que facilite el estudio de la materia, de un nivel y contenido adecuados a las asignaturas en las que se imparte. Este libro pretende ser el complemento ideal a las explicaciones que el profesor imparta en sus clases, no su sustituto, y del cual el alumno deber´a mejorar el contenido con sus anotaciones. El libro introduce al alumno en la programaci´on moderna de gr´aficos por computador a trav´es de la interfaz de programaci´on de hardware gr´afico WebGL 1.0. Trata los fundamentos del proceso de obtenci´on de im´agenes sint´eticas, centr´andose en las etapas que el programador debe realizar teniendo en cuenta el pipeline de los procesadores gr´aficos actuales. As´ı, se introduce la programaci´on de shaders con WebGL, el modelado poligonal, las transformaciones geom´etricas, la transformaci´on de la c´amara, las proyecciones, el modelo de iluminaci´on de Phong y la aplicaci´on de texturas 2D. Este libro tambi´en introduce t´ecnicas para el procesado de im´agenes, como la convoluci´on o el antialising, t´ecnicas para aumentar el realismo visual, como trasparencias, reflejos y sombras, y m´etodos de aplicaci´on de texuras m´as avanzados como el environment mapping o texturas procedurales. Respecto a la diversidad de m´etodos que existen, se ha optado por incluir aquellos que puedan ser m´as did´acticos y que, tal vez con menor esfuerzo de programaci´on, permitan mejorar de manera importante la calidad visual de la imagen sint´etica. Para terminar, este trabajo no se olvida de introducir t´ecnicas relacionadas con el desarrollo de aplicaciones gr´aficas, tratando, por ejemplo, t´ecnicas de interacci´on y de animaci´on por computador con shaders.

Recursos en l´ınea Se ha creado la p´agina web http://cphoto.uji.es/grafica como apoyo a este material, donde el lector puede descargar los programas de ejemplo que se incluyen en los diferentes cap´ıtulos. 13

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

13

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Obras relacionadas Aunque existen muchas obras que han resultado muy u´ tiles para preparar este material, solo unas pocas han sido las que m´as han influenciado en su contenido. En concreto: Computer Graphics: Principles & Practice (Foley y otros, 1990), Fundamentals of Computer Graphics (Shirley y otros, 2009), Real-Time Rendering (Akenine-M¨oller y otros, 2008), OpenGL Shading Language (Rost y otros, 2010) y OpenGL Programming Guide (Dave Shreiner, 2009).

14 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

14

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 1

Introducci´on a WebGL WebGL es una interfaz de programaci´on de aplicaciones (API) para generar im´agenes por ordenador en p´aginas web. Permite desarrollar aplicaciones interactivas que producen im´agenes en color de alta calidad formadas por objetos tridimensionales (ver figura 1.1). Adem´as, WebGL solo requiere de un navegador que lo soporte, por lo que es independiente tanto del sistema operativo como del sistema gr´afico de ventanas. En este cap´ıtulo se introduce la programaci´on con WebGL a trav´es de un peque˜no programa y se presenta el lenguaje GLSL para la programaci´on de shaders.

Figura 1.1: Ejemplo de objeto tridimensional dibujado con WebGL

1.1.

Antecedentes

OpenGL se present´o en 1992. Su predecesor fue Iris GL, un API dise˜nado y soportado por la empresa Silicon Graphics. Desde entonces, la OpenGL Architecture Review Board (ARB) conduce la evoluci´on de OpenGL, controlando la especificaci´on y los tests de conformidad. 15

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

15

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


En sus or´ıgenes, OpenGL se bas´o en un pipeline configurable de funcionamiento fijo. El usuario pod´ıa especificar algunos par´ametros, pero el funcionamiento y el orden de procesamiento era siempre el mismo. Con el paso del tiempo, los fabricantes de hardware gr´afico necesitaron dotarla de mayor funcionalidad que la inicialmente concebida. As´ı, se cre´o un mecanismo para definir extensiones que, por un lado, permit´ıa a los fabricantes proporcionar hardware gr´afico con mayores posibilidades, al mismo tiempo que ofrec´ıan la capacidad de no realizar siempre el mismo pipeline de funcionalidad fija. En el a˜no 2004 aparece OpenGL 2.0, el cual incluir´ıa el OpenGL Shading Language, GLSL 1.1, e iba a permitir a los programadores la posibilidad de escribir un c´odigo que fuese ejecutado por el procesador gr´afico. Para entonces, las principales empresas fabricantes de hardware gr´afico ya ofrec´ıan procesadores gr´aficos programables. A estos programas se les denomin´o shaders y permitieron incrementar las prestaciones y el rendimiento de los sistemas gr´aficos de manera espectacular, al generar adem´as una amplia gama de efectos: iluminaci´on m´as realista, fen´omenos naturales, texturas procedurales, procesamiento de im´agenes, efectos de animaci´on, etc. (ver figura 1.2).

Figura 1.2: Ejemplos de objetos dibujados mediante shaders

Dos a˜nos m´as tarde, el consorcio ARB pas´o a ser parte del grupo Khronos (http://www.khronos.org/). Entre sus miembros activos, promotores y contribuidores se encuentran empresas de prestigio internacional como AMD (ATI), Apple, Nvidia, S3 Graphics, Intel, IBM, ARM, Sun, Nokia, etc. Es en el a˜no 2008 cuando OpenGL, con la aparici´on de OpenGL 3.0 y GLSL 1.3, adopta el modelo de obsolescencia, aunque manteniendo compatibilidad con las versiones anteriores. Sin embargo, en el a˜no 2009, con las veriones de OpenGL 3.1 y GLSL 1.4, es cuando probablemente se realiza el cambio m´as significativo; el pipeline de funcionalidad fija y sus funciones asociadas son eliminadas, aunque disponibles a´un a trav´es de extensiones que est´an soportadas por la mayor parte de las implementaciones. OpenGL ES 1.1 aparece en el 2007. Se trata de la versi´on de OpenGL para 16 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

16

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


1.3, adopta el modelo de obsolescencia, aunque manteniendo compatibilidad con las versiones anteriores. Sin embargo, en el a˜no 2009, con las veriones de OpenGL 3.1 y GLSL 1.4, es cuando probablemente se realiza el cambio m´as significativo; el pipeline de funcionalidad fija y sus funciones asociadas son eliminadas, aunque disponibles a´un a trav´es de extensiones que est´an soportadas por la mayor parte de las implementaciones. OpenGL ES 1.1 aparece en el 2007. Se trata de la versi´on de OpenGL para sistemas empotrados incluyendo tel´efonos m´oviles, tabletas, consolas, veh´ıculos, etc. En solo un a˜no evoluciona y se presenta la versi´on 2.0 creada a partir de la 16 especificaci´on de OpenGL 2.0. Desde el 2014 se encuentra disponible la versi´on 3.1, pero todav´ıa est´a poco extendida, siendo la versi´on 2.0 la m´as soportada en la actualidad, al menos en lo que a dispositivos m´oviles se refiere. WebGL 1.0 aparece en el a˜no 2011. Se crea a partir de la especificaci´on de OpenGL ES 2.0. En la actualidad est´a soportada por los navegadores Safari, Chrome, Firefox, Opera e Internet Explorer. Respecto al futuro cercano de WebGL, la versi´on 2.0 se basa en la especificaci´on de OpenGL ES 3.0 y ya se encuentra en fase de pruebas.

1.2.

Prueba de WebGL

Averiguar si se dispone de soporte para WebGL es muy simple. Abre un navegador y accede a cualquiera de las muchas p´aginas que informan de si el navegador soporta o no WebGL. Por ejemplo, la p´agina http://get.webgl.org es una de ellas. Si funciona, se mostrar´a una p´agina con un cubo en alambre dando vueltas sobre s´ı mismo como el que aparece en la figura 1.3.

Figura 1.3: Resultado con e´ xito del test de soporte de WebGL en un navegador proporcionado por la p´agina http://get.webgl.org

Ejercicios  1.1 Comprueba la disponibilidad de WebGL en los diferentes navegadores que tengas instalados en tu equipo. Si tienes varios sistemas operativos repite las pruebas en cada uno de ellos. Si tienes dispositivos m´oviles, tel´efonos o tabletas a tu alcance, prueba tambi´en el soporte con los diferentes navegadores. Despu´es de las distintas pruebas: ¿Cu´al es tu opini´on respecto al estado de soporte de WebGL en los diferentes navegadores?

17 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

17

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


¿Crees que es suficiente o que por contra tendremos que esperar a´un m´as a que aparezcan nuevas versiones de los navegadores? ¿Piensas que lo que desarrolles en WebGL vas a a tener que probarlo en cada navegador y sistema con el fin de comprobar, no solo su funcionamiento, sino tambi´en si se obtiene o no el mismo resultado?  1.2 Accede a la siguiente web: http://webglreport.com/. Obtendr´as una p´agina con un contenido similar al que se muestra en la figura 1.4. Aunque muchos t´erminos te resulten extra˜nos, trata de contestar a las siguientes preguntas: ¿Cu´al es la versi´on de WebGL que soporta tu navegador? ¿Cu´antos bits se utilizan para codificar el color de un p´ıxel?  1.3 Si realizas una b´usqueda en internet encontrar´as bastantes p´aginas que ofrecen una selecci´on de ejemplos y de p´aginas donde los desarrolladores cuelgan sus propios trabajos. A continuaci´on figuran tres de ellos, prueba algunos de los ejemplos que ah´ı puedes encontrar: Chrome Experiments: http://www.chromeexperiments.com/ 22 Experimental WebGL Demo Examples: http://www.awwwards.com/ 22-experimental-webgl-demo-examples.html WebGL Samples: http://webglsamples.org/

Figura 1.4: Contenido de la p´agina http://webglreport.org

1.3.

Aplicaci´on WebGL

Para crear p´aginas web din´amicas es necesario combinar H TML y JAVA SCRIPT . Ahora, con WebGL se a˜ nade un tercer elemento, el lenguaje GLSL ES, que 18 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

18

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


es el que se utiliza para escribir los shaders. Sin embargo, la estructura general de una aplicaci´on WebGL no es diferente, es decir, sigue siendo la misma que cuando se crean aplicaciones web utilizando u´ nicamente H TML y JAVA S CRIPT.

1.3.1.

HTML5 y canvas

Un canvas es un elemento rectangular que define el espacio de la p´agina web donde se desea visualizar la escena 3D. El c´odigo del listado 1.1 muestra c´omo crear un canvas de tama˜no 800 por 600.

Listado 1.1: Ejemplo de creaci´on de un canvas con HTML5 <!DOCTYPE html> <html> <head> <meta c h a r s e t =” u t f −8”> < t i t l e > I n f o r m a´ t i c a Gr a´ f i c a </ t i t l e > < s t y l e t y p e =” t e x t / c s s ”> c a n v a s { b o r d e r : 1 px s o l i d b l a c k ; } </ s t y l e > </ head> <body> <c a n v a s i d =” myCanvas ” w i d t h =” 800 ” h e i g h t =” 600 ”> E l N a v e g a d o r no s o p o r t a HTML5 </ c a n v a s > </body> </ html>

Ejercicios  1.4 Examina el listado 1.1, utiliza un editor para escribirlo y gu´ardalo con el nombre miCanvas.html. Ahora a´ brelo con el navegador que hayas seleccionado para trabajar. Prueba a cambiar algunos de los par´ametros como el tama˜no, el tipo de borde, o su color. Realmente, que el marco sea visible no es necesario, pero de momento facilita ver claramente cu´al es el a´ rea de dibujo establecida.

1.3.2.

Contexto WebGL

Un contexto WebGL es un objeto JAVA S CRIPT a trav´es del cual se accede a toda la funcionalidad de WebGL. Es necesario crear primero el canvas y entonces obtener el contexto a partir de este. Observa el c´odigo del listado 1.2 que chequea la disponibilidad de WebGL en el navegador. 19 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

19

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 1.2: Obtenci´on de un contexto WebGL f u n c t i o n getWebGLContext ( ) { v a r c a n v a s = document . g e t E l e m e n t B y I d ( ” myCanvas ” ) ; v a r names = [ ” webgl ” , ” e x p e r i m e n t a l −webgl ” , ” w e b k i t −3d ” , ”moz−webgl ” ] ; f o r ( v a r i = 0 ; i < names . l e n g t h ; ++ i ) { try { r e t u r n c a n v a s . g e t C o n t e x t ( names [ i ] ) ; } catch ( e ) { } } return n u l l ; } f u n c t i o n initWebGL ( ) { v a r g l = getWebGLContext ( ) ;

}

i f (! gl ) { a l e r t ( ”WebGL no e s t a´ d i s p o n i b l e ” ) ; } else { a l e r t ( ”WebGL d i s p o n i b l e ” ) ; }

initWebGL ( ) ;

Ejercicios  1.5 Examina el listado 1.2, utiliza un editor para escribirlo y gu´ardalo como contexto.js. Ahora recupera miCanvas.html y a˜nade el script justo antes de cerrar el cuerpo de la p´agina web: <script src= ”contexto.js” >< /script> Refresca la p´agina en el navegador y comprueba el resultado. ¿Tienes soporte para WebGL?

1.4.

El m´ınimo programa

Observa la nueva funci´on initWebGL del listado 1.3. Esta funci´on especifica un color de borrado, o color de fondo, utilizando el m´etodo clearColor, y or20

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

20

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


dena que borre el contenido del canvas con la orden clear y el par´ametro COLOR BUFFER BIT. Ambas instrucciones son ya o´ rdenes de WebGL. Cabe se˜nalar que aunque este programa contiene la m´ınima expresi´on de c´odigo que utiliza WebGL, la estructura habitual de un programa que utilice WebGL se corresponde con el que se muestra m´as adelante en el listado 2.4.

Listado 1.3: Inclusi´on de o´ rdenes WebGL f u n c t i o n initWebGL ( ) { v a r g l = getWebGLContext ( ) ; i f (! gl ) { a l e r t ( ”WebGL no e s t a´ d i s p o n i b l e ” ) ; return ; } / / e s p e c i f i c a en RGBA e l c o l o r de f o n d o gl . clearColor (1.0 ,0.0 ,0.0 ,1.0) ; / / borra e l canvas u t i l i z a n d o e l color / / e s p e c i f i c a d o en l a l ´ı nea a n t e r i o r g l . c l e a r ( g l . COLOR BUFFER BIT ) ; }

Ejercicios  1.6 Ejecuta el programa c01/minimoPrograma.html que implementa la funci´on initWebGL del listado 1.3. Consulta en la gu´ıa de programaci´on de WebGL las o´ rdenes clear y clearColor y contesta a las siguientes cuestiones: ¿Qu´e has de cambiar para que el color de fondo sea amarillo? ¿Qu´e ocurre si intercambias el orden de clear y clearColor? ¿Por qu´e?

1.5.

El pipeline

El funcionamiento b´asico del pipeline se representa en el diagrama simplificado que se muestra en la figura 1.5. Las etapas de procesado del v´ertice y del fragmento son programables, y es el programador el responsable de escribir los shaders que se han de ejecutar en cada una de ellas. El procesador de v´ertices acepta v´ertices como entrada, los procesa utilizando el shader de v´ertices y env´ıa el resultado a la etapa denominada procesado de la primitiva. En esta etapa, los v´ertices se reagrupan dependiendo de qu´e primitiva 21 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

21

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 1.5: Secuencia b´asica de operaciones del pipeline de OpenGL

geom´etrica se est´a procesando (puntos, l´ıneas o tri´angulos). Tambi´en se realizan otras operaciones que de momento se van a omitir. La primitiva pasa por una etapa de conversi´on al raster, que b´asicamente consiste en generar peque˜nos trozos denominados fragmentos que todos juntos cubren la superficie de la primitiva. El procesador de fragmentos determina el color definitivo de cada fragmento utilizando el shader de fragmentos. El resultado se env´ıa al framebuffer, aunque no sin antes atravesar algunas etapas que de momento tambi´en se omiten.

1.6.

G LSL

El lenguaje GLSL forma parte de WebGL y permite al programador escribir el c´odigo que desea ejecutar en los procesadores programables de la GPU. En la actualidad hay cinco tipos de procesadores: v´ertices, control de teselaci´on, evaluaci´on de teselaci´on, geometr´ıa y fragmentos; por lo que tambi´en decimos que hay cinco tipos de shaders, uno por cada tipo de procesador. Sin embargo, WebGL 1.0 solo soporta dos tipos de shaders: el de v´ertices y el de fragmentos, por lo que solo es posible escribir c´odigos para sus dos respectivos procesadores. G LSL es un lenguaje de alto nivel, parecido al C, aunque tambi´en toma prestadas algunas caracter´ısticas del C++. Su sintaxis se basa en el ANSI C. Constantes, identificadores, operadores, expresiones y sentencias son b´asicamente las mismas que en C. El control de flujo con bucles, la sentencias condicionales if-then-else y las llamadas a funciones son id´enticas al C. Pero GLSL tambi´en a˜nade caracter´ısticas no disponibles en C, entre otras se destacan las siguientes: Tipos vector: vec2, vec3, vec4 Tipos matriz: mat2, mat3, mat4 Tipos sampler para el acceso a texturas: sampler2D, samplerCube Tipos para comunicarse entre shaders y con la aplicaci´on: uniform, varying Acceso a componentes de un vector mediante: .xyzw .rgba .stpq 22 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

22

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Operaciones vector-matriz, por ejemplo: vec4 a = b ∗ c, siendo b de tipo vec4 y c de tipo mat4 Variables predefinidas que almacenan estados de WebGL G LSL tambi´en dispone de funciones propias como, por ejemplo, trigonom´etricas (sin, cos, tan, etc.), exponenciales (pow, exp, sqrt, etc.), comunes (abs, floor, mod, etc.), geom´etricas (length, cross, normalize, etc.), matriciales (transpose, inverse, etc.) y operaciones relacionales con vectores (equal, lessThan, any, etc). Consulta la especificaci´on del lenguaje para conocer el listado completo. Tambi´en hay caracter´ısticas del C no soportadas en OpenGL, como es el uso de punteros, de los tipos: byte, char, short, long int y la conversi´on impl´ıcita de tipos est´a muy limitada. Del C++, GLSL copia la sobrecarga, el concepto de constructor y el que las variables se puedan declarar en el momento de ser utilizadas. En el listado 1.4 se muestra el c´odigo H TML, que incluye un ejemplo de shader, el m´as simple posible. Los scripts identificados como myVertexShader y myFragmentShader contienen los c´odigos fuente del shader de v´ertices y del shader de fragmentos respectivamente. Estos scripts se deben incluir en el cuerpo de la p´agina H TML (ver por ejemplo el listado 2.5). Cuando desde la aplicaci´on se ordene dibujar un modelo poligonal, cada v´ertice producir´a la ejecuci´on del shader de v´ertices, el cual a su vez produce como salida la posici´on del v´ertice que se almacena en la variable predefinida gl Position. El resultado del procesado de cada v´ertice atraviesa el pipeline, los v´ertices se agrupan dependiendo del tipo de primitiva a dibujar, y en la etapa de conversi´on al raster la posici´on del v´ertice (y tambi´en de sus atributos en el caso de haberlos) es interpolada, generando los fragmentos y produciendo, cada uno de ellos, la ejecuci´on del shader de fragmentos en el procesador correspondiente. El prop´osito de este u´ ltimo shader es determinar el color definitivo del fragmento. Siguiendo con el ejemplo, todos los fragmentos son puestos a color verde (especificado en formato RGBA ) utilizando la variable predefinida gl FragColor.

1.7.

Compilaci´on y enlazado de un shader

Los shaders han de ser compilados y enlazados antes de poder ser ejecutados en una GPU. El compilador de GLSL est´a integrado en el propio driver de OpenGL instalado en la m´aquina (ordenador, tel´efono, tableta, etc.). Esto implica que la aplicaci´on en tiempo de ejecuci´on ser´a quien env´ıe el c´odigo fuente del shader al driver para que sea compilado y enlazado, creando un ejecutable que puede ser instalado en los procesadores correspondientes. Los pasos a realizar son tres: 1. Crear y compilar los objetos shader 2. Crear un programa y a˜nadirle los objetos compilados 3. Enlazar el programa creando un ejecutable

23 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

23

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Ejercicios  1.7 El listado 1.5 muestra un ejemplo de todo el proceso. Observa detenidamente la funci´on initShader e identifica en el c´odigo cada una de las tres etapas. Consulta la especificaci´on de WebGL para conocer m´as a fondo cada una de las o´ rdenes que aparecen en el ejemplo.  1.8 Edita el fichero c01/miPrimerTrianguloConWebGL.js. Observa c´omo queda incluida la funci´on initShader dentro de un c´odigo m´as completo y en qu´e momento se le llama desde la funci´on initWebGL.

Por u´ ltimo, para que el programa ejecutable sea instalado en los procesadores correspondientes, es necesario indicarlo con la orden glUseProgram, que como par´ametro debe recibir el identificador del programa que se desea utilizar. La carga de un ejecutable siempre supone el desalojo del que hubiera con anterioridad. Listado 1.4: Un shader muy b´asico < s c r i p t i d =” m y V e r t e x S h a d e r ” t y p e =” x−s h a d e r / x−v e r t e x ”> / / S h a d e r de v e´ r t i c e s / / D e c l a r a c i o´ n d e l a t r i b u t o p o s i c i o´ n a t t r i b u t e vec3 V e r t e x P o s i t i o n ; v o i d main ( )

{

/ / s e a s i g n a l a p o s i c i o´ n d e l v e´ r t i c e a / / la variable predefinida gl Position g l P o s i t i o n = vec4 ( V e r t e x P o s i t i o n , 1 . 0 ) ; } </ s c r i p t > < s c r i p t i d =” m y F r a g m e n t S h a d e r ” t y p e =” x−s h a d e r / x−f r a g m e n t ”> / / S h a d e r de f r a g m e n t o s v o i d main ( ) { / / s e a s i g n a e l c o l o r v e r d e a cada f r a g m e n t o g l F r a g C o l o r = vec4 ( 0 . 0 , 1 . 0 , 0 . 0 , 1 . 0 ) ; } </ s c r i p t >

24

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

24

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 1.5: Compilaci´on y enlazado de un shader function initShader () { / / paso 1 v a r v e r t e x S h a d e r = g l . c r e a t e S h a d e r ( g l . VERTEX SHADER) ; gl . shaderSource ( vertexShader , document . g e t E l e m e n t B y I d ( ’ m y V e r t e x S h a d e r ’ ) . t e x t ) ; gl . compileShader ( vertexShader ) ; v a r f r a g m e n t S h a d e r = g l . c r e a t e S h a d e r ( g l . FRAGMENT SHADER) ; gl . shaderSource ( fragmentShader , document . g e t E l e m e n t B y I d ( ’ m y F r a g m e n t S h a d e r ’ ) . t e x t ) ; gl . compileShader ( fragmentShader ) ; / / paso 2 var program = g l . c r e a t e P r o g r a m ( ) ; g l . a t t a c h S h a d e r ( program , v e r t e x S h a d e r ) ; g l . a t t a c h S h a d e r ( program , f r a g m e n t S h a d e r ) ; / / paso 3 g l . l i n k P r o g r a m ( program ) ; g l . useProgram ( program ) ; return program ; }

25 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

25

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 2

Modelado poligonal Se denomina modelo al conjunto de datos que describe un objeto y que puede ser utilizado por un sistema gr´afico para ser visualizado. Hablamos de modelo poligonal cuando se utilizan pol´ıgonos para describirlo. En general, el tri´angulo es la primitiva m´as utilizada, aunque tambi´en el cuadril´atero se emplea en algunas ocasiones (ver figura 2.1).

Figura 2.1: A la izquierda, objeto representado mediante cuadril´ateros y a la derecha, objeto representado mediante tri´angulos

El hardware gr´afico actual se caracteriza por su velocidad a la hora de pintar pol´ıgonos. Los fabricantes anuncian desde hace a˜nos tasas de dibujado de varios millones de pol´ıgonos por segundo. Por esto, el uso de modelos poligonales para visualizar modelos 3D en aplicaciones interactivas es pr´acticamente una obligaci´on. Por contra, los modelos poligonales representan las superficies curvas de manera aproximada, como se puede observar en la figura 2.1. Sin embargo, hay m´etodos que permiten visualizar un modelo poligonal de modo que este sea visualmente exacto. Por ejemplo, la figura 2.2 muestra la representaci´on poligonal del modelo de una copa y donde se puede observar que el hecho de que la superficie curva se represente mediante un conjunto de pol´ıgonos planos no impide que la observemos como si de una superficie curva se tratara. 26

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

26

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 2.2: Representaci´on poligonal de una copa y resultado de su visualizaci´on

2.1.

Representaci´on

Normalmente los modelos poligonales representan objetos donde aristas y v´ertices se comparten entre diferentes pol´ıgonos. A este tipo de modelos se les denomina mallas poligonales. La figura 2.3 muestra varios ejemplos. A la hora de definir una estructura para la representaci´on de mallas poligonales es importante tener en cuenta esta caracter´ıstica para tratar de reducir el espacio de almacenamiento, el consumo de ancho de banda y el tiempo de dibujado.

Figura 2.3: Ejemplos de mallas poligonales

27 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

27

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


2.1.1.

Caras independientes

Este tipo de representaci´on se caracteriza por almacenar cada tri´angulo de manera independiente, como si estos no compartieran informaci´on alguna. Aunque es un tipo de estructura muy poco pr´actica, WebGL la soporta y se utiliza de referencia para realizar comparaciones con otros tipos de representaci´on. Su estructura de datos (ver listado 2.1) se corresponder´ıa con una u´ nica lista de tri´angulos, donde para cada tri´angulo se almacenan las coordenadas de cada uno de sus v´ertices, tal y como se muestra en la figura 2.4.

Listado 2.1: Estructura correspondiente a la representaci´on de caras independientes struct triangulo

{

vector3 coordenadas [ 3 ] ; } Triangulos [ nTriangulos ] ;

(x3, y3, z3)

F3

F1 F0

(x0, y0, z0)

(x5, y5, z5)

(x4, y4, z4)

F2

(x1, y1, z1)

(x2, y2, z2)

Triangulos[] = { { x0, y0, z0, x1, y1, z1, x3, y3, z3 }, { x1, y1, z1, x4, y4, z4, x3, y3, z3 }, { x1, y1, z1, x2, y2, z2, x4, y4, z4 }, { x2, y2, z2, x5, y5, z5, x4, y4, z4 } }

Figura 2.4: Esquema de almacenamiento de una malla poligonal mediante la estructura de caras independientes

2.1.2.

V´ertices compartidos

En este caso se separa la informaci´on de los v´ertices y la de los tri´angulos en dos listas (ver listado 2.2). De esta manera, cada v´ertice compartido se almacena una u´ nica vez y cada tri´angulo se representa mediante tres ´ındices en la lista de v´ertices (ver figura 2.5). 28 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

28

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 2.2: Estructura correspondiente a la representaci´on de v´ertices compartidos struct vertice

{

f l o a t coordenadas [ 3 ] ; } Vertices [ nVertices ]; struct triangulo

{

unsigned i n t i n d i c e s [ 3 ] ; } Triangulos [ nTriangulos ] ;

(x3, y3, z3)

F3

F1 F0

(x0, y0, z0)

(x5, y5, z5)

(x4, y4, z4)

F2

(x1, y1, z1) Vertices[] = { {x0, y0, z0}, {x1, y1, z1}, {x2, y2, z2}, {x3, y3, z3}, {x4, y4, z4}, {x5, y5, z5} }

(x2, y2, z2) Triangulos[] = { { 0, 1, 3 }, { 1, 4, 3 }, { 1, 2, 4 }, { 2, 5, 4 } }

Figura 2.5: Esquema de almacenamiento de una malla poligonal mediante la estructura de v´ertices compartidos

2.1.3.

Tiras y abanicos de tri´angulos

Estos tipos de representaci´on tratan de aumentar las prestaciones del sistema gr´afico creando grupos de tri´angulos que comparten v´ertices. En el caso de un grupo de tipo tira de tri´angulos, los primeros tres v´ertices definen el primer tri´angulo. Cada nuevo v´ertice define un nuevo tri´angulo utilizando ese v´ertice y los dos u´ ltimos del tri´angulo anterior (ver figura 2.6). En el caso de un grupo de tipo abanico de tri´angulos, su primer v´ertice representa a un v´ertice com´un a todos los tri´angulos del mismo grupo. De nuevo, los primeros tres v´ertices definen el primero y despu´es cada v´ertice nuevo sustituye siempre al segundo del tri´angulo anterior (ver figura 2.6). 29

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

29

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


v3

v0

v3

v4

v0

v4 v1

v1

v5

v5 v2

v2

AbanicoTriangulos[] = { 1, 0, 3, 4, 5, 2 }

TiraTriangulos[] = { 0, 3, 1, 4, 2, 5 }

Figura 2.6: Ejemplo de abanico y tira de tri´angulos

2.2.

La normal

Un modelo poligonal, adem´as de v´ertices y caras, suele almacenar otra informaci´on a modo de atributos como el color, la normal o las coordenadas de textura. Estos atributos son necesarios para mejorar significativamente el realismo visual. Por ejemplo, en la figura 2.7 se muestra el resultado de la visualizaci´on del modelo poligonal de una tetera obtenido gracias a que, adem´as de la geometr´ıa, se ha proporcionado la normal de la superficie para cada v´ertice.

Figura 2.7: Visualizaci´on del modelo poligonal de una tetera. En la imagen de la izquierda se pueden obervar los pol´ıgonos utilizados para representarla

La normal es un vector perpendicular a la superficie en un punto. Si la superficie es plana, la normal es la misma para todos los puntos de la superficie. Para un tri´angulo es f´acil obtenerla realizando el producto vectorial de dos de los vectores directores de sus aristas. Ya que el producto vectorial no es conmutativo, es muy importante establecer c´omo se va a realizar el c´alculo y tambi´en que los v´ertices que forman las caras se especifiquen siempre en el mismo orden, para as´ı obtener todas las normales de manera consistente. 30 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

30

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Ejercicios  2.1 Observa la siguiente descripci´on poligonal de un objeto. Las l´ıneas que comienzan por v se corresponden con los v´ertices e indican sus coordenadas. El primero se referencia con el n´umero 1 y los dem´as se enumeran de forma consecutiva. Las l´ıneas que comienzan por f se corresponden con las caras e indican qu´e vertices lo forman. v000 v001 v101 v100 v010 v011 v111 v110 f132 f143 f125 f265 f326 f367 f347 f487 f418 f158 Dib´ujalo en papel, ¿qu´e objeto representa? ¿Est´an todas sus caras definidas en el mismo orden? ¿En qu´e sentido est´an definidas, horario o antihorario? Calcula la normal para cada v´ertice, ¿qu´e problema encuentras? Obt´en las tiras de tri´angulos que representan el objeto, ¿puedes conseguirlo con solo una tira?

2.3.

Mallas y WebGL

2.3.1.

Tipos de primitivas geom´etricas

Las primitivas b´asicas de dibujo en WebGL son el punto, el segmento de l´ınea y el tri´angulo. Cada primitiva se define especificando sus respectivos v´ertices, y estas se agrupan a su vez para definir objetos de mayor complejidad. En WebGL, la primitiva geom´etrica se utiliza para especificar c´omo han de ser agrupados los 31 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

31

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


v´ertices tras ser operados en el procesador de v´ertices y as´ı poder ser visualizada. Son las siguientes: Dibujo de puntos: • gl.POINTS Dibujo de l´ıneas: • Segmentos independientes: gl.LINES

• Secuencia o tira de segmentos: gl.LINE STRIP

• Secuencia cerrada de segmentos: gl.LINE LOOP Tri´angulos: • Tri´angulos independientes: gl.TRIANGLES • Tira de tri´angulos: gl.TRIANGLE STRIP

• Abanico de tri´angulos: gl.TRIANGLE FAN

2.3.2.

Descripci´on de la geometr´ıa

Habitualmente se suele asociar el concepto de v´ertice con las coordenadas que definen la posici´on de un punto en el espacio. En WebGL, el concepto de v´ertice es m´as general, entendi´endose como una agrupaci´on de datos a los que se denominan atributos. Estos pueden ser de cualquier tipo: reales, enteros, vectores, etc. Los m´as utilizados son la posici´on, la normal y el color, pero WebGL permite que el programador pueda incluir como atributo cualquier informaci´on que para e´ l tenga sentido y que necesite tener disponible en el shader. WebGL no proporciona mecanismos para describir o modelar objetos geom´etricos complejos, sino que proporciona mecanismos para especificar c´omo dichos objetos deben ser dibujados. Es responsabilidad del programador definir las estructuras de datos adecuadas para almacenar la descripci´on del objeto. Sin embargo, como WebGL requiere que la informaci´on que vaya a visualizarse se disponga en vectores, lo habitual es utilizar tambi´en vectores para almacenar los v´ertices, as´ı como sus atributos, y utilizar ´ındices a dichos vectores para definir las primitivas geom´etricas (ver listado 2.3).

2.3.3.

Visualizaci´on

En primer lugar, el modelo poligonal se ha de almacenar en buffer objects. Un buffer object no es m´as que una porci´on de memoria reservada din´amicamente y controlada por el propio procesador gr´afico. Siguiendo con el ejemplo del listado 2.3 se necesitan dos buffers, uno para el vector de v´ertices y otro para el de ´ındices. Despu´es hay que asignar a cada buffer sus datos correspondientes. El listado 2.4 recoge estas operaciones en la funci´on initBuffers, exam´ınalo y acude a la especificaci´on del lenguaje para conocer m´as detalles de las funciones utilizadas. 32 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

32

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 2.3: Ejemplo de modelo de un cubo definido con tri´angulos preparado para ser utilizado con WebGL v a r exampleCube = { ” v e r t i c e s ” : [ −0.5 , 0.5 , 0.5 , −0.5 , −0.5 , 0.5 , 0.5 , −0.5 ,

−0.5 , −0.5 , 0.5 , 0.5 , −0.5 , −0.5 , 0.5 , 0.5 ,

0.5 , 0.5 , 0.5 , 0.5 , −0.5 , −0.5 , −0.5 , −0.5] ,

” indices ” : [ 0 , 1, 3, 4, 0, 0,

2, 6, 5, 5, 4, 1,

2, 6, 6, 7, 3, 4,

1, 5, 2, 6, 7, 5,

0, 1, 3, 4, 0, 0,

3, 2, 7, 6, 7, 5]

};

El listado 2.5 muestra el c´odigo HTML que incluye dos scripts, uno para cada shader, el de v´ertices y el de fragmentos. Observa que el shader de v´ertices define un u´ nico atributo para cada v´ertice, su posici´on. El segundo paso consiste en obtener los ´ındices de las variables del shader que representan los atributos de los v´ertices (que de momento es solo la posici´on) y habilitar el vector correspondiente. Estas operaciones se muestran en el listado 2.4 y se han incluido al final de la funci´on initShaders, que es la encargada de compilar, enlazar y crear un ejecutable del shader. Ahora que el modelo ya se encuentra almacenado en la memoria controlada por la GPU, el shader ya est´a compilado y enlazado, y los ´ındices de los atributos de los v´ertices ya se han obtenido, s´olo queda el u´ ltimo paso: su visualizaci´on. Primero, hay que indicar los buffers que contienen los v´ertices y los ´ındices correspondientes al modelo que se va a visualizar. Tambi´en hay que especificar c´omo se encuentran dispuestos cada uno de los atributos de los v´ertices en el buffer correspondiente. Despu´es ya se puede ordenar el dibujado, indicando tipo de primitiva y n´umero de elementos. Los v´ertices se procesar´an de manera independiente, pero siempre en el orden en el que son enviados al procesador gr´afico. Estas operaciones se muestran en el listado 2.4, en la funci´on draw. De nuevo, acude a la especificaci´on del lenguaje para conocer m´as detalles de las o´ rdenes utilizadas.

33

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

33

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Ejercicios  2.2 Abre con el navegador el archivo c02/visualiza.html, que incluye el c´odigo del listado 2.5, y produce a su vez la carga de c02/visualiza.js, que contiene el c´odigo del listado 2.4. Ahora responde a la siguiente pregunta: ¿Qu´e objeto se muestra?  2.3 Realiza las modificaciones oportunas en el c´odigo de visualiza.js para pintar un pent´agono. A continuaci´on tienes el modelo del pent´agono:

var examplePentagon = { ” vertices ” : [ 0.0 , 0.9 , −0.95 , 0 . 2 , −0.6 , −0.9 , 0 . 6 , −0.9 , 0.95 , 0.2 ,

0.0 , 0.0 , 0.0 , 0.0 , 0.0] ,

” i n d i c e s ” : [ 0 , 1 , 2 , 3 , 4] };

Ahora dib´ujalo utilizando puntos primero y despu´es l´ıneas: Puntos: gl.drawElements(gl.POINTS, 5, gl.UNSIGNED SHORT, 0); L´ıneas: gl.drawElements(gl.LINE LOOP, 5,gl.UNSIGNED SHORT,0);  2.4 Contin´ua utilizando los mismos v´ertices del modelo del pent´agono y realiza las modificaciones necesarias para obtener una estrella como la de la figura 2.8. Prueba tambi´en a cambiar el grosor del trazo mediante la orden gl.lineWidth(5.0) justo antes de ordenar el dibujado de la geometr´ıa.

Figura 2.8: Ejemplo de estrella

34

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

34

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


 2.5 Utiliza ahora la descripci´on de los v´ertices que figura a continuaci´on. Crea una funci´on que se llame drawGeometryLines y que utilizando dichos v´ertices dibuje la estrella con l´ıneas de manera que se obtenga el resultado de la figura 2.9 (imagen de la izquierda). Crea otra funci´on que se llame drawGeometryTriangles y que dibuje la estrella mediante tri´angulos independientes de manera que se obtenga el resultado que se muestra en la figura 2.9 (imagen de la derecha).

” vertices ” : [0.0 , −0.95 , −0.6 , 0.6 , 0.95 , 0.0 , 0.37 , 0.23 , −0.23 , −0.37 ,

0.9 , 0.2 , −0.9 , −0.9 , 0.2 , −0.48 , −0.22 , 0.2 , 0.2 , −0.22 ,

0.0 , 0.0 , 0.0 , 0.0 , 0.0 , 0.0 , 0.0 , 0.0 , 0.0 , 0.0] ,

Figura 2.9: Estrella dibujada con l´ıneas (izquierda) y con tri´angulos (derecha)

Listado 2.4: C´odigo m´ınimo que se corresponde con la estructura b´asica de un programa que utiliza WebGL (disponible en c02/visualiza.js) var gl , program ; var exampleTriangle = { ” v e r t i c e s ” : [ − 0 . 7 , −0.7 , 0 . 0 , 0 . 7 , −0.7 , 0 . 0 , 0.0 , 0.7 , 0.0] ,

35 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

35

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


” i n d i c e s ” : [ 0 , 1 , 2] }; f u n c t i o n getWebGLContext ( ) { v a r c a n v a s = document . g e t E l e m e n t B y I d ( ” myCanvas ” ) ; v a r names = [ ” webgl ” , ” e x p e r i m e n t a l −webgl ” , ” w e b k i t −3d ” , ”moz−webgl ” ] ; f o r ( v a r i = 0 ; i < names . l e n g t h ; ++ i ) { try { r e t u r n c a n v a s . g e t C o n t e x t ( names [ i ] ) ; } catch ( e ) { } } return n u l l ; } function initShaders () { v a r v e r t e x S h a d e r = g l . c r e a t e S h a d e r ( g l . VERTEX SHADER) ; gl . shaderSource ( vertexShader , document . g e t E l e m e n t B y I d ( ” m y V e r t e x S h a d e r ” ) . t e x t ) ; gl . compileShader ( vertexShader ) ; v a r f r a g m e n t S h a d e r = g l . c r e a t e S h a d e r ( g l . FRAGMENT SHADER) ; gl . shaderSource ( fragmentShader , document . g e t E l e m e n t B y I d ( ” m y F r a g m e n t S h a d e r ” ) . t e x t ) ; gl . compileShader ( fragmentShader ) ; program = g l . c r e a t e P r o g r a m ( ) ; g l . a t t a c h S h a d e r ( program , v e r t e x S h a d e r ) ; g l . a t t a c h S h a d e r ( program , f r a g m e n t S h a d e r ) ; g l . l i n k P r o g r a m ( program ) ; g l . useProgram ( program ) ; / / O b t e n e r l a r e f e r e n c i a d e l a t r i b u t o p o s i c i o´ n program . v e r t e x P o s i t i o n A t t r i b u t e = g l . g e t A t t r i b L o c a t i o n ( program , ” V e r t e x P o s i t i o n ” ) ; / / H a b i l i t a r e l a t r i b u t o p o s i c i o´ n g l . e n a b l e V e r t e x A t t r i b A r r a y ( program . v e r t e x P o s i t i o n A t t r i b u t e ) ; }

36

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

36

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


f u n c t i o n i n i t B u f f e r s ( model ) { / / B u f f e r de v e´ r t i c e s model . i d B u f f e r V e r t i c e s = g l . c r e a t e B u f f e r ( ) ; g l . b i n d B u f f e r ( g l . ARRAY BUFFER , model . i d B u f f e r V e r t i c e s ) ; g l . b u f f e r D a t a ( g l . ARRAY BUFFER , new F l o a t 3 2 A r r a y ( model . v e r t i c e s ) , g l . STATIC DRAW ) ; / / B u f f e r de ´ı n d i c e s model . i d B u f f e r I n d i c e s = g l . c r e a t e B u f f e r ( ) ; g l . b i n d B u f f e r ( g l . ELEMENT ARRAY BUFFER , model . i d B u f f e r I n d i c e s ) ; g l . b u f f e r D a t a ( g l . ELEMENT ARRAY BUFFER , new U i n t 1 6 A r r a y ( model . i n d i c e s ) , g l . STATIC DRAW ) ; } function initRendering () { gl . clearColor (0.15 ,0.15 ,0.15 ,1.0) ; } f u n c t i o n draw ( model ) { g l . b i n d B u f f e r ( g l . ARRAY BUFFER , model . i d B u f f e r V e r t i c e s ) ; g l . v e r t e x A t t r i b P o i n t e r ( program . v e r t e x P o s i t i o n A t t r i b u t e , 3 , g l . FLOAT , f a l s e , 0 , 0 ) ; g l . b i n d B u f f e r ( g l . ELEMENT ARRAY BUFFER , model . i d B u f f e r I n d i c e s ) ; g l . d r a w E l e m e n t s ( g l . TRIANGLES , 3 , g l . UNSIGNED SHORT , 0 ) ; } f u n c t i o n drawScene ( ) { g l . c l e a r ( g l . COLOR BUFFER BIT ) ; draw ( e x a m p l e T r i a n g l e ) ; } f u n c t i o n initWebGL ( ) { g l = getWebGLContext ( ) ; i f (! gl ) { a l e r t ( ”WebGL no e s t a´ d i s p o n i b l e ” ) ; return ; } initShaders () ; i n i t B u f f e r s ( exampleTriangle ) ; initRendering () ; requestAnimationFrame ( drawScene ) ; } initWebGL ( ) ;

37

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

37

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 2.5: C´odigo c02/visualiza.html)

HTML

que incluye un canvas y los dos shaders b´asicos (disponible en

<!DOCTYPE html> <html> <head> <meta c h a r s e t =” u t f −8”> < t i t l e > I n f o r m a´ t i c a Gr a´ f i c a </ t i t l e > < s t y l e t y p e =” t e x t / c s s ”> c a n v a s { b o r d e r : 1 px s o l i d b l a c k ; } </ s t y l e > </ head> <body> <c a n v a s i d =” myCanvas ” w i d t h =” 800 ” h e i g h t =” 600 ”> E l N a v e g a d o r no s o p o r t a HTML5 </ c a n v a s > < s c r i p t i d =” m y V e r t e x S h a d e r ” t y p e =” x−s h a d e r / x−v e r t e x ”> a t t r i b u t e vec3 V e r t e x P o s i t i o n ; v o i d main ( )

{

g l P o s i t i o n = vec4 ( V e r t e x P o s i t i o n , 1 . 0 ) ; } </ s c r i p t > < s c r i p t i d =” m y F r a g m e n t S h a d e r ” t y p e =” x−s h a d e r / x−f r a g m e n t ”> v o i d main ( ) { g l F r a g C o l o r = vec4 ( 0 . 0 , 1 . 0 , 0 . 0 , 1 . 0 ) ; } </ s c r i p t > < s c r i p t s r c = ” v i s u a l i z a . j s ”></ s c r i p t > </body> </ html>

2.3.4.

Variables uniform

Imagina que por ejemplo se desea dibujar la estrella de los ejercicios anteriores cada vez de un color diferente. Para lograrlo es necesario que el color que figura en el shader de fragmentos sea una variable, tal y como se muestra en el listado 2.6. 38

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

38

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 2.6: Ejemplo de variable uniform en el shader de fragmentos p r e c i s i o n mediump f l o a t ; uniform v e c 4 myColor ; v o i d main ( ) { g l F r a g C o l o r = myColor ; }

La variable myColor es de tipo uniform porque su valor ser´a constante para todos los fragmentos que reciba procedentes de procesar la estrella, pero se puede hacer que sea diferente para cada estrella cambiando su valor antes de dibujarla. Observa el fragmento de c´odigo del listado 2.7. Esas l´ıneas son las encargadas de obtener el ´ındice de la variable myColor en el shader y de especificar su valor. Mientras que la primera l´ınea solo es necesario ejecutarla una vez, la segunda habr´a que utilizarla cada vez que se necesite asignar un nuevo valor a la variable myColor. As´ı, la primera l´ınea se podr´ıa a˜nadir al final de la funci´on initShaders, mientras que la segunda l´ınea habr´a que a˜nadirla justo antes de ordenar el dibujado del modelo.

Listado 2.7: Ejemplo de asignaci´on de una variable uniform v a r idMyColor = g l . g e t U n i f o r m L o c a t i o n ( program , ” myColor ” ) ; g l . u n i f o r m 4 f ( idMyColor , 1 , 0 , 1 , 1 ) ;

Ejercicios  2.6 Dibuja dos estrellas, una para pintar el interior de un color y la otra para pintar el borde de un color diferente (ver figura 2.10). Elije colores que contrasten entre s´ı. Ten en cuenta tambi´en que el orden de dibujado es importante, piensa qu´e estrella deber´ıas dibujar en primer lugar. Nota: puedes definir dos vectores de ´ındices con diferente nombre y crear un buffer adicional en la funci´on initBuffers.

2.3.5.

Variables varying

Hasta el momento, cada v´ertice consta u´ nicamente de un u´ nico atributo: su posici´on. Ahora se va a a˜nadir un segundo atributo, por ejemplo, un valor de color para cada v´ertice. La primera modificaci´on necesaria consiste en ampliar la informaci´on de cada v´ertice para contener su valor de color. El listado 2.8 muestra el 39

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

39

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


modelo de un tri´angulo tras a˜nadir los cuatro componentes de color RGBA a cada v´ertice.

Figura 2.10: Ejemplo de dos estrellas: una aporta el color interior y la otra el color del borde

Listado 2.8: Ejemplo de modelo con dos atributos por v´ertice: posici´on y color var exampleTriangle = { ” vertices ” : [ −0.7 , −0.7 , 0 . 0 , 0 . 7 , −0.7 , 0 . 0 , 0.0 , 0.7 , 0.0 ,

1.0 , 0.0 , 0.0 , 1.0 , / / rojo 0.0 , 1.0 , 0.0 , 1.0 , / / verde 0.0 , 0.0 , 1.0 , 1.0] , / / azul

” i n d i c e s ” : [ 0 , 1 , 2] };

Los cambios correspondientes al shader se recogen en el listado 2.9. Se puede observar que ahora est´an declarados los dos atributos en el shader de v´ertices. La variable colorOut se ha declarado con el identificador varying tanto en el shader de v´ertices como en el shader de fragmentos. A una variable de tipo varying se le asigna un valor en el shader de v´ertices para cada v´ertice del modelo. En el shader de fragmentos, la variable colorOut tendr´a un valor convenientemente interpolado para cada fragmento de la primitiva que se est´e dibujando. La interpolaci´on la realiza autom´aticamente la GPU a partir de los valores asignados a colorOut en cada v´ertice. La figura 2.11 muestra el resultado. Por supuesto, tambi´en es necesario habilitar los dos atributos correspondientes, tal y como se muestra en el listado 2.10. Est´udialo y contesta a esta pregunta, ¿d´onde colocar´ıas este c´odigo en el listado 2.4?

40 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

40

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 2.9: Ejemplo de shader con dos atributos por v´ertice: posici´on y color / / S h a d e r de v e´ r t i c e s a t t r i b u t e vec3 V e r t e x P o s i t i o n ; a t t r i b u t e vec4 V e r t e x C o l o r ; v a r y i n g vec4 c o l o r O u t ; v o i d main ( )

{

colorOut = VertexColor ; g l P o s i t i o n = vec4 ( V e r t e x P o s i t i o n , 1) ; } / / S h a d e r de f r a g m e n t o s p r e c i s i o n mediump f l o a t ; v a r y i n g vec4 c o l o r O u t ; v o i d main ( ) { gl FragColor = colorOut ; }

Figura 2.11: Resultado de visualizar un tri´angulo con un valor de color diferente para cada v´ertice

Por u´ ltimo, hay que modificar la funci´on de dibujo. Observa la nueva funci´on en el listado 2.11, que recoge los cambios necesarios. Presta atenci´on a los dos u´ ltimos par´ametros de las dos llamadas a gl.vertexAttribPointer. Consulta la documentaci´on para entender el por qu´e de esos valores. 41

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

41

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 2.10: Localizaci´on y habilitaci´on de los dos atributos: posici´on y color vertexPositionAttribute = g l . g e t A t t r i b L o c a t i o n ( program , ” V e r t e x P o s i t i o n ” ) ; gl . enableVertexAttribArray ( v e r te x P o si t i o nA t t r ib u t e ) ; vertexColorAttribute = g l . g e t A t t r i b L o c a t i o n ( program , ” V e r t e x C o l o r ” ) ; gl . enableVertexAttribArray ( vertexColorAttribute ) ;

Listado 2.11: Dibujo de un modelo con dos atributos por v´ertice f u n c t i o n draw ( ) { g l . b i n d B u f f e r ( g l . ARRAY BUFFER , i d V e r t i c e s B u f f e r ) ; g l . v e r t e x A t t r i b P o i n t e r ( v e r t e x P o s i t i o n A t t r i b u t e , 3 , g l . FLOAT , f a l s e , 7∗4 , 0) ; gl . vertexAttribPointer ( vertexColorAttribute , 4 , g l . FLOAT , f a l s e , 7∗4 , 3∗4) ; g l . b i n d B u f f e r ( g l . ELEMENT ARRAY BUFFER , i d I n d i c e s B u f f e r ) ; g l . d r a w E l e m e n t s ( g l . TRIANGLES , 3 , g l . UNSIGNED SHORT , 0 ) ; }

Ejercicios  2.7 Observa la imagen de la figura 2.12, ¿qu´e colores se han asignado a los v´ertices? Edita c02/trianguloVarying.html, que ya incluye los fragmentos de c´odigo que se han explicado en esta secci´on, y modifica los valores de color para comprobar si has acertado.

Figura 2.12: Resultado de visualizar un tri´angulo con un valor de color diferente para cada v´ertice

42

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

42

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 3

Transformaciones geom´etricas En la etapa de modelado los objetos se definen bajo un sistema de coordenadas propio. A la hora de crear una escena, estos objetos se incorporan bajo un nuevo sistema de coordenadas conocido como sistema de coordenadas del mundo. Este cambio de sistema de coordenadas es necesario y se realiza mediante transformaciones geom´etricas. La figura 3.1 muestra algunos ejemplos de objetos obtenidos mediante la aplicaci´on de transformaciones a primitivas geom´etricas simples como el cubo, la esfera o el toro.

Figura 3.1: Ejemplos de objetos creados utilizando transformaciones geom´etricas

3.1.

Transformaciones b´asicas

3.1.1.

Traslaci´on

La transformaci´on de traslaci´on consiste en desplazar el punto p = (px , py , pz ) mediante un vector t = (tx , ty , tz ), de manera que el nuevo punto q = (qx , qy , qz ) se obtiene as´ı: qx = px + tx ,

qy = py + ty ,

qz = pz + tz

(3.1)

La representaci´on matricial con coordenadas homog´eneas de esta transforma-

ci´on es:

43

 1 0 T (t) = T (tx , t43y , tz ) =  0 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4 0

 0 0 tx 1 0 ty   (3.2)  - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107 0 Informática 1 tzGráfica 0 0 1

Utilizando esta representaci´on, el nuevo punto se obtiene as´ı:


ci´on es:  1 0 T (t) = T (tx , ty , tz ) =  0 0

0 1 0 0

 0 tx 0 ty   1 tz  0 1

(3.2)

Utilizando esta representaci´on, el nuevo punto se obtiene as´ı: (3.3)

q˜ = T (t) · p˜

donde p˜ = (px , py , pz , 1)T y q˜ = (qx , qy , qz , 1)T , es decir, los puntos p y q en coordenadas homog´eneas.

3.1.2.

Escalado

La transformaci´on de escalado consiste en multiplicar el punto p = (px , py , pz ) con los factores de escala sx , sy y sz de tal manera que el nuevo punto q = (qx , qy , qz ) se obtiene as´ı: qx = px · sx ,

qy = py · sy ,

qz = pz · sz

(3.4)

La representaci´on matricial con coordenadas homog´eneas de esta transformaci´on es:  sx 0 0  0 sy 0 S(s) = S(sx , sy , sz ) =   0 0 sz 0 0 0

 0 0  0 1

(3.5)

Utilizando esta representaci´on, el nuevo punto se obtiene as´ı: q˜ = S(s) · p˜. Ejercicios  3.1 Cuando los tres factores de escala son iguales, se denomina escalado uniforme. Ahora, lee y contesta las siguientes cuestiones: ¿Qu´e ocurre si los factores de escala son diferentes entre s´ı? ¿Y si alg´un factor de escala es cero? ¿Qu´e ocurre si uno o varios factores de escala son negativos? ¿Y si el factor de escala est´a entre cero y uno?

44

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

44

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


3.1.3.

Rotaci´on

La transformaci´on de rotaci´on gira un punto un a´ ngulo φ alrededor de un eje, y las representaciones matriciales con coordenadas homog´eneas para los casos en los que el eje de giro coincida con uno de los ejes del sistema de coordenadas son las siguientes:   1 0 0 0 0 cos φ − sin φ 0  Rx (φ) =  (3.6) 0 sin φ cos φ 0 0 0 0 1   cos φ 0 sin φ 0  0 1 0 0  Ry (φ) =  (3.7) − sin φ 0 cos φ 0 0 0 0 1   cos φ − sin φ 0 0  sin φ cos φ 0 0  Rz (φ) =  (3.8)  0 0 1 0 0 0 0 1 Utilizando cualquiera de estas representaciones, el nuevo punto siempre se obtiene as´ı: q˜ = R(φ) · p˜.

3.2.

Concatenaci´on de transformaciones

Una gran ventaja del uso de las transformaciones geom´etricas en su forma matricial con coordenadas homog´eneas es que se pueden concatenar. De esta manera, una sola matriz puede representar toda una secuencia de matrices de transformaci´on. Cuando se realiza la concatenaci´on de transformaciones, es muy importante operar la secuencia de transformaciones en el orden correcto, ya que el producto de matrices no posee la propiedad conmutativa. Por ejemplo, piensa en una esfera con radio una unidad centrada en el origen de coordenadas y en las dos siguientes matrices de transformaci´on T y S: T (5, 0, 0) desplaza la componente x cinco unidades; S(5, 5, 5) escala las tres componentes con un factor de cinco. Ahora, dibuja en el papel c´omo quedar´ıa la esfera despu´es de aplicarle la matriz de transformaci´on M si las matrices se multiplican de las dos formas posibles, es decir, M = T · S y M = S · T . Como ver´as, los resultados son bastante diferentes. Por otra parte, el producto de matrices s´ı que posee la propiedad asociativa. Esto se puede aprovechar para reducir el n´umero de operaciones, aumentando as´ı la eficiencia.

45 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

45

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Ejercicios En los siguientes ejercicios el eje X es el de color rojo, el Y es el de color verde y el Z es el de color azul.  3.2 Comienza con un cubo de lado uno centrado en el origen de coordenadas, tal y como se muestra en la figura (a). Usa dos cubos m´as como este y obt´en el modelo que se muestra en la figura (b), donde cada nuevo cubo tiene una longitud del lado la mitad de la del cubo anterior. Detalla las transformaciones utilizadas.

(a)

(b)

 3.3 Determina las transformaciones que sit´uan el cono que se muestra en la figura (c) (radio de la base y altura de valor 1) en la posici´on que se muestra en la figura (d) (radio de la base de valor 1 y altura de valor 3). Ten en cuenta el punto de referencia se˜nalado con una flecha, de manera que quede ubicado tal y como se observa en la figura.

(c)

(d)

46 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

46

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


 3.4 Comienza con una esfera de radio uno centrada en el origen de coordenadas. La figura (e) muestra la esfera escalada con factores de escala sx = sy = 0,5 y sz = 3. Obt´en las transformaciones que situan a la esfera tal y como se muestra en la figura (f ), donde un punto final est´a en el origen y el otro en la recta x = y = z.

(e)

(f)

 3.5 Observa la posici´on inicial del objeto en la figura de la izquierda. Este objeto lo vas a utilizar dos veces para crear el brazo articulado que se muestra en la figura de la derecha. Determina las transformaciones que has de aplicarle. La posici´on final del brazo ha de depender de los a´ ngulos alf a, beta y gamma.

Y

Y

gamma

alfa

beta

L

X X

Z

Z

47 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

47

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


3.3.

Matriz de transformaci´on de la normal

La matriz de transformaci´on es consistente para geometr´ıa y para vectores tangentes a la superficie. Sin embargo, dicha matriz no siempre es v´alida para los vectores normales a la superficie. En concreto, esto ocurre cuando se utilizan transformaciones de escalado no uniforme (ver figura 3.2). En este caso, lo habitual es que la matriz de transformaci´on de la normal N sea la traspuesta de la inversa de la matriz de transformaci´on. Sin embargo, la matriz inversa no siempre existe, por lo que se recomienda que la matriz N sea la traspuesta de la matriz adjunta. Adem´as, como la normal es un vector y la traslaci´on no le afecta (y el escalado y la rotaci´on son transformaciones afines), solo hay que calcular la adjunta de los 3 × 3 componentes superior izquierda.

Antes de la transformación

y

y 1

Después de la transformación

m

1

n

1

p

2

x

x

Figura 3.2: En la imagen de la izquierda se representa un pol´ıgono y su normal n. En la imagen de la derecha se muestra el mismo pol´ıgono tras aplicar una transformaci´on de escalado no uniforme S(2, 1). Si se aplica esta transformaci´on a la normal n, se obtiene p como vector normal en lugar de m, que es la normal correcta

Se˜nalar por u´ ltimo que, despu´es de aplicar la transformaci´on, y u´ nicamente en el caso de incluir escalado, las longitudes de las normales no se preservan, por lo que es necesario normalizarlas. Como esta operaci´on es cara computacionalmente, ¿se te ocurre alguna manera de evitarla?

3.4.

Giro alrededor de un eje arbitrario

Sean d y φ el vector unitario del eje de giro y el a´ ngulo de giro, respectivamente. Para realizar la rotaci´on hay que calcular en primer lugar una base ortogonal que contenga d. La idea es hacer un cambio de base entre la base que forman los ejes de coordenadas y la nueva base, haciendo coincidir el vector d con, por ejemplo, el eje X, para entonces rotar φ grados alrededor de X y finalmente deshacer el cambio de base. 48 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

48

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


La matriz que representa el cambio de base es esta: 

 dx dy dz R =  ex ey ez  fx fy fz

(3.9)

donde e es un vector unitario normal a d, y f es el producto vectorial de los otros dos vectores f = d × e. Esta matriz deja al vector d en el eje X, al vector e en el eje Y y al vector f en el eje Z (ver figura 3.3). El vector e se puede obtener de la siguiente manera: partiendo del vector d, haz cero su componente de menor magnitud (el m´as peque˜no en valor absoluto), intercambia los otros dos componentes, niega uno de ellos y normal´ızalo.

Y

Y

R e

e

f

d

X

Z

d

X

f

Z

Figura 3.3: La nueva base formada por los vectores d, e y f se transforma para coincidir con los ejes de coordenadas

As´ı, teniendo en cuenta que R es ortogonal, es decir, que su inversa coincide con la traspuesta, la matriz de rotaci´on final es: Rd (φ) = RT Rx (φ)R

3.5.

(3.10)

La biblioteca GL M ATRIX

Como ayuda a la programaci´on, la biblioteca GL M ATRIX proporciona funciones tanto para la construcci´on de las matrices de transformaci´on como para operar con ellas. En concreto, las siguientes funciones permiten construir, respectivamente, las matrices de traslaci´on, escalado y giro alrededor de un eje arbitrario que pasa por el origen: mat4.translate (out, in, v) mat4.scale (out, in, v) mat4.rotate (out, in, rad, axis) 49 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

49

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


v a r M = mat4 . c r e a t e ( ) v a r T = mat4 . c r e a t e ( ) v a r S = mat4 . c r e a t e ( ) mat4 . t r a n s l a t e ( T , T , mat4 . s c a l e (S , S , mat4 . m u l t i p l y (M, T ,

; ; ; [10 ,0 ,0]) ; [2 ,2 ,2]) ; S) ;

As´ı, por ejemplo, la matriz de transformaci´on M que escala un objeto al doble de su tama˜no y despu´es lo traslada en direcci´on del eje X un total de diez unidades, se obtendr´ıa de lasiguiente forma: ¿Qu´e ocurrir´ıa si en el ejemplo, en vez de mat4.multiply(M, T, S), apareciera mat4.multiply(M, S, T )? Para el c´alulo de la matriz normal N , utilizando GL M ATRIX se puede hacer por ejemplo lo siguiente:

v a r N = mat3 . c r e a t e ( ) ; mat3 . fromMat4 (N,M) ; mat3 . i n v e r t (N, N) ; mat3 . t r a n s p o s e (N, N) ;

3.6.

Transformaciones en WebGL

WebGL no proporciona modelos de primitivas geom´etricas 3D. Por lo tanto, y en primer lugar, es necesario obtener una descripci´on geom´etrica de primitivas b´asicas como el cubo, la esfera, el cono, etc. Por ejemplo, el listado 2.3 mostraba el fragmento de c´odigo que define un cubo centrado en el origen de coordenadas, con sus caras paralelas a los planos de referencia XY, XZ e YZ, y lado de valor 1. Observa que este modelo consta de dos vectores, uno contiene las coordenadas de los v´ertices y el otro contiene los ´ındices al vector de v´ertices que de tres en tres describen los tri´angulos. El ´ındice del primer v´ertice es 0. De momento se utilizan modelos que solo constan de geometr´ıa, es decir, no contienen otros atributos (normal, color, etc.), por lo que se visualizan en alambre, es decir, solo las aristas (ver listado 3.1). Observa ahora la nueva funci´on drawScene() en el listado 3.2. Esta funci´on incluye ahora los tres pasos necesarios para dibujar una primitiva con matrices de transformaci´on. En primer lugar, se obtiene la matriz de transformaci´on del modelo M , que en este caso se trata de un escalado a la mitad de su tama˜no. Esta matriz se ha de multiplicar con cada v´ertice del objeto para que este quede ubicado en su posici´on, tama˜no y orientaci´on definitiva. Esta operaci´on, como se repite para cada 50

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

50

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 3.1: Visualizaci´on en alambre de un modelo f u n c t i o n draw ( model ) { g l . b i n d B u f f e r ( g l . ARRAY BUFFER , model . i d B u f f e r V e r t i c e s ) ; gl . vertexAttribPointer ( vertexPositionAttribute , 3 , g l . FLOAT , f a l s e , 3 ∗ 4 , 0 ) ; g l . b i n d B u f f e r ( g l . ELEMENT ARRAY BUFFER , model . i d B u f f e r I n d i c e s ) ; f o r ( v a r i = 0 ; i < model . i n d i c e s . l e n g t h ; i += 3 ) g l . d r a w E l e m e n t s ( g l . LINE LOOP , 3 , g l . UNSIGNED SHORT , i ∗ 2 ) ; }

v´ertice del objeto, se ha de realizar en el procesador de v´ertices. As´ı, en el segundo paso, se establece el valor de la matriz M en el shader de v´ertices. Finalmente, en el paso 3, se llama a la funci´on draw, que es la que produce el dibujado de la primitiva que se recibe como par´ametro. Listado 3.2: Ejemplo de los pasos necesarios para dibujar un objeto transformado f u n c t i o n drawScene ( ) { g l . c l e a r ( g l . COLOR BUFFER BIT ) ; v a r M = mat4 . c r e a t e ( ) ; v a r iM = g l . g e t U n i f o r m L o c a t i o n ( program , ”M” ) ; g l . l i n e W i d t h ( 1 . 5 ) ; / / ancho de l ´ı nea / / 1 . c a l c u l a l a m a t r i z de t r a n s f o r m a c i o´ n mat4 . i d e n t i t y (M) ; mat4 . s c a l e (M, M, [ 0 . 5 , 0 . 5 , 0 . 5 ] ) ; / / 2 . e s t a b l e c e l a m a t r i z M en e l s h a d e r de v e´ r t i c e s g l . u n i f o r m M a t r i x 4 f v ( iM , f a l s e , M) ; / / 3. dibuja la primitiva draw ( exampleCube ) ; }

En el shader de v´ertices se han de incluir las operaciones que multiplican cada v´ertice por su correspondiente matriz de transformaci´on (ver listado 3.3). Observa que las l´ıneas comentadas corresponden al c´odigo que har´ıa falta en el caso de que, adem´as, se suministrara el atributo de la normal para cada v´ertice.

51

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

51

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 3.3: Shader de v´ertices para transformar la posici´on de cada v´ertice uniform mat4 M; / / m a t r i z de t r a n s f o r m a c i o´ n d e l modelo / / u n i f o r m mat3 N ; / / m a t r i z de t r a n s f o r m a c i o´ n de l a n o r m a l a t t r i b u t e vec3 V e r t e x P o s i t i o n ; / / a t t r i b u t e vec3 VertexNormal ; / / varying vec3 VertexNormalT ; v o i d main ( ) { / / VertexNormalT = n o r m a l i z e (N ∗ VertexNormal ) ; g l P o s i t i o n = M ∗ vec4 ( V e r t e x P o s i t i o n , 1 . 0 ) ; }

Ejercicios  3.6 Edita c03/transforma.html y c03/transforma.js. Comprueba que se han incluido todos los cambios explicados en esta secci´on. Observa tambi´en c03/primitivas.js, que incluye los modelos de algunas primitivas geom´etricas simples. Echa un vistazo a la descripci´on de los modelos. Prueba a visualizar las diferentes primitivas.  3.7 Modela la t´ıpica gr´ua de obra cuyo esquema se muestra en la figura 3.4 utilizando como u´ nica primitiva cubos de lado 1 centrados en el origen de coordenadas. La carga es de lado 1, el contrapeso es de lado 1,4, y tanto el pie como el brazo tienen una longitud de 10. Incluye las transformaciones que giran la gr´ua sobre su pie, que desplazan la carga a lo largo del brazo, y que levantan y descienden la carga.

Figura 3.4: Ejemplo de una gr´ua de obra

52

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

52

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


 3.8 Observa la escena que se muestra en la figura 3.5, inspirada en la figura de bloques de madera que se muestra abajo. Crea una escena que produzca la misma salida utilizando u´ nicamente la primitiva cubo. El cubo central tiene de lado 0,1, y los que est´an a su lado tienen la misma base pero una altura que va increment´andose en 0,1 a medida que se alejan del central. Utiliza un bucle para pintar los trece cubos. Ambas im´agenes muestran la misma escena, pero en la imagen de la derecha se ha girado toda la escena para apreciar mejor que se trata de primitivas 3D.

Figura 3.5: Juego de bloques de madera coloreados

 3.9 Internet es una fuente de inspiraci´on excepcional, util´ızala para buscar ejemplos que te sirvan de muestra y practicar con el uso de las transformaciones geom´etricas. F´ıjate en los que aparecen en la figura 3.6.

Figura 3.6: Otros ejemplos de juegos de bloques de madera coloreados.

53 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

53

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 4

Viendo en 3D Al igual que en el mundo real se utiliza una c´amara para conseguir fotograf´ıas, en nuestro mundo virtual tambi´en es necesario definir un modelo de c´amara que permita obtener vistas 2D de nuestro mundo 3D. El proceso por el que la c´amara sint´etica obtiene una fotograf´ıa se implementa como una secuencia de tres transformaciones: Transformaci´on de la c´amara: ubica la c´amara virtual en el origen del sistema de coordenadas orientada de manera conveniente. Transformaci´on de proyecci´on: determina cu´anto del mundo 3D es visible. A este espacio limitado se le denomina volumen de la vista y transforma el contenido de este volumen al volumen can´onico de la vista. Transformaci´on al a´ rea de dibujo: el contenido del volumen can´onico de la vista se transforma para ubicarlo en el espacio de la ventana destinado a mostrar el resultado de la vista 2D.

4.1.

Transformaci´on de la c´amara

La posici´on de una c´amara, el lugar desde el que se va a tomar la fotograf´ıa, se establece especificando un punto p del espacio 3D. Una vez posicionada, la c´amara se orienta de manera que su objetivo quede apuntando a un punto espec´ıfico de la escena. A este punto i se le conoce con el nombre de punto de inter´es. En general, los fotogr´afos utilizan la c´amara para hacer fotos apaisadas u orientadas en vertical, aunque tampoco resulta extra˜no ver fotograf´ıas realizadas con otras inclinaciones. Esta inclinaci´on se establece mediante el vector UP denominado vector de inclinaci´on. Con estos tres datos queda perfectamente posicionada y orientada la c´amara, tal y como se muestra en la figura 4.1. Algunas de las operaciones que los sistemas gr´aficos realizan requieren que la c´amara est´e situada en el origen de coordenadas, apuntando en la direcci´on del eje Z negativo y coincidiendo el vector de inclinaci´on con el eje Y positivo. Por esta 54

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

54

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


!"#

$# %#

Figura 4.1: Par´ametros para ubicar y orientar una c´amara: p, posici´on de la c´amara; U P , vector de inclinaci´on; i, punto de inter´es Y

U

p

Y

F

U

S Z

-Z

F S

X

X

Figura 4.2: Transformaci´on de la c´amara. La c´amara situada en el punto p en la imagen de la izquierda se transforma para quedar como se observa en la imagen de la derecha. Dicha transformaci´on se aplica al objeto de tal manera que lo que se observa sea lo mismo en ambas situaciones

raz´on, es necesario aplicar una transformaci´on al mundo 3D de manera que, desde la posici´on y orientaci´on requeridas por el sistema gr´afico, se observe lo mismo que desde donde el usuario estableci´o su c´amara (ver figura 4.2). A esta transformaci´on se le denomina transformaci´on de la c´amara. Si F es el vector normalizado que desde la posici´on de la c´amara apunta al punto de inter´es, U P  es el vector de inclinaci´on normalizado, S = F × U P  y U = S × F , entonces el resultado de la siguiente operaci´on crea la matriz de transformaci´on MC que sit´ua la c´amara en la posici´on y orientaci´on requeridas por el sistema gr´afico: 

Sx Sy Sz  Ux Uy Uz MC =  −Fx −Fy −Fz 0 0 0

4.2.

  1 0   0 0 · 0 0 0 1

0 1 0 0

 0 −px 0 −py   1 −pz  0 1

(4.1)

Transformaci´on de proyecci´on

El volumen de la vista determina la parte del mundo 3D que puede ser vista por el observador. La forma y dimensi´on de este volumen depende del tipo de 55 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

55

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


(a)

(b)

Figura 4.3: Vista de un cubo obtenida con: (a) vista perspectiva y (b) vista paralela

proyecci´on. As´ı, hay dos tipos de vistas: Vista perspectiva. Es similar a como funciona nuestra vista y se utiliza para generar im´agenes m´as fieles a la realidad en aplicaciones como videojuegos, simulaciones o, en general, la mayor parte de aplicaciones gr´aficas. Vista paralela. Es la utilizada principalmente en ingenier´ıa o arquitectura. Se caracteriza por preservar longitudes y a´ ngulos. La figura 4.3 muestra un ejemplo de un cubo dibujado con ambos tipos de vistas.

4.2.1.

Proyecci´on paralela

Este tipo de proyecci´on se caracteriza por que los rayos de proyecci´on son paralelos entre s´ı e intersectan de forma perpendicular con el plano de proyecci´on. El volumen de la vista tiene forma de caja, la cual, se alinea con los ejes de coordenadas tal y como se muestra en la figura 4.4, donde tambi´en se han indicado los nombres de los seis par´ametros que definen dicho volumen. Y

(derecha, arriba, lejos) -Z Z

X

(izquierda, abajo, cerca)

Figura 4.4: Esquema del volumen de la vista de una proyecci´on paralela

56 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

56

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


En general, los sistemas gr´aficos trasladan y escalan esa caja de manera que la convierten en un cubo centrado en el origen de coordenadas. A este cubo se le denomina volumen can´onico de la vista (ver figura 4.5) y a las coordenadas en este volumen coordenadas normalizadas del dispositivo. La matriz de transformaci´on correspondiente para un cubo de lado 2 es la siguiente: 

  Mpar =  

2 derecha−izquierda

0 0 0

0 2 arriba−abajo

0 0

0 0 2 lejos−cerca

0

 − derecha+izquierda derecha−izquierda  − arriba+abajo arriba−abajo    − lejos+cerca lejos−cerca 1 (4.2)

Y

-Z (1,1,1)

(-1,-1,-1)

X

Figura 4.5: Volumen can´onico de la vista, cubo de lado 2 centrado en el origen de coordenadas

4.2.2.

Proyecci´on perspectiva

Este tipo de proyecci´on se caracteriza por que los rayos de proyecci´on parten todos ellos desde la posici´on del observador. El volumen de la vista tiene forma de pir´amide truncada, que queda definida mediante cuatro par´ametros: los planos cerca y lejos (los mismos que en la proyecci´on paralela), el a´ ngulo θ en la direcci´on Y y la relaci´on de aspecto de la base de la pir´amide ancho/alto. En la figura 4.6 se detallan estos par´ametros. Y

ancho -Z θ Z alto X

Figura 4.6: Esquema del volumen de la vista de una proyecci´on perspectiva

57 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

57

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


En general, los sistemas gr´aficos convierten ese volumen con forma de pir´amide en el volumen can´onico de la vista. La matriz de transformaci´on correspondiente para un cubo de lado 2 es la siguiente:  aspect

tan(θ)

Mper

4.3.

 0  =  0 0

0

0 0

1 tan(θ)

0 0

lejos+cerca cerca−lejos

0 0

−1

  2·lejos·cerca   cerca−lejos 0

(4.3)

Transformaci´on al a´ rea de dibujo

El a´ rea de dibujo, tambi´en conocida por su t´ermino en ingl´es viewport, es la parte de la ventana de la aplicaci´on donde se muestra la vista 2D. La transformaci´on al viewport consiste en mover el resultado de la proyecci´on a dicha a´ rea. Se asume que la geometr´ıa a visualizar reside en el volumen can´onico de la vista, es decir, se cumple que las coordenadas de todos los puntos (x, y, z) ∈ [−1, 1]3 . Entonces, si nx y ny son respectivamente el ancho y el alto del a´ rea de dibujo en p´ıxeles, y ox y oy son el p´ıxel de la esquina inferior izquierda del a´ rea de dibujo en coordenadas de ventana, para cualquier punto que resida en el volumen can´onico de la vista, sus coordenadas de ventana se obtienen con la siguiente transformaci´on:  nx

0

2

ny 2

0 Mvp =  0 0

4.4.

0 0

0 0 1 0

 + ox + oy    0 1

nx −1 2 ny −1 2

(4.4)

Eliminaci´on de partes ocultas

La eliminaci´on de partes ocultas consiste en determinar qu´e primitivas de la escena son tapadas por otras primitivas desde el punto de vista del observador (ver figura 4.7). Aunque para resolver este problema se han desarrollado diversos algoritmos, el m´as utilizado en la pr´actica es el algoritmo conocido como z-buffer. Este algoritmo se caracteriza por su simplicidad. Para cada p´ıxel de la primitiva que se est´a dibujando, su valor de profundidad (su coordenada z) se compara con el valor almacenado en un buffer denominado buffer de profundidad. Si la profundidad de la primitiva para dicho p´ıxel es menor que el valor almacenado en el buffer para ese mismo p´ıxel, tanto el buffer de color como el de profundidad se actualizan con los valores de la nueva primitiva, siendo eliminado en cualquier otro caso. El algoritmo se muestra en el listado 4.1. En este algoritmo no importa el orden en que se pinten las primitivas, pero s´ı es muy importante que el buffer de profundidad se inicialice siempre al valor de profundidad m´axima antes de pintar la primera primitiva. 58 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

58

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


(a)

(b)

Figura 4.7: Ejemplo de escena visualizada: (a) sin resolver el problema de la visibilidad y (b) con el problema resuelto

Listado 4.1: Algoritmo del z-buffer if ( pixel . z < bufferProfundidad (x , y) . z ) { bufferProfundidad (x , y) . z = pixel . z ; bufferColor (x , y) . color = pixel . color ; }

4.5.

Viendo en 3D con WebGL

Hasta ahora, en los ejercicios realizados en los temas anteriores, se ha conseguido visualizar modelos sin tener que realizar ni la transformaci´on de la c´amara ni establecer un tipo de proyecci´on. Esto ocurre porque el modelo, o la escena, a visualizar se ha definido de manera que h´abilmente quedase dentro del volumen can´onico de la vista. De esta manera se obtiene una proyecci´on paralela del contenido del volumen observando la escena en direcci´on del eje −Z. En este cap´ıtulo se ha visto c´omo construir la matriz de transformaci´on de la c´amara para poder observar la escena desde cualquier punto de vista, y la matriz de proyecci´on para poder elegir entre vista paralela y vista perspectiva. En WebGL es responsabilidad del programador calcular estas matrices y operarlas con cada uno de los v´ertices del modelo. Habitualmente, la matriz de la c´amara se opera con la de transformaci´on del modelo, creando la transformaci´on conocida con el nombre de modelo-vista. Esta matriz y la de proyecci´on se han de suministrar al procesador de v´ertices, donde cada v´ertice v debe ser multiplicado por ambas matrices. Si MC es la matriz de transformaci´on de la c´amara, MM es la matriz de transformaci´on del modelo, y MM V es la matriz modelo-vista, el nuevo v´ertice v  se obtiene como resultado de la siguiente operaci´on: v  = MP roy ·MM V ·v; donde MM V = MC ·MM ; y MP roy ser´a MP ar o MP er . El listado 4.2 recoge estas operaciones. 59 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

59

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 4.2: Shader de v´ertices para transformar la posici´on de cada v´ertice uniform uniform

mat4 p r o j e c t i o n M a t r i x ; mat4 m o d e l V i e w M a t r i x ;

/ / perspectiva o paralela / / cameraMatrix ∗ modelMatrix

a t t r i b u t e vec3 V e r t e x P o s i t i o n ; v o i d main ( )

{

gl Position = projectionMatrix ∗ modelViewMatrix ∗ vec4 ( V e r t e x P o s i t i o n , 1 . 0 ) ; }

La librer´ıa GL M ATRIX proporciona diversas funciones para construir las matrices vistas en este cap´ıtulo. As´ı, la funci´on mat4.lookAt construye la matriz de transformaci´on de la c´amara, resultado de la ecuaci´on 4.1, a partir de la posici´on de la c´amara p, el punto de inter´es i y el vector de inclinaci´on U P . Adem´as, las funciones mat4.ortho y mat4.perspective construyen las matrices que transforman el volumen de proyecci´on paralela y perspectiva, respectivamente, al volumen can´onico de la vista. Son estas: mat4.lookAt (out, p, i, UP) mat4.ortho (out, izquierda, derecha, abajo, arriba, cerca, lejos) mat4.perspective (out, θ, ancho/alto, cerca, lejos) Tras el procesamiento de los v´ertices, estos se reagrupan dependiendo del tipo de primitiva que se est´e dibujando. Esto ocurre en la etapa procesado de la primitiva (ver figura 4.8). A continuaci´on se realiza la operaci´on conocida con el nombre de divisi´on perspectiva, que consiste en que cada v´ertice sea dividido por su propia w (la cuarta coordenada del v´ertice). Esto es necesario, ya que el resultado de la proyecci´on perspectiva puede hacer que la coordenada w sea distinta de 1. La transformaci´on al a´ rea de dibujo se realiza a continuaci´on, a´un en la misma etapa. El programador s´olo debe especificar la ubicaci´on del viewport en el canvas mediante la orden gl.viewport, indicando la esquina inferior izquierda, el ancho y el alto en coordenadas de ventana: gl.viewport (x, y, ancho, alto) La llamada a la funci´on gl.viewport debe realizarse cada vez que se produzca un cambio en el tama˜no del canvas con el fin de mantener el viewport actualizado. Adem´as, es importante que la relaci´on de aspecto del viewport sea igual a la 60

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

60

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 4.8: En color amarillo, las tareas principales que se realizan en la etapa correspondiente al procesado de la primitiva

relaci´on de aspecto utilizada al definir el volumen de la vista para no deformar el resultado de la proyecci´on. La u´ ltima tarea dentro de la etapa de procesado de la primitiva es la operaci´on de recortado, que consiste en eliminar los elementos que quedan fuera de lps l´ımites establecidos por el volumen de la vista. Si una primitiva intersecta con el volumen de la vista, se recorta de manera que por el pipeline u´ nicamente contin´uan los trozos que han quedado dentro del volumen de la vista. Respecto a la eliminaci´on de partes ocultas, WebGL implementa el algoritmo del z-buffer y la GPU comprueba la profundidad de cada fragmento de forma fija en la etapa de procesado del fragmento, pero despu´es de ejecutar el shader de fragmentos (ver figura 4.9). A esta comprobaci´on se le denomina test de profundidad.

Figura 4.9: En color amarillo, las tareas principales que se realizan en la etapa correspondiente al procesado del fragmento donde se indica que el test de profundidad se realiza con posterioridad a la ejecuci´on del shader de fragmentos

61 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

61

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Sin embargo, el programador a´un debe realizar dos tareas: 1. Habilitar la operaci´on del test de profundidad: gl.enable (gl.DEPTH TEST) 2. Inicializar el buffer a la profundidad m´axima antes de comenzar a dibujar: gl.clear (... | gl.DEPTH BUFFER BIT) Ejercicios  4.1 Ejecuta el programa c04/mueveLaCamara.html. Comprueba que se ha a˜nadido una c´amara interactiva que puedes modificar utilizando el rat´on y las teclas shift y alt. Edita c04/mueveLaCamara.js y estudia la funci´on getCameraMatrix, que devuelve la matriz de transformaci´on de la c´amara, ¿cu´al es el punto de inter´es establecido? Estudia tambi´en la funci´on setProjection, ¿qu´e tipo de proyecci´on se utiliza?, ¿qu´e cambios har´ıas para utilizar el otro tipo de proyecci´on visto en este cap´ıtulo?  4.2 Modifica cualquiera de las soluciones realizadas en el cap´ıtulo anterior para que el usuario pueda obtener cuatro vistas con proyecci´on paralela, tres de ellas con direcci´on paralela a los tres ejes de coordenadas y la cuarta en direcci´on (1,1,1). En todas ellas el modelo debe observarse en su totalidad.  4.3 Ampl´ıa la soluci´on del ejercicio anterior para que se pueda cambiar de proyecci´on paralela a perspectiva, y viceversa, y que sin modificar la matriz de transformaci´on de la c´amara se siga observando el modelo completo.  4.4 Ampl´ıa la soluci´on del ejercicio anterior para que se realice la eliminaci´on de las partes ocultas. Para observarlo mejor, utiliza un color diferente para cada primitiva y dib´ujalas como tri´angulos, no como l´ıneas.

62 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

62

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 5

Modelos de iluminaci´on y sombreado In trying to improve the quality of the synthetic images, we do not expect to be able to display the object exactly as it would appear in reality, with texture, overcast shadows, etc. We hope only to display an image that approximates the real object closely enough to provide a certain degree of realism. Bui Tuong Phong, 1975

Figura 5.1: Ejemplo obtenido utilizando el modelo de iluminaci´on de Phong

5.1.

Modelo de iluminaci´on de Phong

En esta secci´on se describe el modelo de iluminaci´on de Phong (ver figura 5.1). Este modelo tiene en cuenta los tres aspectos siguientes: Luz ambiente: luz que proporciona iluminaci´on uniforme a lo largo de la escena (ver figura 5.2(a)). Reflexi´on difusa: luz reflejada por la superficie en todas las direcciones (ver figura 5.2(b)). 63

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

63

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Reflexi´on especular: luz reflejada por la superficie en una sola direcci´on o en un rango de a´ ngulos muy cercano al a´ ngulo de reflexi´on perfecta (ver figura 5.2(c)).

(a)

(b)

(c)

Figura 5.2: Ejemplo de las componentes del modelo de iluminaci´on de Phong: (a) Luz ambiente; (b) Reflexi´on difusa; (c) Reflexi´on especular. La combinaci´on de estos tres aspectos produce el resultado que se muestra en la figura 5.1

5.1.1.

Luz ambiente

La luz ambiente Ia que se observa en cualquier punto de una superficie es siempre la misma. Parte de la luz que llega a un objeto es absorbida por este y parte es reflejada, la cual se modela con el coeficiente ka , 0 ≤ ka ≤ 1. Si La es la luz ambiente, entonces: (5.1)

I a = ka L a

La figura 5.3(a) muestra un ejemplo en el que el modelo de iluminaci´on u´ nicamente incluye luz ambiente.

(a)

(b)

(c)

Figura 5.3: Ejemplos de iluminaci´on: (a) Solo luz ambiente; (b) Luz ambiente y reflexi´on difusa; (c) Luz ambiente, reflexi´on difusa y especular

5.1.2.

Reflexi´on difusa

La reflexi´on difusa es caracter´ıstica de superficies rugosas, mates, sin brillo. Este tipo de superficies se puede modelar f´acilmente con la ley de Lambert. As´ı, 64 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

64

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


el brillo observado en un punto depende solo del a´ ngulo θ, 0 ≤ θ ≤ 90, entre la direcci´on a la fuente de luz L y la normal N de la superficie en dicho punto (ver figura 5.4). Si L y N son vectores unitarios y kd , 0 ≤ kd ≤ 1 representa la parte de luz difusa reflejada por la superficie, la ecuaci´on que modela la reflexi´on difusa es la siguiente: Id = kd Ld cos θ = kd Ld (L · N )

(5.2)

Para tener en cuenta la atenuaci´on que sufre la luz al viajar desde su fuente de origen hasta la superficie del objeto situado a una distancia d, se propone utilizar la siguiente ecuaci´on donde los coeficientes a, b y c son constantes caracter´ısticas de la fuente de luz: Id =

kd Ld (L · N ) a + bd + cd2

(5.3)

Figura 5.4: Geometr´ıa del modelo de iluminaci´on de Phong

La figura 5.3(b) muestra un ejemplo en el que el modelo de iluminaci´on incluye luz ambiente y reflexi´on difusa.

5.1.3.

Reflexi´on especular

Este tipo de reflexi´on es propia de superficies brillantes, pulidas, y responsable de los brillos que suelen observarse en esos tipos de superficies. El color del brillo suele ser diferente del color de la superficie y muy parecido al color de la fuente de luz. Adem´as, la posici´on de los brillos depende de la posici´on del observador. Phong propone que la luz que llega al observador dependa u´ nicamente del a´ ngulo Φ entre el vector de reflexi´on perfecta R y el vector de direcci´on al observador V (ver figura 5.4). Si R y V son vectores unitarios, ks , 0 ≤ ks ≤ 1 65 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

65

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


representa la parte de luz especular reflejada por la superficie y α modela el brillo caracter´ıstico del material de la superficie, la ecuaci´on que modela la reflexi´on especular es la siguiente: Is = ks Ls cosα Φ = ks Ls (R · V )α

(5.4)

donde R se obtiene de la siguiente manera: (5.5)

R = 2N (N · L) − L

La figura 5.3(c) muestra un ejemplo en el que el modelo de iluminaci´on incluye luz ambiente, reflexi´on difusa y reflexi´on especular. Respecto al valor de α, un valor igual a 1 modela un brillo grande, mientras que valores mucho mayores, por ejemplo entre 100 y 500, modelan brillos m´as peque˜nos, propios de materiales, por ejemplo, met´alicos. La figura 5.5 muestra varios ejemplos obtenidos con distintos valores de α.

(a) α = 3

(b) α = 10

(c) α = 100

Figura 5.5: Ejemplos de iluminaci´on con diferentes valores de α para el c´alculo de la reflexi´on especular

5.1.4.

Materiales

El modelo de iluminaci´on de Phong tiene en cuenta las propiedades del material del objeto al calcular la iluminaci´on y as´ı proporcionar mayor realismo. En concreto son cuatro: ambiente ka , difusa kd , especular ks y brillo α. La tabla 5.1 muestra una lista de materiales con los valores de ejemplo para estas constantes.

5.1.5.

El modelo de Phong

A partir de las ecuaciones 5.1, 5.3 y 5.4 se define el modelo de iluminaci´on de Phong como: I = ka L a +

1 (kd Ld (L · N ) + ks Ls (R · V )α ) 2 a + bd + cd

(5.6)

66 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

66

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Esmeralda

Obsidiana

Rub´ı

Bronce

Oro

Pl´astico

”ka ” : [ 0.022, 0.17, 0.02 ] ”kd ” : [ 0.08, 0.61, 0.08 ] ”ks ” : [0.63, 0.73, 0.63] ”α” : [ 0.6 ] ”ka ” : [0.05, 0.05, 0.07] ”kd ” : [0.18, 0.17, 0.23] ”ks ” : [0.33, 0.33, 0.35] ”α”: [ 0.30 ] ”ka ” : [0.18, 0.01, 0.01] ”kd ” : [0.61, 0.04, 0.04] ”ks ” : [0.73, 0.63, 0.63] ”α”: [ 0.60 ] ”ka ” : [0.21, 0.13, 0.05] ”kd ” : [0.71, 0.43, 0.18] ”ks ” : [0.39, 0.27, 0.17] ”α”: [ 0.20 ] ”ka ” : [0.25, 0.20, 0.07] ”kd ” : [0.75, 0.61, 0.23] ”ks ” : [0.63, 0.56, 0.37] ”α”: [ 0.40 ] ”ka ” : [0.0, 0.0, 0.0 ] ”kd ” : [0.55, 0.55, 0.55 ] ”ks ” : [0.70, 0.70, 0.70 ] ”α”: [ 0.25 ]

Jade

Perla

Turquesa

Cobre

Plata

Goma

”ka ” : [0.14, 0.22, 0.16 ] ”kd ” : [0.54, 0.89, 0.63] ”ks ” : [0.32, 0.32, 0.32 ] ”α” : [ 0.10 ] ”ka ” : [0.25, 0.21, 0.21] ”kd ” : [1.0, 0.83, 0.83] ”ks ” : [0.30, 0.30, 0.30] ”α”: [ 0.09 ] ”ka ” : [0.10, 0.19, 0.17] ”kd ” : [0.39, 0.74, 0.69] ”ks ” : [0.29, 0.31, 0.31] ”α”: [ 0.10 ] ”ka ” : [0.19, 0.07, 0.02] ”kd ” : [0.71, 0.27, 0.08] ”ks ” : [0.26, 0.14, 0.09] ”α”: [ 0.10 ] ”ka ” : [0.20, 0.20, 0.20] ”kd ” : [0.51, 0.51, 0.51] ”ks ” : [0.51, 0.51, 0.51] ”α”: [ 0.40 ] ”ka ” : [0.05, 0.05, 0.05] ”kd ” : [0.50, 0.50, 0.50] ”ks ” : [0.70, 0.70, 0.70] ”α”: [ 0.08 ]

Tabla 5.1: Ejemplos de propiedades de algunos materiales para el modelo de Phong

En el listado 5.1 se muestra la funci´on que calcula la iluminaci´on en un punto sin incluir el factor de atenuaci´on. En el caso de tener m´ultiples fuentes de luz, hay que sumar los t´erminos de cada una de ellas: I = k a La +



1≤i≤m

5.2.

1 (kd Ldi (Li · N ) + ks Lsi (Ri · V )αi ) 2 a i + bi d + c i d

(5.7)

Tipos de fuentes de luz

En general, siempre se han considerado dos tipos de fuentes de luz, dependiendo de su posici´on: Posicional: la fuente emite luz en todas las direcciones desde un punto dado, muy parecido a como ilumina una bombilla, por ejemplo. Direccional: la fuente est´a ubicada en el infinito, todos los rayos de luz son paralelos y viajan en la misma direcci´on. En este caso el vector L en el modelo de iluminaci´on de Phong es constante.

67 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

67

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 5.1: Funci´on que implementa para una fuente de luz el modelo de iluminaci´on de Phong sin incluir el factor de atenuaci´on struct LightData { v e c 3 P o s i t i o n ; / / P o s i c i o´ n en c o o r d e n a d a s d e l o j o v e c 3 La ; / / Ambiente v e c 3 Ld ; / / Difusa v e c 3 Ls ; / / Especular }; uniform L i g h t D a t a L i g h t ; struct MaterialData { v e c 3 Ka ; / / Ambiente v e c 3 Kd ; / / Difusa v e c 3 Ks ; / / Especular float alpha ; / / Brillo especular }; uniform M a t e r i a l D a t a M a t e r i a l ; / / N , L y V s e asumen n o r m a l i z a d o s v e c 3 phong ( v e c 3 N, v e c 3 L , v e c 3 V) { vec3 vec3 vec3

a m b i e n t = M a t e r i a l . Ka ∗ L i g h t . La ; d i f f u s e = vec3 ( 0 . 0 ) ; s p e c u l a r = vec3 ( 0 . 0 ) ;

f l o a t NdotL

= d o t (N, L ) ;

i f ( NdotL > 0 . 0 ) { vec3 R = r e f l e c t (−L , N) ; f l o a t RdotV n = pow ( max ( 0 . 0 , d o t ( R , V) ) , M a t e r i a l . a l p h a ) ;

}

d i f f u s e = NdotL ∗ ( L i g h t . Ld ∗ M a t e r i a l . Kd ) ; s p e c u l a r = RdotV n ∗ ( L i g h t . Ls ∗ M a t e r i a l . Ks ) ;

return ( ambient + d i f f u s e + s p e c u l a r ) ; }

En ocasiones se desea restringir los efectos de una fuente de luz posicional a un a´ rea limitada de la escena, tal y como har´ıa por ejemplo una linterna. A este tipo de fuente posicional se le denomina foco (ver figura 5.6). A diferencia de una luz posicional, un foco viene dado, adem´as de por su posici´on, por la direcci´on S y el a´ ngulo δ que determinan la forma del cono, tal y como se muestra en la figura 5.7. As´ı, un fragmento es iluminado por el foco solo si est´a dentro del cono de luz. Esto se averigua calculando el a´ ngulo entre el vector L y el vector S. Si el resultado es mayor que el a´ ngulo δ es que ese fragmento est´a fuera del cono, siendo, en consecuencia, afectado u´ nicamente por la luz ambiente. 68

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

68

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 5.6: Ejemplo de escena iluminada: a la izquierda, con una luz posicional y a la derecha, con la fuente convertida en foco

Figura 5.7: Par´ametros caracter´ısticos de un foco de luz

Adem´as, se puede considerar que la intensidad de la luz decae a medida que los rayos se separan del eje del cono. Esta atenuaci´on se calcula mediante el coseno del a´ ngulo entre los vectores L y S elevado a un exponente. Cuanto mayor sea este exponente, mayor ser´a la concentraci´on de luz alrededor del eje del cono (ver figura 5.6, imagen de la derecha). Finalmente, el factor de atenuaci´on calculado se incorpora al modelo de iluminaci´on de Phong, multiplicando el factor de atenuaci´on que ya exist´ıa. El listado 5.2 muestra el nuevo shader que implementa el foco de luz (la estructura LightData muestra solo los campos nuevos).

5.3.

Modelos de sombreado

Un modelo de iluminaci´on determina el color de la superficie en un punto. Un modelo de sombreado utiliza un modelo de iluminaci´on y especifica cu´ando usarlo. Dados un pol´ıgono y un modelo de iluminaci´on, hay tres m´etodos para determinar el color de cada fragmento: Plano: el modelo de iluminaci´on se aplica una sola vez y su resultado se aplica a toda la superficie del pol´ıgono. Este m´etodo requiere la normal de cada pol´ıgono. Gouraud: el modelo de iluminaci´on se aplica en cada v´ertice del pol´ıgono y los resultados se interpolan sobre su superficie. Este m´etodo requiere la 69 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

69

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


normal en cada uno de los v´ertices del pol´ıgono. Un ejemplo del resultado obtenido se muestra en la figura 5.8(a). El listado 5.3 muestra el shader correspondiente a este modelo de sombreado. Phong: el modelo de iluminaci´on se aplica para cada fragmento. Este m´etodo requiere la normal en el fragmento, que se puede obtener por interpolaci´on de las normales de los v´ertices. Un ejemplo del resultado obtenido se muestra en la figura 5.8(b). El listado 5.4 muestra el shader correspondiente a este modelo de sombreado.

Listado 5.2: Shader para el foco de luz struct LightData { / / S o l o f i g u r a n l o s campos n u e v o s .... v e c 3 D i r e c t i o n ; / / D i r e c c i o´ n de l a l u z en c o o r d e n a d a s d e l o j o f l o a t Exponent ; / / A t e n u a c i o´ n float Cutoff ; / / A n g u l o de c o r t e en g r a d o s } uniform L i g h t D a t a L i g h t ; v e c 3 phong ( v e c 3 N, v e c 3 L , v e c 3 V) { vec3 vec3 vec3

a m b i e n t = M a t e r i a l . Ka ∗ L i g h t . La ; d i f f u s e = vec3 ( 0 . 0 ) ; s p e c u l a r = vec3 ( 0 . 0 ) ;

f l o a t NdotL = d o t (N, L ) ; float spotFactor = 1.0; i f ( NdotL > 0 . 0 ) { vec3 s = n o r m a l i z e ( L i g h t . P o s i t i o n − ec ) ; f l o a t a n g l e = a c o s ( d o t (−s , L i g h t . D i r e c t i o n ) ) ; f l o a t c u t o f f = r a d i a n s ( clamp ( L i g h t . C u t o f f , 0 . 0 , 9 0 . 0 ) ) ; i f ( angle < cutoff ) { s p o t F a c t o r = pow ( d o t (−s , L i g h t . D i r e c t i o n ) , L i g h t . E x p o n e n t ) ; vec3 R = r e f l e c t (−L , N) ; f l o a t RdotV n = pow ( max ( 0 . 0 , d o t ( R , V) ) , M a t e r i a l . a l p h a ) ;

}

}

d i f f u s e = NdotL ∗ ( L i g h t . Ld ∗ M a t e r i a l . Kd ) ; s p e c u l a r = RdotV n ∗ ( L i g h t . Ls ∗ M a t e r i a l . Ks ) ;

return ( ambient + s p o t F a c t o r ∗ ( d i f f u s e + s p e c u l a r ) ) ; }

70 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

70

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 5.3: Shader para realizar un sombreado de Gouraud / / Shader uniform uniform uniform

de v e´ r t i c e s −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− mat4 p r o j e c t i o n M a t r i x ; mat4 m o d e l V i e w M a t r i x ; mat3 n o r m a l M a t r i x ;

a t t r i b u t e vec3 V e r t e x P o s i t i o n ; a t t r i b u t e vec3 VertexNormal ; varying //

vec3 c o l o r O u t ;

. . . aqu ´ı va e l c o´ d i g o d e l l i s t a d o 5 . 1

v o i d main ( ) vec3 vec4 vec3 vec3 vec3

{

N = ecPosition= ec = L = V =

normalize ( normalMatrix ∗ VertexNormal ) ; modelViewMatrix ∗ vec4 ( V e r t e x P o s i t i o n , 1 . 0 ) ; vec3 ( e c P o s i t i o n ) ; n o r m a l i z e ( L i g h t . P o s i t i o n − ec ) ; n o r m a l i z e (− e c ) ;

colorOut

= phong (N, L , V) ;

gl Position

= projectionMatrix ∗ ecPosition ;

} / / S h a d e r de f r a g m e n t o s −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− p r e c i s i o n mediump f l o a t ; v a r y i n g vec3 c o l o r O u t ; v o i d main ( ) { g l F r a g C o l o r = vec4 ( colorOut , 1 ) ; }

(a) Gouraud

(b) Phong

Figura 5.8: Ejemplos de modelos de sombreado: (a) Gouraud; (b) Phong

71 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

71

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 5.4: Shader para realizar un sombreado de Phong / / Shader uniform uniform uniform

de v e´ r t i c e s −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− mat4 p r o j e c t i o n M a t r i x ; mat4 m o d e l V i e w M a t r i x ; mat3 n o r m a l M a t r i x ;

a t t r i b u t e vec3 V e r t e x P o s i t i o n ; a t t r i b u t e vec3 VertexNormal ; v a r y i n g v e c 3 N, e c ; v o i d main ( )

{

N = normalize ( normalMatrix ∗ VertexNormal ) ; vec4 e c P o s i t i o n = modelViewMatrix ∗ vec4 ( V e r t e x P o s i t i o n , 1 . 0 ) ; ec = vec3 ( e c P o s i t i o n ) ; gl Position

= projectionMatrix ∗ ecPosition ;

} / / S h a d e r de f r a g m e n t o s −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− p r e c i s i o n mediump f l o a t ; //

. . . aqu ´ı va e l c o´ d i g o d e l l i s t a d o 5 . 1

v a r y i n g v e c 3 N, e c ; v o i d main ( ) { v e c 3 n = n o r m a l i z e (N) ; vec3 L = n o r m a l i z e ( L i g h t . P o s i t i o n − ec ) ; v e c 3 V = n o r m a l i z e (− e c ) ; g l F r a g C o l o r = v e c 4 ( phong ( n , L , V) , 1 . 0 ) ; }

5.4.

Implementa Phong con WebGL

5.4.1.

Normales en los v´ertices

Hasta ahora las primitivas geom´etricas conten´ıan u´ nicamente el atributo de posici´on. Para poder aplicar el modelo de iluminaci´on de Phong, es necesario que adem´as se proporcionen las normales para cada v´ertice. Por ejemplo, el listado 5.5 define el modelo de un cubo donde para cada v´ertice se proporcionan la posici´on y la normal. Observa que en el modelo del cubo, la normal de un v´ertice es diferente seg´un la cara que lo utilice. Por este motivo, la descripci´on del cubo ha pasado de 8 v´ertices a 24. 72 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

72

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 5.5: Modelo de un cubo con la normal definida para cada v´ertice v a r exampleCube = { ” v e r t i c e s ” : [ −0.5 , −0.5 , 0 . 5 , 0 . 0 , 0 . 0 , 1 . 0 , 0.5 , −0.5 , 0.5 , 0.0 , 0.0 , 1.0 , 0.5 , 0.5 , 0.5 , 0.0 , 0.0 , 1.0 , −0.5 , 0 . 5 , 0 . 5 , 0 . 0 , 0 . 0 , 1 . 0 , 0.5 , −0.5 , 0.5 , 1.0 , 0.0 , 0.0 , 0.5 , −0.5 , −0.5 , 1 . 0 , 0 . 0 , 0 . 0 , 0.5 , 0.5 , −0.5 , 1.0 , 0.0 , 0.0 , 0.5 , 0.5 , 0.5 , 1.0 , 0.0 , 0.0 , 0.5 , −0.5 , −0.5 , 0 . 0 , 0.0 , −1.0 , −0.5 , −0.5 , −0.5 , 0 . 0 , 0 . 0 , − 1 . 0 , −0.5 , 0 . 5 , − 0 . 5 , 0 . 0 , 0 . 0 , − 1 . 0 , 0.5 , 0.5 , −0.5 , 0.0 , 0.0 , −1.0 , −0.5 , −0.5 , −0.5 , −1.0 , 0 . 0 , 0 . 0 , −0.5 , −0.5 , 0 . 5 , − 1 . 0 , 0 . 0 , 0 . 0 , −0.5 , 0 . 5 , 0 . 5 , − 1 . 0 , 0 . 0 , 0 . 0 , −0.5 , 0 . 5 , − 0 . 5 , − 1 . 0 , 0 . 0 , 0 . 0 , −0.5 , 0 . 5 , 0 . 5 , 0 . 0 , 1 . 0 , 0 . 0 , 0.5 , 0.5 , 0.5 , 0.0 , 1.0 , 0.0 , 0.5 , 0.5 , −0.5 , 0.0 , 1.0 , 0.0 , −0.5 , 0 . 5 , − 0 . 5 , 0 . 0 , 1 . 0 , 0 . 0 , −0.5 , −0.5 , −0.5 , 0 . 0 , − 1 . 0 , 0 . 0 , 0.5 , −0.5 , −0.5 , 0.0 , −1.0 , 0 . 0 , 0.5 , −0.5 , 0.5 , 0.0 , −1.0 , 0.0 , −0.5 , −0.5 , 0 . 5 , 0 . 0 , − 1 . 0 , 0 . 0 ] , ” indices ” :

[ 0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8 , 9 ,10 , 8 ,10 ,11 ,12 ,13 ,14 ,12 ,14 ,15 , 16 ,17 ,18 ,16 ,18 ,19 ,20 ,21 ,22 ,20 ,22 ,23]

};

La funci´on initShaders es un buen sitio donde obtener la referencia al nuevo atributo y habilitarlo, as´ı como para obtener la referencia a la matriz de transformaci´on de la normal (ver listado 5.6). Listado 5.6: Obtenci´on de referencias para el uso de las normales program . v e r t e x N o r m a l A t t r i b u t e = g l . g e t A t t r i b L o c a t i o n ( program , ” V e r t e x N o r m a l ” ) ; program . n or ma lM a tr ix In d ex = g l . g e t U n i f o r m L o c a t i o n ( program , ” n o r m a l M a t r i x ” ) ; g l . e n a b l e V e r t e x A t t r i b A r r a y ( program . v e r t e x N o r m a l A t t r i b u t e ) ;

Por supuesto, la matriz de la normal es propia de cada modelo, ya que se calcula a partir de la matriz modelo-vista y se obtiene, como se explic´o en el cap´ıtulo 3, 73

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

73

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


a partir de la traspuesta de su inversa. Como esta operaci´on hay que realizarla para cada modelo, es conveniente crear una funci´on espec´ıfica y llamarla antes de ordenar su dibujado para obtener as´ı la matriz de la normal del shader, tal y como se muestra en el listado 5.7.

Listado 5.7: Funciones para el c´alculo y la inicializaci´on de la matriz de la normal en el shader a partir de la matriz modelo-vista f u n c t i o n getNormalMatrix ( modelViewMatrix ) { v a r n o r m a l M a t r i x = mat3 . c r e a t e ( ) ; mat3 . fromMat4 ( n o r m a l M a t r i x , m o d e l V i e w M a t r i x ) ; mat3 . i n v e r t ( normalMatrix , normalMatrix ) ; mat3 . t r a n s p o s e ( n o r m a l M a t r i x , n o r m a l M a t r i x ) ; return normalMatrix ; } function setShaderNormalMatrix ( normalMatrix ) { g l . u n i f o r m M a t r i x 3 f v ( program . normalMatrixIndex , f a l s e , normalMatrix ) ; }

Por u´ ltimo, a la hora de dibujar el modelo, hay que especificar c´omo se encuentra almacenado dicho atributo en el vector de v´ertices (ver listado 5.8).

Listado 5.8: Nueva funci´on de dibujo que incluye dos atributos: posici´on y normal f u n c t i o n d r a w S o l i d ( model ) { g l . b i n d B u f f e r ( g l . ARRAY BUFFER , model . i d B u f f e r V e r t i c e s ) ; g l . v e r t e x A t t r i b P o i n t e r ( program . v e r t e x P o s i t i o n A t t r i b u t e , 3 , g l . FLOAT , f a l s e , 2 ∗ 3 ∗ 4 , 0) ; g l . v e r t e x A t t r i b P o i n t e r ( program . v e r t e x N o r m a l A t t r i b u t e , 3, g l . FLOAT , f a l s e , 2 ∗ 3 ∗ 4 , 3 ∗ 4 ) ; gl . bindBuffer

( g l . ELEMENT ARRAY BUFFER , model . i d B u f f e r I n d i c e s ) ; g l . d r a w E l e m e n t s ( g l . TRIANGLES , model . i n d i c e s . l e n g t h , g l . UNSIGNED SHORT , 0 ) ; }

74 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

74

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


5.4.2.

Materiales

Para especificar un material es necesario, en primer lugar, obtener las referencias de las variables que van a contener el valor del material en el shader. Examina el listado 5.1 para recordarlas. El listado 5.9 muestra el c´odigo correspondiente a este paso. Un buen sitio para colocarlo ser´ıa en la funci´on initShaders. En segundo lugar, hay que especificar el material para cada modelo justo antes de ordenar su dibujado. Para esto, es buena idea definir una funci´on que se encargue de inicializar las variables del shader correspondientes al material. El listado 5.10 muestra ambas acciones.

Listado 5.9: Obtenci´on de las referencias a las variables del shader que contendr´an el material p r o g r a m . KaIndex = p r o g r a m . KdIndex = program . KsIndex = program . a l p h a I n d e x =

g l . g e t U n i f o r m L o c a t i o n ( program g l . g e t U n i f o r m L o c a t i o n ( program g l . g e t U n i f o r m L o c a t i o n ( program g l . g e t U n i f o r m L o c a t i o n ( program ” Material . alpha ” ) ;

, ” M a t e r i a l . Ka” ) ; , ” M a t e r i a l . Kd” ) ; , ” M a t e r i a l . Ks ” ) ; ,

Listado 5.10: La funci´on setShaderMaterial recibe un material como par´ametro e inicializa las variables del shader correspondientes. En la funci´on drawScene se establece un valor de material antes de dibujar el objeto var S i l v e r = { ” mat ambient ” : ” mat diffuse ” : ” mat specular ” : ” alpha ” : };

[ [ [ [

0.19225 , 0.19225 , 0.19225 ] , 0.50754 , 0.50754 , 0.50754 ] , 0.508273 , 0.508273 , 0.508273 ] , 51.2 ]

function setShaderMaterial ( material ) { gl gl gl gl

. . . .

u n i f o r m 3 f v ( p r o g r a m . KaIndex , u n i f o r m 3 f v ( p r o g r a m . KdIndex , u n i f o r m 3 f v ( p r o g r a m . KsIndex , u n i f o r m 1 f ( program . alphaIndex ,

material material material material

. . . .

mat ambient ) ; mat diffuse ) ; mat specular ) ; alpha ) ;

} f u n c t i o n drawScene ( ) { .... / / e s t a b l e c e un m a t e r i a l y d i b u j a e l cubo setShaderMaterial ( Silver ) ; d r a w S o l i d ( exampleCube ) ; .... }

75 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

75

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


5.4.3.

Fuente de luz

Respecto a la fuente de luz, por una parte hay que obtener las referencias a las variables del shader (ver el listado 5.11) que definen los par´ametros de la fuente de luz, y que de manera similar al material podemos colocar en la funci´on initShaders. Por otra parte, hay que inicializar las variables del shader antes de ordenar el dibujado del primer objeto de la escena. Es interesante agrupar la inicializaci´on en una sola funci´on (ver listado 5.12).

Listado 5.11: Obtenci´on de las referencias a las variables del shader que contendr´an los valores de la fuente de luz program . LaIndex = program . LdIndex = program . LsIndex = program . P o s i t i o n I n d e x =

g l . g e t U n i f o r m L o c a t i o n ( program g l . g e t U n i f o r m L o c a t i o n ( program g l . g e t U n i f o r m L o c a t i o n ( program g l . g e t U n i f o r m L o c a t i o n ( program ” Light . Position ” ) ;

, ” L i g h t . La ” ) ; , ” L i g h t . Ld ” ) ; , ” L i g h t . Ls ” ) ; ,

Listado 5.12: La funci´on setShaderLight inicializa las variables del shader correspondientes function setShaderLight () { gl gl gl gl

. . . .

u n i f o r m 3 f ( p r o g r a m . LaIndex , u n i f o r m 3 f ( p r o g r a m . LdIndex , u n i f o r m 3 f ( program . LsIndex , u n i f o r m 3 f ( program . P o s i t i o n I n d e x ,

1.0 ,1.0 ,1.0) ; 1.0 ,1.0 ,1.0) ; 1.0 ,1.0 ,1.0) ; 10.0 ,10.0 ,0.0) ;

}

Ejercicios  5.1 Ejecuta el programa c05/phongConSombreadoGouraud.html, que implementa el modelo de iluminaci´on de Phong y el modelo de sombreado de Gouraud. Como resultado obtendr´as im´agenes similares a las de la figura 5.9. Examina el shader en el HTML y comprueba que los fragmentos de c´odigo comentados en esta secci´on se incluyen en c05/iluminacion.js. Comprueba tambi´en c´omo el fichero primitivas.js contiene las normales de cada v´ertice para cada una de las primitivas definidas.  5.2 A partir del ejemplo anterior realiza los cambios necesarios para implementar el modelo de sombreado de Phong. La figura 5.10 muestra dos ejemplos de resultados obtenidos utilizando este modelo de sombreado.

76 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

76

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 5.9: Ejemplos obtenidos con el modelo de iluminaci´on de Phong y el modelo de sombreado de Gouraud

Figura 5.10: Ejemplos obtenidos con el modelo de sombreado de Phong

5.5.

Iluminaci´on por ambas caras

Cuando la escena incorpora modelos abiertos, es posible observar los pol´ıgonos que se encuentran en la parte trasera de los objetos, como por ejemplo ocurre en la copa de la figura 5.11. Para una correcta visualizaci´on es necesario utilizar la normal contraria en los pol´ıgonos que forman parte de la cara trasera. Esto es una operaci´on muy sencilla en WebGL y se muestra en el listado 5.13.

Listado 5.13: Iluminaci´on en ambas caras, modificaci´on en el shader de fragmentos if ( gl FrontFacing ) g l F r a g C o l o r = v e c 4 ( phong ( n , L , V) , 1 . 0 ) ; else g l F r a g C o l o r = v e c 4 ( phong (−n , L , V) , 1 . 0 ) ;

5.6.

Sombreado c´omic

El objetivo es simular el sombreado t´ıpico en c´omics. Este efecto se consigue haciendo que la componente difusa del color de un fragmento se restrinja a solo un n´umero determinado de posibles valores. La funci´on toonShading que se muestra en el listado 5.14 realiza esta operaci´on para cada fragmento. La variable levels determina el n´umero m´aximo de colores distintos (ver figura 5.12). 77 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

77

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 5.11: Ejemplo de modelo en el que hay que aplicar iluminaci´on en ambas caras para una correcta visualizaci´on

Listado 5.14: Iluminaci´on en ambas caras, modificaci´on en el shader de fragmentos v e c 3 t o o n S h a d i n g ( v e c 3 N, v e c 3 L ) { vec3 float float float

ambient NdotL levels scaleFactor

vec3 d i f f u s e

= = = =

M a t e r i a l . Ka ∗ L i g h t . La ; max ( 0 . 0 , d o t (N, L ) ) ; 3.0; 1.0 / l e v e l s ;

= c e i l ( NdotL ∗ l e v e l s ) ∗ s c a l e F a c t o r ∗ ( L i g h t . Ld ∗ M a t e r i a l . Kd ) ;

return ( ambient + d i f f u s e ) ; } v o i d main ( ) { v e c 3 n = n o r m a l i z e (N) ; vec3 L = n o r m a l i z e ( L i g h t . P o s i t i o n − ec ) ; g l F r a g C o l o r = vec4 ( toonShading ( n , L) , 1 . 0 ) ; }

Ejercicios  5.3 A˜nade la funci´on toonShading a tu shader de fragmentos y haz que se llame a esta en lugar de a la funci´on phong. Observa que la componente especular se ha eliminado de la ecuaci´on, por lo que la funci´on toonShading solo necesita los vectores N y L.

78 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

78

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


(a) levels = 3

(b) levels = 5

(c) levels = 10 Figura 5.12: Resultado de la funci´on toonShading con diferentes valores de la variable levels

5.7.

Niebla

El efecto de niebla se consigue mezclando el color de cada fragmento con el color de la niebla. A mayor distancia de un fragmento respecto a la c´amara, mayor peso tiene el color de la niebla y al contrario, a menor distancia, mayor peso tiene el color del fragmento. En primer lugar hay que obtener el color del fragmento y despu´es, a modo de post-proceso, se mezcla con el color de la niebla dependiendo de la distancia a la c´amara. Para implementar este efecto se definen tres variables: distancia m´ınima, distancia m´axima y color de la niebla. As´ı, dado un fragmento, tenemos tres posibilidades: Si el fragmento est´a a una distancia menor que la distancia m´ınima, no se ve afectado por la niebla, el color definitivo es el color del fragmento. Si el fragmento est´a a una distancia mayor que la m´axima, el color definitivo es el color de la niebla (es importante que el color de fondo coincida con el de la niebla). Si el fragmento est´a a una distancia entre la m´ınima y la m´axima, su color definitivo depende del color del fragmento y del de la niebla. Esta variaci´on puede ser lineal con la distancia, pero suele producir mucho mejor resultado utilizar una funci´on exponencial. El listado 5.15 muestra la estructura FogData y el c´alculo del valor de niebla de manera lineal y, con comentarios, de manera exponencial. La figura 5.13 muestra algunos resultados. 79 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

79

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 5.15: Shader de niebla s t r u c t FogData { f l o a t maxDist ; f l o a t minDist ; vec3 c o l o r ; }; FogData Fog ; v o i d main ( ) { Fog . m i n D i s t = 1 0 . 0 ; Fog . m a x D i s t = 2 0 . 0 ; Fog . c o l o r = vec3 ( 0 . 1 5 , 0 . 1 5 , 0 . 1 5 ) ; v e c 3 n = n o r m a l i z e (N) ; vec3 L = n o r m a l i z e ( L i g h t . P o s i t i o n − ec ) ; v e c 3 V = n o r m a l i z e (− e c ) ; float dist

= abs ( ec . z ) ;

// lineal l o a t f o g F a c t o r = ( Fog . m a x D i s t − d i s t ) / ( Fog . m a x D i s t − Fog . m i n D i s t ) ; / / exponencial / / f l o a t f o g F a c t o r = e x p (−pow ( d i s t , 2 . 0 ) ) ; fogFactor = clamp ( f o g F a c t o r , 0 . 0 , 1 . 0 ) ; v e c 3 p h o n g C o l o r = phong ( n , L , V) ; v e c 3 myColor = mix ( Fog . c o l o r , p h o n g C o l o r , f o g F a c t o r ) ; gl FragColor

= v e c 4 ( myColor , 1 . 0 ) ;

}

Figura 5.13: Resultados obtenidos utilizando niebla en el shader

80

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

80

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 6

Texturas En el cap´ıtulo anterior se mostr´o c´omo un modelo de iluminaci´on aumenta el realismo visual de las im´agenes generadas por computador. Ahora, se va a mostrar c´omo se puede utilizar una imagen 2D a modo de mapa de color, de manera que el valor definitivo de un determinado p´ıxel dependa de ambos, es decir, de la iluminaci´on de la escena y de la textura (ver figura 6.1). El uso de texturas para aumentar el realismo visual de las aplicaciones es muy frecuente, por lo que el n´umero de t´ecnicas en la literatura es tambi´en muy elevado. En concreto, en este cap´ıtulo se van a revisar t´ecnicas que resultan especialmente id´oneas para gr´aficos en tiempo real.

Figura 6.1: Resultados obtenidos al aplicar diferentes texturas 2D sobre el mismo objeto 3D

6.1.

Coordenadas de textura

Las coordenadas de textura son un atributo m´as de los v´ertices, como lo es tambi´en la normal. El rango de coordenadas v´alido en el espacio de la textura es [0..1], y es independiente del tama˜no en p´ıxeles de la textura (ver figura 6.2). La aplicaci´on ha de suministrar estas coordenadas para cada v´ertice y la GPU las interpolar´a para cada fragmento (ver figura 6.3). 81

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

81

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


El listado 6.1 muestra el nuevo atributo y c´omo se asignan las coordenadas de textura a una variable de tipo varying para que cada fragmento reciba sus coordenadas de textura interpoladas. En dicho listado se utiliza la funci´on texture2D para, a partir de las coordenadas y una textura, obtener un valor de color. La textura est´a declarada de tipo sampler2D, que es el tipo que GLSL establece para una textura 2D. La figura 6.4 muestra dos resultados de la aplicaci´on de textura. Por supuesto, desde el shader de fragmentos es posible acceder a diferentes texturas y realizar cualquier combinaci´on con los valores obtenidos para determinar el color definitivo. La figura 6.5 muestra un ejemplo donde se han combinado dos texturas y el listado 6.2 muestra los cambios necesarios en el shader de fragmentos para acceder a varias texturas (el shader de v´ertices no cambia). Observa c´omo se utilizan las mismas coordenadas de textura para acceder a las diferentes texturas. En el ejemplo se ha utilizado la operaci´on de multiplicaci´on para combinar los colores obtenidos de cada textura, pero evidentemente se podr´ıa utilizar cualquier otra operaci´on.

Figura 6.2: Correspondencia entre coordenadas de textura y coordenadas de un objeto

Figura 6.3: En el espacio del objeto, cada fragmento recibe las coordenadas de textura interpoladas

82 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

82

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 6.1: Cambios necesarios para que un shader utilice una textura 2D / / S h a d e r de v e´ r t i c e s ... a t t r i b u t e vec2 VertexTexcoords ; varying vec2 texCoords ;

/ / nuevo a t r i b u t o

v o i d main ( ) { ... / / s e a s i g n a n l a s c o o r d e n a d a s de t e x t u r a d e l v e´ r t i c e / / a la variable texCoords texCoords = VertexTexcoords ; } / / S h a d e r de f r a g m e n t o s ... uniform s a m p l e r 2 D m y T e x t u r e ; v a r y i n g vec2 texCoords ;

/ / la textura / / c o o r d s de t e x t u r a i n t e r p o l a d a s

v o i d main ( ) { ... / / a c c e s o a l a t e x t u r a p a r a o b t e n e r un v a l o r de c o l o r RGBA g l F r a g C o l o r = t e x t u r e 2 D ( myTexture , t e x C o o r d s ) ; }

Figura 6.4: Ejemplos de aplicaci´on de textura 2D. En estos casos el color definitivo de un fragmento se ha obtenido a partir de la textura y del modelo de iluminaci´on de Phong

83

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

83

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 6.2: Cambios en el shader de fragmentos para utilizar varias texturas 2D / / S h a d e r de f r a g m e n t o s ... uniform s a m p l e r 2 D myTexture1 , myTexture2 , . . . ; / / l a s t e x t u r a s v a r y i n g vec2 texCoords ; / / c o o r d s de t e x t u r a i n t e r p o l a d a s v o i d main ( ) { ... / / a c c e s o a l a s t e x t u r a s p a r a o b t e n e r l o s v a l o r e s de c o l o r RGBA g l F r a g C o l o r = t e x t u r e 2 D ( myTexture1 , t e x C o o r d s ) ∗ t e x t u r e 2 D ( myTexture2 , t e x C o o r d s ) ∗ . . . ; }

Figura 6.5: Resultado de combinar dos texturas

Por u´ ltimo, en el caso de proporcionar valores mayores que 1 en las coordenadas de textura, es posible gobernar el resultado de la visualizaci´on utilizando la funci´on gl.texParameter. Tres son los modos posibles, y pueden combinarse con valores distintos en cada direcci´on S y T . Estos son los casos posibles: Repite la textura (ver figura 6.6) • gl.texParameteri(gl.TEXTURE 2D, gl.TEXTURE WRAP [S|T], gl.REPEAT); Extiende el borde de la textura (ver figura 6.7) • gl.texParameteri(gl.TEXTURE 2D, gl.TEXTURE WRAP [S|T], gl.CLAMP TO EDGE); Repite la textura de manera sim´etrica (ver figura 6.8) • gl.texParameteri(gl.TEXTURE 2D, gl.TEXTURE WRAP [S|T], gl.MIRRORED REPEAT);

84

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

84

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 6.6: Ejemplos de repetici´on de textura

Figura 6.7: Ejemplos de extensi´on del borde de la textura

Figura 6.8: Comparaci´on entre la repetici´on de la textura de manera sim´etrica (imagen de la izquierda) y repetici´on normal como la de la figura 6.6 (imagen de la derecha)

85 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

85

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


6.2.

Leyendo t´exeles

Un t´exel es un p´ıxel de la textura. En los or´ıgenes, el acceso a los t´exeles de una textura solo era posible realizarlo desde el shader de fragmentos. Sin embargo, los procesadores gr´aficos que aparec´ıan a partir del 2008 eliminaban esa limitaci´on y era posible acceder a una textura tambi´en desde el shader de v´ertices. En cualquier caso, el acceso a la textura conlleva dos problemas, debido a que rara vez el tama˜no de un fragmento se corresponde con el de un t´exel de la textura: Magnificaci´on: cuando un fragmento se corresponde con un trocito de un t´exel de la textura. Minimizaci´on: cuando un fragmento se corresponde con varios t´exeles de la textura.

6.2.1.

Magnificaci´on

Para tratar este problema, WebGL proporciona dos tipos de filtrado: Filtro caja: se utiliza el t´exel m´as cercano. Por desgracia, aunque es muy r´apido, produce el t´ıpico efecto de pixelado que obtenemos al ampliar una imagen (ver figura 6.9). • gl.texParameteri(gl.TEXTURE 2D, gl.TEXTURE MAG FILTER, gl.NEAREST); Filtro bilineal: utiliza cuatro t´exeles cuyos valores se interpolan linealmente. Este filtro produce un efecto de borrosidad (ver figura 6.10). • gl.texParameteri(gl.TEXTURE 2D, gl.TEXTURE MAG FILTER, gl.LINEAR);

Figura 6.9: Filtro caja de WebGL, devuelve el valor del t´exel m´as cercano y produce el efecto de pixelado

86 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

86

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 6.10: Filtro bilineal de WebGL, devuelve la interpolaci´on lineal de cuatro t´exeles y produce el efecto de borrosidad

6.2.2.

Minimizaci´on

WebGL proporciona un m´etodo m´as de filtrado para el problema de la minimizaci´on, adem´as del filtro caja y del bilineal comentados en la secci´on anterior. Se denomina mipmapping y consiste en proporcionar, adem´as de la textura original, un conjunto de versiones m´as peque˜nas de la textura, cada una de ellas un cuarto m´as peque˜na que la anterior (ver figura 6.11).

Figura 6.11: Mipmapping de WebGL, se construye un conjunto de texturas, cada una de ellas un cuarto m´as peque˜na que la anterior. Observa la diferencia entre aplicar o no este tipo de filtro

Filtro caja y bilineal, respectivamente: • gl.texParameteri(gl.TEXTURE 2D, gl.TEXTURE MIN FILTER, gl.NEAREST); • gl.texParameteri(gl.TEXTURE 2D, gl.TEXTURE MIN FILTER, gl.LINEAR); Mipmapping: en tiempo de ejecuci´on, la GPU selecciona la textura cuyo tama˜no se acerca m´as al de la textura en la pantalla. WebGL puede generar la pir´amide de texturas de manera autom´atica: • gl.generateMipmap(gl.TEXTURE 2D); Utilizando este m´etodo de filtrado, WebGL puede realizar un filtrado trilineal seleccionando dos texturas, muestreando cada una utilizando un filtro bilineal, e interpolando los dos valores obtenidos: • gl.texParameteri(gl.TEXTURE 2D, gl.TEXTURE MIN FILTER, gl.LINEAR MIPMAP LINEAR); 87 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

87

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


6.2.3.

Texturas 3D

Una textura 3D define un valor para cada punto del espacio. Este tipo de texturas resulta perfecta para objetos que son creados a partir de un medio s´olido como una talla de madera o un bloque de piedra. Son una extensi´on directa de las texturas 2D en las que ahora se utilizan tres coordenadas (s, t, r), y donde en lugar de t´exeles tenemos v´oxeles. La principal ventaja de este tipo de texturas es que el propio atributo de posici´on del v´ertice se puede utilizar como coordenada de textura. Sin embargo, son caras de almacenar y tambi´en de filtrar. Tambi´en son ineficientes cuando se utilizan con modelos de superficies, ya que la mayor parte de la informaci´on que la textura almacena nunca se utiliza. Por u´ ltimo, aunque OpenGL soporta este tipo de texturas, WebGL 1.0 no lo hace, aunque es cierto que una textura 3D siempre podr´ıa implementarse como un vector de texturas 2D.

6.2.4.

Mapas de cubo

Un mapa de cubo son seis texturas cuadradas donde cada una de ellas se asocia a una cara del cubo distinta y que juntas capturan un determinado entorno (ver figura 6.12). Los mapas de cubo se utilizan principalmente para tres aplicaciones: Reflection mapping Refraction mapping Skybox

Figura 6.12: Ejemplos de texturas de mapa de cubo

Reflection mapping Esta t´ecnica de aplicaci´on de textura sirve para simular objetos que reflejan su entorno. En la literatura tambi´en aparece con el nombre de environment mapping. El objetivo es utilizar una textura que contenga la escena que rodea al objeto y, en tiempo de ejecuci´on, determinar las coordenadas de textura que van a depender del 88 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

88

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


vector direcci´on del observador o, mejor dicho, de su reflexi´on en cada punto de la superficie. De esta manera, las coordenadas de textura cambian al moverse el observador, consiguiendo que parezca que el objeto refleja su entorno. A la textura o conjunto de texturas que se utilizan para almacenar el entorno de un objeto se le denomina mapa de entorno. Este mapa puede estar formado por s´olo una textura, a la cual se accede utilizando coordenadas esf´ericas, o por un conjunto de seis texturas cuadradas formando un mapa de cubo. Este u´ ltimo es el que se describe en esta secci´on. El mapa de cubo se dispone para formar un cubo de lado 2 centrado en el origen de coordenadas. Para cada punto de la superficie del objeto reflejante se obtiene el vector de reflexi´on R respecto a la normal N en ese punto de la superficie (ver figura 6.13). Las coordenadas de este vector se van a utilizar para acceder al mapa de cubo y obtener el color. En primer lugar, hay que determinar cu´al de las seis texturas se ha de utlizar. Para ello, se elige la coordenada de mayor magnitud. Si es la coordenada x, se utilizan la cara derecha o izquierda del cubo, dependiendo del signo. De igual forma, si es la y se utilizan la de arriba o la de abajo, o la de delante o de detr´as si es la z. Despu´es, hay que obtener las coordenadas u y v para acceder a la textura seleccionada. Por ejemplo, si la coordenada x del vector de reflexi´on es la de mayor magnitud, las coordenadas de textura se pueden obtener as´ı:

u=

y+x 2x

v=

z+x 2x

(6.1)

Figura 6.13: Vectores involucrados en reflection mapping

En WebGL una textura mapa de cubo se declara de tipo samplerCube. El c´alculo de las coordenadas de textura se realiza de manera autom´atica al acceder a la textura mediante la funci´on textureCube, que se realiza habitualmente en el shader de fragmentos, igual que cuando se acced´ıa a una textura 2D. El vector de reflexi´on R se calcula para cada v´ertice mediante la funci´on reflect, y el procesador gr´afico har´a que cada fragmento reciba el vector R convenientemente interpolado. En el listado 6.3 se muestra el uso de estas funciones en el shader. La figura 6.14 muestra un ejemplo de mapa y del resultado obtenido. 89 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

89

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 6.3: Cambios en el shader para reflection mapping / / S h a d e r de v e´ r t i c e s ... a t t r i b u t e vec3 VertexNormal varying vec3 R; / / v e c t o r de r e f l e x i o´ n en e l v e´ r t i c e v o i d main ( ) { ... vec4 e c P o s i t i o n = modelViewMatrix ∗ vec4 ( v e r t e x P o s i t i o n , 1 . 0 ) ; vec3 N = normalize ( normalMatrix ∗ vertexNormal ) ; vec3 V = n o r m a l i z e ( v e c 3 (− e c P o s i t i o n ) ) ; ... R = r e f l e c t (V, N) ; } / / S h a d e r de f r a g m e n t o s ... uniform s a m p l e r C u b e myCubeMapTexture ; v a r y i n g vec3 R; / / v e c t o r de r e f l e x i o´ n i n t e r p o l a d o v o i d main ( ) { ... g l F r a g C o l o r = t e x t u r e C u b e ( myCubeMapTexture , R ) ; }

Figura 6.14: En la imagen de la izquierda se muestra el mapa de cubo con las seis texturas en forma de cubo desplegado. En la imagen de la derecha, el mapa de cubo se ha utilizado para simular que el objeto central est´a reflejando su entorno

Refraction mapping Esta t´ecnica de aplicaci´on de textura se utiliza para simular objetos que la luz atraviesa como hielo, agua, vidrio, diamante, etc. (ver figura 6.15). Las coordenadas de textura se corresponden con el vector de refracci´on para cada punto de la superficie. El vector de refracci´on se calcula a partir de los vectores V y N uti90

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

90

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


lizando la ley de Snell. Esta ley establece que la luz se desv´ıa al cambiar de un medio a otro (del aire al agua, por ejemplo) en base a un ´ındice de refracci´on. El vector de refracci´on se calcula con la funci´on refract para cada v´ertice en el shader de v´ertices y el procesador gr´afico har´a que cada fragmento reciba el vector convenientemente interpolado. En el listado 6.4 se muestra el uso de estas funciones en ambos shaders. Adem´as, se combina el resultado de la reflexi´on y la refracci´on, ya que es habitual que los objetos refractantes tambi´en sean reflejantes. El peso se balancea utilizando la variable refractionFactor. Listado 6.4: Cambios en el shader para refraction mapping / / S h a d e r de v e´ r t i c e s ... a t t r i b u t e vec3 VertexNormal ; varying vec3 R e f r a c t D i r , R e f l e c t D i r ; v o i d main ( ) { ... R e f l e c t D i r = r e f l e c t (V, N) ; R e f r a c t D i r = r e f r a c t (V, N, m a t e r i a l . r e f r a c t i o n I n d e x ) ; } / / S h a d e r de f r a g m e n t o s ... uniform s a m p l e r C u b e myCubeMapTexture ; v a r y i n g vec3 R e f r a c t D i r , R e f l e c t D i r ; v o i d main ( ) { ... g l F r a g C o l o r = mix ( t e x t u r e C u b e ( myCubeMapTexture , R e f r a c t D i r ) , t e x t u r e C u b e ( myCubeMapTexture , R e f l e c t D i r ) , material . refractionFactor ) ; }

Figura 6.15: Ejemplo de refraction mapping

91 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

91

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Skybox Un skybox es un cubo muy grande situado alrededor del observador. El objetivo de este cubo es representar el fondo de una escena que habitualmente contiene elementos muy distantes al observador, como por ejemplo el sol, las monta˜nas, las nubes, etc. Como textura se utiliza un mapa de cubo. Las coordenadas de textura se establecen en el shader de v´ertices, simplemente a partir del atributo de posici´on de cada v´ertice del Skybox. El procesador gr´afico har´a que cada fragmento reciba las coordenadas de textura convenientemente interpoladas. En el listado 6.5 se muestran los principales cambios para dibujar el skybox. Listado 6.5: Cambios en el shader para skybox / / S h a d e r de v e´ r t i c e s ... a t t r i b u t e vec3 V e r t e x P o s i t i o n ; varying vec3 tcSkybox ; / / c o o r d e n a d a s de t e x t u r a d e l S k y b o x v o i d main ( ) { / / s i m p l e m e n t e a s i g n a a t c S k y b o x l a s c o o r d e n a d a s d e l v e´ r t i c e tcSkybox = V e r t e x P o s i t i o n ; ... } / / S h a d e r de f r a g m e n t o s ... uniform s a m p l e r C u b e myCubeMapTexture ; v a r y i n g vec3 tcSkybox ; / / c o o r d e n a d a s de t e x t u r a i n t e r p o l a d a s v o i d main ( ) { ... g l F r a g C o l o r = t e x t u r e C u b e ( myCubeMapTexture , t c S k y b o x ) ; }

6.3.

T´ecnicas avanzadas

6.3.1.

Normal mapping

Esta t´ecnica consiste en modificar la normal de la superficie para dar la ilusi´on de rugosidad o simplemente de modificaci´on de la geometr´ıa a muy peque˜na escala. A esta t´ecnica se le conoce tambi´en como bump mapping. El c´alculo de la variaci´on de la normal se puede realizar en el propio shader de manera procedural (ver imagen 6.16). Adem´as, una funci´on de ruido se puede utilizar para generar la perturbaci´on (ver imagen 6.17). En esta secci´on, el mapa se va a precalcular y se proporcionar´a al procesador gr´afico como una textura, conocida con el nombre de mapa de normales o bump map (ver figura 6.18). El c´alculo de la iluminaci´on se ha de realizar en el espacio de la tangente. Este espacio se construye para cada v´ertice a partir de su normal, el vector tangente a 92 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

92

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


la superficie en dicho punto y el vector resultante del producto vectorial de esos dos vectores, que se denomina vector binormal. Con los tres vectores se crea la matriz que permite realizar el cambio de base. Como resultado, la normal coincide con el eje Z, la tangente con el eje X y la binormal con el eje Y . Entonces se operan los vectores L y V con esta matriz y hacemos que el procesador gr´afico los interpole para cada fragmento. En el shader de fragmentos se accede a la textura que almacena el mapa de normales y a partir de esta normal y los vectores L y V interpolados se aplica el modelo de iluminaci´on.

Figura 6.16: Objetos texturados con la t´ecnica de bump mapping. La modificaci´on de la normal produce que aparentemente la superficie tenga bultos

Figura 6.17: La normal del plano se perturba utilizando una funci´on de ruido, haciendo que parezca que tenga peque˜nas ondulaciones

Figura 6.18: Mapa de normales y su resultado aplicado sobre un modelo

93 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

93

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


6.3.2.

Displacement mapping

Esta t´ecnica consiste en aplicar un desplazamiento en cada v´ertice de la superficie del objeto. El caso m´as sencillo es aplicar el desplazamiento en la direcci´on de la normal de la superficie en dicho punto. El desplazamiento se puede almacenar en una textura a la que se le conoce como mapa de desplazamiento. En el shader de v´ertices se accede a la textura que almacena el mapa de desplazamiento y se modifica la posici´on del v´ertice, sum´andole el resultado de multiplicar el desplazamiento por la normal en el v´ertice (ver figura 6.19).

Figura 6.19: Ejemplo de desplazamiento de la geometr´ıa

6.3.3.

Alpha mapping

Esta t´ecnica consiste en utilizar una textura para determinar qu´e partes de un objeto son visibles y qu´e partes no lo son. Esto permite representar objetos que geom´etricamente pueden tener cierta complejidad de una manera bastante sencilla a partir de una base geom´etrica simple y de la textura que hace la funci´on de m´ascara. Es en el shader de fragmentos donde se accede a la textura para tomar esta decisi´on. Por ejemplo, la figura 6.20 muestra una textura y dos resultados de c´omo se ha utilizado sobre el mismo objeto. En el primer caso, se ha utilizado para eliminar fragmentos, produciendo un objeto agujereado cuyo modelado ser´ıa bastante m´as complejo de obtener utilizando m´etodos tradicionales. En el segundo caso, el valor del alpha map se ha utilizado para decidir el color definitivo del fragmento. Con el mismo modelo y cambiando u´ nicamente la textura es muy sencillo obtener acabados muy diferentes (ver figura 6.21).

Figura 6.20: Ejemplos de aplicaci´on de la t´ecnica alpha mapping

94 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

94

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 6.21: Ejemplos de aplicaci´on de diferentes alpha maps sobre el mismo objeto

6.4.

Texturas en WebGL

Para poder aplicar una textura en WebGL son necesarios tres pasos: crear un objeto textura, establecer los datos de la textura y asignar una unidad de textura. En WebGL las texturas se representan mediante objetos con nombre. El nombre no es m´as que un entero sin signo donde el valor 0 est´a reservado. Para crear un objeto textura es necesario obtener en primer lugar un nombre que no se est´e utilizando. Esta solicitud se realiza con la orden gl.createTexture. Se han de solicitar tantos nombres como objetos textura necesitemos, teniendo en cuenta que un objeto textura almacena una u´ nica textura. Una vez creado este objeto, hay que especificar tanto la textura (la imagen 2D en nuestro caso) como los diferentes par´ametros de repetici´on y filtrado. Para especificar la textura se utiliza la siguiente orden: gl.texImage2D (GLenum objetivo, GLint nivel, GLenum f ormatoInterno, GLenum f ormato, GLenum tipo, TexImageSource datos); donde el objetivo ser´a gl.TEXTURE 2D. Los par´ametros formato, tipo y datos especifican, respectivamente, el formato de los datos de la imagen, el tipo de esos datos y una referencia a los datos de la imagen. El par´ametro nivel se utiliza solo en el caso de usar diferentes resoluciones de la textura, siendo 0 en cualquier otro caso. El par´ametro formatoInterno se utiliza para indicar cu´ales de las componentes R, G, B y A se emplean como t´exeles de la imagen. Ya solo queda asignar el objeto textura a una unidad de textura. Estas unidades son finitas y su n´umero depende del hardware. El consorcio ARB fija que al menos 4 unidades de textura deben existir, pero es posible que nuestro procesador gr´afico disponga de m´as. La orden gl.activeTexture especifica el selector de unidad de textura activa. As´ı, por ejemplo, la orden gl.activeTexture(gl.TEXTURE0) selecciona la unidad de textura 0. A continuaci´on, hay que especificar el objeto textura a utilizar por dicha unidad con la orden gl.bindTexture. A cada unidad de textura solo se le puede asignar un objeto textura pero, durante la ejecuci´on, podemos cambiar tantas veces como queramos el objeto textura asignado a una determinada unidad. El listado 6.6 muestra un ejemplo que incluye todos los pasos. 95 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

95

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 6.6: Creaci´on de una textura en WebGL / / Crea un o b j e t o t e x t u r a var t e x t u r e = gl . createTexture ( ) ; g l . b i n d T e x t u r e ( g l . TEXTURE 2D , t e x t u r e ) ; / / E s p e c i f i c a l a t e x t u r a RGB g l . texImage2D ( g l . TEXTURE 2D , 0 , g l . RGB, g l . RGB, g l . UNSIGNED BYTE , image ) ; / / R e p i t e l a t e x t u r a t a n t o en s como en t g l . t e x P a r a m e t e r i ( g l . TEXTURE 2D , g l . TEXTURE WRAP S , g l . REPEAT ) ; g l . t e x P a r a m e t e r i ( g l . TEXTURE 2D , g l . TEXTURE WRAP T , g l . REPEAT ) ; / / Filtrado g l . t e x P a r a m e t e r i ( g l . TEXTURE 2D , g l . TEXTURE MIN FILTER , g l . LINEAR MIPMAP LINEAR ) ; g l . t e x P a r a m e t e r i ( g l . TEXTURE 2D , g l . TEXTURE MAG FILTER , g l . LINEAR ) ; g l . g e n e r a t e M i p m a p ( g l . TEXTURE 2D ) ; / / A c t i v a l a u n i d a d de t e x t u r a 0 g l . a c t i v e T e x t u r e ( g l . TEXTURE0 ) ; / / A s i g n a e l o b j e t o t e x t u r a a d i c h a u n i d a d de t e x t u r a g l . b i n d T e x t u r e ( g l . TEXTURE 2D , t e x t u r e ) ;

Una vez creada la textura no hay que olvidar asignar a la variable de tipo sampler del shader la unidad de textura que ha de utilizar (ver listado 6.7). Listado 6.7: Asignaci´on de unidad a un sampler2D / / O b t i e n e e l ´ı n d i c e de l a v a r i a b l e d e l s h a d e r de t i p o sampler2D program . t e x t u r e I n d e x = g l . g e t U n i f o r m L o c a t i o n ( program , ’ m y T e x t u r e ’ ) ; / / I n d i c a que e l s a m p l e r m y T e x t u r e d e l s h a d e r u s e / / l a u n i d a d de t e x t u r a 0 g l . u n i f o r m 1 i ( program . t e x t u r e I n d e x , 0) ;

Como se explic´o en el primer punto de este cap´ıtulo, los v´ertices han de proporcionar un nuevo atributo: las coordenadas de textura. En consecuencia, hay que habilitar el atributo (ver listado 6.8) y tambi´en especificar c´omo se encuentra almacenado (ver listado 6.9). Listado 6.8: Habilitaci´on del atributo de coordenada de textura / / se obtiene la r e f e r e n c i a al a t r i b u t o program . v e r t e x T e x c o o r d s A t t r i b u t e = g l . g e t A t t r i b L o c a t i o n ( program , ” V e r t e x T e x c o o r d s ” ) ; / / se h a b i l i t a e l a t r i b u t o g l . e n a b l e V e r t e x A t t r i b A r r a y ( program . v e r t e x T e x c o o r d s A t t r i b u t e ) ;

96 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

96

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 6.9: Especificaci´on de tres atributos: posici´on, normal y coordenadas de textura g l . b i n d B u f f e r ( g l . ARRAY BUFFER , model . i d B u f f e r V e r t i c e s ) ; g l . v e r t e x A t t r i b P o i n t e r ( program . v e r t e x P o s i t i o n A t t r i b u t e , 3 , g l . FLOAT , f a l s e , 8 ∗ 4 , 0) ; g l . v e r t e x A t t r i b P o i n t e r ( program . v e r t e x N o r m a l A t t r i b u t e , 3, g l . FLOAT , f a l s e , 8 ∗ 4 , 3 ∗ 4 ) ; g l . v e r t e x A t t r i b P o i n t e r ( program . v e r t e x T e x c o o r d s A t t r i b u t e , 2 , g l . FLOAT , f a l s e , 8 ∗ 4 , 6 ∗ 4 ) ;

Ejercicios

 6.1 Ejecuta el programa c06/textura2D.html. Experimenta y prueba a cargar diferentes texturas. Como resultado, obtendr´as im´agenes similares a las de la figura 6.22. Despu´es edita los c´odigos textura2D.html y textura2D.js. Comprueba c´omo se han incorporado en el c´odigo todos los cambios que se han explicado en esta secci´on, necesarios para poder utilizar texturas 2D.

Figura 6.22: Ejemplos obtenidos utilizando texturas en WebGL

 6.2 Con la ayuda de un editor gr´afico, crea un alpha map o b´uscalo en internet. C´argalo como una nueva textura y util´ızalo para obtener resultados como los que se mostraban en las figuras 6.20 y 6.21.  6.3 A˜nade una textura de mapa de cubo. Util´ızalo como skybox y para que el modelo refleje su entorno. Observa las im´agenes de la figura 6.23 para ver los resultados que podr´ıas obtener. Interesantes, ¿verdad? Sin duda, un ejemplo inspirado en Fiat Lux de Paul Debevec. El listado 6.10 contiene el shader que se ha utilizado. Observa que con el mismo shader se pinta el cubo y el modelo. La variable skybox se utiliza para saber si se est´a pintando el cubo o el modelo. Por otra parte, la matriz invT es la inversa de la matriz modelo-vista del skybox. Recuerda que el skybox ha de estar centrado en la posici´on de la c´amara. El listado 6.11 muestra la funci´on loadCubeMap, encargada de crear la textura de mapa de cubo.

97 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

97

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 6.23: Ejemplos obtenidos utilizando reflection mapping en WebGL

Listado 6.10: Shader para skybox y reflection mapping / / Shader ... uniform uniform varying

de v e´ r t i c e s bool skybox ; mat3 i n v T ; vec3 texCoords ;

v o i d main ( )

{

vec3 N vec4 e c P o s i t i o n vec3 ec gl Position

}

= = = =

normalize ( normalMatrix ∗ VertexNormal ) ; modelViewMatrix ∗ vec4 ( V e r t e x P o s i t i o n , 1 . 0 ) ; vec3 ( e c P o s i t i o n ) ; projectionMatrix ∗ ecPosition ;

i f ( skybox ) texCoords = vec3 ( V e r t e x P o s i t i o n ) ; else t e x C o o r d s = i n v T ∗ r e f l e c t ( n o r m a l i z e ( e c ) ,N) ;

/ / S h a d e r de f r a g m e n t o s p r e c i s i o n mediump f l o a t ; uniform s a m p l e r C u b e m y T e x t u r e ; v a r y i n g vec3 texCoords ; v o i d main ( ) { g l F r a g C o l o r = t e x t u r e C u b e ( myTexture , t e x C o o r d s ) ; }

 6.4 A˜nade refracci´on al ejercicio anterior (ver figura 6.24). Utiliza ´ındices de refracci´on menores que 1 (esto es debido a la implementaci´on de la funci´on refract en GLSL). Para cada fragmento, haz que el color final sea un 15 % el valor del reflejo y un 85 % el de refracci´on. Utiliza la funci´on mix.

98 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

98

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 6.24: Ejemplos obtenidos utilizando refraction y reflection mapping en WebGL. El ´ındice de refracci´on es, de izquierda a derecha, de 0,95 y 0,99

Listado 6.11: Funci´on para crear la textura de mapa de cubo f u n c t i o n loadCubeMap ( ) { var t e x t u r e = gl . createTexture ( ) ; g l . a c t i v e T e x t u r e ( g l . TEXTURE0 ) ; g l . b i n d T e x t u r e ( g l . TEXTURE CUBE MAP , g l . t e x P a r a m e t e r i ( g l . TEXTURE CUBE MAP , g l . CLAMP TO EDGE ) ; g l . t e x P a r a m e t e r i ( g l . TEXTURE CUBE MAP , g l . CLAMP TO EDGE ) ; g l . t e x P a r a m e t e r i ( g l . TEXTURE CUBE MAP , g l . LINEAR ) ; g l . t e x P a r a m e t e r i ( g l . TEXTURE CUBE MAP , g l . LINEAR ) ; var f a c e s = [ [ ” posx . [ ” negx . [ ” posy . [ ” negy . [ ” posz . [ ” negz .

jpg ” jpg ” jpg ” jpg ” jpg ” jpg ”

, , , , , ,

gl gl gl gl gl gl

texture ) ; g l . TEXTURE WRAP S , g l . TEXTURE WRAP T , g l . TEXTURE MIN FILTER , g l . TEXTURE MAG FILTER ,

. TEXTURE CUBE MAP POSITIVE X ] , . TEXTURE CUBE MAP NEGATIVE X ] , . TEXTURE CUBE MAP POSITIVE Y ] , . TEXTURE CUBE MAP NEGATIVE Y ] , . TEXTURE CUBE MAP POSITIVE Z ] , . TEXTURE CUBE MAP NEGATIVE Z ] ] ;

f o r ( v a r i = 0 ; i < f a c e s . l e n g t h ; i ++) { var face = faces [ i ] [ 1 ] ; v a r image = new Image ( ) ; image . o n l o a d = f u n c t i o n ( t e x t u r e , f a c e , image ) { return f u n c t i o n ( ) { g l . texImage2D ( f a c e , 0 , g l . RGBA, g l . RGBA, g l . UNSIGNED BYTE , image ) ; } } ( t e x t u r e , f a c e , image ) ; image . s r c = f a c e s [ i ] [ 0 ] ; } p r o g r a m . t e x t u r e I n d e x = g l . g e t U n i f o r m L o c a t i o n ( program , ’ myTexture ’ ) ; g l . u n i f o r m 1 i ( program . t e x t u r e I n d e x , 0) ; }

99 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

99

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 7

Realismo visual Este cap´ıtulo presenta tres tareas b´asicas en la b´usqueda del realismo visual en im´agenes sint´eticas: transparencia, reflejos y sombras. En la literatura se han presentado numerosos m´etodos para cada una de ellas. Al igual que en cap´ıtulos anteriores, se van a presentar aquellos m´etodos que, aun siendo b´asicos, consiguen una mejora importante en la calidad visual con poco esfuerzo de programaci´on.

7.1.

Transparencia

Los objetos transparentes son muy habituales en el mundo que nos rodea. Suele ocurrir que estos objetos produzcan un efecto de refracci´on de la luz, o que la luz cambie alguna de sus propiedades al atravesarlos. Todo esto hace que la inclusi´on de objetos transparentes en un mundo virtual sea un problema complejo de resolver. En esta secci´on, se va a abordar el caso m´as sencillo, es decir, suponer que el objeto transparente es muy fino y no va a producir el efecto de refracci´on de la luz ni va a modificar las propiedades de las fuentes de luz. Quiz´a pueda parecer que se simplifica mucho el problema, lo cual es cierto, pero a´un as´ı la ganancia visual que se va a obtener es muy alta. Cuando una escena incluye un objeto transparente, el color de los p´ıxeles cubiertos por dicho objeto depende, adem´as de las propiedades del objeto transparente, de los objetos que hayan detr´as de e´ l. Un m´etodo sencillo para incluir objetos transparentes en nuestra escena consiste en dibujar primero todos los objetos que sean opacos y dibujar despu´es los objetos transparentes. El grado de transparencia se suministra al procesador gr´afico como una cuarta componente en las propiedades de material del objeto, conocida como componente alfa. Si alfa es 1, el objeto es totalmente opaco, y si es 0 significa que el objeto es totalmente transparente (ver imagen 7.1). As´ı, el color final se calcula a partir del color del framebuffer y del color del fragmento de esta manera: Cf inal = alf a · Cf ragmento + (1 − alf a) · Cf ramebuf f er

(7.1)

100

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

100

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 7.1: Tres ejemplos de transparencia con, de izquierda a derecha, alf a = 0,3, 0,5 y 0,7

Al dibujar un objeto transparente, el test de profundidad se tiene que realizar de igual manera que al dibujar un objeto opaco y as´ı asegurar que el problema de la visibilidad se resuelve correctamente. Sin embargo, ya que un objeto transparente deja ver a trav´es de e´ l, para cada uno de los fragmentos que supere el test deber´a actualizarse el buffer de color, pero no el de profundidad, ya que de hacerlo evitar´ıa que otros objetos transparentes situados detr´as fuesen visibles. El listado 7.1 recoge la secuencia de o´ rdenes de WebGL necesaria para poder incluir objetos transparentes en la escena. Listado 7.1: Secuencia de operaciones para dibujar objetos transparentes / / d i b u j a en p r i m e r l u g a r l o s o b j e t o s o p a c o s ... / / a c t i v a e l c a´ l c u l o de l a t r a n s p a r e n c i a g l . e n a b l e ( g l . BLEND) ; / / e s p e c i f i c a l a f u n c i o n de c a´ l c u l o g l . b l e n d F u n c ( g l . SRC ALPHA , g l . ONE MINUS SRC ALPHA ) ; / / i m p i d e l a a c t u a l i z a c i o´ n d e l b u f f e r de p r o f u n d i d a d g l . depthMask ( g l . FALSE ) ; / / dibuja los objetos transparentes ... / / i n h a b i l i t a la transparencia gl . disable ( g l . BLEND) ; / / p e r m i t e a c t u a l i z a r e l b u f f e r de p r o f u n d i d a d g l . depthMask ( g l . TRUE) ;

101 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

101

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


En el caso de que haya varios objetos transparentes y que estos se solapen en la proyecci´on, el color final en la zona solapada es diferente dependiendo del orden en el que se hayan dibujado (ver figura 7.2). En este caso, habr´ıa que dibujar los objetos transparentes de manera ordenada, pintando en primer lugar el m´as lejano y, en u´ ltimo lugar, el m´as cercano al observador. Sin embargo, en ocasiones la ordenaci´on no es trivial, como por ejemplo cuando un objeto atraviesa otro. En estos casos, una forma de evitar este problema es establecer la operaci´on de c´alculo de la transparencia como un incremento sobre el color acumulado en el framebuffer:

Cf inal = alf a · Cf ragmento + Cf ramebuf f er

(7.2)

Figura 7.2: Dos resultados diferentes en los que u´ nicamente se ha variado el orden en el dibujado de los objetos transparentes

En WebGL, esto se conigue especificando como funci´on de c´alculo gl.ONE en lugar de gl.ONE MINUS SRC ALPHA. De esta manera, el orden en el que se dibujen los objetos transparentes ya no influye en el color final de las zonas solapadas. Por contra, las zonas visibles a trav´es de los objetos transparentes son m´as brillantes que en el resto, produciendo una diferencia que en general resulta demasiado notable. Ejercicios  7.1 Observa los dos ejemplos de la figura 7.2 y contesta, ¿cu´al de las dos figuras te parece m´as correcta visualmente? ¿En qu´e orden crees que se han pintado los objetos transparentes que aparecen delante de cada esfera?

Hasta el momento se han utilizado pol´ıgonos individuales como objetos transparentes, lo que podr´ıa ser suficiente para simular por ejemplo una ventana. Pero, 102

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

102

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


¿qu´e ocurre si es un objeto m´as complejo en el que lo que se ve a trav´es de e´ l es a e´ l mismo? En esos casos, se debe prestar atenci´on especial al orden de dibujado. Dado un objeto transparente, una soluci´on muy sencilla consiste en dibujar primero las caras traseras del objeto (que dependen de la posici´on del observador) y despu´es las caras de delante del objeto. Por suerte, el procesador gr´afico implementa en su pipeline la eliminaci´on de caras de manera autom´atica. El programador debe habilitarlo (gl.enable(gl.CULL FACE)) e indicar si quiere eliminar las caras de la parte trasera (gl.cullFace(gl.BACK)) o de la delantera (gl.cullFace(gl.FRONT)). El listado 7.2 recoge la secuencia de o´ rdenes de WebGL necesaria para poder visualizar de manera correcta este tipo de objetos transparentes. Adem´as, suele ser conveniente aplicar la iluminaci´on por ambas caras, ya que la parte trasera ahora se ilumina gracias a la transparencia del propio objeto. La figura 7.2 muestra algunos resultados obtenidos con esta t´ecnica. Listado 7.2: Objetos transparentes / / Primero p i n t a l o s o b j e t o s opacos .... / / Despu 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) ; / / h a b i l i t a la transparencia g l . e n a b l e ( g l . CULL FACE ) ; / / habilita el face culling g l . depthMask ( f a l s e ) ; g l . c u l l F a c e ( g l . FRONT) ; / / s e e l i m i n a n l o s de 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 d i b u j a e l o b j e t o t r a n s p a r e n t e g l . c u l l F a c e ( g l . BACK) ; / / s e e l i m i n a n l o s de l a p a r t e t r a s e r a d r a w S o l i d ( exampleCube ) ; / / s e v u e l v e a d i b u j a r 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 ) ;

Figura 7.3: Ejemplo de objeto transparente con, de izquierda a derecha, alf a = 0, 3, 0, 5 y 0, 7

Ejercicios  7.2 Consulta la informaci´on del pipeline de WebGL y averigua en qu´e etapas tienen lugar las operaciones de face culling y blending.

103 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

103

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


 7.3 Ejecuta el programa c07/transparencia/transparencia.html. Comprueba que en el c´odigo figura todo lo necesario para dibujar el objeto de manera transparente. Observa la escena moviendo la c´amara y contesta, ¿crees que el objeto transparente se observa de forma correcta desde cualquier punto de vista? Si no es as´ı, ¿por qu´e crees que ocurre?

7.2.

Sombras

En el mundo real, si hay fuentes de luz, habr´a sombras. Sin embargo, en el mundo de la inform´atica g´rafica podemos crear escenarios con fuentes de luz y sin sombras. Por desgracia, la ausencia de sombras en la escena es algo que, adem´as de incidir negativamente en el realismo visual de la imagen sint´etica, dificulta de manera importante su comprensi´on, sobre todo en escenarios tridimensionales. Esto ha hecho que en la literatura encontremos mumerosos y muy diversos m´etodos que tratan de aportar soluciones. Por suerte, 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.

7.2.1.

Sombras proyectivas

Un m´etodo simple para el c´alculo de sombras sobre superficies planas es el conocido con el nombre de sombras proyectivas. 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 objeto sombra, es decir, el resultado de la proyecci´on, se dibuja como un objeto m´as de la escena, pero sin propiedades de material ni iluminaci´on, simplemente de color oscuro. Dada una fuente de luz L y un plano de proyecci´on N · x + d = 0, la matriz de proyecci´on M es la siguiente: 

 N · L + d − Lx N x −Lx Ny −Lx Nz −Lx d  N · L + d − Ly Ny −Ly Nz −Ly d −Ly Nx  M =  −Lz Nx −Lz Ny N · L + d − Lz Nz −Lz d −Ny −Nz N ·L −Nx (7.3) Por contra, este m´etodo presenta una serie de problemas: 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 al valor de profundidad de cada fragmento siempre y cuando se haya habilitado con gl.enable (gl.POLYGON OFFSET FILL). 104 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

104

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Hay que controlar que el objeto sombra no vaya m´as all´a de la superficie sobre la que recae. Al igual que en la representaci´on de reflejos, el buffer de plantilla se puede utilizar para asegurar el correcto dibujado de la escena. Las sombras son muy oscuras, pero utilizando transparencia se puede conseguir un resultado mucho m´as agradable, ya que deja entrever el plano sobre el que se asientan (ver figura 7.4). Muy complejo para superficies curvas o para representar las sombras que caen sobre el propio objeto.

Figura 7.4: Ejemplo de sombras proyectivas transparentes

7.2.2.

Shadow mapping

Si la escena se observa desde la posici´on donde se ubica la fuente de luz, lo que se consigue es ver justo lo que la fuente de luz ilumina, por lo tanto se cumple tambi´en que estar´a en sombra lo que la luz no ve. Este m´etodo se basa en dibujar primero la escena vista desde la fuente de luz con el objetivo de crear un mapa de profundidad y almacenarlo como textura. Despu´es, se dibuja la escena vista desde la posici´on del observador pero consultando la textura de profundidad para saber si un fragmento est´a en sombra y pintarlo de manera acorde. Para obtener dicho mapa de profundidad con WebGL, es necesario dibujar la escena contra un framebuffer object (FBO). El procesador gr´afico puede dibujar en un FBO diferente del creado por defecto, y en ese caso su contenido no es visible al usuario. Tras crear el FBO, se dibuja la escena y en el shader de fragmentos se establece como color final del fragmento su valor de profundidad (ver imagen de la izquierda en la figura 7.5): gl FragColor = vec4(vec3(gl FragCoord.z),1.0); El contenido del FBO se almacena como un objeto textura de manera que pueda ser consultado m´as tarde. Al dibujar la escena vista desde la posici´on del observador, cada v´ertice del modelo se ha de operar tambi´en con la matriz de transformaci´on de la c´amara situada en la fuente de luz. De esta manera, para cada fragmento se puede comparar su profundidad con la almacenada en la textura y saber si el 105 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

105

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


fragmento est´a en sombra o no. La figura 7.5 muestra un ejemplo de esta t´ecnica, donde se puede observar el mapa de profundidad obtenido desde la posici´on de la fuente de luz y la vista con sombras desde la posici´on de la c´amara.

Figura 7.5: Ejemplo de shadow mapping. A la izquierda se observa el mapa de profunidad obtenido desde la fuente de luz; a la derecha se muestra la escena con sus sombras

Ejercicios  7.4 Ejecuta el programa c07/sombras/sombras.html. Observa la escena mientras mueves la c´amara y contesta, ¿detectas alg´un tipo de problema en el dibujado de las sombras?, ¿a qu´e crees que se debe? Modifica el c´odigo para que la dimensi´on de la textura de profundidad sea de un tama˜no mucho m´as peque˜no, ¿qu´e ocurre ahora?, ¿por qu´e?

7.3.

Reflejos

Los objetos reflejantes, al igual que los transparentes, son tambi´en muy habituales en cualquier escenario. Es f´acil encontrar desde espejos puros a objetos que, por sus propiedades de material y tambi´en de su proceso de fabricaci´on, como el m´armol por ejemplo, reflejan la luz y act´uan como espejos. Sin embargo, el c´alculo del reflejo es realmente complejo, por lo que se han desarrollado m´etodos alternativos, consiguiendo muy buenos resultados visuales. Esta secci´on muestra c´omo a˜nadir superficies planas reflejantes a nuestra escena (ver figura 7.6). El m´etodo consiste en dibujar la escena de forma sim´etrica respecto al plano que contiene el objeto reflejante (el objeto en el que se vaya a observar el reflejo). Hay dos tareas principales: la primera es obtener la transformaci´on de simetr´ıa; la segunda es evitar que la escena sim´etrica se observe fuera de los l´ımites del objeto reflejante. Para dibujar la escena sim´etrica respecto a un plano, hay que trasladar el plano al origen, girarlo para hacerlo coincidir con, por ejemplo, el plano Z = 0, escalar con un factor de −1 en la direcci´on Z y deshacer el giro y la traslaci´on. Dado un punto P del objeto plano reflejante y un vector V perpendicular al plano, la matriz de trasformaci´on M es la siguiente: 106 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

106

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 7.6: Ejemplo de objeto reflejado en una superficie plana

  1 − 2Vx2 −2Vx Vy −2Vx Vz 2(P · V )Vx  −2Vx Vy 1 − 2Vy2 −2Vy Vz 2(P · V )Vy   M =  −2Vx Vz −2Vy Vz 1 − 2Vz2 2(P · V )Vz  0 0 0 1

(7.4)

Para la segunda tarea, la de no dibujar fuera de los l´ımites del objeto reflejante (ver figuras 7.7 y 7.8), hay varios m´etodos. Uno de ellos consiste en utilizar el buffer de plantilla de la siguiente forma. En primer lugar se dibuja el objeto reflejante habiendo previamente deshabilitado los buffers de color y de profundidad, y tambi´en habiendo configurado el buffer de plantilla, para que se pongan a 1 los p´ıxeles de dicho buffer que correspondan con la proyecci´on del objeto. Despu´es, se habilitan los buffers de profundidad y de color y se configura el buffer de plantilla para rechazar los p´ıxeles que en el buffer de plantilla no est´en a 1. Entonces se dibuja la escena sim´etrica. Despu´es se deshabilita el buffer de plantilla y se dibuja la escena normal. Por u´ ltimo, de manera opcional, hay que dibujar el objeto reflejante utilizando transparencia. El listado 7.3 muestra c´omo se realizan estos pasos con WebGL. El ejemplo c07/reflejos/reflejos.html recoge todas las operaciones descritas, produciendo im´agenes como la de la figura 7.8.

107 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

107

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 7.7: Al dibujar la escena sim´etrica es posible observarla fuera de los l´ımites del objeto reflejante (izquierda). El buffer de plantilla se puede utilizar para resolver el problema (derecha)

Figura 7.8: Ejemplo de reflejo plano

108

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

108

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 7.3: Secuencia de operaciones para dibujar objetos reflejantes g l . c l e a r ( g l . COLOR BUFFER BIT | g l . DEPTH BUFFER BIT | g l . STENCIL BUFFER BIT ) ; / / D e s a c t i v a l o s b u f f e r s de c o l o r y p r o f u n d i d a d g l . d i s a b l e ( g l . DEPTH TEST ) ; gl . colorMask ( f a l s e , f a l s e , f a l s e , f a l s e ) ; // gl gl gl

E s t a b l e c e como v a l o r de r e f e r e n c i a e l 1 . e n a b l e ( g l . STENCIL TEST ) ; . s t e n c i l O p ( g l . REPLACE , g l . REPLACE , g l . REPLACE ) ; . s t e n c i l F u n c ( g l .ALWAYS, 1 , 0 xFFFFFFFF ) ;

/ / Dibuja e l o b j e t o r e f l e j a n t e ... / / A c t i v a de n u e v o l o s b u f f e r s de p r o f u n d i d a d y de c o l o r g l . e n a b l e ( g l . DEPTH TEST ) ; gl . colorMask ( true , true , true , t r u e ) ; / / C o n f i g u r a e l b u f f e r de p l a n t i l l a g l . s t e n c i l O p ( g l . KEEP , g l . KEEP , g l . KEEP ) ; g l . s t e n c i l F u n c ( g l . EQUAL, 1 , 0 xFFFFFFFF ) ; / / Dibuja la escena r e f l e j a d a ... / / D e s a c t i v a e l t e s t de p l a n t i l l a g l . d i s a b l e ( g l . STENCIL TEST ) ; / / Dibuja l a escena normal ... / / D i b u j a e l o b j e t o r e f l e j a n t e con t r a n s p a r e n c i a ...

109

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

109

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 8

Texturas procedurales Una textura procedural se caracteriza porque la informaci´on propia de la textura la genera un procedimiento en tiempo de ejecuci´on, ss decir, la textura no se encuentra previamente almacenada, tal y como se explic´o en el cap´ıtulo 6. Ahora, existe una funci´on que implementa la textura y a esta funci´on se le llama desde el shader para, a partir de unas coordenadas de textura, computar y devolver un valor. La funci´on puede devolver tanto un valor de color como cualquier otro valor que se pueda utilizar para determinar el aspecto final del modelo (ver figura 8.1). Sin duda, el uso de texturas procedurales es una de las grandes ventajas que ofrecen los actuales procesadores gr´aficos programables.

Figura 8.1: Ejemplo de objeto dibujado con una textura procedural. En este caso, el valor devuelto por la funci´on de textura se utiliza para determinar si hay que eliminar un determinado fragmento

Son varias las ventajas que ofrece el uso de las texturas procedurales. Por ejemplo, una textura procedural, en general, va a consumir menos memoria, ya que al no estar discretizada no presenta los problemas derivados de tener una resoluci´on fija y cualquier aspecto clave de la textura se puede parametrizar para obtener efectos muy diversos utilizando la misma funci´on. Por ejemplo, las copas de la figura 8.1 se han obtenido utilizando exactamente la misma textura procedural, pero para cada una se han asignado valores diferentes a las variables que gobiernan el n´umero y tama˜no de los agujeros. Tambi´en es cierto que no todo son ventajas. Por ejemplo, computacionalmente son m´as caras y los algoritmos que hay que implementar a veces son muy com110

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

110

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


plejos, incluso tambi´en podr´ıa ocurrir que los resultados fueran diferentes seg´un el procesador gr´afico que se utilice. En definitiva, combinar texturas basadas en im´agenes junto con texturas procedurales ser´a casi siempre lo ideal. Por ejemplo, para una pelota de golf como la de la figura 8.2 se pueden utlizar im´agenes para el logo, manchas o ara˜nazos, y una funci´on procedural para los hoyuelos.

Figura 8.2: Ejemplo de combinaci´on de texturas 2D y textura procedural

8.1.

Rayado

El objetivo de este tipo de textura procedural es mostrar un rayado sobre la superficie del objeto (ver figura 8.3). Se utiliza una coordenada de textura y el rayado que se obtiene siempre ser´a en la direcci´on de la coordenada elegida. Se aplica un factor de escala sobre la coordenada de textura para establecer el n´umero de rayas. La parte real de la coordenada de textura se compara con una variable que controla el ancho de la raya para saber si el fragmento se ha de colorear con el color de la raya o con el del material del modelo. El listado 8.1 muestra estas operaciones. Ejercicios  8.1 Ejecuta el ejemplo c08/rayado/rayado.html. Prueba a modificar los par´ametros que gobiernan el rayado. Ahora, ed´ıtalo y prueba a utilizar la otra coordenada de textura.

Figura 8.3: Ejemplos del shader de rayado

111 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

111

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 8.1: Shader de rayado / / S h a d e r de v e´ r t i c e s ... v a r y i n g f l o a t TexCoord ; v o i d main ( ) { ... TexCoord = V e r t e x T e x c o o r d s . t ; } / / S h a d e r de ... uniform v e c 3 uniform f l o a t uniform f l o a t

fragmentos StripeColor ; Scale ; Width ;

/ / c o l o r de l a r a y a / / n u´ mero de r a y a s / / ancho de l a r a y a

v a r y i n g f l o a t TexCoord ; v o i d main ( ) { float scaledT float s vec3 newKd ... gl FragColor

= f r a c t ( TexCoord ∗ S c a l e ) ; = s t e p ( Width , s c a l e d T ) ; = mix ( S t r i p e C o l o r , Kd , s ) ; = v e c 4 ( phong ( newKd , N, L , V) , 1 . 0 ) ;

}

8.2.

Damas

Este tipo de textura procedural consiste en presentar la superficie de un objeto como la del tablero del juego de las damas (ver figura 8.4). Se utiliza un factor de escala sobre las coordenadas de textura para establecer el n´umero de cuadrados, en principio el mismo en ambas direcciones. La parte entera de las coordenadas de textura escaladas se utiliza para saber a qu´e fila y columna pertenece cada fragmento. Sumando ambas y obteniendo el m´odulo dos se averigua si el resultado es par o impar y, en consecuencia, se sabe si el fragmento pertenece a una casilla blanca o negra. El listado 8.2 recoge los cambios necesarios. Ejercicios  8.2 Ejecuta el ejemplo c08/damas/damas.html. Prueba a modificar el par´ametro que gobierna el n´umero de cuadrados. Ahora, edita el c´odigo y modif´ıcalo para que se pueda establecer un n´umero diferente de cuadrados en cada direcci´on.

112 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

112

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 8.4: Ejemplos del shader de damas

Listado 8.2: Shader de damas / / S h a d e r de v e´ r t i c e s ... v a r y i n g v e c 2 TexCoord ; v o i d main ( ) { ... TexCoord = V e r t e x T e x c o o r d s ; } / / S h a d e r de f r a g m e n t o s ... uniform f l o a t S c a l e ; / / n u´ mero de c u a d r a d o s v a r y i n g v e c 2 TexCoord ; v o i d main ( ) { f l o a t row = f l o o r ( TexCoord . s ∗ S c a l e ) ; f l o a t c o l = f l o o r ( TexCoord . t ∗ S c a l e ) ; float res = mod ( row + c o l , 2 . 0 ) ; v e c 3 newKd = Kd + ( r e s ∗ 0 . 4 ) ; ... g l F r a g C o l o r = v e c 4 ( phong ( newKd , N, L , V) , 1 . 0 ) ; }

8.3.

Enrejado

El enrejado consiste en utilizar la orden discard para eliminar fragmentos, produciendo en consecuencia agujeros en la superficie del objeto (ver figuras 8.5 y 8.1). Las coordenadas de textura se escalan para determinar el n´umero de agujeros, utilizando un factor de escala distinto para cada direcci´on. La parte real se utiliza para controlar el tama˜no del agujero. El listado 8.3 recoge los cambios necesarios. 113 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

113

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 8.5: Ejemplos del shader de enrejado

Listado 8.3: Shader de enrejado / / S h a d e r de v e´ r t i c e s ... v a r y i n g v e c 2 TexCoord ; v o i d main ( ) { ... TexCoord = V e r t e x T e x c o o r d s ; } / / S h a d e r de f r a g m e n t o s ... uniform v e c 2 S c a l e ; uniform v e c 2 T h r e s h o l d ; v a r y i n g v e c 2 TexCoord ; v o i d main ( ) { f l o a t s s = f r a c t ( TexCoord . s ∗ S c a l e . s ) ; f l o a t t t = f r a c t ( TexCoord . t ∗ S c a l e . t ) ; i f ( ( s s > T h r e s h o l d . s ) && ( t t > T h r e s h o l d . t ) ) discard ; ... g l F r a g C o l o r = v e c 4 ( phong (N, L , V) , 1 . 0 ) ; }

Ejercicios  8.3 Ejecuta el ejemplo c08/enrejado/enrejado.html. Prueba a modificar los par´ametros que gobiernan el n´umero de agujeros y su tama˜no. Ahora, edita el c´odigo y modif´ıcalo para que se eliminen los fragmentos que no pertenecen a la superficie de un c´ırculo. F´ıjate en los resultados que se muestran en las im´agenes de la figura 8.6.

114 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

114

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 8.6: Ejemplos de enrejados circulares

8.4.

Ruido

En t´erminos generales, el uso de ruido en inform´atica gr´afica resulta muy u´ til para simular efectos atmosf´ericos, materiales o simplemente imperfecciones en los objetos. La figura 8.7 muestra algunos ejemplos en los que se ha utilizado una funci´on de ruido como m´etodo de textura procedural. A diferencia de otras a´ reas, la funci´on de ruido que nos interesa ha de ser repetible, es decir, que produzca siempre la misma salida para el mismo valor de entrada y que al mismo tiempo aparente aleatoriedad, es decir, que no muestre patrones regulares.

Figura 8.7: Ejemplos obtenidos utilizando una funci´on de ruido como textura procedural

El uso de ruido en WebGL se puede realizar de tres maneras. Una es utilizar la familia de funciones noise de GLSL. Por desgracia, algunos fabricantes de hardware gr´afico no implementan las funciones noise. Otra manera es implementar la funci´on de ruido en un programa externo, ejecutarlo y almacenar el resultado para proporcionarlo en forma de textura al procesador gr´afico, pero en este caso ya no podemos hablar de textura procedural. Por u´ ltimo, est´a la alternativa de implementar una funci´on de ruido propia en el shader. Por ejemplo, las figuras 8.8 y 8.9 muestran diversos ejemplos de objetos en los que se ha utilizado una funci´on de ruido de Perlin en el shader de fragmentos para a partir de la posici´on interpolada de cada fragmento, obtener un valor de ruido y combinarlo de diferentes formas con los valores de material. 115 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

115

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Ejercicios  8.4 Ejecuta los ejemplos c08/ruido/nubes.html y c08/ruido/sol.html. Prueba a modificar los par´ametros que gobiernan el aspecto final de los modelos. Ahora, edita el c´odigo y prueba a realizar modificaciones a partir de los valores de ruido obtenidos, seguro que consigues resultados interesantes.

Figura 8.8: Objetos que hacen uso de una funci´on de ruido para colorear su superficie

Figura 8.9: Ejemplos obtenidos con la funci´on de ruido de Perlin

116 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

116

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 9

Interacci´on y animaci´on con shaders Este cap´ıtulo junta t´ecnicas de interacci´on con m´etodos b´asicos de animaci´on con shaders. Es un cap´ıtulo de ´ındole muy pr´actica que se acompa˜na de ejemplos que complementan los m´etodos explicados.

9.1.

Selecci´on

En una aplicaci´on interactiva es f´acil que el usuario pueda se˜nalar objetos de la escena y que, por tanto, la aplicaci´on necesite saber de qu´e objeto se trata. Habitualmente, el usuario utiliza el rat´on para mover el puntero y mediante el bot´on izquierdo realiza la selecci´on al presionarlo, pero tambi´en puede hacerlo con el dedo en el caso de utilizar dispositivos m´oviles con pantalla t´actil. En cualquier caso, como resultado de la interacci´on se produce un evento que es necesario atender para averiguar las coordenadas del p´ıxel sobre el que se hizo el clic. El m´etodo que se propone parte de ese evento averigua las coordenadas de dicho p´ıxel y borra el canvas para pintar cada objeto seleccionable de un color diferente y plano. De esta manera, si ahora se accede al canvas en las coordenadas elegidas, se puede averiguar el color del p´ıxel correspondiente, y sabiendo el color se sabe a qu´e objeto pertenece. Ya solo queda borrar el canvas y pintar la escena que se ha de mostrar al usuario. Para averiguar las coordenadas del p´ıxel seleccionado hay que tener en cuenta que el origen de coordenadas en el navegador est´a en la esquina superior izquierda de la p´agina. Por lo tanto, al hacer el clic, el manejador de eventos nos proporciona las coordenadas respecto a dicho origen. Sin embargo, lo que necesitamos conocer son las coordenadas respecto al origen de WebGL que se corresponde con la esquina inferior izquierda del canvas. El listado 9.1 muestra c´omo obtener las coordendas correctas para ser utilizadas en WebGL. Tras el clic producido por el usuario, hay que dibujar la escena utilizando colores planos, tal y como se muestra en la figura 9.1(a). Por supuesto, este resultado 117

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

117

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 9.1: Conversi´on de coordenadas para ser utilizadas en WebGL rectangle = event . t a r g e t . getBoundingClientRect () ; x in canvas = ( event . clientX − rectangle . l e f t ) ; y i n c a n v a s = ( r e c t a n g l e . bottom − event . c l i e n t Y ) ;

intermedio no se hace visible al usuario, simplemente se dibuja para despu´es acceder al framebuffer y conocer el color del p´ıxel. El listado 9.2 muestra la operaci´on de acceso al color de un p´ıxel que se realiza mediante la funci´on gl.readPixels. La variable pixels contendr´a en consecuencia el valor de color buscado. Despu´es, ya solo resta comparar el valor le´ıdo con los utilizados al dibujar los objetos, borrar el framebuffer con la orden gl.clear y dibujar la escena, esta vez con las t´ecnicas habituales, ya que este nuevo dibujado s´ı que ser´a el que finalmente termine mostr´andose al usuario.

(a) Colores planos

(b) Aspecto final

Figura 9.1: Las dos escenas pintadas para la selecci´on de objetos

Listado 9.2: Acceso al color de un p´ıxel en el framebuffer v a r p i x e l s = new U i n t 8 A r r a y ( 4 ) ; g l . r e a d P i x e l s ( x i n c a n v a s , y i n c a n v a s , 1 , 1 , g l . RGBA, g l . UNSIGNED BYTE , p i x e l s ) ;

Ejercicios  9.1 Ejecuta el ejemplo c09/seleccion/seleccion.html que implementa el m´etodo de selecci´on descrito en esta secci´on. Comprueba su funcionamiento. Examina la atenci´on del evento, la obtenci´on de las coordenadas del p´ıxel seleccionado y c´omo se determina la primitiva seleccionada en base al color le´ıdo. Prueba a a˜nadir un objeto m´as a la escena, por ejemplo una esfera de color azul, y que este sea tambi´en seleccionable.

118

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

118

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


9.1.1.

Utiliza un FBO

El m´etodo anterior dibuja la escena de colores planos para averiguar el objeto seleccionado a partir del momento en que el usuario realiza la selecci´on. Si la escena muestra objetos est´aticos, esto no entra˜na mayor problema. Sin embargo, si los objetos seleccionables est´an animados, puede ocurrir que la selecci´on del usuario y lo le´ıdo en el framebuffer no coincida debido al paso del tiempo y la correspondiente actualizaci´on de los objetos de la escena. Una manera de evitarlo es tener la escena de colores planos almacenada, de manera que al realizar el clic sea posible realizar la consulta sobre la escena que se est´a mostrando al usuario y no sobre una nueva. Esto se puede conseguir utilizando un nuevo objeto framebuffer (FBO) para dibujar en e´ l la escena con colores planos. La condici´on es que este FBO almacene color y profundidad y que tenga el mismo tama˜no que el canvas. Cuando el usuario realiza la selecci´on, el FBO ya contiene la imagen dibujada, puesto que en e´ l se ha dibujado la misma escena que el usuario est´a viendo, solo que con colores planos. De esta manera, lo que se consigue es poder realizar la consulta sobre lo ya dibujado. El listado 9.3 muestra la operaci´on de acceso al color de un p´ıxel. Se puede observar que la u´ nica variaci´on es que antes de llamar a la funci´on gl.readPixels se activa el FBO creado a pr´oposito y despu´es se vuelve a establecer el framebuffer por defecto. Listado 9.3: Acceso al color de un p´ıxel en el FBO g l . b i n d F r a m e b u f f e r ( g l . FRAMEBUFFER, myFbo ) ; / / s e l e c c i o n a e l FBO v a r p i x e l s = new U i n t 8 A r r a y ( 4 ) ; g l . r e a d P i x e l s ( x i n c a n v a s , y i n c a n v a s , 1 , 1 , g l . RGBA, g l . UNSIGNED BYTE , p i x e l s ) ; g l . b i n d F r a m e b u f f e r ( g l . FRAMEBUFFER, n u l l ) ; / / f r a m e b u f f e r n o r m a l

Ejercicios  9.2 Ejecuta el ejemplo c09/seleccion/seleccionFbo.html que implementa el m´etodo de selecci´on que utiliza un objeto framebuffer. Comprueba su funcionamiento. Examina c´omo se determina la primitiva seleccionada en base al color le´ıdo a partir de la escena ya dibujada. ¿De qu´e tama˜no es el FBO?, ¿y el canvas?, ¿qu´e ocurrir´ıa si no coincidiesen ambos tama˜nos?

9.2.

Animaci´on

Realizar animaci´on a trav´es de shaders puede resultar muy sencillo. Solo necesitamos una variable uniforme en el shader y que esta se actualice desde la aplicaci´on con el paso del tiempo. En el shader se utilizar´a dicha variable para modificar cualquiera de las propiedades de los objetos. 119 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

119

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Por ejemplo, si se modifica el valor alfa que controla la opacidad de un objeto, podemos conseguir que este aparezca o se desvanezca de forma gradual; tambi´en modificar par´ametros de las fuentes de luz haciendo que, por ejemplo, la intensidad de la luz aumente o decaiga de forma gradual o que los objetos cambien su color. Por supuesto, tambi´en podemos modificar la matriz de transformaci´on del modelo cambiando la posici´on, el tama˜no o la orientaci´on de alg´un objeto de la escena o, por qu´e no, a˜nadir dos materiales a un objeto y hacer que un objeto cambie de material con una simple interpolaci´on lineal.

9.2.1.

Eventos de tiempo

JAVASCRIPT proporciona una orden para especificar que una determinada funci´on sea ejecutada transcurrido un cierto tiempo. La disponibilidad de una funci´on de este tipo es fundamental para actualizar la variable del shader que se utiliza para generar la animaci´on. La funci´on es la siguiente: myVar = setTimeout(updateStuff, 40); El valor num´erico indica el n´umero de milisegundos que han de transcurrir para que se llame a la funci´on updateStuff. Una vez transcurrido dicho tiempo, esa funci´on se ejecutar´a lo antes posible. Si se desea que la funci´on se ejecute otra vez al cabo de un nuevo periodo de tiempo, ella misma puede establecerlo llamando a la funci´on setTimeout antes de finalizar. Otra alternativa es utilizar la siguiente orden, que produce la ejecuci´on de updateStuff cada 40 ms: myVar = setInterval(updateStuff, 40); Si por contra lo que se desea es que se suspenda la ejecuci´on: clearInterval(myVar);

9.2.2.

Encendido / apagado

Un efecto muy simple de animaci´on consiste en que una propiedad tome dos valores diferentes que van altern´andose a lo largo del tiempo, como podr´ıan ser la simulaci´on del parpadeo de una luz al encenderse o el mal funcionamiento de un tubo fluorescente. En el shader necesitamos una variable para indicar el estado, es decir, si encendido o apagado (variable modeOnOff en el listado 9.4). En la aplicaci´on es habitual que dicha variable est´e gobernada por un simple proceso aleatorio. Por ejemplo, la funci´on setFlickering en el listado 9.5 recibe un valor como par´ametro que se compara con un n´umero aleatorio. De esta manera, se puede controlar la preferencia hacia uno de los dos estados posibles.

120 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

120

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 9.4: Shader para encendido / apagado / / S h a d e r de f r a g m e n t o s ... uniform b o o l modeOnOff ; / / a l m a c e n a e l e s t a d o ... v o i d main ( ) { ... g l F r a g C o l o r = ( modeOnOff == f a l s e ) ? v e c 4 ( phong ( n , L , V) , 1 . 0 ) : v e c 4 ( M a t e r i a l . Ka , 1.0) ; }

Listado 9.5: Funci´on que controla el encendido / apagado function s e t F l i c k e r i n g ( value ) { i f ( Math . random ( )> v a l u e ) / / Math . random en [ 0 . . 1 ] g l . u n i f o r m 1 i ( p r o g r a m . ModeOnOffIndex , f a l s e ) ; else g l . u n i f o r m 1 i ( p r o g r a m . ModeOnOffIndex , t r u e ) ; }

Ejercicios  9.3 Ejecuta el ejemplo c09/animacion/onOff.html que implementa el m´etodo de animaci´on de encendido / apagado. Comprueba su funcionamiento. Examina c´omo se establece un valor diferente de parpadeo para cada primitiva, de manera que algunas se ven m´as tiempo encendidas y otras m´as tiempo apagadas. Realiza las modificaciones necesarias para que, en lugar de encendido / apagado, sea encendido / sobreiluminado.

9.2.3.

Texturas

Modificar las coordenadas de textura con el tiempo es algo sencillo y de lo que se pueden obtener resultados muy interesantes. Por ejemplo, en el caso de ser una textura 2D, se podr´ıa simular un panel publicitario rotativo. En el caso de utilizar una textura procedural, por ejemplo el shader de nubes utilizado en el ejemplo c08/ruido/nubes.html, modificar las coordenadas de textura permite que su aspecto cambie suavemente con el tiempo. En cualquier caso, solo es necesario utilizar una variable que se incremente con el paso del tiempo (ver listado 9.6) y que a su vez se utilice para incrementar las coordenadas de textura en el shader, como se muestra en el listado 9.7. De esta manera, a cada instante de tiempo las coordenadas de textura de cada v´ertice son diferentes, produci´endose el efecto de animaci´on. 121

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

121

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 9.6: Funci´on que actualiza el desplazamiento de la textura con el tiempo var texCoordsOffset = 0.0 , Velocity = 0.01; function updateTexCoordsOffset ( ) { t e x C o o r d s O f f s e t += V e l o c i t y ; g l . u n i f o r m 1 f ( program . t e x C o o r d s O f f s e t I n d e x , t e x C o o r d s O f f s e t ) ; requestAnimationFrame ( drawScene ) ; } f u n c t i o n initWebGL ( ) { ... s e t I n t e r v a l ( updateTexCoordsOffset ,40) ; ... }

Listado 9.7: Shader para actualizar las coordenadas de textura con el tiempo / / S h a d e r de f r a g m e n t o s ... uniform f l o a t t e x C o o r d s O f f s e t ; ... v o i d main ( ) { ... v e c 2 newTexCoords = t e x C o o r d s ; newTexCoords . s += t e x C o o r d s O f f s e t ; gl FragColor = t e x t u r e 2 D ( myTexture , newTexCoords ) ; ... }

Ejercicios  9.4 Ejecuta el ejemplo c09/animacion/nubes.html que implementa el m´etodo de animaci´on basado en modificar las coordenadas de textura con el tiempo. Comprueba su funcionamiento. Examina c´omo se modifican las coordenadas de textura para acceder a la funci´on de ruido. Ahora ponlo en pr´actica. Parte del ejemplo c06/texturas2D.html y modif´ıcalo para que la textura se desplace sobre la superficie de las primitivas con el paso del tiempo.

9.2.4.

Desplazamiento

En la secci´on 6.3.2 se explic´o el m´etodo que permite utilizar una textura como mapa de desplazamiento para que en tiempo de ejecuci´on cada v´ertice se desplace a partir del valor le´ıdo del mapa. Ahora, lo que se persigue es animar la geometr´ıa, 122

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

122

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


haciendo que el desplazamiento de cada v´ertice no sea siempre el mismo, sino que cambie con el tiempo. La figura 9.2(a) muestra dos ejemplos en los que en el shader de v´ertices se ha utilizado la funci´on seno con diferente amplitud de onda para calcular el desplazamiento en funci´on del tiempo transcurrido. En la figura 9.2(b) se muestra el resultado de utilizar una funci´on de ruido para determinar el desplazamiento. El valor de tiempo se utiliza como par´ametro de entrada de la funci´on de ruido, obteni´endose el efecto de una bandera al viento. El ejemplo c09/animacion/vd.html implementa este m´etodo de animaci´on. Ejec´utalo y experimenta con e´ l para comprenderlo mejor.

(a) Desplazamiento producido por la funci´on seno

(b) Desplazamiento producido por la funci´on de ruido Figura 9.2: Objetos animados con la t´ecnica de desplazamiento

9.3.

Sistemas de part´ıculas

Los sistemas de part´ıculas son una t´ecnica de modelado para objetos que no tienen una frontera bien definida como, por ejemplo, humo, fuego o un espray. Estos objetos son din´amicos y se representan mediante una nube de part´ıculas que, en lugar de definir una superficie, definen un volumen. Cada part´ıcula nace, vive y muere de manera independiente. En su periodo de vida, una part´ıcula cambia de posici´on y de aspecto. Atributos como posici´on, color, transparencia, velocidad, tama˜no, forma o tiempo de vida se utilizan para definir una part´ıcula. Durante la ejecuci´on de un sistema de part´ıculas, cada una de ellas se debe actualizar a partir de sus atributos y de un valor de tiempo global. 123 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

123

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Las figuras 9.3 y 9.4 muestran ejemplos de un sistema en el que cada part´ıcula es un cuadrado y pretenden modelar respectivamente un mosaico y peque˜nas banderas en un escenario deportivo. En ambos casos, a cada part´ıcula se le asigna un instante de nacimiento aleatorio de manera que las piezas del mosaico, o las banderas, aparecen en instantes de tiempo diferentes. Mientras est´an vivas, para cada part´ıcula se accede a una textura de ruido utilizando la variable que representa el paso del tiempo y as´ı no acceder siempre al mismo valor de la textura con el fin de actualizar su posici´on. A cada part´ıcula tambi´en se le asigna de forma aleatoria un valor de tiempo final que representa el instante en que la part´ıcula debe desaparecer.

Figura 9.3: Animaci´on de un mosaico implementado como sistema de part´ıculas

Figura 9.4: Animaci´on de banderas implementada como sistema de part´ıculas

Todas las part´ıculas, junto con sus atributos, pueden ser almacenadas en un buffer object. De esta manera, en el shader de v´ertices se determina el estado de la part´ıcula, es decir, si a´un no ha nacido, si est´a viva o si por el contrario ya ha muerto. En el caso de estar viva, es en dicho shader donde se implementa su comportamiento. Por lo tanto, la visualizaci´on de un sistema de part´ıculas se realiza totalmente en el procesador gr´afico sin carga alguna para la CPU. Para simplificar el dibujado de un sistema de part´ıculas se asume que las part´ıculas no colisionan entre s´ı, no reflejan luz y no producen sombras sobre otras part´ıculas. Un ejemplo de creaci´on de un sistema de part´ıculas se muestra en el listado 9.8. En concreto se crean diez mil part´ıculas; a cada part´ıcula se le asigna una velocidad y una posici´on a lo largo del eje X, ambas aleatorias, y un valor de nacimiento. Esta informaci´on se almacena en el vector particlesInfo, el cual se transfiere a un buffer object.

124 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

124

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 9.8: Cortina de part´ıculas var numParticles

= 10000;

function initParticleSystem () { var p a r t i c l e s I n f o = [ ] ; f o r ( v a r i = 0 ; i < n u m P a r t i c l e s ; i ++) { / / velocidad var alpha = Math . random ( ) ; var v e l o c i t y = (0.1 ∗ alpha ) + (0.5 ∗ (1.0 − alpha ) ) ; // var var var

p o s i c i o´ n x = Math . random ( ) ; y = velocity ; z = 0.0;

particlesInfo particlesInfo particlesInfo particlesInfo }

[i [i [i [i

∗ ∗ ∗ ∗

4 4 4 4

+ + + +

0] 1] 2] 3]

= = = =

x; y; z; i ∗ 0.00075; / / nacimiento

program . i d B u f f e r V e r t i c e s = g l . c r e a t e B u f f e r ( ) ; g l . b i n d B u f f e r ( g l . ARRAY BUFFER , p r o g r a m . i d B u f f e r V e r t i c e s ) ; g l . b u f f e r D a t a ( g l . ARRAY BUFFER , new F l o a t 3 2 A r r a y ( p a r t i c l e s D a t a ) , g l . STATIC DRAW ) ; }

El listado 9.9 muestra c´omo se ordena el dibujado del sistema de part´ıculas. En este ejemplo, cada part´ıcula consta de dos atributos, posici´on e instante de nacimiento, y el sistema se dibuja como una colecci´on de puntos. Listado 9.9: Dibujado del sistema de part´ıculas function drawParticleSystem () { g l . b i n d B u f f e r ( g l . ARRAY BUFFER , p r o g r a m . i d B u f f e r V e r t i c e s ) ; g l . v e r t e x A t t r i b P o i n t e r ( program . v e r t e x P o s i t i o n A t t r i b u t e , 3 , g l . FLOAT , f a l s e , 4 ∗ 4 , 0) ; g l . v e r t e x A t t r i b P o i n t e r ( program . v e r t e x S t a r t A t t r i b u t e , 1 , g l . FLOAT , f a l s e , 4 ∗ 4 , 3∗4) ; g l . d r a w A r r a y s ( g l . POINTS , 0 , n u m P a r t i c l e s ) ; }

Por u´ tltimo, en el shader de v´ertices se comprueba si la part´ıcula ha nacido y, si es as´ı, se calcula su posici´on a partir del valor de posici´on X y el valor de velocidad almacenado en la posici´on Y , junto con el valor del tiempo transcurrido. El listado 9.10 muestra este u´ ltimo paso. La figura 9.5 muestra dos ejemplos en los que u´ ni125 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

125

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


camente cambia el tama˜no del punto. El ejemplo c09/animacion/particulas.html implementa este m´etodo de animaci´on. Ejec´utalo y experimenta con e´ l para comprenderlo mejor. Listado 9.10: Shader de v´ertices para el sistema de part´ıculas ... a t t r i b u t e vec3 V e r t e x P o s i t i o n ; attribute float VertexStart ; v o i d main ( )

{

vec3 pos = vec3 ( 0 . 0 ) ; i f ( Time > V e r t e x S t a r t ) { / / s i ha n a c i d o f l o a t t = Time − V e r t e x S t a r t ; if ( t < 2.0) { / / s i a u´ n v i v e pos . x = V e r t e x P o s i t i o n . x ; pos . y = V e r t e x P o s i t i o n . y ∗ t ; alpha = 1.0 − t / 2.0; } } v e c 4 e c P o s i t i o n = m o d e l V i e w M a t r i x ∗ v e c 4 ( pos , 1 . 0 ) ; gl Position gl PointSize

= projectionMatrix ∗ ecPosition ; = 6.0;

}

Figura 9.5: Ejemplo de sistema de part´ıculas dibujado con tama˜nos de punto diferentes

126 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

126

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Cap´ıtulo 10

Proceso de im´agenes Desde sus or´ıgenes, OpenGL ha tenido en cuenta en el dise˜no de su pipeline la posibilidad de manipular im´agenes sin asociarle geometr´ıa alguna. Sin embargo, no es hasta que se produce la aparici´on de los procesadores gr´aficos programables cuando de verdad se puede utilizar OpenGL como una herramienta para procesado de im´agenes, consiguiendo aumentar de manera dr´astica la capacidad de analizar y modificar im´agenes, as´ı como de generar una amplia variedad de efectos (ver imagen 10.1).

Figura 10.1: Ejemplo de procesado de imagen. A la imagen de la izquierda se le ha aplicado un efecto de remolino, generando la imagen de la derecha

10.1.

Apariencia visual

10.1.1.

Antialiasing

Se conoce como esfecto escalera o dientes de sierra, o m´as com´unmente por su t´ermino en ingl´es aliasing, al artefacto gr´afico derivado de la conversi´on de entidades continuas a discretas. Por ejemplo, al visualizar un segmento de l´ınea se convierte a una secuencia de p´ıxeles coloreados en el framebuffer, siendo claramente perceptible el problema, excepto si la l´ınea es horizontal o vertical (ver imagen 10.2). Este problema es todav´ıa m´as f´acil de percibir, y tambi´en mucho m´as molesto, si los objetos est´an en movimiento. 127

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

127

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 10.2: En la imagen de la izquierda se observa claramente el efecto escalera, que se hace m´as suave en la imagen de la derecha

Nos referimos con antialiasing a las t´ecnicas destinadas a eliminar ese efecto escalera. Hoy en d´ıa, la potencia de los procesadores gr´aficos permite que desde el propio panel de control del controlador gr´afico el usuario pueda solicitar la soluci´on de este problema e incluso establecer el grado de calidad. Hay que tener en cuenta que, a mayor calidad del resultado, mayor coste para la GPU, pudiendo llegar a producir cierta ralentizaci´on en la interacci´on con nuestro entorno gr´afico. Por este motivo, las aplicaciones gr´aficas exigentes con el hardware gr´afico suelen ofrecer al usuario la posibilidad de activarlo como una opci´on. Supersampling El m´etodo de supersampling se basa en tomar m´as muestras por cada p´ıxel. De esta manera, el valor final de un p´ıxel p se obtiene como resultado de la combinaci´on de todas sus muestras. Hay que definir un patr´on de muestreo y tambi´en se puede asignar un peso diferente a cada muestra. p(x, y) =

n 

wi c(i, x, y)

(10.1)

i=1

La figura 10.3 muestra un ejemplo del funcionamiento del m´etodo donde, en lugar de utilizar una u´ nica muestra, se utilizan cuatro. En ese ejemplo, dos de las muestras quedan cubiertas por la proyecci´on de la primitiva gr´afica y el color final del p´ıxel es el valor medio ponderado de los valores obtenidos para las cuatro muestras realizadas.

Figura 10.3: Ejemplo de funcionamiento del supersampling

La implementaci´on m´as popular de este m´etodo se conoce con el nombre de full scene anti-aliasing, FSAA. Al utilizar esta t´ecnica es necesario disponer de un framebuffer cuyo tama˜no sea n veces mayor, donde n es el n´umero de muestras, ya no solo para almacenar el color, sino tambi´en por ejemplo para guardar la profundidad de cada muestra. Este m´etodo procesa cada muestra de manera independiente, 128 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

128

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


por lo que es bastante costoso, dado que el n´umero de p´ıxeles se multiplica f´acilmente por cuatro, ocho o incluso diecis´eis. Multisampling El m´etodo conocido por multi-sampling anti-aliasing, MSAA, se basa en muestrear cada p´ıxel n veces para averiguar el porcentaje del p´ıxel cubierto por la primitiva. El shader de fragmentos solo se ejecuta una vez por fragmento, a diferencia del m´etodo full scene anti-aliasing, donde dicho shader se ejecutaba para cada muestra. OpenGL implementa este m´etodo y el programador solo necesita habilitarlo si lo desea. Sin embargo, WebGL 1.0 no lo porporciona, aunque algunos navegadores s´ı que lo hacen de forma experimental.

10.1.2.

Correcci´on gamma

Los monitores no proporcionan una respuesta lineal respecto a los valores de intensidad de los p´ıxeles. Esto produce que veamos las im´agenes un poco m´as oscuras o no tan brillantes como realmente deber´ıan observarse. En ciertas aplicaciones, es habitual que se ofrezca como opci´on al usuario poder realizar este ajuste de manera manual y as´ı corregir el problema. En la figura 10.4, la curva CRT gamma muestra la respuesta del monitor para cada valor de intensidad de un p´ıxel. La curva correcci´on gamma representa la intensidad del p´ıxel necesaria para que el monitor presente la respuesta lineal, representada por la l´ınea recta.

Figura 10.4: Esquema de funcionamiento de la correci´on gamma

Si la intensidad percibida es proporcional a la intensidad del p´ıxel elevado a γ, P = I γ , por lo que la correci´on gamma consiste en contrarrestar este efecto as´ı: 1

P = (I γ )γ

(10.2)

Esta operaci´on se implementar´ıa en el shader de fragmentos, tal y como figura en el listado 10.1 (ver ejemplo c10/gamma.html). La figura 10.6 muestra dos resultados obtenidos con valores de gamma = 1,0 y 2,2. 129 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

129

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Listado 10.1: Shader de fragmentos para la correci´on gamma ... uniform f l o a t Gamma ; v o i d main ( ) { ... v e c 3 myColor = phong ( n , L , V) ; f l o a t gammaFactor = 1 . 0 / Gamma ; myColor . r myColor . g myColor . b

= pow ( myColor . r , gammaFactor ) ; = pow ( myColor . g , gammaFactor ) ; = pow ( myColor . b , gammaFactor ) ;

gl FragColor

= v e c 4 ( myColor , 1 . 0 ) ;

}

Figura 10.5: Ejemplos de correcci´on gamma: 1.0 (izquierda) y 2.2 (derecha)

10.2.

Postproceso de imagen

En esta secci´on se consideran algunas t´ecnicas de tratamiento de im´agenes que se realizan a modo de postproceso del resultado de s´ıntesis. Por ejemplo, las im´agenes que se muestran en la figura 10.6 son el resultado del mismo proceso de s´ıntesis y la diferencia es que, una vez obtenido el color del fragmento, se ha realizado alguna operaci´on que se aplica por igual a todos los fragmentos de la imagen.

Figura 10.6: Ejemplos de postproceso de imagen

130 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

130

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


10.2.1.

Brillo

La modificaci´on del brillo de una imagen es un efecto muy sencillo. Consiste en escalar el color de cada fragmento por un valor Brillo. Si dicho valor es 1, la imagen no se altera, si es mayor que 1 se aumentar´a el brillo, y si es menor se disminuir´a (ver figura 10.7). El listado 10.2 muestra el c´odigo que habr´ıa que incluir en el shader de fragmentos para modificar el brillo (ver ejemplo c10/postproceso.html). Listado 10.2: Modificaci´on del brillo de una imagen g l F r a g C o l o r = vec4 ( miColor ∗ B r i l l o , 1 . 0 ) ;

Figura 10.7: Ejemplos de modificaci´on del brillo de la imagen con factores de escala 0,9, 1,2 y 1,5

10.2.2.

Contraste

La alteraci´on del contraste de la imagen se obtiene como resultado de mezclar dos colores, uno es el color obtenido como color del fragmento y el otro es el valor de luminancia media (ver figura 10.8). La variable Contraste se utiliza para dar m´as peso a un valor u otro (ver el listado 10.3 y el ejemplo c10/postproceso.html). Listado 10.3: Modificaci´on del contraste de una imagen vec3 LuminanciaMedia = vec3 ( 0 . 5 , 0 . 5 , 0 . 5 ) ; g l F r a g C o l o r = v e c 4 ( mix ( LuminanciaMedia , miColor , C o n t r a s t e ) , 1 . 0 ) ;

10.2.3.

Saturaci´on

La saturaci´on es una mezcla del color del fragmento con un valor de intensidad espec´ıfico de cada p´ıxel (ver figura 10.9). Observa en el listado 10.4 las operaciones habituales para modificar la saturaci´on que se pueden encontrar tambi´en en el ejemplo c10/postproceso.html. 131 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

131

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 10.8: Ejemplos de modificaci´on del contraste de la imagen: 0,5, 0,75 y 1,0

Figura 10.9: Ejemplos de modificaci´on de la saturaci´on de la imagen: 0,2, 0,5 y 0,8

Listado 10.4: Modificaci´on de la saturaci´on de la imagen v e c 3 lumCoef = vec3 ( 0 . 2 1 2 5 , 0 . 7 1 5 4 , 0 . 0 7 2 1 ) ; v e c 3 I n t e n s i d a d = v e c 3 ( d o t ( miColor , lumCoef ) ) ; gl FragColor = v e c 4 ( mix ( I n t e n s i d a d , miColor , S a t u r a c i o n ) , 1 . 0 ) ;

10.2.4.

Negativo

Otro ejemplo muy sencillo es la obtenci´on del negativo de una imagen (ver ´ imagen 10.10). Unicamente hay que asignar como color final del fragmento el resultado de restarle a 1 su valor de color original. En el listado 10.5 se muestra el c´odigo correspondiente al c´alculo del negativo del fragmento. Listado 10.5: Negativo del fragmento g l F r a g C o l o r = v e c 4 ( 1 . 0 − miColor , 1 . 0 ) ;

10.2.5.

Escala de grises

Tambi´en es muy f´acil la obtenci´on de la imagen en escala de grises (ver imagen ´ 10.11). Unicamente hay que asignar como color final del fragmento el resultado de 132

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

132

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Figura 10.10: Ejemplo del resultado del negativo de la imagen

la media de sus tres componentes. En el listado 10.6 se muestra el c´odigo correspondiente al c´alculo del color del fragmento. Listado 10.6: C´alculo de la imagen en escala de grises f l o a t media = ( m i C o l o r . r + m i C o l o r . g + m i C o l o r . b ) / 3 . 0 ; g l F r a g C o l o r = v e c 4 ( v e c 3 ( media ) , 1 . 0 ) ;

Figura 10.11: Ejemplo del resultado de la imagen en escala de grises

10.2.6.

Convoluci´on

La convoluci´on es una operaci´on matem´atica fundamental en procesamiento de im´agenes. Consiste en calcular para cada p´ıxel la suma de productos entre la imagen fuente y una matriz mucho m´as peque˜na a la que se denomina filtro de convoluci´on. Lo que la operaci´on de convoluci´on realice depende de los valores del filtro. Para un filtro de dimensi´on m × n la operaci´on es: Res(x, y) =

n−1  m−1 

Img(x+(i−

j=0 i=0

n−1 m−1 ), y+(j − ))·F iltro(i, j) (10.3) 2 2 133

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

133

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Realizar esta operaci´on con WebGL requiere que la imagen sint´etica se genere en primer lugar y se almacene despu´es como textura para que en un segundo dibujado se pueda aplicar la operaci´on de convoluci´on sobre la imagen ya generada. Por otra parte, si la operaci´on de la convoluci´on sobrepasa los l´ımites de la imagen, los mismos par´ametros que se utilizaron para especificar el comportamiento de la aplicaci´on de texturas fuera del rango [0, 1] se utilizar´an ahora tambi´en. Las operaciones m´as habituales son el blurring, el sharpening y la detecci´on de bordes, entre otras. La tabla 10.1 muestra ejemplos de filtros de suavizado o blurring, nitidez o sharpening y detecci´on de bordes (ver figura 10.12). El ejemplo c10/bordes.html incluye una implementaci´on de este u´ ltimo filtro. 1 1 1

1 1 1 1 1 1 (a)

0 -1 0

-1 0 5 -1 -1 0 (b)

-1 -1 -1

-1 -1 8 -1 -1 -1 (c)

Tabla 10.1: Filtros de convoluci´on: (a) suavizado, (b) nitidez y (c) detecci´on de bordes

Figura 10.12: Ejemplo de resultado de la operaci´on de convoluci´on con el filtro de detecci´on de bordes

10.3.

Transformaciones

La transformaci´on geom´etrica de una imagen se realiza en tres pasos: 1. Leer la imagen y crear un objeto textura con ella. 2. Definir un pol´ıgono sobre el que pegar la textura. 3. Escribir un shader de v´ertices que realice la operaci´on geom´etrica deseada. El paso 1 ha sido descrito en el cap´ıtulo 6. Para realizar el paso 2, un simple cuadrado de lado unidad es suficiente, no importa si la imagen no tiene esta proporci´on. En el paso 3, el shader de v´ertices debe transformar los v´ertices del 134 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

134

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


rect´angulo de acuerdo a la transformaci´on geom´etrica requerida. Por ejemplo, para ampliar la imagen solo hay que multiplicar los v´ertices por un factor de escala superior a 1, y para reducirla el factor de escala debe estar entre 0 y 1. Es en este paso donde tambi´en se debe dar la proporci´on adecuada al pol´ıgono de acuerdo a la proporci´on de la imagen. Ejercicios  10.1 Entre las operaciones t´ıpicas para el procesado de im´agenes se encuentran las operaciones de volteo horizontal y vertical. ¿C´omo implementar´ıas dichas operaciones?

Otra transformaci´on a realizar en el shader de v´ertices es el warping, es decir, la modificaci´on de la imagen de manera que la distorsi´on sea perceptible. Esta t´ecnica se realiza definiendo una malla de pol´ıgonos en lugar de un u´ nico rect´angulo y modificando los v´ertices de manera conveniente (ver imagen 10.13).

Figura 10.13: Warping de una imagen: imagen original en la izquierda, malla modificada en la imagen del centro y resultado en la imagen de la derecha

Como una extensi´on de la t´ecnica anterior se podr´ıa realizar el morphing de dos im´agenes. Dadas dos im´agenes de entrada, hay que obtener como resultado una secuencia de im´agenes que transforma una de las im´agenes de entrada en la otra. Para esto se define una malla de pol´ıgonos sobre cada una de las im´agenes y el morphing se consigue mediante la transformaci´on de los v´ertices de una malla a las posiciones de los v´ertices de la otra malla, al mismo tiempo que el color definitivo de cada p´ıxel se obtiene con una funci´on de mezcla.

135 José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4

135

Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107


Informática Gráfica  

José Ribelles i Ángeles López Departament de Llenguatges i Sistemes Informàtics de l'UJI