commit 801b2f2cc9cee6b23287f314e6f555ecd2a2e4c6
parent d85831a3477d663e92098cfdbc8ba95322c7786e
Author: Martin Klöckner <mjkloeckner@gmail.com>
Date: Fri, 26 Apr 2024 12:33:31 -0300
Add notes from lectures
Diffstat:
6 files changed, 500 insertions(+), 0 deletions(-)
diff --git a/clases/clase-05-04-24.md b/clases/clase-05-04-24.md
@@ -0,0 +1,174 @@
+# Clase 5-4-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));
+```
diff --git a/clases/clase-08-04-24.md b/clases/clase-08-04-24.md
@@ -0,0 +1,65 @@
+# Clase 8-4-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 = [];
+```
diff --git a/clases/clase-12-04-24.md b/clases/clase-12-04-24.md
@@ -0,0 +1,72 @@
+# 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`
diff --git a/clases/clase-15-04-24.md b/clases/clase-15-04-24.md
@@ -0,0 +1,78 @@
+# 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
diff --git a/clases/clase-19-04-24.md b/clases/clase-19-04-24.md
@@ -0,0 +1,85 @@
+# 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
diff --git a/clases/clase-22-04-24.md b/clases/clase-22-04-24.md
@@ -0,0 +1,26 @@
+# Clase 22-04-24
+
+\tableofcontents
+
+## Transformaciones
+
+## Mapeo 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)
+
+Números pseudo-aleatorios
+
+## 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
