HTML and CSS Reference
In-Depth Information
// 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 ani-
mating 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:
