Added centralized message for non-WebGL-compatible browser to majority of examples.

That was painful; hopefully since now it should be easier to have it in every WebGL example.

It's enough to add one line (ideally as the first thing that gets executed):

    if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();

This will add message box with default styling centered near top of the window. Optional parameters "parent" and "id" can be specified for further customization and integration with the document, also message DOM element is returned for easier access.

    var messageElement = THREE.Supports.addGetWebGLMessage( { parent: container, id: "my_message" } );

By default, message is added to document.body and has id "oldie" (can be styled with CSS).

build/Three.js

@@ -56,7 +56,9 @@ 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+" )"}};THREE.Supports={canvas:!!document.createElement("canvas").getContext,webgl:window.Uint8Array!=undefined,workers:!!window.Worker};
+this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};
+THREE.Supports={canvas:!!document.createElement("canvas").getContext,webgl:window.Uint8Array!=undefined,workers:!!window.Worker,addGetWebGLMessage:function(a){var c=document.body,e="oldie";if(a){if(a.parent!==undefined)c=a.parent;if(a.id!==undefined)e=a.id}a=document.createElement("center");var g=document.createElement("div");g.innerHTML='Sorry, your browser doesn\'t support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br/>\n<br/>\nPlease try in\n<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /\n<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /\n<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>';g.id=
+e;e=g.style;e.fontFamily="monospace";e.fontSize="13px";e.textAlign="center";e.background="#eee";e.color="#000";e.padding="1em";e.width="475px";e.margin="5em auto 0";a.appendChild(g);c.appendChild(a);return g}};
 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,9 @@ 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+" )"}};THREE.Supports={canvas:!!document.createElement("canvas").getContext,webgl:window.Uint8Array!=undefined,workers:!!window.Worker};
+this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};
+THREE.Supports={canvas:!!document.createElement("canvas").getContext,webgl:window.Uint8Array!=undefined,workers:!!window.Worker,addGetWebGLMessage:function(a){var c=document.body,e="oldie";if(a){if(a.parent!==undefined)c=a.parent;if(a.id!==undefined)e=a.id}a=document.createElement("center");var g=document.createElement("div");g.innerHTML='Sorry, your browser doesn\'t support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br/>\n<br/>\nPlease try in\n<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /\n<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /\n<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>';g.id=
+e;e=g.style;e.fontFamily="monospace";e.fontSize="13px";e.textAlign="center";e.background="#eee";e.color="#000";e.padding="1em";e.width="475px";e.margin="5em auto 0";a.appendChild(g);c.appendChild(a);return g}};
 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,9 @@ 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+" )"}};THREE.Supports={canvas:!!document.createElement("canvas").getContext,webgl:window.Uint8Array!=undefined,workers:!!window.Worker};
+this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};
+THREE.Supports={canvas:!!document.createElement("canvas").getContext,webgl:window.Uint8Array!=undefined,workers:!!window.Worker,addGetWebGLMessage:function(a){var c=document.body,d="oldie";if(a){if(a.parent!==undefined)c=a.parent;if(a.id!==undefined)d=a.id}a=document.createElement("center");var e=document.createElement("div");e.innerHTML='Sorry, your browser doesn\'t support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br/>\n<br/>\nPlease try in\n<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /\n<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /\n<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>';e.id=
+d;d=e.style;d.fontFamily="monospace";d.fontSize="13px";d.textAlign="center";d.background="#eee";d.color="#000";d.padding="1em";d.width="475px";d.margin="5em auto 0";a.appendChild(e);c.appendChild(a);return e}};
 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

@@ -21,21 +21,6 @@
 				padding: 5px;
 			}
 
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:#eee;
-				color:#000;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
-
 			a {
 
 				color: #0080ff;
@@ -48,29 +33,13 @@
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - webgl</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
-			
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
 		<script type="text/javascript">
 
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var container, stats;
 

examples/geometry_dynamic_gl.html

@@ -28,18 +28,8 @@
 			}
 
 			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:rgb(0,0,50);
-				color:#fff;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
+				background:rgb(0,0,50) !important;
+				color:#fff !important;
 			}
 
 		</style>
@@ -49,26 +39,16 @@
 		<div id="container"><br /><br /><br /><br /><br />Generating world...</div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div> 
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
 
 			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
+			
+				THREE.Supports.addGetWebGLMessage();
+				document.getElementById( 'container' ).innerHTML = "";
+				
 			}
 
 			var container, stats;

examples/geometry_minecraft_ao.html

