From 9297fb975e92558d7ac9e2740a9f98ca0aebdf58 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Tue, 22 Feb 2011 04:45:38 +0000 Subject: [PATCH] All examples now use RequestAnimationFrame.js (pheww!) --- examples/canvas_interactive_voxelpainter.html | 2 +- examples/misc_lights_test.html | 50 ++- examples/misc_materials_multimaterials.html | 23 +- examples/misc_uqbiquity_test.html | 28 +- examples/misc_webglrenderer2_sandbox.html | 24 +- .../webgl_geometry_blenderexport_colors.html | 59 ++-- examples/webgl_geometry_colors.html | 50 +-- examples/webgl_geometry_dynamic.html | 73 +++-- examples/webgl_geometry_large_mesh.html | 121 +++---- examples/webgl_geometry_minecraft.html | 37 ++- examples/webgl_geometry_minecraft_ao.html | 41 ++- examples/webgl_geometry_terrain.html | 40 ++- examples/webgl_geometry_terrain2.html | 40 ++- examples/webgl_geometry_terrain_fog.html | 47 +-- examples/webgl_hdr.html | 268 ++++++++-------- examples/webgl_interactive_voxelpainter.html | 88 +++--- examples/webgl_lights_pointlights.html | 59 ++-- examples/webgl_lines_colors.html | 186 ++++++----- examples/webgl_lines_cubes.html | 101 +++--- examples/webgl_lines_sphere.html | 78 +++-- examples/webgl_materials.html | 46 +-- examples/webgl_materials_cars.html | 33 +- examples/webgl_materials_cars_camaro.html | 114 +++---- examples/webgl_materials_cubemap.html | 41 ++- ...gl_materials_cubemap_balls_reflection.html | 29 +- ...gl_materials_cubemap_balls_refraction.html | 25 +- examples/webgl_materials_cubemap_escher.html | 26 +- .../webgl_materials_cubemap_refraction.html | 48 +-- examples/webgl_materials_grass.html | 20 +- examples/webgl_materials_normalmap.html | 97 +++--- examples/webgl_materials_normalmap2.html | 25 +- examples/webgl_materials_shaders.html | 130 ++++---- examples/webgl_materials_shaders_fresnel.html | 32 +- examples/webgl_objconvert_test.html | 28 +- examples/webgl_particles_billboards.html | 82 ++--- .../webgl_particles_billboards_colors.html | 78 +++-- examples/webgl_particles_random.html | 91 +++--- examples/webgl_particles_sprites.html | 89 +++--- examples/webgl_postprocessing.html | 294 +++++++++--------- examples/webgl_ribbons.html | 84 +++-- examples/webgl_rtt.html | 260 ++++++++-------- examples/webgl_scene_test.html | 22 +- examples/webgl_shader.html | 71 +++-- examples/webgl_shader2.html | 135 ++++---- 44 files changed, 1818 insertions(+), 1497 deletions(-) diff --git a/examples/canvas_interactive_voxelpainter.html b/examples/canvas_interactive_voxelpainter.html index 6dfa3f9a..389bcb4e 100644 --- a/examples/canvas_interactive_voxelpainter.html +++ b/examples/canvas_interactive_voxelpainter.html @@ -145,7 +145,7 @@ } else { - var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.rotationMatrix.multiplyVector3( intersects[ 0 ].face.normal.clone() ) ); + var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.matrixRotation.multiplyVector3( intersects[ 0 ].face.normal.clone() ) ); var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } ), new THREE.MeshFaceMaterial() ] ); voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25; diff --git a/examples/misc_lights_test.html b/examples/misc_lights_test.html index 9b618f6c..d2a140d8 100644 --- a/examples/misc_lights_test.html +++ b/examples/misc_lights_test.html @@ -1,7 +1,7 @@ - three.js - lights - point + directional - webgl + three.js misc - lights - point + directional - +

Large mesh test

@@ -30,25 +30,26 @@ 2d canvas renderer WebGL renderer
- -

Lucy model from Stanford 3d scanning repository + +

Lucy model from Stanford 3d scanning repository (decimated with Meshlab). - +

