Ejemplo Cubo 3D En Movimiento
Partimos del ejemplo del cubo básico en 3D para llegar al ejemplo que se explicará hoy: mover el cubo cuando el usuario interactúe con el canvas a través de un click.
Se explicaran los segmentos de código que se adicionaron, eliminaron, y modificaron del ejemplo básico del cubo en 3D para llegar a la interacción por medio del ratón.
Aquí se encuentra el demo de lo que se va a explicar.
Inicialmente definimos 4 variables nuevas que van a estar relacionadas con el movimiento del cubo.
Luego, en la función main, tras verificar que el browser soporta WebGL, pasamos a definir el viewport:
Después, antes de definir la función render, agregamos un listener al canvas que nos indica cada vez que el usuario le de click.
El listener le indica a nuestro programa que la posición nueva a a la que se debe desplazar el centro del cubo es la posición a la que el usuario le dio click en el canvas. Hacemos transformación de las coordenadas dadas por el listener, a las coordenadas que entiende WebGL (valores entre -1 y 1 para cada dimensión).
Adicionalmente, se realizaron cambios al buffer de posiciones de los vertices. Si bien antes definíamos los vertices para que el cubo ocupara todo el canvas, ahora definimos los vertices de tal forma que el cubo no ocupe todo el canvas.
De esta forma, aún sin la matriz de translación y perspectiva que se aplicaba antes, el cubo se puede ver bien.
Ya que el cubo se puede visualizar sin necesidad de hacerle transformaciones al final, podemos utilizar las matrices definidas anteriormente para otro propósito. Estos cambios se realizaran en la función drawScene.
Primero, vamos a reciclar la definición de la matriz de proyección para utilizarla como una matriz de translación.
Esta matriz va a ubicar el cubo, que actualmente se encuentra en el centro del canvas, hacia la posición definida por curX y curY.
Segundo, vamos a utilizar la matriz del modelo de vista para rotar el cubo respecto a todos los ejes. Sin esta rotación nuestro cubo parece un cuadrado.
Es importante tener en cuenta que el orden en el que se aplican esta matriz en el vertex shader es sumamente importante. El orden de estas sí afecta el producto.
Finalmente, vamos a hacer un llamado a un nuevo método al final de la función drawScene. Este se encargará de actualizar los valores de curX y curY para acercar el cubo a los valores finalX y finalY:
Dependiendo si el valor final es menor o mayor que el valor actual, toca restar o sumar movementDelta.
Haciendo estos cambios, tenemos un canvas con un cubo rotando que al darle click a otra posición, mueve el cubo de una forma suave hasta el lugar donde se hizo el click.
Se explicaran los segmentos de código que se adicionaron, eliminaron, y modificaron del ejemplo básico del cubo en 3D para llegar a la interacción por medio del ratón.
Aquí se encuentra el demo de lo que se va a explicar.
Inicialmente definimos 4 variables nuevas que van a estar relacionadas con el movimiento del cubo.
- curX y curY determinan la posición actual del centro del cubo.
- finalX y finalY determinan la posición final a la que debe llegar el cubo.
- movementDelta determina la cantidad que se va a desplazar el cubo en cada iteración de su posición actual de X y Y, a la posición final esperada en X y en Y.
Luego, en la función main, tras verificar que el browser soporta WebGL, pasamos a definir el viewport:
Después, antes de definir la función render, agregamos un listener al canvas que nos indica cada vez que el usuario le de click.
El listener le indica a nuestro programa que la posición nueva a a la que se debe desplazar el centro del cubo es la posición a la que el usuario le dio click en el canvas. Hacemos transformación de las coordenadas dadas por el listener, a las coordenadas que entiende WebGL (valores entre -1 y 1 para cada dimensión).
Adicionalmente, se realizaron cambios al buffer de posiciones de los vertices. Si bien antes definíamos los vertices para que el cubo ocupara todo el canvas, ahora definimos los vertices de tal forma que el cubo no ocupe todo el canvas.
De esta forma, aún sin la matriz de translación y perspectiva que se aplicaba antes, el cubo se puede ver bien.
Ya que el cubo se puede visualizar sin necesidad de hacerle transformaciones al final, podemos utilizar las matrices definidas anteriormente para otro propósito. Estos cambios se realizaran en la función drawScene.
Primero, vamos a reciclar la definición de la matriz de proyección para utilizarla como una matriz de translación.
Esta matriz va a ubicar el cubo, que actualmente se encuentra en el centro del canvas, hacia la posición definida por curX y curY.
Segundo, vamos a utilizar la matriz del modelo de vista para rotar el cubo respecto a todos los ejes. Sin esta rotación nuestro cubo parece un cuadrado.
Es importante tener en cuenta que el orden en el que se aplican esta matriz en el vertex shader es sumamente importante. El orden de estas sí afecta el producto.
Finalmente, vamos a hacer un llamado a un nuevo método al final de la función drawScene. Este se encargará de actualizar los valores de curX y curY para acercar el cubo a los valores finalX y finalY:
Dependiendo si el valor final es menor o mayor que el valor actual, toca restar o sumar movementDelta.
Haciendo estos cambios, tenemos un canvas con un cubo rotando que al darle click a otra posición, mueve el cubo de una forma suave hasta el lugar donde se hizo el click.
Comentarios
Publicar un comentario