HTML and CSS Reference
In-Depth Information
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
]
webGLContext.bufferData(webGLContext.ELEMENT_ARRAY_BUFFER,
new Uint16Array(cubeVertexIndices), webGLContext.STATIC_DRAW);
cubeVertexIndexBuffer.itemSize = 1;
cubeVertexIndexBuffer.numItems = 36;
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas or WebGLContext.
</canvas>
</div>
</body>
</html>
Further Explorations with WebGL
Obviously, we cannot teach you all about WebGL in this chapter. We opted to include
this demo and short discussion to introduce you to WebGL and show you what it looks
like. In reality, a full discussion of WebGL, even the basic concepts, could take up an
entire volume.
If you are interested in WebGL, we strongly recommend you consult http://learning
webgl.com for more examples and the latest information about this exciting yet still
experimental context for HTML5 Canvas.
WebGL JavaScript Libraries
At the start of this section, we promised to show you some libraries that can be used
with WebGL to make it easier to develop applications. Here are some of the more
interesting libraries and projects.
Google O3D
Google's O3D library ( http://code.google.com/p/o3d/ ) was once a browser plug-in but
has now been released as a standalone JavaScript library for WebGL. The examples of
using O3D with JavaScript—including a fairly spectacular 3D pool game—are very
Search WWH ::




Custom Search