Please be patient while the mesh is loading. It may take a while, it's 2MB file. - +

Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.

Canvas renderer is very slow for this demo and only diffuse material works there.

Use the flag --allow-file-access-from-files if working localy in Chrome.

- + 

 
 		
 
 		
 		
-		
+
+		
 		
 
 		
 
diff --git a/examples/webgl_geometry_minecraft.html b/examples/webgl_geometry_minecraft.html
index 84a04401..084fbc22 100644
--- a/examples/webgl_geometry_minecraft.html
+++ b/examples/webgl_geometry_minecraft.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - geometry - minecraft - webgl
+		three.js webgl - geometry - minecraft
 		
 		
-    
-    
+		    a { color: red; }
 
-        

-        

+		
+	
+	
+
+		

+		

 			three.js - webgl HDR texture example -
 			based on SpiderGL
 		

 
-        
-        
+		
+
+		
+		
 
-		
 		
 		
-		
+
 		
 		
-		
+			varying vec2 vUv;
 
-        
+
+
+		
-
-    
+		
+	
 
diff --git a/examples/webgl_interactive_voxelpainter.html b/examples/webgl_interactive_voxelpainter.html
index 6587f978..53c744d9 100644
--- a/examples/webgl_interactive_voxelpainter.html
+++ b/examples/webgl_interactive_voxelpainter.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - interactive - voxel painter - webgl
+		three.js webgl - interactive - voxel painter
 		
 		
 	
@@ -23,12 +23,13 @@
 		
 		
 
+		
 		
 
 		
diff --git a/examples/webgl_lights_pointlights.html b/examples/webgl_lights_pointlights.html
index 08bbca8a..37b4d196 100644
--- a/examples/webgl_lights_pointlights.html
+++ b/examples/webgl_lights_pointlights.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - lights - point lights - webgl
+		three.js webl - lights - point lights
 		
 		
 	
 	
 
 		

-		
+
 		

 		

 			three.js - point lights WebGL demo.

 			Walt Disney head by David OReilly
 		

 
-		 
+		
 
 		
 		
 		
 
+		
 		
 
 		
diff --git a/examples/webgl_lines_colors.html b/examples/webgl_lines_colors.html
index dc25b2c4..efb5b0c3 100644
--- a/examples/webgl_lines_colors.html
+++ b/examples/webgl_lines_colors.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - lines - cubes - colors - webgl
+		three.js webgl - lines - cubes - colors
 		
 		
 	
 	
-	
+
 		

-			three.js - color lines WebGL demo 
+			three.js - color lines WebGL demo
 			[Hilbert curve thanks to Thomas Diewald]
 		

 
 		
+
+		
 		
 
 		
+
+		
 		
 
 		
diff --git a/examples/webgl_lines_sphere.html b/examples/webgl_lines_sphere.html
index d9651e1b..ca86c0a9 100644
--- a/examples/webgl_lines_sphere.html
+++ b/examples/webgl_lines_sphere.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - lines - spheres - webgl
+		three.js webgl - lines - spheres
 		
 		
 	
 	
@@ -43,27 +43,28 @@
 		

 
 		
+
+		
 		
-		
+
 		
 	
diff --git a/examples/webgl_materials.html b/examples/webgl_materials.html
index 2f59f011..aef6d7b1 100644
--- a/examples/webgl_materials.html
+++ b/examples/webgl_materials.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - materials - webgl
+		three.js webgl - materials
 		
 		
 	
@@ -57,12 +57,14 @@
 		

 
 		
+
+		
 		
 
 		 
+		
 
 		
 		
@@ -41,40 +41,32 @@
 		
 		
 
+		
 		
 
 		
 
 	
diff --git a/examples/webgl_materials_cubemap.html b/examples/webgl_materials_cubemap.html
index 969f2be5..50f96c46 100644
--- a/examples/webgl_materials_cubemap.html
+++ b/examples/webgl_materials_cubemap.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - materials - cube reflection / refraction [Walt] - webgl
+		three.js webgl - materials - cube reflection / refraction [Walt]
 		
 		
 	
@@ -37,12 +37,14 @@
 		

 
 		
+
+		
 		
 
 		
+
+		
 		
 
 		
