From 29cf97eee7afa103942f917e604eed70896b6e4f Mon Sep 17 00:00:00 2001 From: alteredq Date: Sun, 13 Feb 2011 00:09:09 +0100 Subject: [PATCH] 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 | 4 +- build/ThreeDebug.js | 4 +- build/ThreeExtras.js | 4 +- examples/geometry_colors.html | 33 +----------- examples/geometry_dynamic_gl.html | 32 +++-------- examples/geometry_minecraft_ao.html | 31 ++--------- examples/geometry_terrain_fog_gl.html | 7 +++ examples/geometry_terrain_gl.html | 7 +++ examples/geometry_terrain_gl2.html | 7 +++ examples/hdr.html | 33 +----------- examples/interactive_voxelpainter_gl.html | 4 ++ examples/lights_pointlights_gl.html | 2 + examples/lines_colors_gl.html | 33 +----------- examples/lines_cubes_gl.html | 33 +----------- examples/lines_sphere_gl.html | 32 +---------- examples/materials_cars.html | 4 ++ examples/materials_cubemap.html | 4 ++ .../materials_cubemap_balls_reflection.html | 6 ++- .../materials_cubemap_balls_refraction.html | 6 ++- examples/materials_cubemap_escher.html | 4 ++ examples/materials_cubemap_refraction.html | 4 ++ examples/materials_normalmap.html | 35 ++---------- examples/materials_normalmap2.html | 35 ++---------- examples/materials_shaders_fresnel.html | 9 ++-- examples/particles_billboards_colors_gl.html | 33 +----------- examples/particles_billboards_gl.html | 33 +----------- examples/particles_random_gl.html | 33 +----------- examples/particles_sprites_gl.html | 33 +----------- examples/postprocessing.html | 33 +----------- examples/render_to_texture.html | 2 + examples/scene_test.html | 2 + examples/shader.html | 3 ++ examples/shader2.html | 3 ++ src/core/Supports.js | 53 ++++++++++++++++++- 34 files changed, 154 insertions(+), 447 deletions(-) diff --git a/build/Three.js b/build/Three.js index 40d84c3d..98786399 100755 --- a/build/Three.js +++ b/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;cthis.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.ythis.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;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;c65535){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 WebGL
\n
\nPlease try in\nChrome 9+ /\nFirefox 4+ /\nSafari OSX 10.6+';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; diff --git a/build/ThreeDebug.js b/build/ThreeDebug.js index 9eef3059..5b5e22c4 100644 --- a/build/ThreeDebug.js +++ b/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;cthis.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.ythis.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;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;c65535){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 WebGL
\n
\nPlease try in\nChrome 9+ /\nFirefox 4+ /\nSafari OSX 10.6+';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; diff --git a/build/ThreeExtras.js b/build/ThreeExtras.js index 262e1bd7..b4e40af5 100644 --- a/build/ThreeExtras.js +++ b/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;cthis.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.ythis.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;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;c65535){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 WebGL
\n
\nPlease try in\nChrome 9+ /\nFirefox 4+ /\nSafari OSX 10.6+';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; diff --git a/examples/geometry_colors.html b/examples/geometry_colors.html index 2284a593..360948f2 100644 --- a/examples/geometry_colors.html +++ b/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 @@
three.js - vertex colors - webgl
-
-
- Sorry, your browser doesn't support WebGL - -
- Please try in - Chrome 9+ / - Firefox 4+ / - Safari OSX 10.6+ -
-
- @@ -76,11 +55,7 @@ @@ -120,11 +93,7 @@ - - @@ -91,11 +64,7 @@