@@ -25,18 +25,8 @@
 			}
 
 			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:rgb(100,0,0);
-				color:#fff;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
+				background:rgb(100,0,0) !important;
+				color:#fff !important;
 			}
 			#oldie a { color:#fff }
 
@@ -56,17 +46,6 @@
 			<button id="baot">texture + ao</button>
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
@@ -76,11 +55,7 @@
 
 		<script type="text/javascript">
 
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var fogExp2 = true;
 			

examples/geometry_terrain_fog_gl.html

@@ -42,6 +42,13 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) {
+				
+				THREE.Supports.addGetWebGLMessage();
+				document.getElementById( 'container' ).innerHTML = "";
+				
+			}
+			
 			var fogExp2 = true;
 			
 			var container, stats;

examples/geometry_terrain_gl.html

@@ -41,6 +41,13 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) {
+				
+				THREE.Supports.addGetWebGLMessage();
+				document.getElementById( 'container' ).innerHTML = "";
+				
+			}
+
 			var container, stats;
 
 			var camera, scene, renderer;

examples/geometry_terrain_gl2.html

@@ -42,6 +42,13 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) {
+				
+				THREE.Supports.addGetWebGLMessage();
+				document.getElementById( 'container' ).innerHTML = "";
+				
+			}
+
 			var container, stats;
 
 			var camera, scene, renderer;

examples/hdr.html

@@ -24,21 +24,6 @@
 				
             }
 
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:#eee;
-				color:#000;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
-
             a { color: red; }
 
         </style>
@@ -51,18 +36,6 @@
 			based on <a href="http://spidergl.org/example.php?id=13" target="_blank">SpiderGL</a>
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
-			and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
         <script type="text/javascript" src="js/Stats.js"></script>
         <script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
@@ -120,11 +93,7 @@
 
         <script type="text/javascript">
 
-			if ( !is_browser_compatible() ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
             var container, stats;
 

examples/interactive_voxelpainter_gl.html

@@ -10,6 +10,8 @@
 				margin: 0px;
 				overflow: hidden;
 			}
+			
+			#oldie { background-color: #ddd !important }
 		</style>
 	</head>
 	<body>
@@ -24,6 +26,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var container, stats;
 			var camera, scene, renderer;
 			var projector, plane, cube;

examples/lights_pointlights_gl.html

@@ -51,6 +51,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var camera, scene, renderer,
 			particle1, particle2, particle2,
 			light1, light2, light3,

examples/lines_colors_gl.html

@@ -24,21 +24,6 @@
 				text-align: center;
 				z-index:100;
 			}
