After an introductory exercise for drawing three primitive 2D shapes using WebGL, I am introducing some 3D shapes: a cube and pyramid. Not many changes are required for 3D; except adding more vertices. Here we introduce the drawElements function in order to draw each face of the cube independently and be able to color them.
Since WebGL does not support some matrix operations, I am using a 3rd party library for Matrix calculations that can be found here glMatrix.js. In this first example you will also see how to setup vertex and fragment shaders, how to color, and a bit more.You will be able to see the code on your browser by going to "View Code" menu.
You need an HTML5/WebGL compatible Browser (IE does not work) Check WebGL.