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

Compiling and linking shaders
Shaders exist as independent programs. The following code retrieves the source of
these programs by simple JavaScript functions such as getDocumentElementById .
Then, the three WebGL functions, createShader , shaderSource , and compileShader ,
initialize and compile the shaders, as shown in the following code snippet:
function createShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
return null;
}
return shader;
}
function initShaders() {
var fragmentShader = createShader(gl, "shader-fs");
var vertexShader = createShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);