-
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:rgb(50,0,0);
-				color:#fff;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
 			
 			a {
 				color: orange;
@@ -58,28 +43,12 @@
 			[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
-
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
 		
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var mouseX = 0, mouseY = 0,
 

examples/lines_cubes_gl.html

@@ -24,21 +24,6 @@
 				text-align: center;
 				z-index:100;
 			}
-
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:rgb(50,0,0);
-				color:#fff;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
 			
 			a {
 				color: orange;
@@ -58,28 +43,12 @@
 			[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
 		
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var mouseX = 0, mouseY = 0,
 

examples/lines_sphere_gl.html

@@ -24,21 +24,6 @@
 				text-align: center;
 				z-index:100;
 			}
-
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:rgb(50,0,0);
-				color:#fff;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
 			
 			a {
 				color: #ff0080;
@@ -57,27 +42,12 @@
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL demo
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		
 		<script type="text/javascript">
 		
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var SCREEN_WIDTH = window.innerWidth,
 				SCREEN_HEIGHT = window.innerHeight,

examples/materials_cars.html

@@ -27,6 +27,8 @@
 			#car_info { text-align:center; }
 			#car_name { font-size:1em }
 			#car_author { font-size:1em }
+			
+			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
 		</style>
 	</head>
 
@@ -60,6 +62,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var STATS_ENABLED = false;
 
 			var CARS = {

examples/materials_cubemap.html

@@ -21,6 +21,8 @@
 			#d { text-align:center; margin:1em 0 -7.5em 0; z-index:1000; position:relative; display:block }
 			.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
 			.inactive { background:#999; color:#eee }
+			
+			#oldie { margin-top:11em !important }
 		</style>
 	</head>
 
@@ -40,6 +42,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var container, stats;
 
 			var camera, scene, webglRenderer;

examples/materials_cubemap_balls_reflection.html

@@ -5,7 +5,7 @@
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
-				background:#fff;
+				background:#777;
 				padding:0;
 				margin:0;
 				font-weight: bold;
@@ -26,6 +26,8 @@
 			a {
 				color: #ffffff;
 			}
+			
+			#oldie a { color:#da0 }
 		</style>
 	</head>
 
@@ -38,6 +40,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var statsEnabled = false;
 
 			var container, stats;

examples/materials_cubemap_balls_refraction.html

@@ -5,7 +5,7 @@
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
-				background:#fff;
+				background:#777;
 				padding:0;
 				margin:0;
 				font-weight: bold;
@@ -26,6 +26,8 @@
 			a {
 				color: #ffffff;
 			}
+			
+			#oldie a { color:#da0 }
 		</style>
 	</head>
 
@@ -38,6 +40,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var statsEnabled = false;
 
 			var container, stats;

examples/materials_cubemap_escher.html

@@ -18,6 +18,8 @@
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 			#d { text-align:center; margin:1em auto -9.0em; z-index:1000; position:relative; display:block; 
 				 background:rgba(0,0,0,0.75); padding:0.25em; width:300px; border-radius:10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
+				 
+			#oldie { margin-top:15em !important }
 		</style>
 	</head>
 
@@ -36,6 +38,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var statsEnabled = false;
 
 			var container, stats;

examples/materials_cubemap_refraction.html

@@ -20,6 +20,8 @@
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 			#d { text-align:center; margin:1em auto -9.5em; z-index:200; position:relative; display:block; 
 				background:rgba(0,0,0,0.5); padding:0.5em; width:400px; border-radius:15px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
+				
+			#oldie { margin-top:15em !important }
 		</style>
 	</head>
 
@@ -39,6 +41,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var FLOOR = -250;
 
 			var container, stats;

examples/materials_normalmap.html

@@ -27,21 +27,8 @@
 			}
 			
 			#oldie {
-				font-family:monospace;
-				font-size:13px;
-				
-				text-align:center;
-				background:rgb(200,100,0);
-				color:#fff;
-				padding:1em;
-				
-				width:475px;
-				margin:5em auto 0;
-				
-				border:solid 2px #fff;
-				border-radius:10px;
-				
-				display:none;
+				background:rgb(200,100,0) !important;
+				color:#fff;				
 			}
 			
 			#vt { display:none } 
@@ -65,29 +52,13 @@
 			please star this <a href="http://code.google.com/p/chromium/issues/detail?id=52497">Chrome issue</a> to get ANGLE support
 			</div>
 		</div>
-		
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a> 
-			and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
-			<br/>
-			Please try in 
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> / 
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> / 
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script> 
 		<script type="text/javascript" src="js/Stats.js"></script>
 		
 		<script type="text/javascript">
 
-			if ( ! THREE.Supports.webgl ) {
-			
-				document.getElementById( "oldie" ).style.display = "block";
-				
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 			
 			var statsEnabled = true;
 

examples/materials_normalmap2.html

@@ -27,21 +27,8 @@
 			}
 
 			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:rgb(200,100,0);
-				color:#fff;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				border:solid 2px #fff;
-				border-radius:10px;
-
-				display:none;
+				background:rgb(200,100,0) !important;
+				color:#fff;				
 			}
 
 			#vt { display:none }
@@ -65,28 +52,12 @@
 			</div>
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
-			and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
 
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var statsEnabled = true;
 

examples/materials_shaders_fresnel.html

@@ -5,7 +5,7 @@
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
-				background:#fff;
+				background:#030;
 				padding:0;
 				margin:0;
 				font-weight: bold;
@@ -27,6 +27,8 @@
 				color: #ffffff;
 			}
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
+			
+			#oldie a { color:#0b0 }
 		</style>
 	</head>
 
@@ -37,12 +39,11 @@
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script> 
 		<script type="text/javascript" src="js/Stats.js"></script>
-
-		<!--
-		-->
 		
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+
 			var statsEnabled = true;
 
 			var container, stats;

examples/particles_billboards_colors_gl.html

@@ -28,21 +28,6 @@
 				
             }
 			
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:#eee;
-				color:#000;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
-			
 		</style>
 	</head>
 	<body>
@@ -51,28 +36,12 @@
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards colors example
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
-			and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
 		
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var container, stats;
 			var camera, scene, renderer, particles, geometry, material, i, h, color, colors = [], sprite, size, x, y, z;

examples/particles_billboards_gl.html

