Fixed broken WebGL support detection.

Created "THREE.Supports" object, which should centralize this stuff. So far it detects <canvas>, WebGL and WebWorkers; later it could detect for example GPU capabilities.

Not sure about name or location, but it's pretty tiring go through all examples when something changes, so it should be somewhere in the library.

Code duplication is bad: even html snippets with error message should be centralized somewhere, so that when new browsers arrive we wouldn't have to keep changing them in many places.

build/Three.js

@@ -56,7 +56,7 @@ this.vertices[g.d].normal.copy(g.vertexNormals[3])}}c=0;for(e=this.vertices.leng
 z:[this.vertices[0].position.z,this.vertices[0].position.z]};for(var c=1,e=this.vertices.length;c<e;c++){a=this.vertices[c];if(a.position.x<this.boundingBox.x[0])this.boundingBox.x[0]=a.position.x;else if(a.position.x>this.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.y<this.boundingBox.y[0])this.boundingBox.y[0]=a.position.y;else if(a.position.y>this.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;if(a.position.z<this.boundingBox.z[0])this.boundingBox.z[0]=a.position.z;else if(a.position.z>
 this.boundingBox.z[1])this.boundingBox.z[1]=a.position.z}}},computeBoundingSphere:function(){for(var a=this.boundingSphere===null?0:this.boundingSphere.radius,c=0,e=this.vertices.length;c<e;c++)a=Math.max(a,this.vertices[c].position.length());this.boundingSphere={radius:a}},sortFacesByMaterial:function(){function a(r){var A=[];c=0;for(e=r.length;c<e;c++)r[c]==undefined?A.push("undefined"):A.push(r[c].toString());return A.join("_")}var c,e,g,i,j,b,s,m,p={};g=0;for(i=this.faces.length;g<i;g++){j=this.faces[g];
 b=j.materials;s=a(b);if(p[s]==undefined)p[s]={hash:s,counter:0};m=p[s].hash+"_"+p[s].counter;if(this.geometryChunks[m]==undefined)this.geometryChunks[m]={faces:[],materials:b,vertices:0};j=j instanceof THREE.Face3?3:4;if(this.geometryChunks[m].vertices+j>65535){p[s].counter+=1;m=p[s].hash+"_"+p[s].counter;if(this.geometryChunks[m]==undefined)this.geometryChunks[m]={faces:[],materials:b,vertices:0}}this.geometryChunks[m].faces.push(g);this.geometryChunks[m].vertices+=j}},toString:function(){return"THREE.Geometry ( vertices: "+
-this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};
+this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};THREE.Supports={canvas:!!document.createElement("canvas").getContext,webgl:window.Uint8Array!=undefined,workers:!!window.Worker};
 THREE.Camera=function(a,c,e,g){this.fov=a;this.aspect=c;this.near=e;this.far=g;this.position=new THREE.Vector3;this.target={position:new THREE.Vector3};this.autoUpdateMatrix=true;this.projectionMatrix=null;this.matrix=new THREE.Matrix4;this.up=new THREE.Vector3(0,1,0);this.tmpVec=new THREE.Vector3;this.translateX=function(i){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(i);this.tmpVec.crossSelf(this.up);this.position.addSelf(this.tmpVec);this.target.position.addSelf(this.tmpVec)};
 this.translateZ=function(i){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(i);this.position.subSelf(this.tmpVec);this.target.position.subSelf(this.tmpVec)};this.updateMatrix=function(){this.matrix.lookAt(this.position,this.target.position,this.up)};this.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};this.updateProjectionMatrix()};
 THREE.Camera.prototype={toString:function(){return"THREE.Camera ( "+this.position+", "+this.target.position+" )"}};THREE.Light=function(a){this.color=new THREE.Color(a)};THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=new THREE.Light;THREE.AmbientLight.prototype.constructor=THREE.AmbientLight;THREE.DirectionalLight=function(a,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.intensity=c||1};THREE.DirectionalLight.prototype=new THREE.Light;

