Getting Started with WebGL Game Development - WebGL Game Development - page 15

The first thing we do here is obtain a reference to the canvas. We store it in a variable
called canvas . We pass the canvas object to our function initGL . This function sets
up the WebGL context:
var canvas = document.getElementById("squareWithDrawArrays");
initGL(canvas)
In the initGL function, we obtain a WebGL context for a canvas by requesting
the context named webgl from the canvas. If this fails, we try the names
experimental-webgl , webkit-3d , and moz-webgl . If all the names fail, we display
an alert to let the user know that the browser does not have WebGL support. We
try different names because different browsers use different names for their WebGL
implementation. This is shown in the following code:
functioninitGL(canvas) {
var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-
webgl"];
for (var i = 0; i<names.length; ++i) {
try {
gl = canvas.getContext(names[i]);
}
catch (e) { }
if (gl) {
break;
}
}
if (gl == null) {
alert("Could not initialise WebGL");
return null;
}
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
}
Vertex buffer objects - uploading data to GPU
A vertex buffer object ( VBO ) provides methods for uploading vertex attributes
(position, color, depth) directly to the video device for rendering. VBOs offer
substantial performance gains because the data resides in the video device memory
rather than the system memory, so it can be rendered directly by the video device.
Buffer objects can be created using the createBuffer() function:
vertexBuffer = gl.createBuffer();