Ejemplo Piramide

Se modificará el ejemplo del cubo para dibujar una pirámide. El código del ejemplo que se explicará está aquí.

Inicialmente, explicaremos los cambios que ocurren en la función initBuffers. Dado que vamos a combinar tanto los colores como los vertices en un solo buffer, hacemos los cambios correspondientes en la función.

Creamos un único buffer de datos donde vamos a almacenar tanto las posiciones como los colores de forma intercalada.

Luego, para poder dibujar una pirámide debemos determinar cuales son los vertices de esta figura. Para esto, dividimos la figura en 5 caras, y definimos los vertices de cada cara así:

Se nota de la definición de los vertices que todas las caras, excepto la de abajo, están conformadas por 3 vertices. Esto se debe a que vamos a dibujar una pirámide y por ende la mayoría sus lados son triángulos. También se nota que estas caras tienen un vértice en común, (0, 1, 0), que es la punta superior de la pirámide (donde los triángulos se unen).

Ya que la parte superior de la pirámide solo está conformada por un punto, omitimos definirla.

Se observa también que la definición del arreglo de posiciones cambió con respecto a la definición del ejemplo del cubo. Específicamente, notamos que ahora es un objeto y no un arreglo. Este cambio de estructura se realizó para facilitar el uso de stride y offset más adelante.

Nótese que después de definir el arreglo de posiciones, NO hacemos el binding entre este arreglo y el buffer. Por lo contrario, definimos inmediatamente el objeto que contiene los colores de cada cara.

Es importante ver que las llaves del objeto de colores son las mismas que las llaves del objeto de posiciones. Esto es clave para la fusión que vamos a realizar a continuación de ambos objetos para crear el arreglo que contiene de forma intercalada la posición de un vértice, y el color de este.

En este segmento de código lo que estamos haciendo es recorriendo cada llave del objeto de posiciones, que viene siendo cada cara de la figura. Por cada una de esas caras, recorremos cada vértice que está definido en esa cara. Finalmente, concatenamos la posición del vértice, con el color del vértice (el color de esa cara). El arreglo resultante de esta operación será el que le pasamos a WebGL para que le haga el binding con dataBuffer.

De último, definimos los indices para conformar la figura. 

Ya que todas las caras, excepto la de abajo "bottom", son triángulos, solo hay que definirles 3 posiciones de vertices. 

El retorno del método cambia de manera que se adapte al hecho que solo estamos retornado 2 buffers, y no 3.

El otro método que también cambia dado que cambiamos la figura (pirámide en vez de cubo) y los buffers (combinar posiciones con colores) es drawScene.

Inicialmente, dado que estamos combinando el vector de posiciones con el de colores, toca decirle a WebGL como interpretar los valores del buffer dataBuffer de tal forma que solo saque las posiciones. Esto se hace en este segmento:

Se destaca de este segmento que el numero de componentes son 3 (X, Y, Z), y que el stride es 28. El  stride es 28 ya que tenemos 7 componentes (3 de posición y 4 de color), cada uno de 4 bytes (son floats).

Luego, hay que decirle a WebGL como interpretar los valores de dataBuffer para que solo saque los colores. Eso se hace en este segmento:

En este caso, el número de componentes son 4, correspondiente a RGBA. El stride sigue siendo 28 por la misma razón que fue 28 en el segmento pasado. Sin embargo, ahora tenemos un offset de 12. Este offset corresponde a los valores de la posición que no queremos tener en cuenta (3 componentes definen la posición, cada uno de 4 bytes).

El último cambio que debe hacerse para que el ejemplo quede funcionando, es cambiar el número de vertices que existen en la figura final. Esto se hace en este segmento

Hay 18 vértices, 3 por cada una de las 4 caras laterales, y 6 por la cara de abajo que es un cuadrado que toca dividir en 2 triángulos.

Esos cambios resultan en esta figura:

Bitácora

Para la realización de este ejercicio se dispuso de 4 horas. Las 4 horas fueron consumidas. Utilizar un solo buffer para combinar los colores y las posiciones fue complejo de implementar. Sin embargo, al finalizar el ejercicio sentí que ya podia realizar esta operación sin problema.