build/ThreeDebug.js

@@ -56,7 +56,7 @@ this.vertices[g.d].normal.copy(g.vertexNormals[3])}}c=0;for(e=this.vertices.leng
 z:[this.vertices[0].position.z,this.vertices[0].position.z]};for(var c=1,e=this.vertices.length;c<e;c++){a=this.vertices[c];if(a.position.x<this.boundingBox.x[0])this.boundingBox.x[0]=a.position.x;else if(a.position.x>this.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.y<this.boundingBox.y[0])this.boundingBox.y[0]=a.position.y;else if(a.position.y>this.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;if(a.position.z<this.boundingBox.z[0])this.boundingBox.z[0]=a.position.z;else if(a.position.z>
 this.boundingBox.z[1])this.boundingBox.z[1]=a.position.z}}},computeBoundingSphere:function(){for(var a=this.boundingSphere===null?0:this.boundingSphere.radius,c=0,e=this.vertices.length;c<e;c++)a=Math.max(a,this.vertices[c].position.length());this.boundingSphere={radius:a}},sortFacesByMaterial:function(){function a(r){var A=[];c=0;for(e=r.length;c<e;c++)r[c]==undefined?A.push("undefined"):A.push(r[c].toString());return A.join("_")}var c,e,g,i,j,b,s,n,l={};g=0;for(i=this.faces.length;g<i;g++){j=this.faces[g];
 b=j.materials;s=a(b);if(l[s]==undefined)l[s]={hash:s,counter:0};n=l[s].hash+"_"+l[s].counter;if(this.geometryChunks[n]==undefined)this.geometryChunks[n]={faces:[],materials:b,vertices:0};j=j instanceof THREE.Face3?3:4;if(this.geometryChunks[n].vertices+j>65535){l[s].counter+=1;n=l[s].hash+"_"+l[s].counter;if(this.geometryChunks[n]==undefined)this.geometryChunks[n]={faces:[],materials:b,vertices:0}}this.geometryChunks[n].faces.push(g);this.geometryChunks[n].vertices+=j}},toString:function(){return"THREE.Geometry ( vertices: "+
-this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};
+this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};THREE.Supports={canvas:!!document.createElement("canvas").getContext,webgl:window.Uint8Array!=undefined,workers:!!window.Worker};
 THREE.Camera=function(a,c,e,g){this.fov=a;this.aspect=c;this.near=e;this.far=g;this.position=new THREE.Vector3;this.target={position:new THREE.Vector3};this.autoUpdateMatrix=true;this.projectionMatrix=null;this.matrix=new THREE.Matrix4;this.up=new THREE.Vector3(0,1,0);this.tmpVec=new THREE.Vector3;this.translateX=function(i){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(i);this.tmpVec.crossSelf(this.up);this.position.addSelf(this.tmpVec);this.target.position.addSelf(this.tmpVec)};
 this.translateZ=function(i){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(i);this.position.subSelf(this.tmpVec);this.target.position.subSelf(this.tmpVec)};this.updateMatrix=function(){this.matrix.lookAt(this.position,this.target.position,this.up)};this.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};this.updateProjectionMatrix()};
 THREE.Camera.prototype={toString:function(){return"THREE.Camera ( "+this.position+", "+this.target.position+" )"}};THREE.Light=function(a){this.color=new THREE.Color(a)};THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=new THREE.Light;THREE.AmbientLight.prototype.constructor=THREE.AmbientLight;THREE.DirectionalLight=function(a,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.intensity=c||1};THREE.DirectionalLight.prototype=new THREE.Light;

build/ThreeExtras.js