diff --git a/examples/webgl_materials_cubemap_balls_refraction.html b/examples/webgl_materials_cubemap_balls_refraction.html
index 01d0bef1..0d0469ee 100644
--- a/examples/webgl_materials_cubemap_balls_refraction.html
+++ b/examples/webgl_materials_cubemap_balls_refraction.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - materials - cube refraction [balls] - webgl
+		three.js webgl - materials - cube refraction [balls]
 		
 		
 	
@@ -35,12 +35,14 @@
 		
three.js - webgl cube refraction demo. skybox by Jochum Skoglund

 
 		
+
+		
 		
 
 		
diff --git a/examples/webgl_materials_cubemap_escher.html b/examples/webgl_materials_cubemap_escher.html
index e349739d..f08364ad 100644
--- a/examples/webgl_materials_cubemap_escher.html
+++ b/examples/webgl_materials_cubemap_escher.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - materials - cube reflection [Escher] - webgl
+		three.js webgl - materials - cube reflection [Escher]
 		
 		
 	
@@ -33,12 +32,14 @@
 		

 
 		
+
+		
 		
 
 		 
+		
+
+		
 		
 
 		
 		
 
+		
+
 		 
+		
+
+		
 		
-		
+
 		
 
diff --git a/examples/webgl_materials_normalmap2.html b/examples/webgl_materials_normalmap2.html
index 479a1a98..72a8524a 100644
--- a/examples/webgl_materials_normalmap2.html
+++ b/examples/webgl_materials_normalmap2.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - materials - normal map [Lee Perry-Smith] - webgl
+		three.js webgl - materials - normal map [Lee Perry-Smith]
 		
 		
 	
-	
+
 	
 		

 			
Blinn-Phong / Lambert materials

@@ -30,22 +30,23 @@
 			2d canvas renderer
 			WebGL renderer
 			

-			
+
 			
Three.js example
-			
+
 			

 			
Best viewed in Chrome 9 or Firefox 4 using WebGL renderer.
 			
Canvas renderer is very slow on anything other than Chrome.
 			
Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
 		

-		
+
 		

 
-		 
+		
 
 		
 		
 
+		
 		
 
 		
 
diff --git a/examples/webgl_materials_shaders_fresnel.html b/examples/webgl_materials_shaders_fresnel.html
index e556fe7d..cdbc3e60 100644
--- a/examples/webgl_materials_shaders_fresnel.html
+++ b/examples/webgl_materials_shaders_fresnel.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - materials - shaders [Fresnel] - webgl
+		three.js webgl - materials - shaders [Fresnel]
 		
 		
 	
 
 	
 		

-		
+
 		
three.js - webgl cube Fresnel shader demo. texture by Humus 

 
-		 
+		
+
+		
 		
-		
+
 		
 		
 
+		
 		
 
 		
+
+		
 		
 
 		
diff --git a/examples/webgl_particles_billboards_colors.html b/examples/webgl_particles_billboards_colors.html
index 14709b29..7886fd96 100644
--- a/examples/webgl_particles_billboards_colors.html
+++ b/examples/webgl_particles_billboards_colors.html
@@ -1,46 +1,47 @@
 
 
 	
-		three.js - particles - billboards - colors - webgl
+		three.js webgl - particles - billboards - colors
 		
 		
 	
 	
-	
-        

+
+		

 			three.js - webgl particle billboards colors example
 		

 
 		
+
+		
 		
 
 		
diff --git a/examples/webgl_particles_random.html b/examples/webgl_particles_random.html
index 0b859f44..ac4e1be6 100644
--- a/examples/webgl_particles_random.html
+++ b/examples/webgl_particles_random.html
@@ -1,46 +1,47 @@
 
 
 	
-		three.js - particles - webgl
+		three.js webgl - particles
 		
 		
 	
 	
-	
+
         

 			three.js - webgl particles example
 		

 
 		
+
+		
 		
 
 		
+
+		
 		
 
 		
-        
+		
+
+		
+		
 
 		
-        
+
+			void main(void) {
+
+				gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
+
+			}
+		
 
 		
-        
+			void main() {
+
+				vUv = vec2( uv.x, 1.0 - uv.y );
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+			}
+		
 
 
-        
-
-    
+		
+	
 
