Merge pull request #2 from navarr/Auto-WebGL

Automatically Choose between Canvas and WebGL

backend/resources/3d/Detector.js

@@ -0,0 +1,59 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+Detector = {
+
+	canvas: !! window.CanvasRenderingContext2D,
+	webgl: ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( '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.id = 'webgl-error-message';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		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" style="color:#000">WebGL</a>.<br />',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' ) : [
+				'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' );
+
+		}
+
+		return element;
+
+	},
+
+	addGetWebGLMessage: function ( parameters ) {
+
+		var parent, id, element;
+
+		parameters = parameters || {};
+
+		parent = parameters.parent !== undefined ? parameters.parent : document.body;
+		id = parameters.id !== undefined ? parameters.id : 'oldie';
+
+		element = Detector.getWebGLErrorMessage();
+		element.id = id;
+
+		parent.appendChild( element );
+
+	}
+
+};

images/skins/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

index.php

@@ -4,7 +4,6 @@ By Kent Rasmussen @ earthiverse.ath.cx
 Using Three.Js HTML5 3D Engine from https://github.com/mrdoob/three.js/
 Add ?user=USERNAME to render a specific username
 Add &refresh to re-grab the skin and generate new parts
-Add &webgl to render in webgl
 -->
 <?php include('backend/backend.php');
 if(!isset($user)) $user = earthiverse;
@@ -16,6 +15,7 @@ minecraft_skin_download($user);?>
 <script type="text/javascript" src="backend/resources/3d/Three.js"></script>
 <script type="text/javascript" src="backend/resources/3d/Cube.js"></script>
 <script type="text/javascript" src="backend/resources/3d/ImageUtils.js"></script>
+<script type="text/javascript" src="backend/resources/3d/Detector.js"></script>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link href="style.css" rel="stylesheet" type="text/css" />
 <title>3d minecraft body test v1.0</title>
@@ -87,7 +87,11 @@ minecraft_skin_download($user);?>
   hat.position.z = 0;
   scene.addObject(hat);
 
-  <?php if(isset($_GET['webgl'])) echo 'renderer = new THREE.WebGLRenderer();'; else echo 'renderer = new THREE.CanvasRenderer();'; ?>
+  if(Detector.webgl) {
+	  renderer = new THREE.WebGLRenderer();
+  } else {
+	  renderer = new THREE.CanvasRenderer();
+  }
 
   renderer.setSize( window.innerWidth, window.innerHeight );
   document.body.appendChild( renderer.domElement );