commit d0156f875221aac6e9ceba896eb73832f53d6f5d
parent 7000285c4444207722ea69891fe883938f27f661
Author: Martin Klöckner <mjkloeckner@gmail.com>
Date: Mon, 27 May 2024 15:05:10 -0300
add `clases/clases-onefile.md`
Diffstat:
1 file changed, 845 insertions(+), 0 deletions(-)
diff --git a/clases/clases-onefile.md b/clases/clases-onefile.md
@@ -0,0 +1,845 @@
+# Sistemas Gráficos
+
+## Clase 15-05-24
+
+### Renderer
+
+- `toneMapping()`
+- `domElement()` representa el contenido html a diferencia de `setSize()` el
+ cual representa el tamano del canvas.
+
+### Scene
+
+### Object3D
+
+#### Matrix
+
+- position
+- rotation
+- scale
+
+#### Mesh
+
+Siempre conviene aplicarle rotación/escala a la mesh por sobre la geometría ya
+que de esta manera se ahora memoria en la GPU
+
+- PBR Meterials
+
+#### Material
+
+#### Geometrías
+
+- Three.js utiliza triángulos para representar objetos, otra manera de trabajar
+ es la Geometría Constructiva de Solidos (CSG por sus siglas en ingles)
+- `BufferGeometryUtils()`: es conveniente unir multiples objetos que no van a
+ cambiar entre si.
+
+### Editor de three.js
+
+[Visit this link](threejs.org/editor)
+
+
+### Libros
+
+[Libros Escenciales](http://www.repo.dreamhosters.com/libros-escenciales.zip)
+## Clase 17-03-24
+
+### Sistemas de coordenadas
+
+- Terna derecha o terna izquierda
+- `Three.js` utiliza un sistema coordenado de terna derecha
+- Las transformaciones afines son aquellas que preservan la forma, son lineales
+- Coordenadas homogéneas
+- Las rotaciones siempre son desde el origen de coordenadas
+- Las matrices se inicializan a la matriz identidad
+- `matrixAutoUpdate = false`
+- Gimbal Lock
+- Cuaterniones
+## Clase 21-03-24
+
+### Arbol de Escena
+
+- Un sistemas de coordenadas relativo puede ser interpretado como multiples
+ transformaciones
+
+### Correcta posición de los objectos en su sistema de coordenadas
+
+- Trasladar la geometría instead of mesh to set the coordinate system origin
+- `Parent.add(Child)` posición relativa al `Parent`
+- `matrixWorld` representa las coordenadas respecto al sistema de coordenadas
+ absoluto
+- `matrix` representa las coordenadas respecto al sistema de coordenadas
+ relativo
+
+### Contenedores
+
+- Los contenedores son los `Group`, también podrían ser `Object3D`
+## Clase 25-3-24
+
+### BufferAttributes
+
+- [BufferAttributes](https://threejs.org/docs/index.html?q=bufferat#api/en/core/BufferAttribute)
+- El constructor debe ser un
+ (TypedArray)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray]
+- Spread opearator (...)
+- `Index buffer` para ahorrar memoria eliminando vertices redundantes
+- `bufferGeometry.setIndex()`
+- Los intex buffers tambien son Typed Arrays *verificar la precision*
+- Modos de dibujo de WebGL
+- Three.js solo soporta GL_TRIANGLES para dibujar triángulos
+- WebGL permite utilizar un numero de vertices con un determinado material y
+ otro numero de vertices con otro.
+- Regla de la mano derecha para determinar la cara frontal de un triangulo.
+ * Solo se dibujan la cara frontal de los triángulos
+- `flatShading()`
+- WebGL interpola las normales de los vertices
+- La GPU interpola los vertices ya sea de colores, normales, etc.
+- Three.js `side` permite seleccionar que cara del triangulo dibujar
+
+```js
+ const defaultMaterial = new THREE.MeshPhongMaterial({
+ color: 0xff9900,
+ side: THREE.DoubleSide,
+ });
+```
+
+- Los vectores normales deben tener norma `1`
+
+### Tarea
+
+- 23 grados tierra
+## Clase 05-04-24
+
+\tableofcontents
+
+### Formatos Soportados por Three.js
+
+* glTF
+* FBX
+* OBJ
+* COLLADA (DAE)
+* STL
+
+Siendo el más importante y eficiente `glTF`
+
+* Dos versiones 1.0 y 2.0, siendo la primera obsoleta
+
+### GLTF
+
+Los archivos `.gltf` son modelos 3D en formato JSON.
+
+Los archivos `.glb` son la version binaria de los archivos `gltf`
+
+### Loaders
+
+```js
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+```
+
+```js
+loader.load( 'models/helmet/DamagedHelmet.gltf',
+ onModelLoaded,
+ onProgress,
+ onLoadError);
+```
+
+```js
+function onModelLoaded(gltf) {
+ console.log('Model loaded', gltf);
+ gltf.scene;
+ scene.add(gltf.scene);
+}
+```
+
+```js
+function onProgress(event) {
+ console.log((event.loaded / event.total) * 100 + '% loaded');
+}
+```
+
+* CallBacks vs. Promises
+
+### Formate USDZ
+
+Formato alternativo adoptado por Apple y desarrollado en conjunto por Pixar
+
+Object promise
+
+### Eventos del Teclado
+
+Primero hay definir un callback para cuando se produzca un evento sobre un
+objeto html en particular mientras la ventana del navegador este en foco
+
+```js
+Document.addEventListener('keydown', keyHandler)
+```
+
+```js
+function keyHandler(event) {
+ if (event.key == 'c' && event.ctrlKey && event.shiftKey) {
+ console.log("Ctrl+Shift+c");
+ }
+}
+```
+
+#### Controles
+
+##### FlyControl
+
+##### OrbitControl
+
+##### TrackballControl
+
+#### User Interface
+
+##### uil
+
+[uil](https://github.com/lo-th/uil)
+
+#### dat GUI
+
+[dat.GUI](https://github.com/dataarts/dat.gui)
+
+```js
+let gui = new dat.GUI();
+gui.add(params, 'cantidadTotal', 0, 10).step(1);
+```
+
+### Matriz de Normales
+
+* El comportamiento deseado al trasladar y escalar un objeto, es que las
+ normales conserven su dirección
+* El comportamiento deseado al rotar un objeto es que las normales cambien su
+ dirección
+* Casos particulares incluyen escalado con diferente magnitud en sus componentes
+
+### Shaders
+
+#### Uniforms
+
+Las `uniforms` son variables globales que comparten todas las unidades de
+procesamiento de la GPU
+
+```js
+// Se definen los uniforms que se usarán en los shaders
+uniforms: {
+ modelMatrix: { value: new THREE.Matrix4() },
+ viewMatrix: { value: new THREE.Matrix4() },
+ projectionMatrix: { value: new THREE.Matrix4() },
+},
+```
+
+#### Varyings
+
+Las `varyings` son variables globales que el Vertex Shader comparte con el
+Fragment Shader
+
+#### Vertex Shader
+
+```c
+precision highp float;
+
+attribute vec3 position;
+attribute vec2 uv;
+
+uniform mat4 modelMatrix;
+uniform mat4 viewMatrix;
+uniform mat4 projectionMatrix;
+varying vec2 vUv;
+
+void main() {
+ vec3 pos = position;
+
+ gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(pos, 1.0);
+ vUv = uv;
+}
+```
+
+#### Fragment Shader
+
+```c
+precision highp float;
+varying vec2 vUv;
+
+void main() {
+ // Se pinta el fragmento con las coordenadas de textura
+ gl_FragColor = vec4(vUv, 0.0, 1.0);
+}
+```
+
+##### Normal a una Superficie deformada
+
+* Versión de WebGl 2.0 (OpenGL 3.0) proporciona el calculo de las derivadas
+* Se calcula el vector gradiente
+
+```c
+vec3 x=dFdx(vViewPos);
+vec3 y=dFdy(vViewPos);
+```
+
+```c
+// Normal de la superficie surge de la normalización del producto cruz de los
+// vectores gradiente
+vec3 normal=normalize(cross(x,y));
+```
+## Clase 08-04-24
+
+\tableofcontents
+
+### Superficies de Barrido (Sweep)
+
+* Segmentos = niveles - 1;
+* El buffer de indices no depende de la forma del objeto
+* Para calcular el vector normal de una superficie siempre es mejor computarla
+ utilizando la expresión analítica de la superficie, ya que al realizar una
+ interpolación de las normales de los vertices adyacentes se pueden cometer
+ errores
+* Para la curva que forma el recorrido que genera la forma se necesita conocer
+ la expresión analítica de la curva en forma paramétrica, por ejemplo para un
+ tubo
+
+$$f(u) =(R*cos(u*PI/2),R*sen(u*PI/2))$$
+
+* Posición
+* Tangente
+* Normal
+* Binormal
+
+#### Matriz de Nivel
+
+Para cada nivel se define la **Matriz de Nivel** que transforma la forma (sus
+vértices) del espacio de modelado al sistema de coordenadas del nivel
+
+La transformación de puede descomponer en: una Rotación (en X,Y,Z) + una
+Traslación (al nivel)
+
+#### Generación de Tapas
+
+> Las tapas las podemos resolver duplicando las matrices de Nivel del primer y
+> último nivel del recorrido
+
+* De esta manera los indices son los mismo sol oque la posición de los vertices
+ del ultimo nivel colapsara en un punto
+
+* Muchos objectos manufacturados se pueden modelar con el algoritmo de Sweep
+* Cualquier superficie de barrido se puede descomponer en un plano
+
+### Superficies de Revolución
+
+Las superficies de barrido son superficies de barrido cuya curva de recorrido
+esun circulo de radio infinitesimal
+
+### Trabajo Práctico
+
+Una de las partes fundamentales
+
+> Implementar el algoritmo de barrido
+
+#### Forma
+
+```js
+posiciones = [];
+normales = [];
+```
+
+#### Recorrido
+
+```js
+matricesDeNivel = [];
+```
+## Clase 12-04-24
+
+\tableofcontents
+
+### Geometrias
+#### Superficies de Revolucion
+
+#### [LatheGeombetry](https://threejs.org/docs/#api/en/geometries/LatheGeometry)
+
+Genera superficies de revolución a partir de una forma, no interpola las
+normales
+
+#### ExtrudeGeometry
+
+* Shape
+* Path
+
+#### ConvexGeometry
+
+Genera el polígono más chico que encierra a una nube de puntos
+
+#### ParametricGeometry
+
+Permite implementar superficies de barrido
+
+```js
+const geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 );
+```
+
+* `u` y `v` varían siempre entre 0 y 1 independiente del tamaño de la superficie
+
+#### ShapeGeometry
+
+#### TubeGeometry
+
+#### SDFGeometry
+
+* shadertoy -> Raymarching
+
+#### [InstancedBufferGeometry](https://threejs.org/docs/#api/en/core/InstancedBufferGeometry)
+
+#### Curvas de Bézier
+
+> Controlar la tangente de la curva
+
+Permite realizar curvas a tramos mucho más fácil que con puntos, luego para
+representarla o utilizarla se discretiza
+
+Puntos de control
+
+##### Quadratic Bézier
+
+##### Cubic Bézier
+
+`getPoint(t)` devuelve el valor de la curva analíticamente
+
+`getPointAt(u)` devuelve el valor de la curva al evaluar `u` en `lookUpTable`
+
+* La distancia minima para dibujar una curva son 4 puntos de control
+
+#### Catmull-Rom Spline
+
+> Documental ILM: LIGHT & MAGIC (2022)
+
+Son similares a las curvas de bezier pero permite calcular una curva suave que
+pasa por un conjunto determinado de puntos
+
+#### [Frenet Frames](https://janakiev.com/blog/framing-parametric-curves)
+
+Es un algoritmo que permite obtener un vector tangente
+
+`TubeGeometry`
+## Clase 15-04-24
+
+\tableofcontents
+
+* Binormal eje z positivo
+* Normal hacia la derecha derecha
+* Tangente recta
+
+> Para calcular la normal se toma un vector provisorio `v = (0,1,0)` provisorio
+> luego realizar el producto vectorial con el vector tangente. Para calcular la
+> Binormal, se multiplica vectorialmente la normal hallada con el vector
+> tangente.
+
+* `Matrix.slerp()`: Interpola dos matrices
+
+### Texturas
+
+Mapeo de texturas
+
+#### Unidimensional
+
+> Arregla unidimensional
+
+#### Bidimensional
+
+> Arreglo 2D
+
+##### Rasterizador (o Sampler?)
+
+Dado un valor devuelve el color basado en una textura
+
+* Minification
+* Magnification
+
+###### Filtrado de Texturas
+
+Se utiliza para mitigar el efecto del aliasing. El aliasing ocurre en la
+geometría también, y en ese caso se utiliza el anti-aliasing
+
+###### Nearest Neighbor
+
+###### Linear Filtering
+
+###### Mipmapping
+
+Se escalan las texturas hasta llegar a una textura de 1x1
+
+Es preprocesado, por lo que **no genera** un gasto significativo en tiempo de
+ejecución, ademas de que no consume mas de 50% de la textura original
+
+#### Tridimensional
+
+> Arreglo 3D
+
+#### Bitmaps
+
+Los bilmas es un formato de imagen y es así como se guarda en la memoria de la
+GPU
+
+#### Wrapping Modes
+
+* `gl.REPEAT` La textura se repite infinitamente, aunque solo se guarda una copia
+* `gl.CLAMP` Se conserva el valor limite de la textura
+
+#### Shader
+
+Se pueden modificar las texturas ya que las texturas pasan por un Shader
+
+* En el vertex Shader se puede modificar las texturas
+
+### Texturas en Three.js
+
+[Textures](https://threejs.org/manual/#en/textures)
+
+* Los cubos son grupos de indices
+* Se pueden cargar multiples texturas a un grupo y Treejs asigna la texturas al
+ grupo con el respectivo indice
+* Simulación de flujo de líquido mediante la modificación de texturas
+## Clase 19-04-24
+
+\tableofcontents
+
+### Curvas
+
+Las curvas pueden no verse y definir la geometría de la escena
+
+#### Puntos de Control
+
+Un conjunto de vertices con una determinada
+
+#### Interpolación vs. Aproximación
+
+En el primero, la curva pasa por los puntos de control, mientras que en la
+aproximación, la curva no pasa por ningún punto de control, salvo quizás los
+extremos
+
+#### Métodos de aproximación
+
+##### Curva B-Spline
+
+[Curva B-Spline](https://en.wikipedia.org/wiki/B-spline)
+
+##### Curva de Lagrange
+
+#### Invariancia Afín
+
+#### Parametrización de Curvas
+
+#### Método de Casteljau
+
+Algoritmo de interpolación de puntos de control
+
+#### Curvas de Bézier
+
+La curva final es igual a la obtenida por el método de Casteljau, pero se
+utiliza un método distinto para obtenerla, el algoritmo utilizado en la curva de
+Bézier es recursivo
+
+> De control global, es decir, todos los puntos de control afectan a todos los
+> demás
+
+Se define una curva de Bézier de grado $n$ de la siguiente manera
+
+$$C(u) = \sum^{n}_{i=0} p_{i} B^{n}_{i}(u)$$
+
+Hay que tener en cuenta que el grado $n$ es la cantidad de puntos de control
+menos uno
+
+Existe una forma matricial para halla de las curvas de Bézier
+
+> Para definir una curva cerrada se usan las mismas coordenadas para el punto
+> inicial y final y ademas para que sea suave el segundo punto y el penúltimo
+> deben tener la misma dirección
+
+> Polinomios de Berstein
+>
+> $$B^{n}_{i}\left(u\right)$$
+
+##### Propiedades
+
+* Comienzan y terminan en los puntos extremos, es decir, interpola dichos puntos
+* Comienza en el primer punto con la dirección del segundo
+* La curva de Bézier siempre queda definida dentro del casco convexo del
+ polígono de control
+* La velocidad inicial de la curva, depende de la longitud del segundo punto
+
+##### Concatenación de Curvas de Bézier
+
+Se pueden obtener formas complejas concatenando Curvas de Bézier, para esto se
+usa el ultimo punto de la primer curva como el primero de la siguiente
+
+#### Curvas de Catmull-Rom
+
+Son curvas de interpolación similares a las de Bézier, solo que utilizan cuatro
+puntos de control como mínimo y luego la curva se dibuja con el segundo y tercer
+punto
+
+#### Trabajo Práctico
+
+* Arboles -> Grupo dentro de Geometrías
+* Animar el nivel del agua
+* Height Maps o Elevation Map
+* [World Machine](https://www.world-machine.com/) Sirve para crear Elevation Maps
+## Clase 22-04-24
+
+\tableofcontents
+
+### Transformaciones
+
+### Map de coordenadas UV
+
+#### En superficies de barrido
+
+Utilizar `getPointAt()` por sobre `getPoint()`
+
+#### En tapas
+
+[Shape](https://threejs.org/docs/index.html?q=shape#api/en/extras/core/Shape)
+
+### [Perlin noise](https://es.wikipedia.org/wiki/Ruido_Perlin)
+
+* Se utilizan números pseudo-aleatorios para generar ruido
+
+### Repetición de texturas en el Sampler
+
+Para cubrir una extension mayor que el de la textura evitando que la repetición
+de la misma sea evidente, una técnica es repetir la textura pero con diferentes
+escalas, siendo el valor de la escala un numero no múltiplo, luego mezclar todas
+las texturas escaladas
+## Clase 26-04-24
+
+\tableofcontents
+
+### Notas sobre el Trabajo Práctico
+
+* Para la cámara en primera persona, se puede agregar un botón a la interfaz
+ para iniciar la captura del teclado (debido a como funcionan los navegadores)
+* Textura `skybox` para el cielo
+ - En caso de utilizar se puede hacer con
+ [`renderer.background`](https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L31)
+* Para el modo noche se suele utilizar una iluminación azul oscuro
+
+### Sobre curvas de Bézier
+
+* Promedio ponderado de una serie de puntos de control
+* El algoritmo de Casteljau es un método iterativo que sirve para contruir la
+ curva de Bézier
+* Con mas de 4 puntos de control la curva pierde "control local", por lo que se
+ preferible utilizar curvas de Bézier de grado `4` concatenadas
+* La suma de todos las bases de Bernstein es `1`, esto garantiza que la curva
+ esta incluida en la envolvente convexa
+* Derivando la expresión de las bases de Bernstein se obtiene el vector tangente
+* [The Beauty of Bézier Curves](https://youtu.be/aVwxzDHniEw)
+* [OpenGL ES Shading Language (GLSL)](https://shaderific.com/glsl.html)
+
+### Sobre el parcial
+
+El parcial es en mayoría teórico escrito, puede pedir algunos ejemplos breves de
+código
+
+#### Temas que se evalúan
+
+* Pipeline gráfico
+* Transformaciones
+* Curvas de Bézier
+* Proyecciones
+
+### Iluminación
+
+* En `glsl` no existen los arreglos dinámicos ya que los programas deben ser
+ estáticos, es decir, se debe declarar el "scope" de cada variable de antemano
+* Para declarar shaders en `Three.JS` se puede utilizar `rawShaderMaterial`
+* Reflexiones
+* Refracciones
+* Interreflexiones
+* Sub-Surface Scattering
+* Modelo `phong` de iluminación
+## Clase 29-04-24
+
+\tableofcontents
+
+### Proyecciones Gráficas
+
+* Las cámaras se crean en el origen de coordenadas de la cámara, mirando en la
+ dirección del eje `z` negativo
+* La cámara queda fija, la escena es la que transforma
+* La cámara tiene 6 grados de libertad:
+ - traslación en los ejes `x`, `y` y `z`
+ - rotación `roll`, `pitch` y `yaw`
+* Coordenadas de visualización a coordenadas de proyección
+* Cuando se aplica la proyección se pierde una dimensión
+
+#### Proyección perspectiva
+
+Quedan determinadas por el punto de proyección.
+
+* Se ubica el punto de proyección en el origen del sistema de coordenadas de la
+ cámara
+* En las proyecciones en perspectiva hay que calcular una matriz de proyección
+ para cada vértice, ya que la proyección depende de la distancia
+
+#### Proyección paralela
+
+Quedan determinadas por la dirección de la proyección
+
+##### Proyecciones ortográficas
+
+* Debido a que la cámara apunta en dirección `-z`, para calcular las
+ proyecciones ortográficas principales se rota la pieza y luego se proyecta
+ sobre el eje `z` , de esta forma la coordenadas de la proyección sobre el
+ plano de proyección son las coordenadas `x` e `y`
+
+###### Multivista
+
+###### Axonométricas Dimétricas
+
+###### Axonométricas Isométricas
+
+###### Axonométricas Trimétricas
+
+##### Proyecciones oblicuas
+
+* z-buffer
+## Clase 03-05-24
+
+\tableofcontents
+
+### Iluminación
+
+* En la luz puntual se utiliza un decaimiento lineal para compensar la falta de
+ luz indirecta
+* Modelo de iluminación global vs. Iluminación
+
+#### Modelo de Phong
+
+* Ley de Lambert
+* Los materiales tienen una componente especular, una difusa y una mezcla de
+ ambos
+* Reflexión Difusa
+* Reflexión Especular
+* Para el calculo de la componente especular del modelo de Phong los vectores
+ deben estar normalizados
+* $K_d$ es similar a $K_s$ pero para la componente difusa
+* Color de luz y de superficie
+* $\alpha$: Factor de "glossiness" (en `three.js` "shininess")
+* Coeficiente especular $K_s$
+
+#### Mapa de Normales
+
+* Se codifica en RGB el valor de la normal
+* Luego el modelo de Phong se utiliza de la misma manera solo que con la nueva
+ normal obtenida mediante el mapa de normales
+
+#### Mapa de Desplazamiento
+
+#### Mapa de Iluminación
+## Clase 06-05-24
+
+\tableofcontents
+
+### Resolución Ejercicios de Proyección
+
+En las proyecciones en perspectiva se necesita un foco, mientras que las
+proyecciones paralelas una dirección.
+
+Para determinar las ecuaciones de la proyección en perspectiva se sabe que los
+triángulos que forman el plano con el punto foco y el punto a proyectar con el
+punto foco, son triángulos semejantes, sabiendo esto se puede hallar una
+relación entre los catetos de los triángulos.
+
+* Parámetros de Cámara
+ - Near
+ - Far
+ - Frustum
+* [Demo Proyección](https://xnqor.csb.app/)
+* En el z-buffer se guarda la posición en el eje `z` de los fragmentos para
+ luego determinar que fragmento dibujar por sobre cual, en función de la
+ distancia a la cámara
+
+### Color
+
+* El color es una sensación que percibe el ser humano
+* El termino "luz blanca" hace referencia a toda la gama de grises
+* Hay tonalidades que no se corresponden a una longitud de onda, por ejemplo la
+ gama de magenta (el violeta no es magenta). Este tipo de tonalidades se
+ denominan no espectrales justamente porque no corresponden a una longitud de
+ onda. Por el contrario los tonos espectrales, son aquellos que tiene una
+ longitud de onda del espectro electromagnético asociada.
+* Los monitores de las computadoras no representan todos los colores ya que con
+ tres colores monocromáticos no se pueden representar todos los colores. Los
+ colores que se pierden son los totalmente saturados.
+* Modelo CIE 1931
+ - Diagrama de cromaticidad
+ - GAMUT
+* Modelo RGB (Red-Green-Blue)
+* Modelo CMY (Cyan-Magenta-Yellow)
+## Clase 16-05-24
+
+\tableofcontents
+
+### Efectos de post-procesado con `EffectComposer`
+
+* Se utiliza para aplicar filtros a una imagen ya generada
+* Ocurre al final del pipeline gráfico
+* Estos filtros por lo general utilizan información de profundidad del
+ `depthBuffer` en el cual se almacena la coordenada `z` de los objetos cuando
+ se proyectan en la imagen final
+* El rasterizador solo dibuja lo que pasa por el centro del pixel
+* Para el [efecto de blur](https://threejs.org/examples/?q=post#webgl_postprocessing_unreal_bloom)
+ se utiliza un filtro de convolución
+
+### Render to texture
+
+Se guarda el resultado de un render en una textura y luego se puede aplicar
+sobre un objeto
+
+### Partículas
+
+Las partículas se representan utilizando `sprites` los cuales son imágenes de 2D
+que siempre están de frente a la cámara
+
+### Shadow maps
+
+Se guarda una imagen del render en escala de grises con más precision de los
+normal, por lo general `float16` o `float32`. Luego la luz "ilumina" hasta una
+profundidad dada por el mapa de grises
+
+* Solo funciona con luces que tienen frustum
+
+### [Raycaster](https://threejs.org/docs/index.html?q=raycaster#api/en/core/Raycaster)
+
+Calcula la intersección entre un rayo y un objeto. Se puede utilizar para
+interacciones con el mouse, utilizando como rayo aquel que se origina en la
+cámara y atraviesa el cursor.
+
+```js
+// update the picking ray with the camera and pointer position
+raycaster.setFromCamera( pointer, camera );
+
+// calculate objects intersecting the picking ray
+const intersects = raycaster.intersectObjects( scene.children );
+```
+
+### [Web Audio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
+
+Se puede utilizar para simular sonidos tridimensionales. Tiene un modelo muy
+preciso para simular como absorbe las frecuencias el cráneo humano
+## Clase 24-05-24
+
+\tableofcontents
+
+### Links útiles sobre color
+
+> NOTA: El Cubo RGB, CMY se toma en el coloquio
+
+* El modelo CMY es un modelo sustractivo, ya que al restar valores a las
+ coordenadas se aumenta luz, mientras que en el modelo RGB al aumenta los
+ valores RGB se aumenta luz.
+* Corrección de gamma: se aplica una curva de transferencia o curva de gamma a
+ la imagen para corregir el tono de los colores oscuros y claros
+ [Color management](https://threejs.org/docs/?q=color#manual/en/introduction/Color-management0)
+* Espacio RGB lineal o RGB con curva de gamma.
+* Cuando se carga una imagen en Three.JS se debe conocer el modo en que esta
+ guardada la imagen (por ejemplo en sRGB).