diff --git a/examples/webgl_ribbons.html b/examples/webgl_ribbons.html
index 257efce7..41cb604c 100644
--- a/examples/webgl_ribbons.html
+++ b/examples/webgl_ribbons.html
@@ -1,17 +1,17 @@
 
 
 	
-		three.js - ribbons - webgl
+		three.js webgl - ribbons
 		
 		
 	
 
 	
 
 		
+
+		
 		
 
-        

+		

 			three.js - webgl ribbons example
 		

 
@@ -44,8 +45,6 @@
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			window.onload = init;
-
 			var container, stats;
 			var camera, scene, renderer, ribbon, geometry, geometry2, materials = [], ribbons = [],
 				parameters, i, i2, h, color, x, y, z, z2, s, n, n2, nribbons, grid;
@@ -55,11 +54,10 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = {
+			var postprocessing = { enabled  : true };
 
-				enabled  : true
-
-			};
+			init();
+			animate();
 
 			function init() {
 
@@ -167,8 +165,6 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				loop();
-
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -212,9 +208,9 @@
 				postprocessing.camera.position.z = 100;
 
 				var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
-                postprocessing.rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
-                postprocessing.rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
-                postprocessing.rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
+				postprocessing.rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
+				postprocessing.rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
+				postprocessing.rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
 
 				var screen_shader = ShaderUtils.lib["screen"];
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
@@ -222,15 +218,14 @@
 				screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
 				screen_uniforms["opacity"].value = 1.0;
 
-                postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
+				postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
 
-                    uniforms: screen_uniforms,
-                    vertex_shader: screen_shader.vertex_shader,
-                    fragment_shader: screen_shader.fragment_shader,
-					blending: THREE.AdditiveBlending
-
-                } );
+					uniforms: screen_uniforms,
+					vertex_shader: screen_shader.vertex_shader,
+					fragment_shader: screen_shader.fragment_shader,
+						blending: THREE.AdditiveBlending
 
+				} );
 
 				var convolution_shader = ShaderUtils.lib["convolution"];
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
@@ -242,14 +237,13 @@
 				convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
 				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
 
-                postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
+				postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
 
-                    uniforms: convolution_uniforms,
-                    vertex_shader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
-                    fragment_shader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragment_shader
-
-                } );
+					uniforms: convolution_uniforms,
+					vertex_shader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
+					fragment_shader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragment_shader
 
+				} );
 
 				postprocessing.quad = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
 				postprocessing.quad.position.z = -500;
@@ -257,9 +251,18 @@
 
 			}
 
-			function loop() {
+			//
 
-				requestAnimationFrame( loop, renderer.domElement );
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				var time = new Date().getTime() * 0.00005;
 
@@ -334,13 +337,8 @@
 
 				}
 
-				stats.update();
-
-
-
 			}
 
-
 		
 	
 
diff --git a/examples/webgl_rtt.html b/examples/webgl_rtt.html
index dfc5376f..2511122e 100644
--- a/examples/webgl_rtt.html
+++ b/examples/webgl_rtt.html
@@ -1,112 +1,117 @@
 
 
-    
-        three.js - render-to-texture - webgl
-        
-        
+	
+	
 
-                color: #ffffff;
-            }
+		

+		
three.js render-to-texture webgl example

 
-        
-    
-    
+		
 
-        

-        
three.js render-to-texture webgl example

+		
+		
 
-        
-        
-
-        
 
-        
+
+		
 
-        
 
-            void main()
-            {
-               vUv = uv;
-               //gl_Position = vec4( position, 1.0 );
-			   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-           }
-        
+		
 
 
-        
+			}
 
-    
-
\ No newline at end of file
+		
+	
+
diff --git a/examples/webgl_scene_test.html b/examples/webgl_scene_test.html
index 79dab4f8..38eaaa3c 100644
--- a/examples/webgl_scene_test.html
+++ b/examples/webgl_scene_test.html
@@ -1,7 +1,7 @@
 
 
 	
-		three.js - io - scene loader - webgl
+		three.js webgl - io - scene loader