Proyecto Final - Soportes fase de modelado



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 de la información del OBJ.


Fases del proyecto

  • Modelado del edificio, obtención de OBJ
  • Conversión de datos del modelo a array de Javascript en archivo anexo
  • Inclusión de código web para movimiento vía mouse y teclado
  • Pruebas de recorrido
  • Elaboración de código WebGL para optimización de rendering (candidato a implementar: occusion culling)
  • Elaboración de código WebGL (shaders GLSL) para texturas e iluminación.
  • Objetivos secundarios (en caso de haber completado las fases anteriores y contar con tiempo suficiente): mapas normales, más props (materas, fuentes de agua), NPCs y mecánica de juego.

Comentarios

Publicar un comentario

Entradas populares de este blog

Ejemplos básicos en WebGL y Processing

Imagen
A continuación son mostrados, además del caso requerido en el planteamiento inicial acerca de un entorno diferente a WebGL (en este caso, Processing) he agregado también un segundo caso en WebGL. Uno de los objetivos perseguidos en este ejercicio es hacer funcionar cada uno de estos casos de manera offline (y sin el uso de servidores web en localhost, para facilitarle las cosas a un usuario no técnico). Como se vera en las líneas siguientes, esto constituye un desafío interesante porque el guardado a disco duro que usualmente realizan los navegadores web sólo tienen en cuenta los archivos referenciados en los HTMLs, y no tienen en cuenta los recursos llamados desde archivos JS o CSS. Para poder establecer una comparación entre WebGL y Processing, y puesto que no tengo experiencia manejando código en WebGL (aunque sí he tenido un poco más de práctica con OpenGL y esperaría encontrar alguna semejanza en su derivado dirigido a la Web), me vi en la necesidad de abordar este segundo caso ...
Leer más

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...
Leer más

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 é...
Leer más