HTML and CSS Reference
In-Depth Information
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
RGBA
values (red, green, blue, alpha):
webGLContext
.
bindBuffer
(
webGLContext
.
ARRAY_BUFFER
,
cubeVertexColorBuffer
);
var
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
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,thereismorecodein
initBuffers()
thanwedescribedhere,butstartwiththesethree
sections when you want to play with the code and make your own objects.
