1 # Trabajo Practico Sistemas Gráficos 2 3 El trabajo practico consiste en implementar una escena en 3D en 4 [WebGL](https://www.khronos.org/webgl/) utilizando la librería de JavaScript 5 [Three.js](https://threejs.org/) 6 7  8 9 ## Inicio Rápido 10 11 Clone el repositorio con el siguiente comando: 12 13 ```console 14 $ git clone https://github.com/mjkloeckner/TA159.git 15 ``` 16 17 Navegue al directorio del repositorio clonado y posteriormente a la carpeta del 18 trabajo práctico 19 20 ```console 21 $ cd TA159/tp 22 ``` 23 24 Instale las dependencias utilizando [npm](https://www.npmjs.com/) 25 26 ```console 27 $ npm install 28 ``` 29 30 Finalmente inicialice un servidor Web en el directorio del trabajo práctico y 31 posteriormente abra un navegador de internet en la correspondiente *URL* 32 33 En caso de no contar con un servido web instalado, puede instalar 34 [vite](https://vitejs.dev/) utilizando el siguiente comando de 35 [npm](https://www.npmjs.com/): 36 37 ```console 38 $ npm -g install vite 39 ``` 40 41 Instalado vite, inicialice el servidor con el siguiente comando: 42 43 ```console 44 $ vite 45 ``` 46 47 Finalmente abra su navegador preferido en la *URL* especificado por vite. 48 49 ## Dependencias 50 51 * Un navegador que soporte [WebGL](https://get.webgl.org/) 52 * [Node.js](https://nodejs.org/) 53 * [npm](https://www.npmjs.com/) 54 * [vite](https://www.npmjs.com/package/vite) 55 56 ## Objetivos 57 58 * [X] Terreno 59 * [X] Arboles 60 * [X] Vias de Tren 61 - [X] Crear el terraplen 62 - [X] Crear las vias 63 * [ ] Locomotora 64 - [X] Chassis, cabina, ruedas, caldera 65 - [ ] Hacer que las ruedas roten sobre su eje 66 * [X] Puente 67 - [X] Base de ladrillos 68 - [X] Estructura de Hierro 69 * [X] Túnel 70 * [X] Cámaras 71 - [X] Orbital general 72 - [X] Fija, locomotora frontal (desde la cabina hacia adelante) 73 - [X] Fija, locomotora trasera (desde la cabina hacia atrás) 74 - [X] Fija, con vistas al interior del túnel 75 - [X] Fija, con vistas al interior del puente 76 - [X] Primera persona (debe poder moverse sobre el terreno con el teclado y el mouse) 77 * [X] Texturas 78 * [X] Iluminación 79 - [X] Modo noche/día 80 - [X] Luz en el frente del tren 81 - [ ] Lamparas en posiciones aleatorias del mapa 82 83 ## Como se generan los elementos de la escena 84 85 ### Terreno 86 87 Para generar la geometría del terreno se utiliza un mapa de elevación el cual se 88 puede encontrar en [`assets/elevationMap.png`](./assets/elevationMap.png), luego 89 para la textura del terreno se utiliza 3 texturas diferentes, las cuales 90 se utilizan en el terreno de acuerdo a la elevación del mismo. 91 92 Para utilizar la misma textura varias veces y evitar que se note la repetición, 93 se utiliza la función Ruido de Perlin para obtener valores pseudo-aleatorios. 94 95 ### Arboles 96 97 Los arboles se generan de manera aleatoria en todo el mapa, y se utiliza un mapa 98 similar al mapa de elevación para verificar que no caiga en un punto muy bajo o 99 muy alto, o una zona prohibida. 100 101 La cantidad de arboles en el mapa se puede cambiar mediante la modificación del 102 argumento del llamado a la función `buildTrees` en la función `buildScene` del 103 archivo `/src/scene.js`, hay que tener en cuenta que si bien queda mejor con 104 mas arboles en la escena, cuantos mas arboles haya peor será la performance. 105 106 ### Terraplén y Vías de Tren 107 108 Para generar las vías del tren se utiliza la función 109 [`ParametricGeometry`](https://threejs.org/docs/index.html?q=param#examples/en/geometries/ParametricGeometry) 110 de `three.js`, la cual genera una geometría a partir de una función paramétrica 111 que recibe tres parámetros: `u`, `v` y un vector en espacio 3D. 112 113 ### Locomotora 114 115 A continuación se muestra el árbol de dependencias de los objetos que componen 116 la locomotora 117 118  119 120 Para realizar cada objeto de la locomotora se utilizan funciones primitivas de `three.js` tales como 121 [`BoxGeometry`](https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry) o 122 [`CylinderGeometry`](https://threejs.org/docs/index.html?q=cylin#api/en/geometries/CylinderGeometry), 123 las cuales generan cubos y cilindros, respectivamente. 124 125 ### Túnel 126 127 El túnel se genera con la función `ExtrudeGeometry()` utilizando como forma una 128 curva predefinida. 129 130 ### Puente 131 132 El puente se genera por partes, siendo las partes principales las paredes y los 133 soportes de metal (o `cage` como se define en el código), las paredes se generan 134 de manera similar al túnel, extruyendo una curva, a diferencia que la curva que 135 define la forma se define en base a parámetros definidos por el 136 usuario, de esta manera se puede reutilizar el mismo código para ambos puentes. 137 138 Para los soportes de metal del puente se utilizan cilindros para formar un cubo, 139 luego se repite el cubo en base a parámetros especificados por el usuario. 140 141 ### Iluminación 142 143 La iluminación depende del modo (noche/día), en caso de estar en modo día se 144 muestran 3 luces: ambiente, direccional y puntual, esta ultima imitando al sol, 145 posicionándose de manera tal que coincida con el sol de la textura del cielo. 146 147 En modo noche se oculta la luz ambiente y se cambia el color de la luz 148 direccional por un tono más azulado, además se cambia la posición de la luz 149 puntual para que coincida con la posición de la luna de la textura del cielo 150 151 En cuanto a las luces del tren, solo se muestran cuando el modo noche esta 152 activo, en modo día se oculta. 153 154 ## Recursos Consultados 155 156 * [Documentación de Three.js](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) 157 158 ## Licencia 159 160 [MIT](./LICENSE) 161
