HTML5 Canvas [213]
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
// Right face
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0,
];
The Vertex Color buffer holds information about the color that will appear on each side of the cube. These values are set as percentages of RBGA values (red, green, blue, alpha):
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFER, cubeVertexColorBuffer);
var colors = [
[1.0, 1.0, 1.0, 1.0], // Front face
[0.9, 0.0, 0.0, 1.0], // Back face
[0.6, 0.6, 0.6, 1.0], // Top face
[0.6, 0.0, 0.0, 1.0], // Bottom face
[0.3 ,0.0, 0.0, 1.0], // Right face
[0.3, 0.3, 0.3, 1.0], // Left face
];
The Vertex Index buffer is kind of like a map that builds the object (our cube) based on the colors specified in Vertex Color (the order of these elements) and the vertices specified in the Vertex Position buffer. Each of these sets of three values represents a triangle that will be drawn onto the 3D context:
webGLContext.bindBuffer(webGLContext.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
var cubeVertexIndices = [
0, 1, 2, 0, 2, 3, // Front face
4, 5, 6, 4, 6, 7, // Back face
8, 9, 10, 8, 10, 11, // Top face
12, 13, 14, 12, 14, 15, // Bottom face
16, 17, 18, 16, 18, 19, // Right face
20, 21, 22, 20, 22, 23 // Left face
]
Again, there is more code in initBuffers() than we described here, but start with these three sections when you want to play with the code and make your own objects.
Animating the cube
Now that you know a bit about creating an object in WebGL, let’s learn about animating the cube on the canvas. Similar to what we did in the 2D context, we use the drawScreen() function to position, draw, and animate objects in the 3D context. The first thing we do here is set up the viewport, which defines the canvas’ view of the 3D scene. Next, we clear the canvas and then set up the perspective. The perspective has four parameters:
Field of view
The angle at which we will view the 3D scene (25 degrees).
Width-to-height ratio
The radio of width to height of the current size of the canvas (500×500).
Minimum units
The smallest unit size away from our viewport we want to display (0.1).
Maximum units
The furthest unit size away from our viewport that we want to see (100.0).
function drawScreen() {
webGLContext.viewport(0, 0, webGLContext.viewportWidth,
webGLContext.viewportHeight);
webGLContext.clear(webGLContext.COLOR_BUFFER_BIT |
webGLContext.DEPTH_BUFFER_BIT);
perspective(25, (webGLContext.viewportWidth / webGLContext.viewportHeight),
0.1, 100.0);
Next, we move to the center of the 3D scene, calling loadIdentity() so we can start drawing. We then call mvTranslate(), passing the locations on the x, y, and z axes to draw the cube. To rotate the cube, we call a function named mvPushMatrix(), and later mvPopMatrix(), which is similar to how we called context.save() and context.restore() when rotating objects on the 2D canvas. The call to mvRotate() then makes the cube rotate from the center, tilted up and to the right:
loadIdentity();
mvTranslate([0, 0.0, -10.0])
mvPushMatrix();
mvRotate(rotateCube, [0, .5, .5]);
Next, we draw the cube by binding the buffers that hold the vertices and color information that we set up earlier for the cube’s sides. We then draw each side, made up of two triangles each:
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFER, cubeVertexPositionBuffer);
webGLContext.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
cubeVertexPositionBuffer.itemSize, webGLContext.FLOAT, false, 0, 0);
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFER, cubeVertexColorBuffer);
webGLContext.vertexAttribPointer(shaderProgram.vertexColorAttribute,
cubeVertexColorBuffer.itemSize, webGLContext.FLOAT, false, 0, 0);
webGLContext.bindBuffer(webGLContext.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
setMatrixUniforms();webGLContext.drawElements(webGLContext.TRIANGLES,