Game Development Reference
In-Depth Information
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0,
0);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function initBuffers() {
squareVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
var vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);
var colors = [
1.0, 1.0, 1.0, 1.0, // white
0.05, 0.05, 0.7, 1.0, // dark blue
0.0, 1.0, 1.0, 1.0, // cyan
0.0, 0.0, 1.0, 1.0 // blue
];
squareVerticesColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
}
</script>
</body>
</html>
Animation and depth
Our first demo renders a simple image, but has no movement or depth. In our next example, which is a
modification of the previous one, we will rotate a 3D figure of an octahedron. An octahedron is simply an
eight faced solid that looks like two rectangular pyramids attached at the base, as shown in Figure 7-9.
