Added WebGL browser check

Bjorn Sandvik · Bjorn Sandvik · commit 7a97cb3f7ed9 · 2013-09-29T22:34:03.000+02:00
diff --git a/index.html b/index.html
@@ -7,6 +7,8 @@
 	<style>
 		body { margin: 0; overflow: hidden; background-color: #000; }
 		.tm  { position: absolute; top: 10px; right: 10px; }
+		.webgl-error { font: 15px/30px monospace; text-align: center; color: #fff; margin: 50px; }
+		.webgl-error a { color: #fff; }
     </style>
 </head>
 <body>
@@ -15,6 +17,7 @@
 		<img src="http://earthatlas.info/img/thematicmapping.png">
 	</a>
 	<script src="js/three.min.js"></script>
+	<script src="js/Detector.js"></script>		
 	<script src="js/TrackballControls.js"></script>		
 	<script src="js/earth.js"></script>  
 </body>
diff --git a/js/Detector.js b/js/Detector.js
@@ -0,0 +1,40 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+var Detector = {
+
+	canvas: !! window.CanvasRenderingContext2D,
+	webgl: ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(),
+	workers: !! window.Worker,
+	fileapi: window.File && window.FileReader && window.FileList && window.Blob,
+
+	getWebGLErrorMessage: function () {
+
+		var element = document.createElement( 'div' );
+		element.className = 'webgl-error';
+
+		if ( !this.webgl ) {
+
+			element.innerHTML = window.WebGLRenderingContext ? [
+				'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br />',
+				'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
+			].join( '\n' ) : [
+				'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>',
+				'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
+			].join( '\n' );
+
+		}
+
+		return element;
+
+	},
+
+	addGetWebGLMessage: function (parent ) {
+
+		parent.appendChild( Detector.getWebGLErrorMessage() );
+
+	}
+
+};
diff --git a/js/earth.js b/js/earth.js
@@ -1,6 +1,13 @@
 // Created by Bjorn Sandvik - thematicmapping.org
 (function () {
 
+	var webglEl = document.getElementById('webgl');
+
+	if (!Detector.webgl) {
+		Detector.addGetWebGLMessage(webglEl);
+		return;
+	}
+
 	var width  = window.innerWidth,
 		height = window.innerHeight;
 
@@ -36,7 +43,7 @@
 
 	var controls = new THREE.TrackballControls(camera);
 
-	document.getElementById('webgl').appendChild(renderer.domElement);
+	webglEl.appendChild(renderer.domElement);
 
 	render();
 