@@ -56,7 +56,7 @@ this.vertices[e.d].normal.copy(e.vertexNormals[3])}}c=0;for(d=this.vertices.leng
 z:[this.vertices[0].position.z,this.vertices[0].position.z]};for(var c=1,d=this.vertices.length;c<d;c++){a=this.vertices[c];if(a.position.x<this.boundingBox.x[0])this.boundingBox.x[0]=a.position.x;else if(a.position.x>this.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.y<this.boundingBox.y[0])this.boundingBox.y[0]=a.position.y;else if(a.position.y>this.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;if(a.position.z<this.boundingBox.z[0])this.boundingBox.z[0]=a.position.z;else if(a.position.z>
 this.boundingBox.z[1])this.boundingBox.z[1]=a.position.z}}},computeBoundingSphere:function(){for(var a=this.boundingSphere===null?0:this.boundingSphere.radius,c=0,d=this.vertices.length;c<d;c++)a=Math.max(a,this.vertices[c].position.length());this.boundingSphere={radius:a}},sortFacesByMaterial:function(){function a(o){var y=[];c=0;for(d=o.length;c<d;c++)o[c]==undefined?y.push("undefined"):y.push(o[c].toString());return y.join("_")}var c,d,e,j,g,b,m,k,n={};e=0;for(j=this.faces.length;e<j;e++){g=this.faces[e];
 b=g.materials;m=a(b);if(n[m]==undefined)n[m]={hash:m,counter:0};k=n[m].hash+"_"+n[m].counter;if(this.geometryChunks[k]==undefined)this.geometryChunks[k]={faces:[],materials:b,vertices:0};g=g instanceof THREE.Face3?3:4;if(this.geometryChunks[k].vertices+g>65535){n[m].counter+=1;k=n[m].hash+"_"+n[m].counter;if(this.geometryChunks[k]==undefined)this.geometryChunks[k]={faces:[],materials:b,vertices:0}}this.geometryChunks[k].faces.push(e);this.geometryChunks[k].vertices+=g}},toString:function(){return"THREE.Geometry ( vertices: "+
-this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};
+this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};THREE.Supports={canvas:!!document.createElement("canvas").getContext,webgl:window.Uint8Array!=undefined,workers:!!window.Worker};
 THREE.Camera=function(a,c,d,e){this.fov=a;this.aspect=c;this.near=d;this.far=e;this.position=new THREE.Vector3;this.target={position:new THREE.Vector3};this.autoUpdateMatrix=true;this.projectionMatrix=null;this.matrix=new THREE.Matrix4;this.up=new THREE.Vector3(0,1,0);this.tmpVec=new THREE.Vector3;this.translateX=function(j){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(j);this.tmpVec.crossSelf(this.up);this.position.addSelf(this.tmpVec);this.target.position.addSelf(this.tmpVec)};
 this.translateZ=function(j){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(j);this.position.subSelf(this.tmpVec);this.target.position.subSelf(this.tmpVec)};this.updateMatrix=function(){this.matrix.lookAt(this.position,this.target.position,this.up)};this.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};this.updateProjectionMatrix()};
 THREE.Camera.prototype={toString:function(){return"THREE.Camera ( "+this.position+", "+this.target.position+" )"}};THREE.Light=function(a){this.color=new THREE.Color(a)};THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=new THREE.Light;THREE.AmbientLight.prototype.constructor=THREE.AmbientLight;THREE.DirectionalLight=function(a,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.intensity=c||1};THREE.DirectionalLight.prototype=new THREE.Light;

examples/geometry_colors.html

@@ -66,7 +66,7 @@
 
 		<script type="text/javascript">
 
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -212,16 +212,6 @@
 
 			}
 
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				return true;
-
-			}
-
 		</script>
 
 	</body>

examples/geometry_dynamic_gl.html

@@ -65,7 +65,7 @@
 
 		<script type="text/javascript">
 
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -280,18 +280,7 @@
 				
 				stats.update();
 
-			}
-			
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				return true;
-
-			}
-			
+			}			
 
 		</script>
 

examples/geometry_minecraft_ao.html

@@ -76,7 +76,7 @@
 
 		<script type="text/javascript">
 
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -920,18 +920,6 @@
 
 			}
 
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				// Web workers
-
-				return !!window.Worker;
-
-			}
-
 		</script>
 
 	</body>

