PDF de programación - Informática Gráfica

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-4Informá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: [email protected]

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 inter-
nacional. www.une.es

Reconeixement-CompartirIgual
CC BY-SA
Aquest text està subjecte a una llicència Reconeixement-CompartirIgual de Creative Com-
mons, 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 Uni-
versitat Jaume I, mitjançant el mètode denominat revisió per iguals, doble cec.

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107 ´Indice general

Prefacio

1

.
.
.

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 GLSL . . . . . . . . .
.
1.7 Compilaci´on y enlazado de un shader

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

2 Modelado poligonal

2.1 Representaci´on . . . .

.

.

.

2.2 La normal
. . . . . . .
2.3 Mallas y WebGL . . .

.
.

.
.

.
.
.

.
.

.
.
.

.
.

.
.
.

.
.

.
.
.
.
.
.

.
.
.
2.1.1 Caras independientes .
2.1.2 V´ertices compartidos .
.
2.1.3 Tiras y abanicos de tri´angulos
.
.

.
.
.
.
.
.
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 .
.
.

.
.
.
.

.
.
.

.
.
.

.
.
.

.
.
.

.
.
.

.
.

.
.

.

3 Transformaciones geom´etricas
3.1 Transformaciones b´asicas .
.
.
.

.
.
.
.
.
.
.
.
3.2 Concatenaci´on de transformaciones
.
3.3 Matriz de transformaci´on de la normal .
3.4 Giro alrededor de un eje arbitrario .
.

3.1.1 Traslaci´on . . .
3.1.2 Escalado . . .
3.1.3 Rotaci´on . . .

.
.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.

.

.
.
.
.
.
.
.

2

13

15
15
17
18
19
19
20
21
22
23

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

43
43
43
44
45
45
48
48

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

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

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107 3.5 La biblioteca GLMATRIX . . . . . .
3.6 Transformaciones en WebGL . . . . . . . .

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

. . . . . . . . .

.
. . .

4 Viendo en 3D

4.1 Transformaci´on de la c´amara . . .
4.2 Transformaci´on de proyecci´on . . . . . .

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

4.2.1
4.2.2

Proyecci´on paralela . . . . . . . . .
Proyecci´on perspectiva . . . . . . .

4.3 Transformaci´on al ´area de dibujo . . . . . . . . . . .
4.4 Eliminaci´on de partes ocultas . . . . . . .
4.5 Viendo en 3D con WebGL . . . . . . . . . . . . . . .

. . . . .

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

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

. . . . .

5 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 . . . . .
. . . .
. . . .
Implementa Phong con WebGL . . . .
5.4.1 Normales en los v´ertices . . . . . . .
5.4.2 Materiales .
5.4.3
Iluminaci´on por ambas caras . . . . . . . . . . . .

5.2 Tipos de fuentes de luz . . . .
5.3 Modelos de sombreado . . . .
5.4

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

. . . . . . . . . .

Fuente de luz .

. . . . . . .

. . . . . . .

. . . . . .

. . . . . .

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

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

5.5
5.6 Sombreado c´omic .
5.7 Niebla .
.

.

.

.

.

.

. . . . . . .

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

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

6 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 .

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

. . .

. . . . . .

. . . . . . . . .

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

3

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

José Ribelles y Ángeles López - ISBN: 978-84-16356-29-4Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107 7 Realismo visual

7.1 Transparencia .
7.2 Sombras .
.

.

.

.
.

.
.

. . . . .
. . . . .

. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
Sombras proyectivas . . . . . . . . . . . . . .
Shadow mapping . . . . . .
. . . . . . . . . .
. . . . . . . . . . . . . .

. . . . .

.

.

.

.

.

7.2.1
7.2.2

7.3 Reflejos .

8 Texturas procedurales
.
.
.
.

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

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

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

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

100
. . . . . . 100
. . . . . . 104
. . . . . . 104
. . . . . . 105
. . . . . . 106

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 . . . . . . . .

. . . . . . . . . .

.

.

. . .

. . . . .

. . . . .

117
. . . . . . . . . . . . . . . 117
. . . . . . 119
. . . . . . . . . . 119
. . . . . . 120
. . . . . . 120
. . . . . . 121
. . . . . . 122
. . . . . . . . 123

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

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

9.3 Sistemas de part´ıculas . . . . . . . .

. . . . . . . .

10 Proceso de im´agenes
10.1 Apariencia visual

. . . . . . . . . .
10.1.1 Antialiasing . . . . . . . . . .
10.1.2 Correcci´on gamma . . . . .

.

10.2 Postproceso de imagen . . . .

. . . .

. . . . .

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

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

. . . . . . . . .

. . . . . .

. . . . . .

. . .

. . . . . . . . . .

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

. . . . . . . . . .

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

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

. . . .

.

.
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-4Informática Gráfica - UJI - DOI: http://dx.doi.org/10.6035/Sapientia107 ´Indice de figuras

.
. .
1.1 Ejemplo de objeto tridimensional dibujado con WebGL . .
1.2 Ejemplos de objetos dibujados mediante shaders
.
.
.
1.3 Resultado con ´exito del test de soporte de WebGL en un navegador
.
. .
.
.
.
.

1.4 Contenido de la p´agina http://webglreport.org .
1.5 Secuencia b´asica de operaciones del pipeline de OpenGL .

proporcionado por la p´agina http://get.webgl.org .

.
. .

. .
. .

. .

.

.

15
16

17
18
22

. .

28

.

.

. .

.

.
.

.

.

.

. .

. .

.

. .

.

. .

.

.

. .

.

.

. .

.

. .

.

. .

.

estructura de caras independientes .

derecha, objeto representado mediante tri´angulos

2.1 A la izquierda, objeto representado mediante cuadril´ateros y a la
.
. .

26
2.2 Representaci´on poligonal de una copa y resultado de su visualizaci´on 27
2.3 Ejemplos de mallas poligonales .
.
.
27
2.4 Esquema de almacenamiento de una malla poligonal mediante la
.
. .
2.5 Esquema de almacenamiento de u