Ejemplo Basico WebGL

A continuación se encuentran los pasos realizados para poder dibujar un octaedro en WebGL similar al de la imagen

1 - Triangulo Basico 2D

Inicialmente pintamos un triangulo en 2d para evidenciar el funcionamiento básico de WebGL. Como estamos trabajando en dos dimensiones, en el arreglo de vertices, los dos primeros valores, corresponden a X y Y y los siguientes 3 valores corresponden a el color del vertice usando (R, G, B). Debido a esto el offset para los vertices sera de 0 bytes, y el offset para los colores sera de 8 bytes (2 * Numero de Bytes en un Float de 32 bits).

2 - Triangulo 2D Girando

Para cambiar la dirección de un objeto Vector, podemos multiplicar el vector por una o mas matrices de rotación En este caso, para obtener la animación del objeto girando, multiplicaremos los vértices del objeto por las siguientes matrices.

• mWorld: Representa la rotación del  objeto en el espacio tridimensional.
• mView: Representa el cambio de posición del observador del Objeto.
• mProj: Representa la proyección 2D del objeto.

Para calcular estas matrices y realizar operaciones con ellas utilizaremos la librería glMatrix.

 Como ahora  trabajaremos en tres dimensiones, en el arreglo de vertices, los tres primeros valores, corresponderan a X, Y y Z y los siguientes 3 valores corresponden a el color del vertice usando (R, G, B). Debido a esto el offset para los vertices seguira siendo de 0 bytes, pero el offset para los colores sera de 12 bytes (3 * Numero de Bytes en un Float de 32 bits).

3 - Octaedro 3D (Primitiva TRIANGLES)

Para visualizar los vertices de nuestra figura, podemos primero localizar sus posiciones en una herramienta como 3DPointPlotter

Teniendo estos puntos, agregamos los vertices para cada uno de los 8 caras triangulares caras del Octaedro, en total tendremos 24 vertices.

Para obtener una animación de rotación aun mejor, creamos dos matrices de rotación, una rotara sobre el eje X y otra sobre el eje Y. Multiplicamos estas dos matrices y guardamos el resultado en mWorld. Lo anterior nos dara como resultado, una rotación del Octaedro sobre X y Y simultáneamente.

4 - Octaedro 3D (Primitiva TRIANGLE_FAN)

Podemos reducir a la mitad el tamaño del arreglo de vértices utilizando la primitiva TRIANGLE_FAN, envés de TRIANGLES. Con sólo 2 "TRIANGLE_FAN" y 12 vertices logramos lo mismo que en el paso anterior donde usabamos 8 "TRIANGLES" y 24 vertices