TA159

Notas, resueltos y trabajos practicos de la materia Sistemas Gráficos
Index Commits Files Refs Submodules README LICENSE
commit dcd776a33b474e3eac7c32857af53279992e670c
Author: Martin Klöckner <mjkloeckner@gmail.com>
Date:   Thu,  4 Apr 2024 12:12:54 -0300

First commit: add notes from lectures

Diffstat:
Aclases/clase-15-03-24.md | 42++++++++++++++++++++++++++++++++++++++++++
Aclases/clase-17-03-24.md | 13+++++++++++++
Aclases/clase-21-03-24.md | 19+++++++++++++++++++
Aclases/clase-25-03-24.md | 34++++++++++++++++++++++++++++++++++
4 files changed, 108 insertions(+), 0 deletions(-)
diff --git a/clases/clase-15-03-24.md b/clases/clase-15-03-24.md
@@ -0,0 +1,42 @@
+# Sistemas Graficos
+
+## 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)
diff --git a/clases/clase-17-03-24.md b/clases/clase-17-03-24.md
@@ -0,0 +1,13 @@
+# Clase 17-3-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
diff --git a/clases/clase-21-03-24.md b/clases/clase-21-03-24.md
@@ -0,0 +1,19 @@
+# Clase 17-3-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`
diff --git a/clases/clase-25-03-24.md b/clases/clase-25-03-24.md
@@ -0,0 +1,34 @@
+# 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