Cambios de cámara en el móvil

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 uno de los 3 radiobuttons ubicados en la parte superior, es posible intercambiar entre los distintos tipos de cámara.


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