Detecting WebGL and browser compatibility with three.js

The problem

Not all browsers support WebGL, in fact only chrome and firefox work with three.js WebGLRenderer currently. iOS works with the canvas renderer and although IE9 supports canvas, it doesn't support workers so currently isn't supported.

A solution

In order to detect webgl compatibility and gracefully inform the user you can add https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js to your javascript and use this example to avoid even attempting to render anything:

if (Detector.webgl) {
	init();
	animate();
} else {
	var warning = Detector.getWebGLErrorMessage();
	document.getElementById('container').appendChild(warning);
}		

Resources

http://stackoverflow.com/questions/8312546/support-of-canvas-and-webgl-three-js-on-moble-devices https://github.com/mrdoob/three.js/issues/257