5. Vistas de cámara en WebGL

El objetivo es parametrizar la cámara por medio de WebGL:

Cambiándola entre primera, tercera y long shot; revisando coordenadas de la escena.

Cambiando el tipo de perspectiva

Usando el ejemplo del móvil como referencia a lo que se quiere visualizar.

Cámara en distitnas figuras, orden de transformadas

El orden de transformaciónes que se realizaban antes de cambiar las cámaras eran:

1. Trasladar la posición de origen a la figura raiz del móvil.
2. Rotar la raiz para el movimiento rotatorio del móvil.
3. Calcular el vector compuesto de la figura por cada traslación realizada desde la raiz, el cual representa la misma ubicación de la figura ya que la raíz es el centro del ModelMiewMatriz. Se utilizaron dos figuras cuya posición se conocía desde las traslaciones que habían tenido para su renderización.
   
   

4. Método mat4.LookAt()

   Para cambiar la cámara, se encontró el método lookAt(MatrizModelView, posiciónCamara, posiciónAVer, NormalCamara). Con solo pasar estas ubicaciones ya cambia la cámara con un target ubicado para ver. La determinación de los parámetros para cada tipo de vista se determina en el siguiente cap.

Distintas vistas de cámara

Tercera persona: Se utilizó el método lookAt, con la posición de la figura como objeto a ver. La posición de la cámara, es una posición similar con un offset en X o Z. No podía ser muy alto porque las otras figuras que orbitan la figura, tapaban la cámara misma.

Primera persona: Existia el problema que si uno ponía la posición de la figura como objetivo en lookAt, no importaba el offset en la cámara, esta siempre iba a apuntar a la figura. Lo que se realizó fue agergar un offset mayor para la posición de la figura y que la posición de la cámara mirara ese desfaz, con un offset propio que la ubicara fuera fuera de la figura.

Long Shot: No es necesario cambiar la cámara de lugar. Se dejó entonces sin el llamado del lookAt

Cambio de proyecciones

Para especificar una proyección de tipo perspectiva u ortogonal, se utilizaron las instrucción .mat4.perspective y mat4.ortho respectivamente con la Matriz Projection como parámetro. En la proyección ortogonal, los parámetros eran los bordes máximo y mínimo del campo visual en cada plano. Para especificar una figura específica, los bordes fueron especificados en la posicion de cada figura más o menos 5 unidades en X y Z. Esto garantizaba un zoom en el plano ortogonal.



El código del resultado se puede ver a continuación. El seguimiento del trabajo realizado se encuentra en este sprint .

See the Pen Tarea 5: Camara de WebGL by David Mayorga (@damayor) on CodePen.