Simple WebGL example
Performing a visual representation of a simple object in WebGL
Taking as a starting point the example shown in class of a visual representation of a rotating cube, we can do a lot of other simple examples in no time with WebGL. The only thing we need to do is have a basic understanding of how the positions matrix work and how we can edit it as we please.
First of all, we change the number of vertexes to 32, because if we’re going to continue working with triangles for our 3D representation, we need exactly 32 vertexes for the construction of the pyramid, instead of 36.
Now all we need to do is modify the positional matrix. This is the original matrix, representing a cube:
With a little understanding of what’s going on here, we can modify some values of the matrix to make it look and act like a pyramid. The things you need to consider when doind this type of things is that the first value of the row of the matrix is the x-axis, the second one is the y axis and the third one the z axis. It works like this:
Taking into consideration the way axis orientations work in WebGL, we can easily construct a pyramid based on the same principle of the already working cube:
Now, we can take into consideration attributes like the stride and the offset of the buffer to represent our vertexes in the canvas, so we are going to leave them at 0.
With everything set up, we can get our pyramid representation working and doing the rotations we want:
