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

canvas.width = 700;
canvas.height = 400;
document.body.appendChild(canvas);
var gl = null;
try {
gl =
canvas.getContext("experimental-webgl") ||
canvas.getContext("webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {}
if (!gl) {
document.body.innerHTML =
"<h1>This browser doesn't support
WebGl</h1>";
}
var shaderFrag = document.getElementById
("glsl-frag-simple").textContent;
var shaderVert = document.getElementById
("glsl-frag-simple").textContent;
})();
</script>
</body>
The script tags of type glsl-shader/x-vertex and glsl-shader/x-frag-
ment make use of how HTML renders unknown tags. When a browser parses a
script tag with a type attribute that it does not understand (namely a made up
type, such as glsl-shader/x-vertex ), it simply ignores all of the contents of the
tag. Since we want to define the contents of our shader programs within our HTML
file, but we don't want that text to show up in the HTML file, this slight hack comes
in very handy. This way we can define those scripts, have access to them, and not
worry about the browser not knowing how to handle that particular language.
As mentioned earlier, in WebGL we need to provide the GPU with a so-called shader
program, which is an actual compiled program written in a language called GLSL