HTML and CSS Reference
In-Depth Information
webGLContext.drawElements(webGLContext.TRIANGLES, cubeVertexIndexBuffer.numItems,
webGLContext.UNSIGNED_SHORT, 0);
mvPopMatrix();
Finally, we increase the
rotateCube
variable so that the next time
drawScreen()
is called,
the cube will be updated with a new angle. The code below adds
2
degrees to the rotation
angle each time
drawScreen()
is called:
rotateCube += 2;
}
Full Code Listing
Example 11-1
gives the full code listing for
CH11EX1.html
. Notice that many of the
code styles and constructs we have used over the past 10 chapters are still in place in
this application. Besides the obvious inclusion of code related directly to WebGL, this
application operates essentially the same way as the other apps we discussed in this
topic.
Example 11-1. WebGL test
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH11EX1: WebGL Test </title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript" src="sylvester.js"></script>
<script type="text/javascript" src="glUtils.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
