Skwish Mobile



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, rotación para cambiar la pose del objeto, escala).
  • Manejo de parámetros del objeto: tipo (esfera, varilla o cuerda), iluminación, color.
  • Llamado recursivo a cada uno de los hijos.

La matriz de proyección sólo tuvo que generarse 1 vez, y se usó la misma en todas las iteraciones del procedimiento.

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