Movil Con Cámara

Se explicará el siguiente ejemplo.

Este ejemplo es una continuación del ejemplo anterior donde se armó un movil de figuras sencillas. Para esta iteración se quieren agregar 3 tipos de vistas distintas utilizando la cámara: primera persona, tercera persona, y long shot.

Para realizar estas operaciones, lo primero que se hizo fue crear una nueva matriz de cámara y una variable que indicara en que estado nos encontramos (primera persona, tercera persona o long shot).

Adicionalmente, agregamos botones a la interfaz para poder cambiar entre los estados. Se omite ese segmento de código ya que no es pertinente a WebGL.

Luego, en la función drawScene vamos a hacer uso tanto de la cámara como de la variable de estado nueva.

Nótese que antes de dibujar cualquier elemento del móvil, primero alteramos la cámara. Esto se debe a que la matriz de cámara es de la que nos vamos a basar para realizar todas las otras operaciones de rotación y transformación.

La función alterCamera se encarga de definir que tipo de cámara vamos a utilizar dependiendo de la variable de estado. Esta también crea la matriz de proyección.

Para la primera cámara que vamos a utilizar, la de primera persona, se hacen las siguientes transformaciones:

Vamos a estar dentro de uno de los cubos del primer nivel, viendo hacia los otros cubos. Por esta razón, primero rotamos a la misma velocidad y en la misma dirección que uno de los cubos. Luego hacemos una translación en el eje z de tal forma que quedemos un poquito fuera de el. Finalmente, aplicamos la inversa de la matriz para que en vez de estar moviendo la cámara, movamos el mundo. Ya que todos los cubos del mismo nivel rotan a la misma velocidad, los vemos estáticos. Sin embargo, el móvil embebido de segundo nivel rota a una velocidad distinta, y por ende, se ve en movimiento.

Para la segunda cámara que vamos a utilizar, tercera persona, se hacen las siguientes transformaciones:

En esta ocasión estamos siguiendo uno de los cubos de primer nivel. Rotamos con él para que siempre este en nuestra mira. Esto causa que se vea estático. Al no tener un fondo atrás, no se percibe que realmente está tanto la cámara como el cubo en movimiento. Sin embargo, si se aprecia como el móvil embebido sí se mueve. La diferencia con el caso anterior es que aplicamos la matriz de proyección para poder ubicar la cámara en el centro del móvil.

Para la última cámara que vamos a utilizar, long shot, se hacen las siguientes transformaciones:

En este caso, alejamos la cámara bastante del dibujo de tal forma que se pueda apreciar completo desde lejos. Esto se logra con la primera instrucción de translación. Es importante aplicar la matriz de proyección en este caso para tener un ángulo distinto y que podamos alejarnos afuera de los márgenes tradicionales que van de -1.0 a 1.0.

Tras modificar la cámara, esta es utilizada por todos los métodos de dibujo para modificar su versión del world view matrix antes de realizar más transformaciones. Un ejemplo de esto se ve en drawMovil, la función que se encarga de dibujar el móvil base grande:

Bitácora de Tiempo:

Para esta actividad se estimaron 4 horas de trabajo. Sin embargo, el tiempo empleado fue mucho mayor. Para precisar, se dispuso de alrededor de 8 horas. No se tenia claro el concepto de cámara y de como aplicarlo correctamente. Tras realizar una investigación, se obtuvo un conocimiento básico, sin embargo, todavía me sigue costando realizar las operaciones de forma adecuada. Adicionalmente, también se tuvo que agregar móviles locales al ejemplo anterior ya que estos faltaban de la tarea pasada. Esto influyó en que se gastara más tiempo del estipulado.