Adding Features to Your Game - Learn HTML5 by Creating Fun Games - page 268

(OpenGL Shading Language), which gives the GPU the instructions required to
render our models just the way we want. The variables shaderFrag and shader-
Vert hold a reference to the source code of each of these shader programs, which
is itself contained inside our custom script tags.
Next, we create a regular HTML5 canvas element, inject it into the DOM, and create
a gl object. Note the similarities between WebGL and the 2D canvas. Of course,
beyond this point the two APIs are one from Mars and one from Venus, but until
then, the initialization of them is identical. Instead of requesting a 2D Rendering Con-
text object from the canvas object, we simply request a WebGL Rendering Context.
Since most browsers (Google Chrome included) are still in experimental stages with
WebGL, we must supply the webgl string with the experimental prefix when request-
ing the context. The Boolean OR operator separating the two getContext calls in-
dicates that we're requesting the context from the experimental prefix, or without the
prefix. Whichever call the browser supports, is the call that succeeds.
From this point on, every API call to WebGL is done from this gl object. If the call
to the canvas that returns the WebGLRenderingContext object fails, we can make
absolutely no calls to WebGL and we might as well halt execution. Otherwise, we
can continue on with our program, passing around this object so that we may inter-
act with WebGL.
function getShader(gl, code, type) {
// Step 1: Create a specific type of shader
var shader = gl.createShader(type);
// Step 2: Link source code to program
gl.shaderSource(shader, code);
// Step 3: Compile source code
gl.compileShader(shader);
return shader;
}
function getShaderProgram(gl, shaderFrag,
shaderVert) {