Elemento Sencillo Interactivo

Se quiere que la posición del octaedro creado anteriormente en Ejemplo WebGL cambie de posicion cuando se de click en el canvas de HTML5

Para lograrlo se debe hacer lo siguiente

1 - Transformación de coordenadas

Para cambiar la posición de un elemento en cada click, primero debemos  decidir como transformar las coordenadas del canvas HTML al sistema de coordenadas que maneja  WebGL.

Sistema de coordenadas del Canvas de HTML

X y Y empiezan en la esquina superior izquierda,  X aumenta hacia la derecha y Y aumenta hacia abajo

Sistema de coordenadas canvas WebGL

El sistema de coordenadas corresponde al de un plano cartesiano convencional

La transformación que usaremos sera la siguiente:

T(x)=  10 * ( (x / ancho del canvas HTML) - 0.5)

T(y) = 10 * ( (y / alto del canvas HTML)  - 0.5)

Esta transformación sirve para cualquier tamaño  de canvas, sin embargo para explicar con facilidad  como se llego esta transformación, vamos asumir que el canvas HTML tiene un ancho de 800 pixeles y un alto de 600 pixeles.

Primero es necesario determinar la posición relativa de un punto con respecto al tamaño total del canvas HTML, por lo cual hacemos lo siguiente:

T(x)=  x / ancho del canvas HTML

T(y) = y / alto del canvas HTML

Entonces por ejemplo para un punto localizado en la mitad del canvas tendríamos:

T(x) = T(400) = 400/800 = 0.5

T(y) = T(300) = 300/600 = 0.5

Con esta posición relativa podemos determinar las coordenadas en el sistema de WebGL, para ello solo necesitamos saber que tan lejos se encuentra el punto del centro del canvas. Por lo cual le restamos 0.5 tanto a X como a Y.

T(x) =  (x / ancho del canvas HTML) -0.5

T(y)  = (y / alto del canvas HTML ) -0.5

Entonces por ejemplo para un punto localizado en la mitad del canvas tendríamos:

T(x) = T(400) = 400/800 - 0.5 = 0

T(y) = T(300) = 300/600 - 0.5= 0

Podemos evidenciar que esto es correcto  un punto que se encuentra en la mitad del canvas HTML equivale a un punto que se encuentra en la mitad del canvas de WebGL.

Por ultimo necesitamos ajustar esta transformación a la distancia a la cual se encuentra la cámara, en este caso, 10 unidades.

T(x)=  10 * ( x / ancho del canvas HTML - 0.5)

T(y) = 10 * ( y / alto del canvas HTML) - 0.5)

2 - Transladar matriz de perspectiva

Transformamos las coordenadas de cada click y las usamos para transladar la matriz de perspectiva. Para realizar estas operaciones con matrices, aplicamos el metodo mat4.translate de la librería glMaxtrix sobre la matriz de perspectiva creada con el método mat4.perspective de esta misma libreria.

Adicionalmente podemos reiniciar la animación de rotación de nuestro objeto en cada click.

Para ello cambiamos la función que determina el angulo de rotación, de tal forma que no este en función del tiempo que lleva abierto nuestro ejemplo ( con Performance.now() ), si no en función del numero de llamados a la función loop, donde en cada click reiniciamos el contador de numero de llamados.