Entradas

Proyecto Final - Entrega 3

Imagen
Demo Src Sprint 3  Agregada textura por omisión "ladrillo" para la mayoría de los objetos, y 3 texturas adicionales para las sillas, columnas cilíndricas y espejo de agua. Para diferenciar la carga de cada textura, se empleó una variable adicional "textura" en el array respectivo.  Para la iluminación se elaboró un shader que genera 1 iluminación direccional, y point lights repartidos en 3 puntos de "túnel", donde podía aprovecharse el efecto de claroscuro. Para introducir las coordenadas de los point lights hacia el shader, se utilizó un mat3 al que luego le fue leida cada columna, a modo de vec3 (lo ideal hubiera sido un array de vec3, pero glsl no permitía crear un uniform así). Cada objeto utiliza únicamente uno de los 2 shaders disponibles. De forma similar que con las texturas, se estableció una iluminación por omisión (direccional) para la mayoría de los objetos, mientras que mediante configuración en el array de nor...

Proyecto Final - Entrega 2

Adaptación del modelo 3D a array de Javascript Agregado código para manejo de eventos de mouse y teclado (WASD + QE para el eje vertical) Los colores de los objetos son temporales, son asignados aleatoriamente al inicio. Pantalla completa Código fuente Sprint 2 - Google Drive

Proyecto Final - Soportes fase de modelado

Imagen
Recorrido físico al interior del edificio Fotografías del edificio Posgrados en Ciencias Humanas (Universidad Nacional), a fin de explorar físicamente el recorrido deseado, capturar tomas para aclarar partes del edificio que no se encuentran comúnmente en las galerías obtenidas vía Google, y obtener muestras de algunas texturas del piso y el techo. Blueprints del edificio Fase de modelado Fueron descartadas partes que no iban a ser parte del recorrido (biblioteca, salones de clase, escaleras, piso 3) Recorrido primer piso: Recorrido segundo piso: Exportación a archivo OBJ Luego de la conversión de cuadriláteros a triángulos, fueron obtenidos 2199 vértices y 2737 polígonos. A fin de contar con el mayor tiempo posible para la fase considerada la más difícil (shaders GLSL para texturas e iluminación), he optado por producir un array de Javascript a partir ...

Animación

Imagen
https://jsfiddle.net/lb18/qpge1aj0/3/ Modificación a partir de ejemplo en demos de WebGL . De su código fueron tomados: 1 de los objetos de "nave espacial" que inicialmente hacía una traslación lineal, y la rutina usada para mover la cámara fue adaptada esta vez para mover el objeto (la cual ya tenía incluido un esquema basado en interpolación lineal). El objeto fue recortado a la mitad para satisfacer el requisito de asimetría en el enunciado del ejercicio. Para mover el objeto se emplearon los métodos translate() y rotate() incluidos en el Model View, y se hicieron 2 modificaciones en el array  movimientos (tomada de  camTracks ) en donde se introdujeron 1 eje adicional de rotación (para un total de 3) y se cambió el significado de dest  que ahora pasa a estar en coordenadas absolutas de mundo, con lo cual se facilitó la labor de codificación de los movimientos. Por último, se tomó una de las posiciones de cámara en  camTracks  y se modificó para que é...

Cambios de cámara en el móvil

Imagen
https://jsfiddle.net/lb18/fms2uate/132/ El asunto al que mayor tiempo se empleó en este ejercicio fue el manejo de la cámara en tercera persona. Primero dispuse la extracción de la matriz de transformación (matriz sal ) de un objeto 3D en específico (el cual estoy señalando con la variable  esrelview en la estructura de datos) para que fuera reutilizada en la próxima iteración. La función lookAt() funciona con coordenadas de mundo (tanto para la cámara como para el target), pero las coordenadas de traslación en sal  estaban respecto de la cámara. A fin de obtener las coordenadas de mundo del objeto 3D, fueron separadas las tranformaciones de la cámara (en la matriz mvmini ) del resto de las transformaciones para objetos, volviéndolas luego a unir con una multiplicación matricial justo antes del llamado a drawScene() , y de esta forma el vector de traslación extraído de sal con getTranslation()  estará conteniendo únicamente coordenadas de mundo. Al pulsar cada ...

Skwish Mobile

Imagen
Link a ejercicio: https://jsfiddle.net/lb18/51zLz9j9/147/ Primero se modelaron objetos en 3ds Max, y cada uno fue exportado a formato OBJ. A partir del código del ejercicio 2 se derivaron modificaciones para permitir instanciar múltiples copias y de distinto tipo (cilindros y esferas). Se estudió el código fuente de este ejemplo  de sistema solar, del cual tomé y adapté 2 esquemas: Estructura de datos jerárquica, en un formato muy similar a JSON. Procedimiento recursivo (guiado por la estructura de datos) para aplicar transformaciones y dibujar objetos. En el procedimiento recursivo los pasos aplicados fueron: Duplicar la matriz de transformación de vista.  Es importante hacer esto para mantener transformaciones separadas entre 2 nodos "hermanos", que podrían ser distintas. Sólo se busca conservar y acumular transformaciones de padres a hijos. Manejo de transformaciones (traslación, rotación para movimiento permanente,...