6. Animación en WebGL

En esta ocasión se va a realizar la animación de un objeto (asimétrico) por una ruta poco convensional: una curva. Para realizar una animacion, las funciones deben estar parametrizadas por una variable del tiempo, la cual es aumentada (cambiada) una vez que se ha pintado un frame. Ojo: no se puede aumentar linealmente, sino por el contrario, es necesario sumarle la cantidad de tiempo deltaTime que ha pasado desde la última renderización. ¿Por qué? Porque el proceso de ejecución debe ser exactamente el mismo sin importar las especificaciones técnicas de la máquina.

función render dentro de main

final del función drawScene( )

Trasladar la figura por una función parametrica

Para mover la figura es necesario parametrizar el vector posición del método mat4.translate de la matriz ModelView con dicha variable del tiempo t. De esta manera la ubicación va a cambiar a medida que éste va avanzando. A continuación se puede ver el ejemplo de la función paramétrica de un círculo.

Crear una curva bezier

Ahora bien, el objetivo trata de que la figura se mueva por un camino poco convencional y más elaborado. Se prsenta entonces la curva de Bezier: una curva paramétrica creada matematicamente con 3 o 4 puntos de control. Esta curva pasa por los puntos de los extremos y los otros 2 puntos los usa para para realizar entre cada par de puntos una interpolación de 0 a 1 y así dar origen a cada punto que completara la curva.

Referencia: WebGLFundamentals¹

El proceso de creación se encuentra mejor explicado y parametrizado en [1] . Dicha referencia de WebGLFundamentals brindó la ecuaación de la ubicación de cada punto teniendo los 4 puntos de control y un t específico. Así toda la curva quedaría elaborada cambiando t en el rango (0,1).

Referencia: WebGLFundamentals¹

Dicha ecuación quedaría (dentro de un arreglo de floats seguidos) definida en Javascript como:

A continuación un ejemplo para distintos t específicos.

Traslación del objeto por la curva

Para que el objeto 3D recorra la curva, cada t va a determinar la posicion del objeto en un frame específico. Dicho vector posición va a entrar como parámetro la funcion mat4.translate como se describió secciones atrás.

Curva de Bezier más elaborada

Para moverse por una curva mas compleja (con más de un punto de inflexión) ya no serían solo 4 sino mínimo 7 puntos de control los que necesitaría una curva. En este caso se escogieron los últimos 4 puntos del mismo arreglo controlPoints , tomando el último punto de la curva original, como el primer punto de control de la segunda. Los siguientes puntos de control no dependen de la anterior curva, originando entonces un camino de ésta forma:

Traslación del objeto por esa curva más dificil

Para lograr que fuera por ambas curvas, fue necesario independizar el parametro del tiempo de la variable t encargada de la interpolación entre 0 y 1. En ese orden de ideas, fue necesario crea una variable adicional que fuera con el parámetro tiempo y una vez llegara a 1, retornara a 0.

Para cambiar de curva, se deterimno que el parámetro del tiempo, una vez mayor a 1, pudiera pasar a la otra curva, cambiando los puntos de control de la primera a la segunda curva.

Una vez la curva ha recorrido ambas curvas, queda en la posición final. 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 6: Animacion by David Mayorga (@damayor) on CodePen.

Bibliografia:

1. WebGL 3D Geometry - Lathe