commit 7b68f1d41ca980f4d73015997d4b56f621890919
parent 31a0a5c456602f148d834fcb649b4aeb62b60a13
Author: Martin Klöckner <mjkloeckner@gmail.com>
Date: Tue, 25 Jun 2024 19:07:47 -0300
update `README.md`
Diffstat:
| M | tp/README.md | | | 79 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------- |
1 file changed, 69 insertions(+), 10 deletions(-)
diff --git a/tp/README.md b/tp/README.md
@@ -1,17 +1,62 @@
# Trabajo Practico Sistemas Gráficos
-El trabajo practico consiste en implementar una escena en 3D utilizando WebGL,
-en particular la libreria [Three.js]()
+El trabajo practico consiste en implementar una escena en 3D en
+[WebGL](https://www.khronos.org/webgl/) utilizando la librería de JavaScript
+[Three.js](https://threejs.org/)
+
+## Inicio Rápido
+
+Clone el repositorio con el siguiente comando:
+
+```console
+$ git clone https://github.com/mjkloeckner/86.43.git
+```
+
+Navegue al directorio del repositorio clonado y posteriormente a la carpeta del
+trabajo práctico
+
+```console
+$ cd 86.43/tp/
+```
+
+Instale las dependencias
+
+```console
+$ npm i
+```
+
+Finalmente inicialice un servidor Web en el directorio del trabajo práctico y
+abra su navegador de internet preferido en la `url` especificada por `vite`
+
+```console
+$ vite
+```
+
+## Dependencias
+
+* Un navegador que soporte [WebGL](https://get.webgl.org/)
+* [Node.js](https://nodejs.org/)
+* [npm](https://www.npmjs.com/)
+* [vite](https://www.npmjs.com/package/vite)
## Elementos de la escena
* [X] Terreno
* [X] Arboles
-* [ ] Vias de Tren
-* [ ] Locomotora
+* [X] Vias de Tren
+ - [X] Crear el terraplen
+ - [X] Crear las vias
+ - [ ] Aplicar textura difusa
+* [X] Locomotora
* [ ] Puente
* [ ] Túnel
-* [ ] Camaras
+* [ ] Cámaras
+ - [X] Orbital general
+ - [ ] Fija, locomotora frontal (desde la cabina hacia adelante)
+ - [ ] Fija, locomotora trasera (desde la cabina hacia atrás)
+ - [ ] Fija, con vistas al interior del túnel
+ - [ ] Fija, con vistas al interior del puente
+ - [ ] Primera persona (debe poder moverse sobre el terreno con el teclado y el mouse)
* [X] Texturas
* [ ] Iluminación
@@ -29,23 +74,37 @@ se utiliza la función Ruido de Perlin para obtener valores pseudo-aleatorios.
Los arboles se generan de manera aleatoria en todo el mapa, y se utiliza el mapa
de elevación para verificar que no caiga en un punto muy bajo o muy alto, como
-puede ser montaña o rio, de acuerdo a un parametro fijo
+puede ser montaña o rió, de acuerdo a un parámetro fijo
+
+### Terraplén y Vías de Tren
-### Vias de Tren
+Para dibujar las vías del tren se utiliza la función
+[`ParametricGeometry`](https://threejs.org/docs/index.html?q=param#examples/en/geometries/ParametricGeometry)
+de `three.js`, la cual genera una geometría a partir de una función paramétrica
+que recibe tres parámetros: `u`, `v` y un vector en espacio 3D.
### Locomotora
-A continuacion se muestra el arbol de dependencias de los objetos que componen
+A continuación se muestra el árbol de dependencias de los objetos que componen
la locomotora
-
+
+
+Para realizar cada objeto de la locomotora se utilizan funciones primitivas de `three.js` tales como
+[`BoxGeometry`](https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry) o
+[`CylinderGeometry`](https://threejs.org/docs/index.html?q=cylin#api/en/geometries/CylinderGeometry),
+las cuales generan cubos y cilindros, respectivamente.
### Puente
### Túnel
-### Camaras
+### Cámaras
### Texturas
### Iluminación
+
+## Recursos Consultados
+
+* [Documentación de Three.js](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene)
