Added MiscUtils with THREE.requestAnimationFrame.

This is lifted from greggman's ThreeD http://code.google.com/p/threedlibrary/

Also modified ribbons example to show how to use this.

build/ThreeExtras.js

@@ -280,18 +280,21 @@ THREE.Detector={canvas:!!document.createElement("canvas").getContext,webgl:windo
 c;c=d.style;c.fontFamily="monospace";c.fontSize="13px";c.textAlign="center";c.background="#eee";c.color="#000";c.padding="1em";c.width="475px";c.margin="5em auto 0";a.appendChild(d);b.appendChild(a);return d}};
 var GeometryUtils={merge:function(a,b){var c=b instanceof THREE.Mesh,d=a.vertices.length,f=c?b.geometry:b,g=a.vertices,h=f.vertices,k=a.faces,j=f.faces,m=a.uvs;f=f.uvs;c&&b.autoUpdateMatrix&&b.updateMatrix();for(var o=0,w=h.length;o<w;o++){var u=new THREE.Vertex(h[o].position.clone());c&&b.localMatrix.multiplyVector3(u.position);g.push(u)}o=0;for(w=j.length;o<w;o++){h=j[o];var t,x=h.vertexNormals;if(h instanceof THREE.Face3)t=new THREE.Face3(h.a+d,h.b+d,h.c+d);else h instanceof THREE.Face4&&(t=new THREE.Face4(h.a+
 d,h.b+d,h.c+d,h.d+d));t.centroid.copy(h.centroid);t.normal.copy(h.normal);c=0;for(g=x.length;c<g;c++){u=x[c];t.vertexNormals.push(u.clone())}t.materials=h.materials.slice();k.push(t)}o=0;for(w=f.length;o<w;o++){d=f[o];k=[];c=0;for(g=d.length;c<g;c++)k.push(new THREE.UV(d[c].u,d[c].v));m.push(k)}}},ImageUtils={loadTexture:function(a,b,c){var d=new Image;d.onload=function(){this.loaded=!0;c&&c(this)};d.src=a;return new THREE.Texture(d,b)},loadArray:function(a,b){var c,d,f=[];c=f.loadCount=0;for(d=a.length;c<
-d;++c){f[c]=new Image;f[c].loaded=0;f[c].onload=function(){f.loadCount+=1;this.loaded=!0;b&&b(this)};f[c].src=a[c]}return f}},SceneUtils={loadScene:function(a,b,c,d){a=new Worker(a);a.postMessage(0);a.onmessage=function(f){function g(){for(o in L.objects)if(!G.objects[o]){A=L.objects[o];if(q=G.geometries[A.geometry]){ba=[];for(i=0;i<A.materials.length;i++)ba[i]=G.materials[A.materials[i]];F=A.position;r=A.rotation;s=A.scale;object=new THREE.Mesh(q,ba);object.position.set(F[0],F[1],F[2]);object.rotation.set(r[0],
-r[1],r[2]);object.scale.set(s[0],s[1],s[2]);object.visible=A.visible;G.scene.addObject(object);G.objects[o]=object}}}function h(U){return function(na){G.geometries[U]=na;g();V-=1;k()}}function k(){d({total_models:Y,total_textures:Z,loaded_models:Y-V,loaded_textures:Z-S},G);V==0&&S==0&&c(G)}var j,m,o,w,u,t,x,A,F,v,I,q,J,e,ba,L,M,V,S,Y,Z,G;L=f.data;M=new THREE.Loader;S=V=0;G={scene:new THREE.Scene,geometries:{},materials:{},textures:{},objects:{},cameras:{},lights:{},fogs:{}};f=function(){S-=1;k()};
-for(u in L.cameras){v=L.cameras[u];if(v.type=="perspective")J=new THREE.Camera(v.fov,v.aspect,v.near,v.far);else if(v.type=="ortho"){J=new THREE.Camera;J.projectionMatrix=THREE.Matrix4.makeOrtho(v.left,v.right,v.top,v.bottom,v.near,v.far)}F=v.position;v=v.target;J.position.set(F[0],F[1],F[2]);J.target.position.set(v[0],v[1],v[2]);G.cameras[u]=J}for(w in L.lights){u=L.lights[w];if(u.type=="directional"){F=u.direction;light=new THREE.DirectionalLight;light.position.set(F[0],F[1],F[2]);light.position.normalize()}else if(u.type==
-"point"){F=u.position;light=new THREE.PointLight;light.position.set(F[0],F[1],F[2])}v=u.color;i=u.intensity||1;light.color.setRGB(v[0]*i,v[1]*i,v[2]*i);G.scene.addLight(light);G.lights[w]=light}for(t in L.fogs){w=L.fogs[t];if(w.type=="linear")e=new THREE.Fog(0,w.near,w.far);else w.type=="exp2"&&(e=new THREE.FogExp2(0,w.density));v=w.color;e.color.setRGB(v[0],v[1],v[2]);G.fogs[t]=e}if(G.cameras&&L.defaults.camera)G.currentCamera=G.cameras[L.defaults.camera];if(G.fogs&&L.defaults.fog)G.scene.fog=G.fogs[L.defaults.fog];
-v=L.defaults.bgcolor;G.bgColor=new THREE.Color;G.bgColor.setRGB(v[0],v[1],v[2]);G.bgColorAlpha=L.defaults.bgalpha;for(j in L.geometries){t=L.geometries[j];if(t.type=="bin_mesh"||t.type=="ascii_mesh")V+=1}Y=V;for(j in L.geometries){t=L.geometries[j];if(t.type=="cube"){q=new Cube(t.width,t.height,t.depth,t.segments_width,t.segments_height,null,t.flipped,t.sides);G.geometries[j]=q}else if(t.type=="plane"){q=new Plane(t.width,t.height,t.segments_width,t.segments_height);G.geometries[j]=q}else if(t.type==
-"sphere"){q=new Sphere(t.radius,t.segments_width,t.segments_height);G.geometries[j]=q}else if(t.type=="cylinder"){q=new Cylinder(t.numSegs,t.topRad,t.botRad,t.height,t.topOffset,t.botOffset);G.geometries[j]=q}else if(t.type=="torus"){q=new Torus(t.radius,t.tube,t.segmentsR,t.segmentsT);G.geometries[j]=q}else if(t.type=="icosahedron"){q=new Icosahedron(t.subdivisions);G.geometries[j]=q}else if(t.type=="bin_mesh")M.loadBinary({model:t.url,callback:h(j)});else t.type=="ascii_mesh"&&M.loadAscii({model:t.url,
-callback:h(j)})}for(x in L.textures){j=L.textures[x];S+=j.url instanceof Array?j.url.length:1}Z=S;for(x in L.textures){j=L.textures[x];if(j.mapping!=undefined&&THREE[j.mapping]!=undefined)j.mapping=new THREE[j.mapping];if(j.url instanceof Array){t=ImageUtils.loadArray(j.url,f);t=new THREE.Texture(t,j.mapping)}else{t=ImageUtils.loadTexture(j.url,j.mapping,f);if(THREE[j.min_filter]!=undefined)t.min_filter=THREE[j.min_filter];if(THREE[j.mag_filter]!=undefined)t.mag_filter=THREE[j.mag_filter]}G.textures[x]=
-t}for(m in L.materials){x=L.materials[m];for(I in x.parameters)if(I=="env_map"||I=="map"||I=="light_map")x.parameters[I]=G.textures[x.parameters[I]];else if(I=="shading")x.parameters[I]=x.parameters[I]=="flat"?THREE.FlatShading:THREE.SmoothShading;else if(I=="blending")x.parameters[I]=THREE[x.parameters[I]]?THREE[x.parameters[I]]:THREE.NormalBlending;else I=="combine"&&(x.parameters[I]=x.parameters[I]=="MixOperation"?THREE.MixOperation:THREE.MultiplyOperation);x=new THREE[x.type](x.parameters);G.materials[m]=
-x}g();b(G)}},addMesh:function(a,b,c,d,f,g,h,k,j,m){b=new THREE.Mesh(b,m);b.scale.x=b.scale.y=b.scale.z=c;b.position.x=d;b.position.y=f;b.position.z=g;b.rotation.x=h;b.rotation.y=k;b.rotation.z=j;a.addObject(b);return b},addPanoramaCubeWebGL:function(a,b,c){var d=ShaderUtils.lib.cube;d.uniforms.tCube.texture=c;c=new THREE.MeshShaderMaterial({fragment_shader:d.fragment_shader,vertex_shader:d.vertex_shader,uniforms:d.uniforms});b=new THREE.Mesh(new Cube(b,b,b,1,1,null,!0),c);a.addObject(b);return b},
-addPanoramaCube:function(a,b,c){var d=[];d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[0])}));d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[1])}));d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[2])}));d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[3])}));d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[4])}));d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[5])}));b=new THREE.Mesh(new Cube(b,b,b,1,1,d,!0),new THREE.MeshFaceMaterial);
-a.addObject(b);return b},addPanoramaCubePlanes:function(a,b,c){var d=b/2;b=new Plane(b,b);var f=Math.PI/2,g=Math.PI;SceneUtils.addMesh(a,b,1,0,0,-d,0,0,0,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[5])}));SceneUtils.addMesh(a,b,1,-d,0,0,0,f,0,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[0])}));SceneUtils.addMesh(a,b,1,d,0,0,0,-f,0,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[1])}));SceneUtils.addMesh(a,b,1,0,d,0,f,0,g,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[2])}));
-SceneUtils.addMesh(a,b,1,0,-d,0,-f,0,g,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[3])}))}},ShaderUtils={lib:{fresnel:{uniforms:{mRefractionRatio:{type:"f",value:1.02},mFresnelBias:{type:"f",value:0.1},mFresnelPower:{type:"f",value:2},mFresnelScale:{type:"f",value:1},tCube:{type:"t",value:1,texture:null}},fragment_shader:"uniform samplerCube tCube;\nvarying vec3 vReflect;\nvarying vec3 vRefract[3];\nvarying float vReflectionFactor;\nvoid main() {\nvec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );\nvec4 refractedColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nrefractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;\nrefractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;\nrefractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;\nrefractedColor.a = 1.0;\ngl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );\n}",
+d;++c){f[c]=new Image;f[c].loaded=0;f[c].onload=function(){f.loadCount+=1;this.loaded=!0;b&&b(this)};f[c].src=a[c]}return f}};
+THREE.requestAnimationFrame=function(a,b){if(!THREE.requestAnimationFrameImpl_)THREE.requestAnimationFrameImpl_=function(){for(var c=[a,window],d=["requestAnimationFrame","webkitRequestAnimationFrame","mozRequestAnimationFrame","operaRequestAnimationFrame","requestAnimationFrame"],f=[function(m){return function(o,w){o[m].call(o,w)}},function(m){return function(o,w){window[m].call(window,w)}}],g=0;g<c.length;++g)for(var h=c[g],k=0;k<d.length;++k){var j=d[k];if(h[j]){console.log("using ",j);return f[g](j)}}console.log("using window.setTimeout");
+return function(m,o){window.setTimeout(o,1E3/70)}}();THREE.requestAnimationFrameImpl_(a,b)};
+var SceneUtils={loadScene:function(a,b,c,d){a=new Worker(a);a.postMessage(0);a.onmessage=function(f){function g(){for(o in L.objects)if(!G.objects[o]){A=L.objects[o];if(q=G.geometries[A.geometry]){ba=[];for(i=0;i<A.materials.length;i++)ba[i]=G.materials[A.materials[i]];F=A.position;r=A.rotation;s=A.scale;object=new THREE.Mesh(q,ba);object.position.set(F[0],F[1],F[2]);object.rotation.set(r[0],r[1],r[2]);object.scale.set(s[0],s[1],s[2]);object.visible=A.visible;G.scene.addObject(object);G.objects[o]=
+object}}}function h(U){return function(na){G.geometries[U]=na;g();V-=1;k()}}function k(){d({total_models:Y,total_textures:Z,loaded_models:Y-V,loaded_textures:Z-S},G);V==0&&S==0&&c(G)}var j,m,o,w,u,t,x,A,F,v,I,q,J,e,ba,L,M,V,S,Y,Z,G;L=f.data;M=new THREE.Loader;S=V=0;G={scene:new THREE.Scene,geometries:{},materials:{},textures:{},objects:{},cameras:{},lights:{},fogs:{}};f=function(){S-=1;k()};for(u in L.cameras){v=L.cameras[u];if(v.type=="perspective")J=new THREE.Camera(v.fov,v.aspect,v.near,v.far);
+else if(v.type=="ortho"){J=new THREE.Camera;J.projectionMatrix=THREE.Matrix4.makeOrtho(v.left,v.right,v.top,v.bottom,v.near,v.far)}F=v.position;v=v.target;J.position.set(F[0],F[1],F[2]);J.target.position.set(v[0],v[1],v[2]);G.cameras[u]=J}for(w in L.lights){u=L.lights[w];if(u.type=="directional"){F=u.direction;light=new THREE.DirectionalLight;light.position.set(F[0],F[1],F[2]);light.position.normalize()}else if(u.type=="point"){F=u.position;light=new THREE.PointLight;light.position.set(F[0],F[1],
+F[2])}v=u.color;i=u.intensity||1;light.color.setRGB(v[0]*i,v[1]*i,v[2]*i);G.scene.addLight(light);G.lights[w]=light}for(t in L.fogs){w=L.fogs[t];if(w.type=="linear")e=new THREE.Fog(0,w.near,w.far);else w.type=="exp2"&&(e=new THREE.FogExp2(0,w.density));v=w.color;e.color.setRGB(v[0],v[1],v[2]);G.fogs[t]=e}if(G.cameras&&L.defaults.camera)G.currentCamera=G.cameras[L.defaults.camera];if(G.fogs&&L.defaults.fog)G.scene.fog=G.fogs[L.defaults.fog];v=L.defaults.bgcolor;G.bgColor=new THREE.Color;G.bgColor.setRGB(v[0],
+v[1],v[2]);G.bgColorAlpha=L.defaults.bgalpha;for(j in L.geometries){t=L.geometries[j];if(t.type=="bin_mesh"||t.type=="ascii_mesh")V+=1}Y=V;for(j in L.geometries){t=L.geometries[j];if(t.type=="cube"){q=new Cube(t.width,t.height,t.depth,t.segments_width,t.segments_height,null,t.flipped,t.sides);G.geometries[j]=q}else if(t.type=="plane"){q=new Plane(t.width,t.height,t.segments_width,t.segments_height);G.geometries[j]=q}else if(t.type=="sphere"){q=new Sphere(t.radius,t.segments_width,t.segments_height);
+G.geometries[j]=q}else if(t.type=="cylinder"){q=new Cylinder(t.numSegs,t.topRad,t.botRad,t.height,t.topOffset,t.botOffset);G.geometries[j]=q}else if(t.type=="torus"){q=new Torus(t.radius,t.tube,t.segmentsR,t.segmentsT);G.geometries[j]=q}else if(t.type=="icosahedron"){q=new Icosahedron(t.subdivisions);G.geometries[j]=q}else if(t.type=="bin_mesh")M.loadBinary({model:t.url,callback:h(j)});else t.type=="ascii_mesh"&&M.loadAscii({model:t.url,callback:h(j)})}for(x in L.textures){j=L.textures[x];S+=j.url instanceof
+Array?j.url.length:1}Z=S;for(x in L.textures){j=L.textures[x];if(j.mapping!=undefined&&THREE[j.mapping]!=undefined)j.mapping=new THREE[j.mapping];if(j.url instanceof Array){t=ImageUtils.loadArray(j.url,f);t=new THREE.Texture(t,j.mapping)}else{t=ImageUtils.loadTexture(j.url,j.mapping,f);if(THREE[j.min_filter]!=undefined)t.min_filter=THREE[j.min_filter];if(THREE[j.mag_filter]!=undefined)t.mag_filter=THREE[j.mag_filter]}G.textures[x]=t}for(m in L.materials){x=L.materials[m];for(I in x.parameters)if(I==
+"env_map"||I=="map"||I=="light_map")x.parameters[I]=G.textures[x.parameters[I]];else if(I=="shading")x.parameters[I]=x.parameters[I]=="flat"?THREE.FlatShading:THREE.SmoothShading;else if(I=="blending")x.parameters[I]=THREE[x.parameters[I]]?THREE[x.parameters[I]]:THREE.NormalBlending;else I=="combine"&&(x.parameters[I]=x.parameters[I]=="MixOperation"?THREE.MixOperation:THREE.MultiplyOperation);x=new THREE[x.type](x.parameters);G.materials[m]=x}g();b(G)}},addMesh:function(a,b,c,d,f,g,h,k,j,m){b=new THREE.Mesh(b,
+m);b.scale.x=b.scale.y=b.scale.z=c;b.position.x=d;b.position.y=f;b.position.z=g;b.rotation.x=h;b.rotation.y=k;b.rotation.z=j;a.addObject(b);return b},addPanoramaCubeWebGL:function(a,b,c){var d=ShaderUtils.lib.cube;d.uniforms.tCube.texture=c;c=new THREE.MeshShaderMaterial({fragment_shader:d.fragment_shader,vertex_shader:d.vertex_shader,uniforms:d.uniforms});b=new THREE.Mesh(new Cube(b,b,b,1,1,null,!0),c);a.addObject(b);return b},addPanoramaCube:function(a,b,c){var d=[];d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[0])}));
+d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[1])}));d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[2])}));d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[3])}));d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[4])}));d.push(new THREE.MeshBasicMaterial({map:new THREE.Texture(c[5])}));b=new THREE.Mesh(new Cube(b,b,b,1,1,d,!0),new THREE.MeshFaceMaterial);a.addObject(b);return b},addPanoramaCubePlanes:function(a,b,c){var d=b/2;b=new Plane(b,b);var f=
+Math.PI/2,g=Math.PI;SceneUtils.addMesh(a,b,1,0,0,-d,0,0,0,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[5])}));SceneUtils.addMesh(a,b,1,-d,0,0,0,f,0,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[0])}));SceneUtils.addMesh(a,b,1,d,0,0,0,-f,0,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[1])}));SceneUtils.addMesh(a,b,1,0,d,0,f,0,g,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[2])}));SceneUtils.addMesh(a,b,1,0,-d,0,-f,0,g,new THREE.MeshBasicMaterial({map:new THREE.Texture(c[3])}))}},
+ShaderUtils={lib:{fresnel:{uniforms:{mRefractionRatio:{type:"f",value:1.02},mFresnelBias:{type:"f",value:0.1},mFresnelPower:{type:"f",value:2},mFresnelScale:{type:"f",value:1},tCube:{type:"t",value:1,texture:null}},fragment_shader:"uniform samplerCube tCube;\nvarying vec3 vReflect;\nvarying vec3 vRefract[3];\nvarying float vReflectionFactor;\nvoid main() {\nvec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );\nvec4 refractedColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nrefractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;\nrefractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;\nrefractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;\nrefractedColor.a = 1.0;\ngl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );\n}",
 vertex_shader:"uniform float mRefractionRatio;\nuniform float mFresnelBias;\nuniform float mFresnelScale;\nuniform float mFresnelPower;\nvarying vec3 vReflect;\nvarying vec3 vRefract[3];\nvarying float vReflectionFactor;\nvoid main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvec3 nWorld = normalize ( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal );\nvec3 I = mPosition.xyz - cameraPosition;\nvReflect = reflect( I, nWorld );\nvRefract[0] = refract( normalize( I ), nWorld, mRefractionRatio );\nvRefract[1] = refract( normalize( I ), nWorld, mRefractionRatio * 0.99 );\nvRefract[2] = refract( normalize( I ), nWorld, mRefractionRatio * 0.98 );\nvReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), nWorld ), mFresnelPower );\ngl_Position = projectionMatrix * mvPosition;\n}"},
 normal:{uniforms:{enableAO:{type:"i",value:0},enableDiffuse:{type:"i",value:0},tDiffuse:{type:"t",value:0,texture:null},tNormal:{type:"t",value:2,texture:null},tAO:{type:"t",value:3,texture:null},uNormalScale:{type:"f",value:1},tDisplacement:{type:"t",value:4,texture:null},uDisplacementBias:{type:"f",value:-0.5},uDisplacementScale:{type:"f",value:2.5},uPointLightPos:{type:"v3",value:new THREE.Vector3},uPointLightColor:{type:"c",value:new THREE.Color(15658734)},uDirLightPos:{type:"v3",value:new THREE.Vector3},
 uDirLightColor:{type:"c",value:new THREE.Color(15658734)},uAmbientLightColor:{type:"c",value:new THREE.Color(328965)},uDiffuseColor:{type:"c",value:new THREE.Color(15658734)},uSpecularColor:{type:"c",value:new THREE.Color(1118481)},uAmbientColor:{type:"c",value:new THREE.Color(328965)},uShininess:{type:"f",value:30}},fragment_shader:"uniform vec3 uDirLightPos;\nuniform vec3 uAmbientLightColor;\nuniform vec3 uDirLightColor;\nuniform vec3 uPointLightColor;\nuniform vec3 uAmbientColor;\nuniform vec3 uDiffuseColor;\nuniform vec3 uSpecularColor;\nuniform float uShininess;\nuniform bool enableDiffuse;\nuniform bool enableAO;\nuniform sampler2D tDiffuse;\nuniform sampler2D tNormal;\nuniform sampler2D tAO;\nuniform float uNormalScale;\nvarying vec3 vTangent;\nvarying vec3 vBinormal;\nvarying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec3 vPointLightVector;\nvarying vec3 vViewPosition;\nvoid main() {\nvec3 diffuseTex = vec3( 1.0, 1.0, 1.0 );\nvec3 aoTex = vec3( 1.0, 1.0, 1.0 );\nvec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;\nnormalTex.xy *= uNormalScale;\nnormalTex = normalize( normalTex );\nif( enableDiffuse )\ndiffuseTex = texture2D( tDiffuse, vUv ).xyz;\nif( enableAO )\naoTex = texture2D( tAO, vUv ).xyz;\nmat3 tsb = mat3( vTangent, vBinormal, vNormal );\nvec3 finalNormal = tsb * normalTex;\nvec3 normal = normalize( finalNormal );\nvec3 viewPosition = normalize( vViewPosition );\nvec4 pointDiffuse  = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec3 pointVector = normalize( vPointLightVector );\nvec3 pointHalfVector = normalize( vPointLightVector + vViewPosition );\nfloat pointDotNormalHalf = dot( normal, pointHalfVector );\nfloat pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );\nfloat pointSpecularWeight = 0.0;\nif ( pointDotNormalHalf >= 0.0 )\npointSpecularWeight = pow( pointDotNormalHalf, uShininess );\npointDiffuse  += vec4( uDiffuseColor, 1.0 ) * pointDiffuseWeight;\npointSpecular += vec4( uSpecularColor, 1.0 ) * pointSpecularWeight;\nvec4 dirDiffuse  = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );\nvec3 dirVector = normalize( lDirection.xyz );\nvec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );\nfloat dirDotNormalHalf = dot( normal, dirHalfVector );\nfloat dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );\nfloat dirSpecularWeight = 0.0;\nif ( dirDotNormalHalf >= 0.0 )\ndirSpecularWeight = pow( dirDotNormalHalf, uShininess );\ndirDiffuse  += vec4( uDiffuseColor, 1.0 ) * dirDiffuseWeight;\ndirSpecular += vec4( uSpecularColor, 1.0 ) * dirSpecularWeight;\nvec4 totalLight = vec4( uAmbientLightColor * uAmbientColor, 1.0 );\ntotalLight += vec4( uDirLightColor, 1.0 ) * ( dirDiffuse + dirSpecular );\ntotalLight += vec4( uPointLightColor, 1.0 ) * ( pointDiffuse + pointSpecular );\ngl_FragColor = vec4( totalLight.xyz * aoTex * diffuseTex, 1.0 );\n}",

examples/ribbons_gl.html

@@ -37,11 +37,11 @@
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl ribbons example
 		</div>
 		
-		<script type="text/javascript" src="../build/ThreeExtrasRibbon.js"></script>		
+		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
-		
+
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			var container, stats;
@@ -53,15 +53,15 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = {			
+			var postprocessing = {
 				
 				enabled  : true
 				
 			};
 
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			loop();
+			
 			function init() {
 
 				container = document.createElement( 'div' );
@@ -257,7 +257,9 @@
 			}			
 
 			function loop() {
-
+				
+				THREE.requestAnimationFrame( renderer.domElement, loop );
+				
 				var time = new Date().getTime() * 0.00005;
 				
 				camera.position.x += ( mouseX - camera.position.x ) * 0.036;
@@ -286,8 +288,6 @@
 					
 				}
 
-				//renderer.render( scene, camera );
-
 				if ( postprocessing.enabled ) {
 				
 					renderer.clear();
@@ -334,6 +334,7 @@
 				}
 
 				stats.update();
+				
 			}
 
 

src/extras/MiscUtils.js

+/**
+ * @author greggman / http://greggman.com/
+ */
+ 
+THREE.requestAnimationFrame = function( element, callback ) {
+
+	if ( ! THREE.requestAnimationFrameImpl_ ) {
+	
+		THREE.requestAnimationFrameImpl_ = function() {
+	  
+			var objects = [ element, window ];
+			
+			var functionNames = [
+				"requestAnimationFrame",
+				"webkitRequestAnimationFrame",
+				"mozRequestAnimationFrame",
+				"operaRequestAnimationFrame",
+				"requestAnimationFrame"
+			];
+	  
+			var functions = [
+			
+				function ( name ) {
+				
+					return function( element, callback ) {
+						
+								element[ name ].call( element, callback );
+						
+							};
+
+				},
+				
+			
+				function ( name ) {
+			  
+					return function( element, callback ) {
+						
+						window[ name ].call( window, callback );
+
+					};
+
+				}
+
+			];
+		  
+			for ( var ii = 0; ii < objects.length; ++ii ) {
+			
+				var obj = objects[ ii ];
+				for ( var jj = 0; jj < functionNames.length; ++jj ) {
+				
+					var functionName = functionNames[ jj ];
+					if ( obj[ functionName ] ) {
+				
+						console.log( "using ", functionName );
+						return functions[ ii ]( functionName );
+
+					}
+					
+				}
+
+			}
+			
+			console.log( "using window.setTimeout" );
+			
+			return function( element, callback ) {
+			
+			   window.setTimeout(callback, 1000 / 70);
+			   
+			};
+		
+		}();
+	}
+
+	THREE.requestAnimationFrameImpl_( element, callback );
+
+};

utils/build.py

@@ -82,6 +82,7 @@ EXTRAS_FILES = [
 'extras/Detector.js',
 'extras/GeometryUtils.js',
 'extras/ImageUtils.js',
+'extras/MiscUtils.js',
 'extras/SceneUtils.js',
 'extras/ShaderUtils.js',
 'extras/primitives/Cube.js',