Game Development Reference
In-Depth Information
Listing 7-4.
The Start of demo_1.html
<!DOCTYPE html>
<html>
<head>
<style>
body{ background: gray; }
canvas{ background: white; }
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="gl-matrix-min.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
Note
Neither the jQuery or glMatrix libraries are necessary to program WebGL, but they
do make Ajax calls and matrix manipulation easier.
In Listing 7-5, we define variables that will store the canvas WebGL context, shader program and shaders,
vertex position and color attributes, vertex buffer, and modelview and projection matrices. When the DOM
has finished loading, the methods
initWebGL
,
initShaders
and
executeProgram
are called. The
initWebGL
method is similar to the code in Listing 7-1. We set up the WebGL context and ensure that it is supported
and set the background color. We select the canvas element with jQuery notation instead of the former
document.getElementById
usage. We also set the viewport dimensions to the canvas dimensions.
Listing 7-5.
Initializing Variables and Defining the Component Functions of the Program
<script>
var gl = null,
shaderProgram = null,
fragmentShader = null,
vertexShader = null,
vertexPositionAttribute = null,
vertexColorAttribute = null,
squareVerticesBuffer = null,
mvMatrix = mat4.create(),
pMatrix = mat4.create();
$(document).ready(function(){
initWebGL();
initShaders();
executeProgram();
});
function initWebGL() {
try {
var canvas = $("#canvas").get(0);
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch(e) {
alert(e);
