Further Explorations - HTML5 Canvas - page 571

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
</script>
Testing for WebGL support with Modernizr
The structure of the code in this example is much like the other applications we have
written in this topic. However, it has been modified to work with the specific needs of
the 3D context. In the canvasApp() function, we need to test to see whether the browser
has WebGL support. This is easily accomplished by using the Modernizr.webgl static
constant in Modernizr 1.6:
if ( !webglSupport()) {
alert("Unable to initialize WebGL");
return;
}
function webglSupport() {
return Modernizr.webgl;
}
Initialization in canvasApp()
In canvasApp() we still get a context, but this time it is the experimental-webgl context.
Also, just like in our other apps, we still call drawScreen() on an interval to render the
canvas:
var theCanvas = document.getElementById("canvasOne");
webGLContext = theCanvas.getContext("experimental-webgl");
setInterval(drawScreen, 33);