1 # Sistemas Gráficos 2 3 ## Clase 15-05-24 4 5 ### Renderer 6 7 - `toneMapping()` 8 - `domElement()` representa el contenido html a diferencia de `setSize()` el 9 cual representa el tamano del canvas. 10 11 ### Scene 12 13 ### Object3D 14 15 #### Matrix 16 17 - position 18 - rotation 19 - scale 20 21 #### Mesh 22 23 Siempre conviene aplicarle rotación/escala a la mesh por sobre la geometría ya 24 que de esta manera se ahora memoria en la GPU 25 26 - PBR Meterials 27 28 #### Material 29 30 #### Geometrías 31 32 - Three.js utiliza triángulos para representar objetos, otra manera de trabajar 33 es la Geometría Constructiva de Solidos (CSG por sus siglas en ingles) 34 - `BufferGeometryUtils()`: es conveniente unir multiples objetos que no van a 35 cambiar entre si. 36 37 ### Editor de three.js 38 39 [Visit this link](threejs.org/editor) 40 41 42 ### Libros 43 44 [Libros Escenciales](http://www.repo.dreamhosters.com/libros-escenciales.zip) 45 ## Clase 17-03-24 46 47 ### Sistemas de coordenadas 48 49 - Terna derecha o terna izquierda 50 - `Three.js` utiliza un sistema coordenado de terna derecha 51 - Las transformaciones afines son aquellas que preservan la forma, son lineales 52 - Coordenadas homogéneas 53 - Las rotaciones siempre son desde el origen de coordenadas 54 - Las matrices se inicializan a la matriz identidad 55 - `matrixAutoUpdate = false` 56 - Gimbal Lock 57 - Cuaterniones 58 ## Clase 21-03-24 59 60 ### Arbol de Escena 61 62 - Un sistemas de coordenadas relativo puede ser interpretado como multiples 63 transformaciones 64 65 ### Correcta posición de los objectos en su sistema de coordenadas 66 67 - Trasladar la geometría instead of mesh to set the coordinate system origin 68 - `Parent.add(Child)` posición relativa al `Parent` 69 - `matrixWorld` representa las coordenadas respecto al sistema de coordenadas 70 absoluto 71 - `matrix` representa las coordenadas respecto al sistema de coordenadas 72 relativo 73 74 ### Contenedores 75 76 - Los contenedores son los `Group`, también podrían ser `Object3D` 77 ## Clase 25-3-24 78 79 ### BufferAttributes 80 81 - [BufferAttributes](https://threejs.org/docs/index.html?q=bufferat#api/en/core/BufferAttribute) 82 - El constructor debe ser un 83 (TypedArray)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray] 84 - Spread opearator (...) 85 - `Index buffer` para ahorrar memoria eliminando vertices redundantes 86 - `bufferGeometry.setIndex()` 87 - Los intex buffers tambien son Typed Arrays *verificar la precision* 88 - Modos de dibujo de WebGL 89 - Three.js solo soporta GL_TRIANGLES para dibujar triángulos 90 - WebGL permite utilizar un numero de vertices con un determinado material y 91 otro numero de vertices con otro. 92 - Regla de la mano derecha para determinar la cara frontal de un triangulo. 93 * Solo se dibujan la cara frontal de los triángulos 94 - `flatShading()` 95 - WebGL interpola las normales de los vertices 96 - La GPU interpola los vertices ya sea de colores, normales, etc. 97 - Three.js `side` permite seleccionar que cara del triangulo dibujar 98 99 ```js 100 const defaultMaterial = new THREE.MeshPhongMaterial({ 101 color: 0xff9900, 102 side: THREE.DoubleSide, 103 }); 104 ``` 105 106 - Los vectores normales deben tener norma `1` 107 108 ### Tarea 109 110 - 23 grados tierra 111 ## Clase 05-04-24 112 113 \tableofcontents 114 115 ### Formatos Soportados por Three.js 116 117 * glTF 118 * FBX 119 * OBJ 120 * COLLADA (DAE) 121 * STL 122 123 Siendo el más importante y eficiente `glTF` 124 125 * Dos versiones 1.0 y 2.0, siendo la primera obsoleta 126 127 ### GLTF 128 129 Los archivos `.gltf` son modelos 3D en formato JSON. 130 131 Los archivos `.glb` son la version binaria de los archivos `gltf` 132 133 ### Loaders 134 135 ```js 136 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; 137 ``` 138 139 ```js 140 loader.load( 'models/helmet/DamagedHelmet.gltf', 141 onModelLoaded, 142 onProgress, 143 onLoadError); 144 ``` 145 146 ```js 147 function onModelLoaded(gltf) { 148 console.log('Model loaded', gltf); 149 gltf.scene; 150 scene.add(gltf.scene); 151 } 152 ``` 153 154 ```js 155 function onProgress(event) { 156 console.log((event.loaded / event.total) * 100 + '% loaded'); 157 } 158 ``` 159 160 * CallBacks vs. Promises 161 162 ### Formate USDZ 163 164 Formato alternativo adoptado por Apple y desarrollado en conjunto por Pixar 165 166 Object promise 167 168 ### Eventos del Teclado 169 170 Primero hay definir un callback para cuando se produzca un evento sobre un 171 objeto html en particular mientras la ventana del navegador este en foco 172 173 ```js 174 Document.addEventListener('keydown', keyHandler) 175 ``` 176 177 ```js 178 function keyHandler(event) { 179 if (event.key == 'c' && event.ctrlKey && event.shiftKey) { 180 console.log("Ctrl+Shift+c"); 181 } 182 } 183 ``` 184 185 #### Controles 186 187 ##### FlyControl 188 189 ##### OrbitControl 190 191 ##### TrackballControl 192 193 #### User Interface 194 195 ##### uil 196 197 [uil](https://github.com/lo-th/uil) 198 199 #### dat GUI 200 201 [dat.GUI](https://github.com/dataarts/dat.gui) 202 203 ```js 204 let gui = new dat.GUI(); 205 gui.add(params, 'cantidadTotal', 0, 10).step(1); 206 ``` 207 208 ### Matriz de Normales 209 210 * El comportamiento deseado al trasladar y escalar un objeto, es que las 211 normales conserven su dirección 212 * El comportamiento deseado al rotar un objeto es que las normales cambien su 213 dirección 214 * Casos particulares incluyen escalado con diferente magnitud en sus componentes 215 216 ### Shaders 217 218 #### Uniforms 219 220 Las `uniforms` son variables globales que comparten todas las unidades de 221 procesamiento de la GPU 222 223 ```js 224 // Se definen los uniforms que se usarán en los shaders 225 uniforms: { 226 modelMatrix: { value: new THREE.Matrix4() }, 227 viewMatrix: { value: new THREE.Matrix4() }, 228 projectionMatrix: { value: new THREE.Matrix4() }, 229 }, 230 ``` 231 232 #### Varyings 233 234 Las `varyings` son variables globales que el Vertex Shader comparte con el 235 Fragment Shader 236 237 #### Vertex Shader 238 239 ```c 240 precision highp float; 241 242 attribute vec3 position; 243 attribute vec2 uv; 244 245 uniform mat4 modelMatrix; 246 uniform mat4 viewMatrix; 247 uniform mat4 projectionMatrix; 248 varying vec2 vUv; 249 250 void main() { 251 vec3 pos = position; 252 253 gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(pos, 1.0); 254 vUv = uv; 255 } 256 ``` 257 258 #### Fragment Shader 259 260 ```c 261 precision highp float; 262 varying vec2 vUv; 263 264 void main() { 265 // Se pinta el fragmento con las coordenadas de textura 266 gl_FragColor = vec4(vUv, 0.0, 1.0); 267 } 268 ``` 269 270 ##### Normal a una Superficie deformada 271 272 * Versión de WebGl 2.0 (OpenGL 3.0) proporciona el calculo de las derivadas 273 * Se calcula el vector gradiente 274 275 ```c 276 vec3 x=dFdx(vViewPos); 277 vec3 y=dFdy(vViewPos); 278 ``` 279 280 ```c 281 // Normal de la superficie surge de la normalización del producto cruz de los 282 // vectores gradiente 283 vec3 normal=normalize(cross(x,y)); 284 ``` 285 ## Clase 08-04-24 286 287 \tableofcontents 288 289 ### Superficies de Barrido (Sweep) 290 291 * Segmentos = niveles - 1; 292 * El buffer de indices no depende de la forma del objeto 293 * Para calcular el vector normal de una superficie siempre es mejor computarla 294 utilizando la expresión analítica de la superficie, ya que al realizar una 295 interpolación de las normales de los vertices adyacentes se pueden cometer 296 errores 297 * Para la curva que forma el recorrido que genera la forma se necesita conocer 298 la expresión analítica de la curva en forma paramétrica, por ejemplo para un 299 tubo 300 301 $$f(u) =(R*cos(u*PI/2),R*sen(u*PI/2))$$ 302 303 * Posición 304 * Tangente 305 * Normal 306 * Binormal 307 308 #### Matriz de Nivel 309 310 Para cada nivel se define la **Matriz de Nivel** que transforma la forma (sus 311 vértices) del espacio de modelado al sistema de coordenadas del nivel 312 313 La transformación de puede descomponer en: una Rotación (en X,Y,Z) + una 314 Traslación (al nivel) 315 316 #### Generación de Tapas 317 318 > Las tapas las podemos resolver duplicando las matrices de Nivel del primer y 319 > último nivel del recorrido 320 321 * De esta manera los indices son los mismo sol oque la posición de los vertices 322 del ultimo nivel colapsara en un punto 323 324 * Muchos objectos manufacturados se pueden modelar con el algoritmo de Sweep 325 * Cualquier superficie de barrido se puede descomponer en un plano 326 327 ### Superficies de Revolución 328 329 Las superficies de barrido son superficies de barrido cuya curva de recorrido 330 esun circulo de radio infinitesimal 331 332 ### Trabajo Práctico 333 334 Una de las partes fundamentales 335 336 > Implementar el algoritmo de barrido 337 338 #### Forma 339 340 ```js 341 posiciones = []; 342 normales = []; 343 ``` 344 345 #### Recorrido 346 347 ```js 348 matricesDeNivel = []; 349 ``` 350 ## Clase 12-04-24 351 352 \tableofcontents 353 354 ### Geometrias 355 #### Superficies de Revolucion 356 357 #### [LatheGeombetry](https://threejs.org/docs/#api/en/geometries/LatheGeometry) 358 359 Genera superficies de revolución a partir de una forma, no interpola las 360 normales 361 362 #### ExtrudeGeometry 363 364 * Shape 365 * Path 366 367 #### ConvexGeometry 368 369 Genera el polígono más chico que encierra a una nube de puntos 370 371 #### ParametricGeometry 372 373 Permite implementar superficies de barrido 374 375 ```js 376 const geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 ); 377 ``` 378 379 * `u` y `v` varían siempre entre 0 y 1 independiente del tamaño de la superficie 380 381 #### ShapeGeometry 382 383 #### TubeGeometry 384 385 #### SDFGeometry 386 387 * shadertoy -> Raymarching 388 389 #### [InstancedBufferGeometry](https://threejs.org/docs/#api/en/core/InstancedBufferGeometry) 390 391 #### Curvas de Bézier 392 393 > Controlar la tangente de la curva 394 395 Permite realizar curvas a tramos mucho más fácil que con puntos, luego para 396 representarla o utilizarla se discretiza 397 398 Puntos de control 399 400 ##### Quadratic Bézier 401 402 ##### Cubic Bézier 403 404 `getPoint(t)` devuelve el valor de la curva analíticamente 405 406 `getPointAt(u)` devuelve el valor de la curva al evaluar `u` en `lookUpTable` 407 408 * La distancia minima para dibujar una curva son 4 puntos de control 409 410 #### Catmull-Rom Spline 411 412 > Documental ILM: LIGHT & MAGIC (2022) 413 414 Son similares a las curvas de bezier pero permite calcular una curva suave que 415 pasa por un conjunto determinado de puntos 416 417 #### [Frenet Frames](https://janakiev.com/blog/framing-parametric-curves) 418 419 Es un algoritmo que permite obtener un vector tangente 420 421 `TubeGeometry` 422 ## Clase 15-04-24 423 424 \tableofcontents 425 426 * Binormal eje z positivo 427 * Normal hacia la derecha derecha 428 * Tangente recta 429 430 > Para calcular la normal se toma un vector provisorio `v = (0,1,0)` provisorio 431 > luego realizar el producto vectorial con el vector tangente. Para calcular la 432 > Binormal, se multiplica vectorialmente la normal hallada con el vector 433 > tangente. 434 435 * `Matrix.slerp()`: Interpola dos matrices 436 437 ### Texturas 438 439 Mapeo de texturas 440 441 #### Unidimensional 442 443 > Arregla unidimensional 444 445 #### Bidimensional 446 447 > Arreglo 2D 448 449 ##### Rasterizador (o Sampler?) 450 451 Dado un valor devuelve el color basado en una textura 452 453 * Minification 454 * Magnification 455 456 ###### Filtrado de Texturas 457 458 Se utiliza para mitigar el efecto del aliasing. El aliasing ocurre en la 459 geometría también, y en ese caso se utiliza el anti-aliasing 460 461 ###### Nearest Neighbor 462 463 ###### Linear Filtering 464 465 ###### Mipmapping 466 467 Se escalan las texturas hasta llegar a una textura de 1x1 468 469 Es preprocesado, por lo que **no genera** un gasto significativo en tiempo de 470 ejecución, ademas de que no consume mas de 50% de la textura original 471 472 #### Tridimensional 473 474 > Arreglo 3D 475 476 #### Bitmaps 477 478 Los bilmas es un formato de imagen y es así como se guarda en la memoria de la 479 GPU 480 481 #### Wrapping Modes 482 483 * `gl.REPEAT` La textura se repite infinitamente, aunque solo se guarda una copia 484 * `gl.CLAMP` Se conserva el valor limite de la textura 485 486 #### Shader 487 488 Se pueden modificar las texturas ya que las texturas pasan por un Shader 489 490 * En el vertex Shader se puede modificar las texturas 491 492 ### Texturas en Three.js 493 494 [Textures](https://threejs.org/manual/#en/textures) 495 496 * Los cubos son grupos de indices 497 * Se pueden cargar multiples texturas a un grupo y Treejs asigna la texturas al 498 grupo con el respectivo indice 499 * Simulación de flujo de líquido mediante la modificación de texturas 500 ## Clase 19-04-24 501 502 \tableofcontents 503 504 ### Curvas 505 506 Las curvas pueden no verse y definir la geometría de la escena 507 508 #### Puntos de Control 509 510 Un conjunto de vertices con una determinada 511 512 #### Interpolación vs. Aproximación 513 514 En el primero, la curva pasa por los puntos de control, mientras que en la 515 aproximación, la curva no pasa por ningún punto de control, salvo quizás los 516 extremos 517 518 #### Métodos de aproximación 519 520 ##### Curva B-Spline 521 522 [Curva B-Spline](https://en.wikipedia.org/wiki/B-spline) 523 524 ##### Curva de Lagrange 525 526 #### Invariancia Afín 527 528 #### Parametrización de Curvas 529 530 #### Método de Casteljau 531 532 Algoritmo de interpolación de puntos de control 533 534 #### Curvas de Bézier 535 536 La curva final es igual a la obtenida por el método de Casteljau, pero se 537 utiliza un método distinto para obtenerla, el algoritmo utilizado en la curva de 538 Bézier es recursivo 539 540 > De control global, es decir, todos los puntos de control afectan a todos los 541 > demás 542 543 Se define una curva de Bézier de grado $n$ de la siguiente manera 544 545 $$C(u) = \sum^{n}_{i=0} p_{i} B^{n}_{i}(u)$$ 546 547 Hay que tener en cuenta que el grado $n$ es la cantidad de puntos de control 548 menos uno 549 550 Existe una forma matricial para halla de las curvas de Bézier 551 552 > Para definir una curva cerrada se usan las mismas coordenadas para el punto 553 > inicial y final y ademas para que sea suave el segundo punto y el penúltimo 554 > deben tener la misma dirección 555 556 > Polinomios de Berstein 557 > 558 > $$B^{n}_{i}\left(u\right)$$ 559 560 ##### Propiedades 561 562 * Comienzan y terminan en los puntos extremos, es decir, interpola dichos puntos 563 * Comienza en el primer punto con la dirección del segundo 564 * La curva de Bézier siempre queda definida dentro del casco convexo del 565 polígono de control 566 * La velocidad inicial de la curva, depende de la longitud del segundo punto 567 568 ##### Concatenación de Curvas de Bézier 569 570 Se pueden obtener formas complejas concatenando Curvas de Bézier, para esto se 571 usa el ultimo punto de la primer curva como el primero de la siguiente 572 573 #### Curvas de Catmull-Rom 574 575 Son curvas de interpolación similares a las de Bézier, solo que utilizan cuatro 576 puntos de control como mínimo y luego la curva se dibuja con el segundo y tercer 577 punto 578 579 #### Trabajo Práctico 580 581 * Arboles -> Grupo dentro de Geometrías 582 * Animar el nivel del agua 583 * Height Maps o Elevation Map 584 * [World Machine](https://www.world-machine.com/) Sirve para crear Elevation Maps 585 ## Clase 22-04-24 586 587 \tableofcontents 588 589 ### Transformaciones 590 591 ### Map de coordenadas UV 592 593 #### En superficies de barrido 594 595 Utilizar `getPointAt()` por sobre `getPoint()` 596 597 #### En tapas 598 599 [Shape](https://threejs.org/docs/index.html?q=shape#api/en/extras/core/Shape) 600 601 ### [Perlin noise](https://es.wikipedia.org/wiki/Ruido_Perlin) 602 603 * Se utilizan números pseudo-aleatorios para generar ruido 604 605 ### Repetición de texturas en el Sampler 606 607 Para cubrir una extension mayor que el de la textura evitando que la repetición 608 de la misma sea evidente, una técnica es repetir la textura pero con diferentes 609 escalas, siendo el valor de la escala un numero no múltiplo, luego mezclar todas 610 las texturas escaladas 611 ## Clase 26-04-24 612 613 \tableofcontents 614 615 ### Notas sobre el Trabajo Práctico 616 617 * Para la cámara en primera persona, se puede agregar un botón a la interfaz 618 para iniciar la captura del teclado (debido a como funcionan los navegadores) 619 * Textura `skybox` para el cielo 620 - En caso de utilizar se puede hacer con 621 [`renderer.background`](https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L31) 622 * Para el modo noche se suele utilizar una iluminación azul oscuro 623 624 ### Sobre curvas de Bézier 625 626 * Promedio ponderado de una serie de puntos de control 627 * El algoritmo de Casteljau es un método iterativo que sirve para contruir la 628 curva de Bézier 629 * Con mas de 4 puntos de control la curva pierde "control local", por lo que se 630 preferible utilizar curvas de Bézier de grado `4` concatenadas 631 * La suma de todos las bases de Bernstein es `1`, esto garantiza que la curva 632 esta incluida en la envolvente convexa 633 * Derivando la expresión de las bases de Bernstein se obtiene el vector tangente 634 * [The Beauty of Bézier Curves](https://youtu.be/aVwxzDHniEw) 635 * [OpenGL ES Shading Language (GLSL)](https://shaderific.com/glsl.html) 636 637 ### Sobre el parcial 638 639 El parcial es en mayoría teórico escrito, puede pedir algunos ejemplos breves de 640 código 641 642 #### Temas que se evalúan 643 644 * Pipeline gráfico 645 * Transformaciones 646 * Curvas de Bézier 647 * Proyecciones 648 649 ### Iluminación 650 651 * En `glsl` no existen los arreglos dinámicos ya que los programas deben ser 652 estáticos, es decir, se debe declarar el "scope" de cada variable de antemano 653 * Para declarar shaders en `Three.JS` se puede utilizar `rawShaderMaterial` 654 * Reflexiones 655 * Refracciones 656 * Interreflexiones 657 * Sub-Surface Scattering 658 * Modelo `phong` de iluminación 659 ## Clase 29-04-24 660 661 \tableofcontents 662 663 ### Proyecciones Gráficas 664 665 * Las cámaras se crean en el origen de coordenadas de la cámara, mirando en la 666 dirección del eje `z` negativo 667 * La cámara queda fija, la escena es la que transforma 668 * La cámara tiene 6 grados de libertad: 669 - traslación en los ejes `x`, `y` y `z` 670 - rotación `roll`, `pitch` y `yaw` 671 * Coordenadas de visualización a coordenadas de proyección 672 * Cuando se aplica la proyección se pierde una dimensión 673 674 #### Proyección perspectiva 675 676 Quedan determinadas por el punto de proyección. 677 678 * Se ubica el punto de proyección en el origen del sistema de coordenadas de la 679 cámara 680 * En las proyecciones en perspectiva hay que calcular una matriz de proyección 681 para cada vértice, ya que la proyección depende de la distancia 682 683 #### Proyección paralela 684 685 Quedan determinadas por la dirección de la proyección 686 687 ##### Proyecciones ortográficas 688 689 * Debido a que la cámara apunta en dirección `-z`, para calcular las 690 proyecciones ortográficas principales se rota la pieza y luego se proyecta 691 sobre el eje `z` , de esta forma la coordenadas de la proyección sobre el 692 plano de proyección son las coordenadas `x` e `y` 693 694 ###### Multivista 695 696 ###### Axonométricas Dimétricas 697 698 ###### Axonométricas Isométricas 699 700 ###### Axonométricas Trimétricas 701 702 ##### Proyecciones oblicuas 703 704 * z-buffer 705 ## Clase 03-05-24 706 707 \tableofcontents 708 709 ### Iluminación 710 711 * En la luz puntual se utiliza un decaimiento lineal para compensar la falta de 712 luz indirecta 713 * Modelo de iluminación global vs. Iluminación 714 715 #### Modelo de Phong 716 717 * Ley de Lambert 718 * Los materiales tienen una componente especular, una difusa y una mezcla de 719 ambos 720 * Reflexión Difusa 721 * Reflexión Especular 722 * Para el calculo de la componente especular del modelo de Phong los vectores 723 deben estar normalizados 724 * $K_d$ es similar a $K_s$ pero para la componente difusa 725 * Color de luz y de superficie 726 * $\alpha$: Factor de "glossiness" (en `three.js` "shininess") 727 * Coeficiente especular $K_s$ 728 729 #### Mapa de Normales 730 731 * Se codifica en RGB el valor de la normal 732 * Luego el modelo de Phong se utiliza de la misma manera solo que con la nueva 733 normal obtenida mediante el mapa de normales 734 735 #### Mapa de Desplazamiento 736 737 #### Mapa de Iluminación 738 ## Clase 06-05-24 739 740 \tableofcontents 741 742 ### Resolución Ejercicios de Proyección 743 744 En las proyecciones en perspectiva se necesita un foco, mientras que las 745 proyecciones paralelas una dirección. 746 747 Para determinar las ecuaciones de la proyección en perspectiva se sabe que los 748 triángulos que forman el plano con el punto foco y el punto a proyectar con el 749 punto foco, son triángulos semejantes, sabiendo esto se puede hallar una 750 relación entre los catetos de los triángulos. 751 752 * Parámetros de Cámara 753 - Near 754 - Far 755 - Frustum 756 * [Demo Proyección](https://xnqor.csb.app/) 757 * En el z-buffer se guarda la posición en el eje `z` de los fragmentos para 758 luego determinar que fragmento dibujar por sobre cual, en función de la 759 distancia a la cámara 760 761 ### Color 762 763 * El color es una sensación que percibe el ser humano 764 * El termino "luz blanca" hace referencia a toda la gama de grises 765 * Hay tonalidades que no se corresponden a una longitud de onda, por ejemplo la 766 gama de magenta (el violeta no es magenta). Este tipo de tonalidades se 767 denominan no espectrales justamente porque no corresponden a una longitud de 768 onda. Por el contrario los tonos espectrales, son aquellos que tiene una 769 longitud de onda del espectro electromagnético asociada. 770 * Los monitores de las computadoras no representan todos los colores ya que con 771 tres colores monocromáticos no se pueden representar todos los colores. Los 772 colores que se pierden son los totalmente saturados. 773 * Modelo CIE 1931 774 - Diagrama de cromaticidad 775 - GAMUT 776 * Modelo RGB (Red-Green-Blue) 777 * Modelo CMY (Cyan-Magenta-Yellow) 778 ## Clase 16-05-24 779 780 \tableofcontents 781 782 ### Efectos de post-procesado con `EffectComposer` 783 784 * Se utiliza para aplicar filtros a una imagen ya generada 785 * Ocurre al final del pipeline gráfico 786 * Estos filtros por lo general utilizan información de profundidad del 787 `depthBuffer` en el cual se almacena la coordenada `z` de los objetos cuando 788 se proyectan en la imagen final 789 * El rasterizador solo dibuja lo que pasa por el centro del pixel 790 * Para el [efecto de blur](https://threejs.org/examples/?q=post#webgl_postprocessing_unreal_bloom) 791 se utiliza un filtro de convolución 792 793 ### Render to texture 794 795 Se guarda el resultado de un render en una textura y luego se puede aplicar 796 sobre un objeto 797 798 ### Partículas 799 800 Las partículas se representan utilizando `sprites` los cuales son imágenes de 2D 801 que siempre están de frente a la cámara 802 803 ### Shadow maps 804 805 Se guarda una imagen del render en escala de grises con más precision de los 806 normal, por lo general `float16` o `float32`. Luego la luz "ilumina" hasta una 807 profundidad dada por el mapa de grises 808 809 * Solo funciona con luces que tienen frustum 810 811 ### [Raycaster](https://threejs.org/docs/index.html?q=raycaster#api/en/core/Raycaster) 812 813 Calcula la intersección entre un rayo y un objeto. Se puede utilizar para 814 interacciones con el mouse, utilizando como rayo aquel que se origina en la 815 cámara y atraviesa el cursor. 816 817 ```js 818 // update the picking ray with the camera and pointer position 819 raycaster.setFromCamera( pointer, camera ); 820 821 // calculate objects intersecting the picking ray 822 const intersects = raycaster.intersectObjects( scene.children ); 823 ``` 824 825 ### [Web Audio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) 826 827 Se puede utilizar para simular sonidos tridimensionales. Tiene un modelo muy 828 preciso para simular como absorbe las frecuencias el cráneo humano 829 ## Clase 24-05-24 830 831 \tableofcontents 832 833 ### Links útiles sobre color 834 835 > NOTA: El Cubo RGB, CMY se toma en el coloquio 836 837 * El modelo CMY es un modelo sustractivo, ya que al restar valores a las 838 coordenadas se aumenta luz, mientras que en el modelo RGB al aumenta los 839 valores RGB se aumenta luz. 840 * Corrección de gamma: se aplica una curva de transferencia o curva de gamma a 841 la imagen para corregir el tono de los colores oscuros y claros 842 [Color management](https://threejs.org/docs/?q=color#manual/en/introduction/Color-management0) 843 * Espacio RGB lineal o RGB con curva de gamma. 844 * Cuando se carga una imagen en Three.JS se debe conocer el modo en que esta 845 guardada la imagen (por ejemplo en sRGB).