examples/lines_colors_gl.html

@@ -75,7 +75,7 @@
 
 		<script type="text/javascript">
 		
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -360,15 +360,6 @@
 				
 			}
 
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				return true;
-
-			}
 
 		</script>
 	</body>

examples/lines_cubes_gl.html

@@ -75,7 +75,7 @@
 
 		<script type="text/javascript">
 		
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -251,16 +251,6 @@
 				//stats.update();
 			}
 
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				return true;
-
-			}
-
 		</script>
 	</body>
 </html>

examples/lines_sphere_gl.html

@@ -73,7 +73,7 @@
 		
 		<script type="text/javascript">
 		
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -216,16 +216,6 @@
 				 
 			}
 			
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				return true;
-
-			}
-			
 
 		</script>
 	</body>

examples/materials_normalmap.html

@@ -83,7 +83,7 @@
 		
 		<script type="text/javascript">
 
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 			
 				document.getElementById( "oldie" ).style.display = "block";
 				
@@ -265,17 +265,6 @@
 
 			}
 			
-			function is_browser_compatible() {
-				
-				// WebGL support
-				
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-				
-				// Web workers
-				
-				return !!window.Worker;
-			
-			}
 
 		</script>
 

examples/materials_normalmap2.html

@@ -82,7 +82,7 @@
 
 		<script type="text/javascript">
 
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -231,18 +231,6 @@
 
 			}
 
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				// Web workers
-
-				return !!window.Worker;
-
-			}
-
 		</script>
 
 	</body>

examples/particles_billboards_colors_gl.html

@@ -68,7 +68,7 @@
 
 		<script type="text/javascript">
 		
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -191,18 +191,6 @@
 				stats.update();
 			}
 
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				// Web workers
-
-				return !!window.Worker;
-
-			}
-
 		</script>
 	</body>
 </html>

examples/particles_billboards_gl.html

@@ -68,7 +68,7 @@
 
 		<script type="text/javascript">
 		
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -195,18 +195,6 @@
 				stats.update();
 			}
 
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				// Web workers
-
-				return !!window.Worker;
-
-			}
-
 		</script>
 	</body>
 </html>

examples/particles_random_gl.html

@@ -68,7 +68,7 @@
 
 		<script type="text/javascript">
 		
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -200,17 +200,6 @@
 				stats.update();
 			}
 
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				// Web workers
-
-				return !!window.Worker;
-
-			}
 
 		</script>
 	</body>

examples/particles_sprites_gl.html

@@ -69,7 +69,7 @@
 
 		<script type="text/javascript">
 		
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -205,17 +205,6 @@
 				stats.update();
 			}
 
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				// Web workers
-
-				return !!window.Worker;
-
-			}
 
 		</script>
 	</body>

examples/postprocessing.html

@@ -91,7 +91,7 @@
 
         <script type="text/javascript">
 
-			if ( !is_browser_compatible() ) {
+			if ( ! THREE.Supports.webgl ) {
 
 				document.getElementById( "oldie" ).style.display = "block";
 
@@ -334,19 +334,7 @@
 
                 stats.update();
 
-            }
-			
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				// Web workers
-
-				return !!window.Worker;
-
-			}
+            }			
 			
 
         </script>

src/core/Supports.js

@@ -0,0 +1,11 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+ 
+THREE.Supports = {
+	
+	canvas	: !!document.createElement( 'canvas' ).getContext,
+	webgl	: window.Uint8Array != undefined,
+	workers : !!window.Worker
+	
+};

src/renderers/WebGLRenderer.js

@@ -3209,4 +3209,4 @@ THREE.ShaderLib = {
 	}
 	
 
-};
+};

utils/build.py

@@ -26,6 +26,7 @@ COMMON_FILES = [
 'core/Face4.js',
 'core/UV.js',
 'core/Geometry.js',
+'core/Supports.js',
 'cameras/Camera.js',
 'lights/Light.js',
 'lights/AmbientLight.js',