@@ -28,21 +28,6 @@
 				
             }
 			
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:#eee;
-				color:#000;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
-			
 		</style>
 	</head>
 	<body>
@@ -51,28 +36,12 @@
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards example
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
-			and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
 		
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var container, stats;
 			var camera, scene, renderer, particles, geometry, material, i, h, color, sprite, size, x, y, z;

examples/particles_random_gl.html

@@ -28,21 +28,6 @@
 				
             }
 			
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:#eee;
-				color:#000;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
-			
 		</style>
 	</head>
 	<body>
@@ -51,28 +36,12 @@
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particles example
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
-			and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
 		
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var container, stats;
 			var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color;

examples/particles_sprites_gl.html

@@ -28,21 +28,6 @@
 				
             }
 			
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:#eee;
-				color:#000;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
-			
 		</style>
 	</head>
 	<body>
@@ -52,28 +37,12 @@
 			snowflakes by <a href="http://en.wikipedia.org/wiki/File:Sketch_of_snow_crystal_by_Ren%C3%A9_Descartes.jpg">Ren&eacute;  Descartes</a>
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
-			and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
 		
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var container, stats;
 			var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, sprite, size;

examples/postprocessing.html

@@ -24,21 +24,6 @@
 				
             }
 
-			#oldie {
-				font-family:monospace;
-				font-size:13px;
-
-				text-align:center;
-				background:#eee;
-				color:#000;
-				padding:1em;
-
-				width:475px;
-				margin:5em auto 0;
-
-				display:none;
-			}
-
             a { color: red; }
 
         </style>
@@ -51,18 +36,6 @@
 			<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
 		</div>
 
-		<center>
-		<div id="oldie">
-			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
-			and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
-			<br/>
-			Please try in
-			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
-			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
-			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
-		</div>
-		</center>
-
         <script type="text/javascript" src="js/Stats.js"></script>
         <script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
@@ -91,11 +64,7 @@
 
         <script type="text/javascript">
 
-			if ( ! THREE.Supports.webgl ) {
-
-				document.getElementById( "oldie" ).style.display = "block";
-
-			}
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
             var container, stats;
 

examples/render_to_texture.html

@@ -78,6 +78,8 @@
 
         <script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
             var container, stats;
 
             var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;

examples/scene_test.html

@@ -154,6 +154,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
 

examples/shader.html

@@ -27,6 +27,7 @@
 				color: #ffffff;
 			}
 
+			#oldie a { color:#da0 }
 		</style>
 	</head>
 	<body>
@@ -83,6 +84,8 @@
 		</script>
 
 		<script type="text/javascript">
+		
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
 
 			var container, stats;
 

examples/shader2.html

@@ -27,6 +27,7 @@
 				color: #ffffff;
 			}
 
+			#oldie a { color:#da0 }
 		</style>
 	</head>
 	<body>
@@ -168,6 +169,8 @@
 
 		<script type="text/javascript">
 
+			if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
+			
 			var container, stats;
 
 			var start_time;

src/core/Supports.js

@@ -4,8 +4,59 @@
  
 THREE.Supports = {
 	
+	// supported features
+	
 	canvas	: !!document.createElement( 'canvas' ).getContext,
 	webgl	: window.Uint8Array != undefined,
-	workers : !!window.Worker
+	workers : !!window.Worker,
+	
+	// helper methods
+	
+	addGetWebGLMessage: function( parameters ) {
+		
+		var parent = document.body,
+			id = "oldie" ;
+		
+		if ( parameters ) {
+			
+			if ( parameters.parent !== undefined ) parent  = parameters.parent;
+			if ( parameters.id !== undefined ) id  = parameters.id;
+			
+		}
+		
+		var html = [
+		
+		'Sorry, your browser doesn\'t support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br/>',
+		'<br/>',
+		'Please try in',
+		'<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /',
+		'<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /',
+		'<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>'
+		
+		].join("\n");
+		
+		var wrap = document.createElement( "center" ),
+			message = document.createElement( "div" );
+		
+		message.innerHTML = html;
+		message.id = id;
+		
+		var style = message.style;
+		
+		style.fontFamily = "monospace";
+		style.fontSize = "13px";
+		style.textAlign = "center";
+		style.background = "#eee";
+		style.color = "#000";
+		style.padding = "1em";
+		style.width = "475px";
+		style.margin = "5em auto 0";
+		
+		wrap.appendChild( message )
+		parent.appendChild( wrap );
+		
+		return message;
+
+	}
 	
 };
\ No newline at end of file