Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Synced with mrdoob's skinning branch.

alteredq 14 years ago
parent
408fad1905 9297fb975e
commit
ced26b32e6
71 changed files with 2219 additions and 1726 deletions
Split View Show Diff Stats
  1. 18 6
      examples/canvas_camera_orthographic.html
  2. 17 8
      examples/canvas_geometry_birds.html
  3. 3 3
      examples/canvas_geometry_cube.html
  4. 17 9
      examples/canvas_geometry_earth.html
  5. 0 1
      examples/canvas_geometry_panorama.html
  6. 34 24
      examples/canvas_geometry_terrain.html
  7. 18 6
      examples/canvas_interactive_cubes.html
  8. 17 5
      examples/canvas_interactive_cubes_tween.html
  9. 17 6
      examples/canvas_interactive_voxelpainter.html
  10. 18 6
      examples/canvas_lights_pointlights.html
  11. 18 6
      examples/canvas_lights_pointlights_smooth.html
  12. 20 17
      examples/canvas_lines.html
  13. 22 19
      examples/canvas_lines_sphere.html
  14. 13 6
      examples/canvas_materials.html
  15. 17 11
      examples/canvas_materials_depth.html
  16. 16 5
      examples/canvas_materials_normal.html
  17. 16 4
      examples/canvas_materials_reflection.html
  18. 19 10
      examples/canvas_materials_video.html
  19. 14 4
      examples/canvas_particles_floor.html
  20. 15 6
      examples/canvas_particles_random.html
  21. 21 8
      examples/canvas_particles_sprites.html
  22. 14 5
      examples/canvas_particles_waves.html
  23. 14 25
      examples/canvas_performance.html
  24. 13 5
      examples/canvas_sandbox.html
  25. 21 29
      examples/misc_lights_test.html
  26. 15 8
      examples/misc_materials_multimaterials.html
  27. 17 11
      examples/misc_uqbiquity_test.html
  28. 16 8
      examples/misc_webglrenderer2_sandbox.html
  29. 33 26
      examples/webgl_geometry_blenderexport_colors.html
  30. 30 20
      examples/webgl_geometry_colors.html
  31. 39 32
      examples/webgl_geometry_dynamic.html
  32. 65 56
      examples/webgl_geometry_large_mesh.html
  33. 22 15
      examples/webgl_geometry_minecraft.html
  34. 24 17
      examples/webgl_geometry_minecraft_ao.html
  35. 25 15
      examples/webgl_geometry_terrain.html
  36. 25 15
      examples/webgl_geometry_terrain2.html
  37. 29 18
      examples/webgl_geometry_terrain_fog.html
  38. 142 134
      examples/webgl_hdr.html
  39. 50 38
      examples/webgl_interactive_voxelpainter.html
  40. 34 25
      examples/webgl_lights_pointlights.html
  41. 92 94
      examples/webgl_lines_colors.html
  42. 49 52
      examples/webgl_lines_cubes.html
  43. 37 41
      examples/webgl_lines_sphere.html
  44. 28 18
      examples/webgl_materials.html
  45. 21 12
      examples/webgl_materials_cars.html
  46. 55 55
      examples/webgl_materials_cars_camaro.html
  47. 26 15
      examples/webgl_materials_cubemap.html
  48. 20 9
      examples/webgl_materials_cubemap_balls_reflection.html
  49. 18 7
      examples/webgl_materials_cubemap_balls_refraction.html
  50. 18 8
      examples/webgl_materials_cubemap_escher.html
  51. 28 20
      examples/webgl_materials_cubemap_refraction.html
  52. 16 4
      examples/webgl_materials_grass.html
  53. 54 43
      examples/webgl_materials_normalmap.html
  54. 18 7
      examples/webgl_materials_normalmap2.html
  55. 60 60
      examples/webgl_materials_shaders.html
  56. 21 11
      examples/webgl_materials_shaders_fresnel.html
  57. 17 11
      examples/webgl_objconvert_test.html
  58. 46 36
      examples/webgl_particles_billboards.html
  59. 44 34
      examples/webgl_particles_billboards_colors.html
  60. 51 40
      examples/webgl_particles_random.html
  61. 50 39
      examples/webgl_particles_sprites.html
  62. 154 148
      examples/webgl_postprocessing.html
  63. 1 0
      examples/webgl_postprocessing_dof.html
  64. 41 43
      examples/webgl_ribbons.html
  65. 143 131
      examples/webgl_rtt.html
  66. 16 6
      examples/webgl_scene_test.html
  67. 41 30
      examples/webgl_shader.html
  68. 73 62
      examples/webgl_shader2.html
  69. 0 16
      src/extras/MiscUtils.js
  70. 2 0
      src/materials/Texture.js
  71. 1 2
      utils/build.py

+ 18 - 6
examples/canvas_camera_orthographic.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - camera - orthographic</title>
 
+		<title>three.js canvas - camera - orthographic</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
@@ -18,6 +18,7 @@
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -26,7 +27,7 @@
 
 			var camera, scene, renderer;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -115,19 +116,30 @@
 
 				stats = new Stats();
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.top = '0px';
 
-				container.appendChild(stats.domElement);
 
+				container.appendChild( stats.domElement );
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var timer = new Date().getTime() * 0.0001;
 
 
 				camera.position.x = Math.cos( timer ) * 200;
 
 				camera.position.z = Math.sin( timer ) * 200;
 
 
-				renderer.render(scene, camera);
 
-				stats.update();
 
+				renderer.render( scene, camera );
 
+
 
 			}
 
 
 		</script>

+ 17 - 8
examples/canvas_geometry_birds.html
View File 

@@ -1,7 +1,7 @@
 
 <html>
 
 	<head>
 
 		<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
-		<title>three.js - geometry - birds</title>
 
+		<title>three.js canvas - geometry - birds</title>
 
 		<style type="text/css"> 
 			body {
 
 				color: #808080;
 
@@ -26,11 +26,12 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - birds demo</div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="obj/Bird.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			// Based on http://www.openprocessing.org/visuals/?visualID=6910
 
@@ -331,6 +332,7 @@
 
 			var stats;
 
 
 			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -378,8 +380,6 @@
 
 
 				document.getElementById( 'container' ).appendChild(stats.domElement);
 
 
-				setInterval( loop, 1000 / 200 );
 
-
 
 			}
 
 
 			function onDocumentMouseMove( event ) {
 
@@ -398,7 +398,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				for ( var i = 0, il = birds.length; i < il; i++ ) {
 
 
@@ -421,8 +432,6 @@
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 		</script>

+ 3 - 3
examples/canvas_geometry_cube.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - cube</title>
 
+		<title>three.js canvas - geometry - cube</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
@@ -171,8 +171,8 @@
 
 
 			function render() {
 
 
-				plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
 
-				renderer.render(scene, camera);
 
+				plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
 
+				renderer.render( scene, camera );
 
 
 			}

+ 17 - 9
examples/canvas_geometry_earth.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - earth</title>
 
+		<title>three.js canvas - geometry - earth</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -33,14 +33,14 @@
 
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
-
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			var container, stats;
 
@@ -54,10 +54,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 			function init() {
 
 
@@ -98,7 +96,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
@@ -106,7 +115,6 @@
 
 				mesh.rotation.y -= 0.005;
 
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
 
 			}

+ 0 - 1
examples/canvas_geometry_panorama.html
View File 

@@ -32,7 +32,6 @@
 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - panorama demo. cubemap by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>.</div>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
-
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 
 		<script type="text/javascript">

+ 34 - 24
examples/canvas_geometry_terrain.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - terrain</title>
 
+		<title>three.js canvas - geometry - terrain</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -33,12 +33,14 @@
 
 		<div id="container"><br /><br /><br /><br /><br />Generating...</div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - terrain demo. <a href="geometry_terrain.html">generate another</a></div> 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
-
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			var container, stats;
 
@@ -53,10 +55,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 			function init() {
 
 
@@ -103,23 +103,6 @@
 
 
 			}
 
 
-			function onDocumentMouseMove(event) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function loop() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
-
 
-				renderer.render(scene, camera);
 
-				stats.update();
 
-
 
-			}
 
-
 
 			function generateHeight( width, height ) {
 
 
 				var data = Float32Array ? new Float32Array() : [], perlin = new ImprovedNoise(),
 
@@ -192,6 +175,33 @@
 
 
 			}
 
 
+			function onDocumentMouseMove(event) {
 
+
 
+				mouseX = event.clientX - windowHalfX;
 
+				mouseY = event.clientY - windowHalfY;
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
 
 		</script>

+ 18 - 6
examples/canvas_interactive_cubes.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - interactive - cubes</title>
 
+		<title>three.js canvas - interactive - cubes</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -17,6 +17,7 @@
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -25,7 +26,7 @@
 
 			var camera, scene, projector, renderer;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -69,7 +70,7 @@
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-				container.appendChild(renderer.domElement);
 
+				container.appendChild( renderer.domElement );
 
 
 				stats = new Stats();
 
 				stats.domElement.style.position = 'absolute';
 
@@ -112,18 +113,29 @@
 
 				*/
 
 			}
 
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
 			var radius = 600;
 
 			var theta = 0;
 
 
-			function loop() {
 
+			function render() {
 
 
 				theta += 0.2;
 
 				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
 
 				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 
 
-				renderer.render(scene, camera);
 
-				stats.update();
 
+				renderer.render( scene, camera );
 
+
 
 			}
 
 
 		</script>

+ 17 - 5
examples/canvas_interactive_cubes_tween.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - interactive - cubes tween</title>
 
+		<title>three.js canvas - interactive - cubes tween</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -18,6 +18,7 @@
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 
 		<script type="text/javascript" src="js/Tween.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -26,7 +27,7 @@
 
 			var camera, scene, projector, renderer;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -118,10 +119,21 @@
 
 				*/
 
 			}
 
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
 			var radius = 600;
 
 			var theta = 0;
 
 
-			function loop() {
 
+			function render() {
 
 
 				TWEEN.update();
 
 
@@ -130,8 +142,8 @@
 
 				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 
 
-				renderer.render(scene, camera);
 
-				stats.update();
 
+				renderer.render( scene, camera );
 
+
 
 			}
 
 
 		</script>

+ 17 - 6
examples/canvas_interactive_voxelpainter.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - interactive - voxel painter</title>
 
+		<title>three.js canvas - interactive - voxel painter</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -15,10 +15,10 @@
 
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
-
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -31,7 +31,7 @@
 
 			theta = 45, isCtrlDown = false;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -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;
 
@@ -186,7 +186,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				if ( isShiftDown ) {
 
 
@@ -221,7 +232,7 @@
 
 				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
 
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
+
 
 			}
 
 
 		</script>

+ 18 - 6
examples/canvas_lights_pointlights.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - point light</title>
 
+		<title>three.js canvas - point light</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -38,8 +38,10 @@
 
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 
 		</div>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
-		<script type="text/javascript" src="obj/WaltHead.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
+		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 
 		<script type="text/javascript">
 
 
@@ -49,7 +51,7 @@
 
 			mesh;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -93,7 +95,17 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 
 
@@ -123,7 +135,7 @@
 
 				light3.position.y = particle3.position.y;
 
 				light3.position.z = particle3.position.z;
 
 
-				renderer.render(scene, camera);
 
+				renderer.render( scene, camera );
 
 
 			}

+ 18 - 6
examples/canvas_lights_pointlights_smooth.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - point light</title>
 
+		<title>three.js canvas - point light smooth</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -38,8 +38,10 @@
 
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 
 		</div>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
-		<script type="text/javascript" src="obj/WaltHead.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
+		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 
 		<script type="text/javascript">
 
 
@@ -49,7 +51,7 @@
 
 			geometry, mesh;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -96,7 +98,17 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 
 
@@ -126,7 +138,7 @@
 
 				light3.position.y = particle3.position.y;
 
 				light3.position.z = particle3.position.z;
 
 
-				renderer.render(scene, camera);
 
+				renderer.render( scene, camera );
 
 
 			}

+ 20 - 17
examples/canvas_lines.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - floor</title>
 
+		<title>three.js canvas - lines - random</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
@@ -18,7 +18,9 @@
 
 	</head>
 
 	<body>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 
 		<script type="text/javascript">
 
 
@@ -31,12 +33,10 @@
 
 			AMOUNTX = 10,
 
 			AMOUNTY = 10,
 
 
-			camera, scene, renderer,
 
-
 
-			stats;
 
+			camera, scene, renderer;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -80,13 +80,6 @@
 
 				var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
 
 				scene.addObject( line );
 
 
-				/*
 
-				stats = new Stats();
 
-				stats.domElement.style.position = 'absolute';
 
-				stats.domElement.style.top = '0px';
 
-				container.appendChild(stats.domElement);
 
-				*/
 
-
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
@@ -108,7 +101,9 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
+
 
 				}
 
+
 
 			}
 
 
 			function onDocumentTouchMove( event ) {
 
@@ -119,20 +114,28 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
+
 
 				}
 
+
 
 			}
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
-				camera.updateMatrix();
 
 
-				renderer.render(scene, camera);
 
+				renderer.render( scene, camera );
 
 
-				// stats.update();
 
 			}
 
 
 		</script>

+ 22 - 19
examples/canvas_lines_sphere.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - floor</title>
 
+		<title>three.js canvas - lines - sphere</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
@@ -18,7 +18,9 @@
 
 	</head>
 
 	<body>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 
 		<script type="text/javascript">
 
 
@@ -34,12 +36,10 @@
 
 			AMOUNTX = 10,
 
 			AMOUNTY = 10,
 
 
-			camera, scene, renderer,
 
-
 
-			stats;
 
+			camera, scene, renderer;
 
 
 			init();
 
-			setInterval(loop, 1000 / 60);
 
+			animate();
 
 
 			function init() {
 
 
@@ -92,16 +92,9 @@
 
 					geometry.vertices.push( new THREE.Vertex( vector2 ) );
 
 
 					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: Math.random() } ) );
 
-					scene.addObject(line);
 
+					scene.addObject( line );
 
 				}
 
 
-				/*
 
-				stats = new Stats();
 
-				stats.domElement.style.position = 'absolute';
 
-				stats.domElement.style.top = '0px';
 
-				container.appendChild(stats.domElement);
 
-				*/
 
-
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
@@ -117,37 +110,47 @@
 
 
 			function onDocumentTouchStart( event ) {
 
 
-				if(event.touches.length > 1) {
 
+				if ( event.touches.length > 1 ) {
 
 
 					event.preventDefault();
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
+
 
 				}
 
+
 
 			}
 
 
 			function onDocumentTouchMove( event ) {
 
 
-				if(event.touches.length == 1) {
 
+				if ( event.touches.length == 1 ) {
 
 
 					event.preventDefault();
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
+
 
 				}
 
+
 
 			}
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
-				camera.updateMatrix();
 
 
 				renderer.render( scene, camera );
 
 
-				// stats.update();
 
 			}
 
 
 		</script>

+ 13 - 6
examples/canvas_materials.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials</title>
 
+		<title>three.js canvas - materials</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -15,10 +15,10 @@
 
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
-
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -29,8 +29,7 @@
 
 			var particleLight, pointLight;
 
 
 			init();
 
-			// loop();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -172,7 +171,16 @@
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var timer = new Date().getTime() * 0.0001;
 
 
@@ -198,7 +206,6 @@
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}
 
 
 		</script>

+ 17 - 11
examples/canvas_materials_depth.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - depth material</title>
 
+		<title>three.js canvas - depth material</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -15,10 +15,10 @@
 
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
-
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -55,8 +55,7 @@
 
 			var debugContext;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-			// loop();
 
+			animate();
 
 
 			function init() {
 
 
@@ -129,7 +128,6 @@
 
 				scene.addLight( pointLight );
 
 
 				renderer = new THREE.CanvasRenderer();
 
-				// renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 				container.appendChild( renderer.domElement );
 
@@ -196,7 +194,16 @@
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				if ( moveForward ) camera.position.z -= 10; // camera.moveZ( 10 );
 
 				if ( moveBackwards ) camera.position.z += 10; // camera.moveZ( - 10 );
 
@@ -216,14 +223,14 @@
 
 				if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
 
 				if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
 
 
-				debugContext.clearRect( -256, -256, 512, 512 );
 
+				debugContext.clearRect( - 256, - 256, 512, 512 );
 
 
 				debugContext.beginPath();
 
 
 				// center
 
-				debugContext.moveTo( -10, 0 );
 
+				debugContext.moveTo( - 10, 0 );
 
 				debugContext.lineTo( 10, 0 );
 
-				debugContext.moveTo( 0, -10 );
 
+				debugContext.moveTo( 0, - 10 );
 
 				debugContext.lineTo( 0, 10 );
 
 
 				// camera
 
@@ -249,9 +256,8 @@
 
 				debugContext.closePath();
 
 				debugContext.stroke();
 
 
-				renderer.render(scene, camera);
 
+				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}
 
 
 		</script>

+ 16 - 5
examples/canvas_materials_normal.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - normal material</title>
 
+		<title>three.js canvas - normal material</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -41,13 +41,15 @@
 
 		<script type="text/javascript" src="../build/Three.js"></script> 
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			var camera, scene, renderer,
 
 			object;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -64,20 +66,29 @@
 
 				scene.addObject( object );
 
 
 				renderer = new THREE.CanvasRenderer();
 
-				//renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 
 
 				object.rotation.x -= 0.005;
 
 				object.rotation.y -= 0.01;
 
 
-				renderer.render(scene, camera);
 
+				renderer.render( scene, camera );
 
 
 			}

+ 16 - 4
examples/canvas_materials_reflection.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - spherical reflection</title>
 
+		<title>three.js canvas - spherical reflection</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -42,6 +42,8 @@
 
 
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			var camera, scene, renderer,
 
@@ -50,7 +52,7 @@
 
 			geometry, mesh;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -74,13 +76,23 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 
 
 				mesh.rotation.y -= 0.01;
 
 
-				renderer.render(scene, camera);
 
+				renderer.render( scene, camera );
 
 
 			}

+ 19 - 10
examples/canvas_materials_video.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - video</title>
 
+		<title>three.js canvas - materials - video</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
@@ -15,11 +15,12 @@
 
 	</head>
 
 	<body>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<video id="video" autoplay style="display:none">
 
 			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 
 			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
 
@@ -44,12 +45,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 			function init() {
 
 
@@ -148,6 +145,8 @@
 
 				stats.domElement.style.top = '0px';
 
 				container.appendChild( stats.domElement );
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+
 
 			}
 
 
 			function onDocumentMouseMove(event) {
 
@@ -157,7 +156,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
@@ -172,7 +182,6 @@
 
 				textureReflectionContext.fillRect( 0, 0, 480, 204 );
 
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
 
 			}

+ 14 - 4
examples/canvas_particles_floor.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - floor</title>
 
+		<title>three.js canvas - particles - floor</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
@@ -19,6 +19,8 @@
 
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -35,7 +37,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -106,14 +108,22 @@
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}
 
 
 		</script>

+ 15 - 6
examples/canvas_particles_random.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - random</title>
 
+		<title>three.js canvas - particles - random</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
@@ -20,6 +20,7 @@
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -32,12 +33,12 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
-				container = document.createElement('div');
 
-				document.body.appendChild(container);
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
 
 				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 
 				camera.position.z = 1000;
 
@@ -100,14 +101,22 @@
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}
 
 
 		</script>

+ 21 - 8
examples/canvas_particles_sprites.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - sprites</title>
 
+		<title>three.js canvas - particles - sprites</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
@@ -19,8 +19,10 @@
 
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
-		<script type="text/javascript" src="js/Tween.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
+		<script type="text/javascript" src="js/Tween.js"></script>
 
 
 		<script type="text/javascript">
 
 
@@ -32,12 +34,12 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
-				container = document.createElement('div');
 
-				document.body.appendChild(container);
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
 
 				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 
 				camera.position.z = 1000;
 
@@ -76,7 +78,6 @@
 
 				var canvas = document.createElement( 'canvas' );
 
 				canvas.width = 16;
 
 				canvas.height = 16;
 
-				canvas.loaded = true;
 
 
 				var context = canvas.getContext( '2d' );
 
 				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 
@@ -136,7 +137,9 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
+
 
 				}
 
+
 
 			}
 
 
 			function onDocumentTouchMove( event ) {
 
@@ -147,12 +150,23 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
+
 
 				}
 
+
 
 			}
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				TWEEN.update();
 
 
@@ -161,7 +175,6 @@
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}
 
 
 		</script>

+ 14 - 5
examples/canvas_particles_waves.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - waves</title>
 
+		<title>three.js canvas - particles - waves</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
@@ -18,6 +18,8 @@
 
 	</head>
 
 	<body>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -35,7 +37,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval(loop, 1000 / 60);
 
+			animate();
 
 
 			function init() {
 
 
@@ -116,7 +118,16 @@
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -136,8 +147,6 @@
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 				count += 0.1;
 
 
 			}

+ 14 - 25
examples/canvas_performance.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - sphere</title>
 
+		<title>three.js canvas - performance</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -16,7 +16,7 @@
 
 
 		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
 
 
-			<script type="text/javascript" src="../src/Three.js"></script>
 
+		<script type="text/javascript" src="../src/Three.js"></script>
 
 		<script type="text/javascript" src="../src/core/Color.js"></script>
 
 		<script type="text/javascript" src="../src/core/Vector2.js"></script>
 
 		<script type="text/javascript" src="../src/core/Vector3.js"></script>
 
@@ -83,6 +83,7 @@
 
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -103,27 +104,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-
 
-			/*
 
-			var accum = 0, result = 0, results = [], amount = 100;
 
-
 
-			for ( var i = 0; i < amount; i ++ ) {
 
-
 
-				var timer = new Date().getTime();
 
-
 
-				loop();
 
-
 
-				accum += result = new Date().getTime() - timer;
 
-				results.push( result );
 
-			}
 
-
 
-			console.log( results );
 
-			console.log( accum / amount );
 
-			*/
 
-
 
-			// loop();
 
-
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -203,11 +184,19 @@
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
 
-				renderer.render( scene, camera );
 
+				requestAnimationFrame( animate );
 
 
+				render();
 
 				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				renderer.render( scene, camera );
 
+
 
 			}
 
 
 		</script>

+ 13 - 5
examples/canvas_sandbox.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - sphere</title>
 
+		<title>three.js canvas - sandbox</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -83,6 +83,7 @@
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -114,7 +115,7 @@
 
 			var debugContext;
 
 
 			init();
 
-			setInterval( render, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -259,6 +260,15 @@
 
 
 			//
 
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
 			function render() {
 
 
 				if ( moveForward ) camera.position.z -= 5;
 
@@ -313,9 +323,7 @@
 
 				debugContext.closePath();
 
 				debugContext.stroke();
 
 
-				renderer.render(scene, camera);
 
-
 
-				stats.update();
 
+				renderer.render( scene, camera );
 
 
 			}

+ 21 - 29
examples/misc_lights_test.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - lights - point + directional - webgl</title>
 
+		<title>three.js misc - lights - point + directional</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 
@@ -116,7 +116,7 @@
 
 		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
 
 		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
 
 
-
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -144,18 +144,15 @@
 
 			var bcanvas = document.getElementById( 'rcanvas' );
 
 			var bwebgl = document.getElementById( 'rwebgl' );
 
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 
-
 
-			loop();
 
+			animate();
 
 
 			//render_canvas = !has_gl;
 
 			bwebgl.style.display = has_gl ? 'inline' : 'none';
 
 			bcanvas.className = render_canvas ? 'button' : 'button inactive';
 
 
-			setInterval(loop, 1000/60);
 
-
 
 			function init() {
 
 
 				container = document.createElement('div');
 
@@ -180,8 +177,7 @@
 
 					mesh.position.z = 500 * ( Math.random() - 0.5 );
 
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
 
 					mesh.overdraw = true;
 
-					mesh.updateMatrix();
 
-					scene.addObject(mesh);
 
+					scene.addObject( mesh );
 
 
 				}
 
 
@@ -206,7 +202,6 @@
 
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
 
 				lightMesh.position = pointLight.position;
 
 				lightMesh.overdraw = true;
 
-				lightMesh.updateMatrix();
 
 				scene.addObject(lightMesh);
 
 
 
@@ -270,24 +265,25 @@
 
 
 			}
 
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
 			var r = 0, counter = 0;
 
 
-			function loop() {
 
+			function render() {
 
+
 
+				counter == 30 ? scene.removeLight( directionalLight ) : counter ++;
 
 
-				if( counter == 30 ) {
 
-					
-					scene.removeLight( directionalLight );
 
-					
-				} else {
 
-				
-					counter++;
 
-					
-				}
 
-				
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				camera.updateMatrix();
 
-
 
 
 				for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
 
 
@@ -303,21 +299,17 @@
 
 
 						scene.objects[i].rotation.z += 0.05;
 
 
-					scene.objects[i].updateMatrix();
 
 				}
 
 
 
-				lightMesh.position.x = 200*Math.cos(r);
 
-				lightMesh.position.z = 200*Math.sin(r);
 
-				lightMesh.updateMatrix();
 
+				lightMesh.position.x = 200 * Math.cos( r );
 
+				lightMesh.position.z = 200 * Math.sin( r );
 
 
 				r += 0.1;
 
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 			function log(text) {

+ 15 - 8
examples/misc_materials_multimaterials.html
View File 

@@ -46,6 +46,7 @@
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -80,15 +81,12 @@
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 
-
 
-			loop();
 
+			animate();
 
 
 			//render_canvas = !has_gl;
 
 			bwebgl.style.display = has_gl ? "inline" : "none";
 
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 
 
-			setInterval(loop, 1000/60);
 
-
 
 			function init() {
 
 
 				container = document.createElement('div');
 
@@ -167,7 +165,7 @@
 
 
 				var loader = new THREE.Loader(),
 
 					callback = function( geometry ) { createScene( geometry) };
 
-				
+
 
 				loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callback } );
 
 				//loader.loadBinary( { model: "obj/female02/Female02_bin.js", callback: callback } );
 
 
@@ -284,7 +282,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -293,8 +302,6 @@
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 			function log(text) {

+ 17 - 11
examples/misc_uqbiquity_test.html
View File 

@@ -87,14 +87,12 @@
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
 
 		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
 
-		<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
 
-			window.onload = init;
 
-			
 			var SCREEN_WIDTH = window.innerWidth / 3;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
 			var AMOUNT = 100;
 
@@ -111,7 +109,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -234,8 +233,8 @@
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.top = '0px';
 
 				container.appendChild( stats.domElement );
 
-				
-				loop();
 
+
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			}
 
 
@@ -246,9 +245,18 @@
 
 
 			}
 
 
-			function loop() {
 
-				
-				requestAnimationFrame( loop, container );
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -266,8 +274,6 @@
 
 				svgRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 		</script>

+ 16 - 8
examples/misc_webglrenderer2_sandbox.html
View File 

@@ -101,6 +101,7 @@
 
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
 		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -118,12 +119,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
 			init();
 
-			// loop();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 			function init() {
 
 
@@ -212,6 +209,8 @@
 
 
 				}
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+
 
 			}
 
 
 			function generateTexture( r, g, b ) {
 
@@ -252,15 +251,24 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				if ( statsEnabled ) stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
 				renderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 
 			function log( text ) {

+ 33 - 26
examples/webgl_geometry_blenderexport_colors.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - io - blender - vertex colors - webgl</title>
 
+		<title>three.js webgl - io blender - vertex colors</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -30,17 +30,17 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="container"></div> 
-		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - blender export - webgl</div>
 
+		<div id="container"></div>
 
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - io blender - vertex colors</div>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
-		<script type="text/javascript" src="js/Stats.js"></script>		
-		
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
-			window.onload = init;
 
 
 			var container, stats;
 
 
@@ -53,6 +53,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
+			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -62,9 +64,9 @@
 
 				camera.position.z = 1800;
 
 
 				scene = new THREE.Scene();
 
-				
+
 
 				//scene.addLight( new THREE.AmbientLight( 0x333333 )  );
 
-				
+
 
 				light = new THREE.DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 0, 1 );
 
 				light.position.normalize();
 
@@ -72,7 +74,7 @@
 
 
 				var loader = new THREE.Loader();
 
 				loader.loadAscii( { model: "obj/cubecolors/cubecolors.js", callback: createScene } );
 
-				
+
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
@@ -84,22 +86,19 @@
 
 				container.appendChild( stats.domElement );
 
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				
-				loop();
 
 
 			}
 
 
 			function createScene( geometry ) {
 
-			
+
 
 				geometry.materials[0][0].shading = THREE.FlatShading;
 
-				
-				var material = [ new THREE.MeshFaceMaterial(), 
-								 new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframe_linewidth: 2 } )  
-								];
 
+
 
+				var material = [ new THREE.MeshFaceMaterial(), new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframe_linewidth: 2 } ) ];
 
+
 
 				mesh = SceneUtils.addMesh( scene, geometry, 250, 0, 0, 0, 0, 0, 0, material );
 
-				
+
 
 			}
 
-			
+
 
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = ( event.clientX - windowHalfX );
 
@@ -107,22 +106,30 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
-				requestAnimationFrame( loop, renderer.domElement );
 
-				
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				if ( mesh ) {
 
-				
+
 
 					mesh.rotation.x += 0.01;
 
 					mesh.rotation.y += 0.01;
 
-					
+
 
 				}
 
-				
+
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
 
 			}

+ 30 - 20
examples/webgl_geometry_colors.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - vertex colors - webgl</title>
 
+		<title>three.js webgl - geometry - vertex colors</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -30,12 +30,14 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="container"></div> 
+		<div id="container"></div>
 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - webgl</div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
@@ -51,10 +53,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 			function init() {
 
 
@@ -64,7 +64,7 @@
 
 				camera.position.z = 1800;
 
 
 				scene = new THREE.Scene();
 
-				
+
 
 				light = new THREE.DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 0, 1 );
 
 				light.position.normalize();
 
@@ -72,7 +72,7 @@
 
 
 				var shadowMaterial = new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/shadow.png' ) } );
 
 				var shadowGeo = new Plane( 300, 300, 1, 1 );
 
-				
+
 
 				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
 				mesh.position.y = - 250;
 
 				mesh.rotation.x = - 90 * Math.PI / 180;
 
@@ -91,15 +91,15 @@
 
 				scene.addObject( mesh );
 
 
 				var color, p, colors = [], colors2 = [], colors3 = [],
 
-					
+
 
 					geometry = new Icosahedron( 1 ),
 
 					geometry2 = new THREE.Geometry(),
 
 					geometry3 = new THREE.Geometry();
 
-					
+
 
 				for( var i = 0; i < geometry.vertices.length; i++ ) {
 
-				
+
 
 					p = geometry.vertices[ i ].position;
 
-					
+
 
 					color = new THREE.Color( 0xffffff );
 
 					color.setHSV( ( p.y + 1 ) / 2, 1.0, 1.0 );
 
 					colors[ i ] = color;
 
@@ -116,21 +116,21 @@
 
 
 				geometry3.vertices = geometry2.vertices = geometry.vertices;
 
 				geometry3.faces = geometry2.faces = geometry.faces;
 
-				
+
 
 				geometry2.sortFacesByMaterial();
 
 				geometry3.sortFacesByMaterial();
 
-				
+
 
 				geometry.colors = colors;
 
 				geometry2.colors = colors2;
 
 				geometry3.colors = colors3;
 
-				
+
 
 				var materials = [
 
-					
+
 
 					new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertex_colors: true } ),
 
 					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
 
-					
+
 
 				];
 
-				
+
 
 				mesh = new THREE.Mesh( geometry, materials  );
 
 				mesh.position.x = -400;
 
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;
 
@@ -170,13 +170,23 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
 
 			}

+ 39 - 32
examples/webgl_geometry_dynamic.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - dynamic - webgl</title>
 
+		<title>three.js webgl - geometry - dynamic</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -36,27 +36,27 @@
 
 	</head>
 
 	<body>
 
 
-		<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> 
+		<div id="container"></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>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) {
 
-			
+
 
 				THREE.Detector.addGetWebGLMessage();
 
 				document.getElementById( 'container' ).innerHTML = "";
 
-				
+
 
 			}
 
 
-			window.onload = init;
 
-			
 			var container, stats;
 
 
 			var camera, scene, renderer;
 
-			
+
 
 			var mesh, texture,geometry, material;
 
 
 			var worldWidth = 128, worldDepth = 128,
 
@@ -71,6 +71,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
+			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -81,7 +83,7 @@
 
 
 				scene = new THREE.Scene();
 
 				scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
 
-				
+
 
 				//var light = new THREE.PointLight( 0xffffff, 2 );
 
 				//light.position.y = 500;
 
 				//scene.addLight( light );
 
@@ -92,42 +94,42 @@
 
 				geometry = new Plane( 20000, 20000, worldWidth - 1, worldDepth - 1 );
 
 
 				var i, j, il, jl;
 
-				
+
 
 				for ( i = 0, il = geometry.vertices.length; i < il; i ++ ) {
 
 
 					geometry.vertices[ i ].position.z = 35 * Math.sin( i/2 );
 
 
 				}
 
-				
+
 
 				for( i = 0; i < geometry.uvs.length; i++ ) {
 
-				
+
 
 					var uvs = geometry.uvs[ i ];
 
 					for ( j = 0, jl = uvs.length; j < jl; j++ ) {
 
-					
+
 
 						uvs[ j ].u *= 5;
 
 						uvs[ j ].v *= 5;
 
-						
+
 
 					}
 
 
 				}
 
-				
+
 
 
 				//console.log( "triangles: " + geometry.faces.length * 2 + " faces: " + geometry.faces.length + " vertices: " + geometry.vertices.length );
 
-				
+
 
 				geometry.computeFaceNormals();
 
 				geometry.computeVertexNormals();
 
-				
+
 
 				var texture = ImageUtils.loadTexture( "textures/water.jpg" );
 
 				texture.wrap_s = texture.wrap_t = THREE.RepeatWrapping;
 
 				material = new THREE.MeshBasicMaterial( { color:0x0044ff, opacity:1, map: texture } );
 
-				
+
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				mesh.rotation.x = - 90 * Math.PI / 180;
 
 				scene.addObject( mesh );
 
 
 				renderer = new THREE.WebGLRenderer( { clearColor:0xaaccff, clearAlpha: 1 } );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				
+
 
 				container.innerHTML = "";
 
 
 				container.appendChild( renderer.domElement );
 
@@ -141,11 +143,9 @@
 
 				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
 
-				
+
 
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
 
-				
-				loop();
 
 
 			}
 
 
@@ -184,7 +184,7 @@
 
 				mouseY = event.clientY - windowHalfY;
 
 
 			}
 
-			
+
 
 			function onDocumentKeyDown( event ) {
 
 
 				switch( event.keyCode ) {
 
@@ -222,13 +222,22 @@
 
 				}
 
 
 			}
 
-			
-			function loop() {
 
-			
-				requestAnimationFrame( loop, renderer.domElement );
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.01;
 
-				
+
 
 				if ( moveForward ) camera.translateZ( - 10 );
 
 				if ( moveBackward ) camera.translateZ( 10 );
 
 				if ( moveLeft )     camera.translateX( - 10 );
 
@@ -257,12 +266,10 @@
 
 
 				mesh.geometry.__dirtyVertices = true;
 
 				//mesh.geometry.__dirtyNormals = true;
 
-				
+
 
 				renderer.render(scene, camera);
 
-				
-				stats.update();
 
 
-			}			
+			}
 
 
 		</script>

+ 65 - 56
examples/webgl_geometry_large_mesh.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - large mesh - webgl</title>
 
+		<title>three.js webgl - geometry - large mesh</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -22,7 +22,7 @@
 
 			.inactive { background:#999; color:#eee }
 
 		</style>
 
 	</head>
 
-	
+
 
 	<body>
 
 		<div id="d">
 
 			<h1>Large mesh test</h1>
 
@@ -30,25 +30,26 @@
 
 			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
 
 			<span id="rwebgl" class="button">WebGL renderer</span>
 
 			<br/>
 
-			
-			<p>Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a> 
+
 
+			<p>Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a>
 
 			(decimated with <a href="http://meshlab.sourceforge.net/">Meshlab</a>).
 
-			
+
 
 			<p>Please be patient while the mesh is loading. It may take a while, it's 2MB file.
 
-			
+
 
 			<br/>
 
 			<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
 
 			<p>Canvas renderer is very slow for this demo and only diffuse material works there.
 
 			<p>Use the flag --allow-file-access-from-files if working localy in Chrome.
 
 		</div>
 
-		
+
 
 		<pre id="log"></pre>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 
 		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
-		
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -65,37 +66,34 @@
 
 			var canvasRenderer, webglRenderer;
 
 
 			var loader;
 
-			
+
 
 			var mesh, zmesh, lightMesh;
 
-			
+
 
 			var directionalLight, pointLight;
 
-			
+
 
 			var mouseX = 0;
 
 			var mouseY = 0;
 
 
-			var windowHalfX = window.innerWidth >> 1;
 
-			var windowHalfY = window.innerHeight >> 1;
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
 
 			var render_canvas = 1, render_gl = 1;
 
 			var has_gl = 0;
 
-			
+
 
 			var bcanvas = document.getElementById("rcanvas");
 
 			var bwebgl = document.getElementById("rwebgl");
 
-			
+
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 
-			
-			loop();
 
-			
+			animate();
 
+
 
 			render_canvas = !has_gl;
 
 			bwebgl.style.display = has_gl ? "inline" : "none";
 
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 
-			
-			setInterval(loop, 1000/60);
 
-			
+
 
 			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
 
-				
+
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 
 				mesh.position.x = x;
 
@@ -107,9 +105,9 @@
 
 				mesh.overdraw = true;
 
 				mesh.updateMatrix();
 
 				scene.addObject(mesh);
 
-				
+
 
 			}
 
-			
+
 
 			function init() {
 
 
 				container = document.createElement('div');
 
@@ -147,7 +145,7 @@
 
 				lightMesh.overdraw = true;
 
 				lightMesh.updateMatrix();
 
 				scene.addObject(lightMesh);
 
-				
+
 
 
 				if ( render_gl ) {
 
 					try {
 
@@ -160,7 +158,7 @@
 
 					catch (e) {
 
 					}
 
 				}
 
-				
+
 
 				if( render_canvas ) {
 
 					canvasRenderer = new THREE.CanvasRenderer();
 
 					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
@@ -173,38 +171,38 @@
 
 				stats.domElement.style.top = '0px';
 
 				stats.domElement.style.zIndex = 100;
 
 				container.appendChild( stats.domElement );
 
-				
+
 
 				bcanvas.addEventListener("click", toggleCanvas, false);
 
 				bwebgl.addEventListener("click", toggleWebGL, false);
 
-				
+
 
 				loader = new THREE.Loader( true );
 
 				document.body.appendChild( loader.statusDomElement );
 
-				
+
 
 				var s = (new Date).getTime(),
 
 					callback = function( geometry ) { createScene( geometry, s ) };
 
-				
+
 
 				//loader.loadAscii( { model: 'obj/lucy/Lucy100k_slim.js', callback: callback } );
 
 				loader.loadBinary( { model: 'obj/lucy/Lucy100k_bin.js', callback: callback } );
 
 
 			}
 
-			
-			
+
 
+
 
 			function createScene( geometry, start ) {
 
-				
+
 
 				addMesh( geometry, 0.75, 900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x990000, shininess: 30 } ) );
 
 				addMesh( geometry, 0.75, 300, 0, 0, 0,0,0, new THREE.MeshFaceMaterial( ) );
 
 				addMesh( geometry, 0.75, -300, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x111111, specular: 0xffaa00, shininess: 10 } ) );
 
 				addMesh( geometry, 0.75, -900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x555555, specular: 0x666666, shininess: 10 } ) );
 
-				
+
 
 				loader.statusDomElement.style.display = "none";
 
-				
+
 
 				log( "geometry.vertices: " + geometry.vertices.length );
 
 				log( "geometry.faces: " + geometry.faces.length );
 
 
 				log( "model loaded and created in " + ((new Date).getTime() - start) + " ms" );
 
-				
+
 
 			}
 
-			
+
 
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = ( event.clientX - windowHalfX );
 
@@ -212,21 +210,32 @@
 
 
 			}
 
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
 			var r = 0;
 
-			
-			function loop() {
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.updateMatrix();
 
-				
+
 
 				lightMesh.position.x = 700*Math.cos(r);
 
 				lightMesh.position.z = 700*Math.sin(r);
 
 				lightMesh.updateMatrix();
 
 
 				r += 0.01;
 
-				
-				
+
 
+
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
@@ -235,40 +244,40 @@
 
 			}
 
 
 			function log(text) {
 
-			
+
 
 				var e = document.getElementById("log");
 
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
-				
+
 
 			}
 
-			
+
 
 			function toggleCanvas() {
 
-			
+
 
 				render_canvas = !render_canvas;
 
 				bcanvas.className = render_canvas ? "button" : "button inactive";
 
-				
+
 
 				render_gl = !render_canvas;
 
 				bwebgl.className = render_gl ? "button" : "button inactive";
 
-				
+
 
 				if( has_gl )
 
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 
-				
+
 
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 
-				
+
 
 			}
 
-			
+
 
 			function toggleWebGL() {
 
-			
+
 
 				render_gl = !render_gl;
 
 				bwebgl.className = render_gl ? "button" : "button inactive";
 
-				
+
 
 				render_canvas = !render_gl;
 
 				bcanvas.className = render_canvas ? "button" : "button inactive";
 
-				
+
 
 				if( has_gl )
 
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 
-					
+
 
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 
-				
+
 
 			}
 
 		</script>

+ 22 - 15
examples/webgl_geometry_minecraft.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - minecraft - webgl</title>
 
+		<title>three.js webgl - geometry - minecraft</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -40,25 +40,24 @@
 
 		<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> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
-
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
 
-		<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
 
+		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) {
 
-				
+
 
 				THREE.Detector.addGetWebGLMessage();
 
 				document.getElementById( 'container' ).innerHTML = "";
 
-				
+
 
 			}
 
-			
-			window.onload = init;
 
 
 			var container, stats;
 
 
@@ -79,6 +78,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
+			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -187,8 +188,6 @@
 
 
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
 
-				
-				loop();
 
 
 			}
 
 
@@ -297,10 +296,19 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
-				requestAnimationFrame( loop, renderer.domElement );
 
-				
 				if ( moveForward ) camera.translateZ( - 15 );
 
 				if ( moveBackward ) camera.translateZ( 15 );
 
 
@@ -316,7 +324,6 @@
 
 				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
 
 
 				renderer.render(scene, camera);
 
-				stats.update();
 
 
 			}

+ 24 - 17
examples/webgl_geometry_minecraft_ao.html
View File 

@@ -47,28 +47,27 @@
 
 			<button id="baot">texture + ao</button>
 
 		</div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
-
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
 
-		<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
 
+		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) {
 
-				
+
 
 				THREE.Detector.addGetWebGLMessage();
 
 				document.getElementById( 'container' ).innerHTML = "";
 
-				
+
 
 			}
 
 
-			window.onload = init;
 
-			
 			var fogExp2 = true;
 
-			
+
 
 			var container, stats;
 
 
 			var camera, scene, renderer;
 
@@ -88,6 +87,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
+			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -97,14 +98,14 @@
 
 					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
 				else
 
 					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 7500 );
 
-					
+
 
 				camera.target.position.z = - 100;
 
 
 				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 
 				camera.target.position.y = camera.position.y;
 
 
 				scene = new THREE.Scene();
 
-				
+
 
 				if( fogExp2 )
 
 					scene.fog = new THREE.FogExp2( 0xffffff, 0.00025 );
 
 				else
 
@@ -486,8 +487,6 @@
 
 				document.getElementById( "bao" ).addEventListener( "click",  function() { mat.map = m_ao.map; }, false );
 
 				document.getElementById( "baot" ).addEventListener( "click", function() { mat.map = m_aot.map; }, false );
 
 				document.getElementById( "bt" ).addEventListener( "click",   function() { mat.map = m_t.map; }, false );
 
-				
-				loop();
 
 
 			}
 
 
@@ -880,9 +879,18 @@
 
 
 			}
 
 
-			function loop() {
 
-			
-				requestAnimationFrame( loop, renderer.domElement );
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				if ( moveForward )  camera.translateZ( - 15 );
 
 				if ( moveBackward ) camera.translateZ( 15 );
 
@@ -901,7 +909,6 @@
 
 				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
 
 
 				renderer.render(scene, camera);
 
-				stats.update();
 
 
 			}

+ 25 - 15
examples/webgl_geometry_terrain.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - terrain - webgl</title>
 
+		<title>three.js webgl - geometry - terrain</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -30,23 +30,25 @@
 
 	</head>
 
 	<body>
 
 
-		<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> - webgl terrain demo<br />(left click: forward, right click: backward)</div> 
-
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
+		<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> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
-		
+
 
+		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) {
 
-				
+
 
 				THREE.Detector.addGetWebGLMessage();
 
 				document.getElementById( 'container' ).innerHTML = "";
 
-				
+
 
 			}
 
 
 			var container, stats;
 
@@ -67,10 +69,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 			function init() {
 
 
@@ -250,7 +250,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				if ( moveForward ) camera.translateZ( - 15 );
 
 				if ( moveBackward ) camera.translateZ( 15 );
 
@@ -266,8 +277,7 @@
 
 				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
 
 				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
 
 
-				renderer.render(scene, camera);
 
-				stats.update();
 
+				renderer.render( scene, camera );
 
 
 			}

+ 25 - 15
examples/webgl_geometry_terrain2.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - terrain 2 - webgl</title>
 
+		<title>three.js webgl - geometry - terrain 2</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -30,24 +30,26 @@
 
 	</head>
 
 	<body>
 
 
-		<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> - webgl terrain demo<br />(left click: forward, right click: backward)</div> 
-
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-		<script type="text/javascript" src="js/PRNG.js"></script>
 
-		<script type="text/javascript" src="js/SimplexNoise.js"></script>
 
+		<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> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
 
+		<script type="text/javascript" src="js/PRNG.js"></script>
 
+		<script type="text/javascript" src="js/SimplexNoise.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) {
 
-				
+
 
 				THREE.Detector.addGetWebGLMessage();
 
 				document.getElementById( 'container' ).innerHTML = "";
 
-				
+
 
 			}
 
 
 			var container, stats;
 
@@ -68,10 +70,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 			function init() {
 
 
@@ -328,7 +328,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				if ( moveForward ) camera.translateZ( - 10 );
 
 				if ( moveBackward ) camera.translateZ( 10 );
 
@@ -344,8 +355,7 @@
 
 				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
 
 				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
 
 
-				renderer.render(scene, camera);
 
-				stats.update();
 
+				renderer.render( scene, camera );
 
 
 			}

+ 29 - 18
examples/webgl_geometry_terrain_fog.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - geometry - terrain + fog - webgl</title>
 
+		<title>three.js webgl - geometry - terrain + fog</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -30,28 +30,30 @@
 
 	</head>
 
 	<body>
 
 
-		<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> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div> 
-
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
+		<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> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
-		
+
 
+		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) {
 
-				
+
 
 				THREE.Detector.addGetWebGLMessage();
 
 				document.getElementById( 'container' ).innerHTML = "";
 
-				
+
 
 			}
 
-			
+
 
 			var fogExp2 = true;
 
-			
+
 
 			var container, stats;
 
 
 			var camera, scene, renderer;
 
@@ -70,10 +72,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 			function init() {
 
 
@@ -86,7 +86,7 @@
 
 				camera.target.position.z = - 100;
 
 
 				scene = new THREE.Scene();
 
-				
+
 
 				if ( fogExp2 )
 
 					scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
 
 				else
 
@@ -261,7 +261,19 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+
 
+			function render() {
 
 
 				if ( moveForward ) camera.translateZ( - 5 );
 
 				if ( moveBackward ) camera.translateZ( 5 );
 
@@ -277,8 +289,7 @@
 
 				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
 
 				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
 
 
-				renderer.render(scene, camera);
 
-				stats.update();
 
+				renderer.render( scene, camera );
 
 
 			}

+ 142 - 134
examples/webgl_hdr.html
View File 

@@ -1,120 +1,123 @@
 
 <!DOCTYPE HTML>

 <html lang="en">

-    <head>

-        <title>three.js - materials - HDR texture - webgl</title>

-        <meta charset="utf-8">

-        <style type="text/css">

-            body {

-                color: #000;

-                font-family:Monospace;

-                font-size:13px;

-                text-align:center;

-                font-weight: bold;

-

-                background-color: #fff;

-                margin: 0px;

-                overflow: hidden;

-            }

-

-            #info {

-				color:#000;

-                position: absolute;

-                top: 0px; width: 100%;

-                padding: 5px;

-				

-            }

-

-            a { color: red; }

-

-        </style>

-    </head>

-    <body>

-

-        <div id="container"></div>

-        <div id="info">

+	<head>

+		<title>three.js webgl - materials - HDR texture</title>

+		<meta charset="utf-8">

+		<style type="text/css">

+		    body {

+			color: #000;

+			font-family:Monospace;

+			font-size:13px;

+			text-align:center;

+			font-weight: bold;

+

+			background-color: #fff;

+			margin: 0px;

+			overflow: hidden;

+		    }

+

+		    #info {

+					color:#000;

+			position: absolute;

+			top: 0px; width: 100%;

+			padding: 5px;

+

+		    }

+

+		    a { color: red; }

+

+		</style>

+	</head>

+	<body>

+

+		<div id="container"></div>

+		<div id="info">

 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl HDR texture example -

 			based on <a href="http://spidergl.org/example.php?id=13" target="_blank">SpiderGL</a>

 		</div>

 

-        <script type="text/javascript" src="../build/ThreeExtras.js"></script>

-        <script type="text/javascript" src="js/Stats.js"></script>

+		<script type="text/javascript" src="../build/ThreeExtras.js"></script>

+

+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>

+		<script type="text/javascript" src="js/Stats.js"></script>

 

-		

 		<!-- HDR fragment shader -->

 		<script id="fs-hdr" type="x-shader/x-fragment">

-		uniform sampler2D   tDiffuse;

-		uniform float       exposure;

-		uniform float       brightMax;

-		

-		varying vec2  vUv;

-		 

-		vec3 decode_pnghdr( const in vec4 color ) {

-		

-			// remove gamma correction

-			vec4 res = color * color;

-			

-			// decoded RI

-			float ri = pow( 2.0, res.w * 32.0 - 16.0 );

-			

-			// decoded HDR pixel

-			res.xyz = res.xyz * ri;

-			return res.xyz;

-			

-		}

-		 

-		void main(void)

-		{

-			vec4 color = texture2D( tDiffuse, vUv );

-			color.xyz  = decode_pnghdr( color );

-			

-			// apply gamma correction and exposure

-			//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );

-			

-			// Perform tone-mapping

-			float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);

-			float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);

-			color *= YD;

-			

-			gl_FragColor = vec4( color.xyz, 1.0 );

-		}

+			uniform sampler2D   tDiffuse;

+			uniform float       exposure;

+			uniform float       brightMax;

+

+			varying vec2  vUv;

+

+			vec3 decode_pnghdr( const in vec4 color ) {

+

+				// remove gamma correction

+				vec4 res = color * color;

+

+				// decoded RI

+				float ri = pow( 2.0, res.w * 32.0 - 16.0 );

+

+				// decoded HDR pixel

+				res.xyz = res.xyz * ri;

+				return res.xyz;

+

+			}

+

+			void main(void)

+			{

+				vec4 color = texture2D( tDiffuse, vUv );

+				color.xyz  = decode_pnghdr( color );

+

+				// apply gamma correction and exposure

+				//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );

+

+				// Perform tone-mapping

+				float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);

+				float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);

+				color *= YD;

+

+				gl_FragColor = vec4( color.xyz, 1.0 );

+			}

 		</script>

-		

+

 		<!-- HDR vertex shader -->

 		<script id="vs-hdr" type="x-shader/x-vertex">

-		varying vec2 vUv;

-		 

-		void main(void)

-		{

-			vUv  = uv;

-			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

-		}		

+			varying vec2 vUv;

+

+			void main(void)

+			{

+				vUv  = uv;

+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

+			}

 		</script>

-		

 

-        <script type="text/javascript">

+

+		<script type="text/javascript">

 

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

 

-            var container, stats;

+			var container, stats;

+

+			var camera, scene, renderer, mesh, directionalLight;

 

-            var camera, scene, renderer, mesh, directionalLight;

-			

 			var windowHalfX = window.innerWidth / 2;

 			var windowHalfY = window.innerHeight / 2;

-			

-            var materialHDR, quad;

 

-            init();

-            setInterval( loop, 1000 / 60 );

+			var materialHDR, quad;

 

-            function init() {

+			var delta, current, old = 0, sign = 1, rate = 1;

+

+			init();

+			animate();

+

+			function init() {

 

-                container = document.getElementById( 'container' );

+				container = document.getElementById( 'container' );

 

 				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );

 				camera.position.z = 900;

 

-                scene = new THREE.Scene();

+				scene = new THREE.Scene();

 

 				directionalLight = new THREE.DirectionalLight( 0xffffff );

 				directionalLight.position.x = 0;

@@ -126,77 +129,84 @@
 
 				var texture = ImageUtils.loadTexture( "textures/memorial.png" );

 				texture.min_filter = THREE.LinearFilter;

 				texture.mag_filter = THREE.NearestFilter;

-				

-                materialHDR = new THREE.MeshShaderMaterial( {

 

-                    uniforms: { tDiffuse:  { type: "t", value: 0, texture: texture },

-								exposure:  { type: "f", value: 0.125 },

-								brightMax: { type: "f", value: 0.5 }

-							  },

-                    vertex_shader: getText( 'vs-hdr' ),

-                    fragment_shader: getText( 'fs-hdr' )

+				materialHDR = new THREE.MeshShaderMaterial( {

 

-                } );

+					uniforms: {

+						tDiffuse:  { type: "t", value: 0, texture: texture },

+						exposure:  { type: "f", value: 0.125 },

+						brightMax: { type: "f", value: 0.5 }

+						},

+					vertex_shader: getText( 'vs-hdr' ),

+					fragment_shader: getText( 'fs-hdr' )

 

-				var plane = new Plane( 512, 768 );				

+				} );

 

-                quad = new THREE.Mesh( plane, materialHDR );

+				var plane = new Plane( 512, 768 );

+

+				quad = new THREE.Mesh( plane, materialHDR );

 				quad.position.z = -100;

-                scene.addObject( quad );

+				scene.addObject( quad );

 

-                renderer = new THREE.WebGLRenderer();

+				renderer = new THREE.WebGLRenderer();

 				renderer.setSize( window.innerWidth, window.innerHeight );

-                container.appendChild( renderer.domElement );

-				

-                stats = new Stats();

-                stats.domElement.style.position = 'absolute';

-                stats.domElement.style.top = '0px';

-                container.appendChild( stats.domElement );

+				container.appendChild( renderer.domElement );

+

+				stats = new Stats();

+				stats.domElement.style.position = 'absolute';

+				stats.domElement.style.top = '0px';

+				container.appendChild( stats.domElement );

 

-            }

+			}

 

 			function getText( id ) {

-				

+

 				return document.getElementById( id ).textContent;

+

 			}

-			

-			var delta, current, old = 0, sign = 1, rate = 1;

-			

-            function loop() {

+

+			//

+

+			function animate() {

+

+				requestAnimationFrame( animate );

+

+				render();

+				stats.update();

+

+			}

+

+			function render() {

 

 				if ( ! old ) old = new Date().getTime();

 				current = new Date().getTime();

 				delta = (current  - old ) * 0.005;

 				old = current;

-				

+

 				if ( materialHDR.uniforms.exposure.value > 0 || materialHDR.uniforms.exposure.value < 1 ) {

-				

+

 					rate = 0.25;

-					

+

 				} else {

-				

+

 					rate = 1;

-					

+

 				}

-				

-				

+

 				if ( materialHDR.uniforms.exposure.value > 5 || materialHDR.uniforms.exposure.value <= 0 ) {

-				

+

 					sign *= -1;

-					

-				}				

-				

+

+				}

 

 				materialHDR.uniforms.exposure.value += sign * rate * delta;

-				

+

 				// Render final scene to the screen with film shader

 

 				renderer.render( scene, camera );

 

-                stats.update();

+			}

 

-            }

-			

 			function is_browser_compatible() {

 

 				// WebGL support

@@ -208,9 +218,7 @@
 
 				return !!window.Worker;

 

 			}

-			

 

-        </script>

-

-    </body>

+		</script>

+	</body>

 </html>

+ 50 - 38
examples/webgl_interactive_voxelpainter.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - interactive - voxel painter - webgl</title>
 
+		<title>three.js webgl - interactive - voxel painter</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -10,7 +10,7 @@
 
 				margin: 0px;
 
 				overflow: hidden;
 
 			}
 
-			
+
 
 			#oldie { background-color: #ddd !important }
 
 		</style>
 
 	</head>
 
@@ -23,12 +23,13 @@
 
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.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;
 
 			var camera, scene, renderer;
 
 			var projector, plane, cube;
 
@@ -36,12 +37,12 @@
 
 			rollOveredFace, isShiftDown = false,
 
 			theta = 45, isCtrlDown = false;
 
 
-			var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();			
+			var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();
 
 			var cubeGeo, cubeMaterial;
 
 			var i, intersector;
 
-			
+
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -63,20 +64,20 @@
 
 				scene = new THREE.Scene();
 
 
 				// roll-over helpers
 
-				
+
 
 				rollOverGeo = new Cube( 50, 50, 50 );
 
 				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5 } );
 
 				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
 
 				scene.addObject( rollOverMesh );
 
-				
+
 
 
 				// cubes
 
-				
+
 
 				cubeGeo = new Cube( 50, 50, 50 );
 
 				cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading, map: ImageUtils.loadTexture( "textures/square-outline-textured.png" ) } );
 
 				cubeMaterial.color.setHSV( 0.1, 0.7, 1.0 );
 
 				// picking
 
-				
+
 
 				projector = new THREE.Projector();
 
 
 				// grid
 
@@ -125,35 +126,35 @@
 
 			}
 
 
 			function getRealIntersector( intersects ) {
 
-				
+
 
 				for( i = 0; i < intersects.length; i++ ) {
 
-				
+
 
 					intersector = intersects[ i ];
 
-					
+
 
 					if ( intersector.object != rollOverMesh ) {
 
-						
+
 
 						return intersector;
 
-						
+
 
 					}
 
-				
+
 
 				}
 
-				
+
 
 				return null;
 
-				
+
 
 			}
 
-			
+
 
 			function setVoxelPosition( intersector ) {
 
-				
+
 
 				tmpVec.copy( intersector.face.normal );
 
-				
-				voxelPosition.add( intersector.point, intersector.object.rotationMatrix.multiplyVector3( tmpVec ) );
 
-					
+
 
+				voxelPosition.add( intersector.point, intersector.object.matrixRotation.multiplyVector3( tmpVec ) );
 
+
 
 				voxelPosition.x = Math.floor( voxelPosition.x / 50 ) * 50 + 25;
 
 				voxelPosition.y = Math.floor( voxelPosition.y / 50 ) * 50 + 25;
 
 				voxelPosition.z = Math.floor( voxelPosition.z / 50 ) * 50 + 25;
 
 
 			}
 
-			
+
 
 			function onDocumentMouseMove( event ) {
 
 
 				event.preventDefault();
 
@@ -172,11 +173,11 @@
 
 				if ( intersects.length > 0 ) {
 
 
 					intersector = getRealIntersector( intersects );
 
-					
+
 
 					// delete cube
 
-					
+
 
 					if ( isCtrlDown ) {
 
-						
+
 
 						if ( intersector.object != plane ) {
 
 
 							scene.removeObject( intersector.object );
 
@@ -185,15 +186,15 @@
 
 						}
 
 
 					// create cube
 
-					
+
 
 					} else {
 
 
-						intersector = getRealIntersector( intersects );						
+						intersector = getRealIntersector( intersects );
 
 						setVoxelPosition( intersector );
 
 
 						var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
 
 						voxel.position.copy( voxelPosition );
 
-						
+
 
 						scene.addObject( voxel );
 
 
 					}
 
@@ -227,8 +228,19 @@
 
 				window.open( renderer.domElement.toDataURL('image/png'), 'mywindow' );
 
 
 			}
 
-			
-			function loop() {
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				if ( isShiftDown ) {
 
 
@@ -245,19 +257,19 @@
 
 
 					intersector = getRealIntersector( intersects );
 
 					if ( intersector ) {
 
-					
-						setVoxelPosition( intersector );					
+
 
+						setVoxelPosition( intersector );
 
 						rollOverMesh.position = voxelPosition;
 
-						
+
 
 					}
 
-					
+
 
 				}
 
-				
+
 
 				camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
 
 				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
 
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
+
 
 			}
 
 
 		</script>

+ 34 - 25
examples/webgl_lights_pointlights.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - lights - point lights - webgl</title>
 
+		<title>three.js webl - lights - point lights</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -28,39 +28,40 @@
 
 			a:hover {
 
 				color: #0080ff;
 
 			}
 
-			
+
 
 			#log { color:#fff; position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 
 		</style>
 
 	</head>
 
 	<body>
 
 
 		<pre id="log"></pre>
 
-		
+
 
 		<div id="container"></div>
 
 		<div id="info">
 
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights WebGL demo.<br />
 
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 
 		</div>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
 		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var camera, scene, renderer,
 
 			particle1, particle2, particle2,
 
 			light1, light2, light3,
 
 			object,loader;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -73,21 +74,21 @@
 
 
 				loader = new THREE.Loader( true );
 
 				document.body.appendChild( loader.statusDomElement );
 
-				
+
 
 				var callback = function( geometry ) {
 
-				
+
 
 					object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading }  )  );
 
 					object.scale.x = object.scale.y = object.scale.z = 0.80;
 
 					object.overdraw = true;
 
 					scene.addObject( object );
 
-					
+
 
 					loader.statusDomElement.style.display = "none";
 
-					
+
 
 				};
 
-				
+
 
 				//loader.loadAscii( { model: "obj/walt/WaltHead_slim.js", callback: callback } );
 
 				loader.loadBinary( { model: "obj/walt/WaltHead_bin.js", callback: callback } );
 
-				
+
 
 				/*
 
 				var directionalLight = new THREE.DirectionalLight( 0x111111, 0.9 );
 
 				directionalLight.position.x = 1;
 
@@ -96,7 +97,7 @@
 
 				directionalLight.position.normalize();
 
 				scene.addLight( directionalLight );
 
 				*/
 
-				
+
 
 				scene.addLight( new THREE.AmbientLight( 0x00000 ) );
 
 
 				light1 = new THREE.PointLight( 0xff0040 );
 
@@ -109,23 +110,23 @@
 
 				scene.addLight( light3 );
 
 
 				var sphere = new Sphere( 0.5, 16, 8 );
 
-				
+
 
 				var l1 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
 
 				l1.position = light1.position;
 
 				scene.addObject( l1 );
 
-				
+
 
 				var l2 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
 
 				l2.position = light2.position;
 
 				scene.addObject( l2 );
 
-	 
+
 
 				var l3 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
 
 				l3.position = light3.position;
 
 				scene.addObject( l3 );
 
- 
+
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
-				
+
 
 				/*
 
 				stats = new Stats();
 
 				stats.domElement.style.position = 'absolute';
 
@@ -136,7 +137,17 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 
 
@@ -154,17 +165,15 @@
 
 				light3.position.y = Math.cos( time * 0.3 ) * 40;
 
 				light3.position.z = Math.sin( time * 0.5 ) * 30;
 
 
-				renderer.render(scene, camera);
 
-				
-				//stats.update();
 
+				renderer.render( scene, camera );
 
 
 			}
 
-			
+
 
 			function log( text ) {
 
-			
+
 
 				var e = document.getElementById("log");
 
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
-				
+
 
 			}
 
 
 		</script>

+ 92 - 94
examples/webgl_lines_colors.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - lines - cubes - colors - webgl</title>
 
+		<title>three.js webgl - lines - cubes - colors</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -13,7 +13,7 @@
 
 			a {
 
 				color:#0078ff;
 
 			}
 
-			
+
 
 			#info {
 
 				position: absolute;
 
 				top: 10px; width: 100%;
 
@@ -24,7 +24,7 @@
 
 				text-align: center;
 
 				z-index:100;
 
 			}
 
-			
+
 
 			a {
 
 				color: orange;
 
 				text-decoration: none;
 
@@ -33,38 +33,36 @@
 
 			a:hover {
 
 				color: #0080ff;
 
 			}
 
-			
+
 
 		</style>
 
 	</head>
 
 	<body>
 
-	
+
 
 		<div id="info">
 
-			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - color lines WebGL demo 
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - color lines WebGL demo
 
 			[<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>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
-		
+
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 
-			window.onload = init;
 
-			
 			var mouseX = 0, mouseY = 0,
 
 
 			windowHalfX = window.innerWidth / 2,
 
 			windowHalfY = window.innerHeight / 2,
 
 
-			camera, scene, renderer,
 
-			
-			material,
 
-
 
-			stats;
 
+			camera, scene, renderer, material;
 
 
 			var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
 
-			
+
 
+			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -75,7 +73,7 @@
 
 
 				camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 700;
 
-				
+
 
 				scene = new THREE.Scene();
 
 
 				renderer = new THREE.WebGLRenderer();
 
@@ -83,16 +81,16 @@
 
 				renderer.autoClear = false;
 
 				container.appendChild( renderer.domElement );
 
 
-				var geometry = new THREE.Geometry(), 
+				var geometry = new THREE.Geometry(),
 
 					geometry2 = new THREE.Geometry(),
 
 					geometry3 = new THREE.Geometry(),
 
 					points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7 ),
 
 					colors = [], colors2 = [], colors3 = [];
 
 
 				for ( i = 0; i < points.length; i ++ ) {
 
-				
+
 
 					geometry.vertices.push( new THREE.Vertex( points[ i ] ) );
 
-				
+
 
 					colors[ i ] = new THREE.Color( 0xffffff );
 
 					colors[ i ].setHSV( 0.6, ( 200 + points[ i ].x ) / 400, 1.0 );
 
 
@@ -103,26 +101,26 @@
 
 					colors3[ i ].setHSV( i / points.length, 1.0, 1.0 );
 
 
 				}
 
-				
+
 
 				geometry2.vertices = geometry3.vertices = geometry.vertices;
 
-				
+
 
 				geometry.colors = colors;
 
 				geometry2.colors = colors2;
 
 				geometry3.colors = colors3;
 
-				
+
 
 				// lines
 
 
 				material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3 } );
 
 
 				var line, p, scale = 0.3, d = 225,
 
-					parameters =  [ [ material, scale*1.5, [-d,0,0],  geometry ], 
-									[ material, scale*1.5, [0,0,0],  geometry2 ], 
+					parameters =  [ [ material, scale*1.5, [-d,0,0],  geometry ],
 
+									[ material, scale*1.5, [0,0,0],  geometry2 ],
 
 									[ material, scale*1.5, [d,0,0],  geometry3 ] ];
 
-				
+
 
 				material.vertex_colors = true;
 
-				
+
 
 				for ( i = 0; i < parameters.length; ++i ) {
 
-				
+
 
 					p = parameters[ i ];
 
 					line = new THREE.Line( p[ 3 ],  p[ 0 ] );
 
 					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
 
@@ -130,38 +128,37 @@
 
 					line.position.y = p[ 2 ][ 1 ];
 
 					line.position.z = p[ 2 ][ 2 ];
 
 					scene.addObject( line );
 
-					
+
 
 				}
 
 
 				// postprocessing
 
-				
-                cameraOrtho = new THREE.Camera();
 
+
 
+				cameraOrtho = new THREE.Camera();
 
 				cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
 
-                cameraOrtho.position.z = 100;
 
+				cameraOrtho.position.z = 100;
 
 
 				sceneScreen = new THREE.Scene();
 
-				
+
 
 				var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
 
-                rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
 
-                rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
 
-                rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
 
+				rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
 
+				rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
 
+				rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
 
 
 				var screen_shader = ShaderUtils.lib["screen"];
 
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
 
-				
+
 
 				screen_uniforms["tDiffuse"].texture = rtTexture1;
 
 				screen_uniforms["opacity"].value = 1.0;
 
-				
-                materialScreen = new THREE.MeshShaderMaterial( {
 
 
-                    uniforms: screen_uniforms,
 
-                    vertex_shader: screen_shader.vertex_shader,
 
-                    fragment_shader: screen_shader.fragment_shader,
 
+				materialScreen = new THREE.MeshShaderMaterial( {
 
+
 
+					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 );
 
 
@@ -171,45 +168,42 @@
 
 				convolution_uniforms["tDiffuse"].texture = rtTexture1;
 
 				convolution_uniforms["uImageIncrement"].value = blurx;
 
 				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
 
-				
-                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
 
+				materialConvolution = new THREE.MeshShaderMaterial( {
 
 
-                } );
 
-				
-				var plane = new Plane( window.innerWidth, window.innerHeight );				
+					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
 
 
-                quadScreen = new THREE.Mesh( plane, materialConvolution );
 
+				} );
 
+
 
+				var plane = new Plane( window.innerWidth, window.innerHeight );
 
+
 
+				quadScreen = new THREE.Mesh( plane, materialConvolution );
 
 				quadScreen.position.z = -100;
 
-                sceneScreen.addObject( quadScreen );
 
+				sceneScreen.addObject( quadScreen );
 
 
-				
 				stats = new Stats();
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.top = '0px';
 
 				//container.appendChild(stats.domElement);
 
-				
+
 
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				
-				loop();
 
-				
+
 
 			}
 
 
 			// port of Processing Java code by Thomas Diewald
 
 			// http://www.openprocessing.org/visuals/?visualID=15599
 
-			
+
 
 			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
 
-			
+
 
 				var half = side/2,
 
-					
+
 
 					vec_s = [
 
-			  
+
 
 					new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
 
 					new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
 
 					new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
 
@@ -218,31 +212,31 @@
 
 					new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
 
 					new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
 
 					new THREE.Vector3( center.x + half, center.y + half, center.z - half )
 
-				
+
 
 					],
 
-  
+
 
 					vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
 
 
 				if( --iterations >= 0 ) {
 
-			
+
 
 					var tmp = [];
 
-					
+
 
 					tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 
-					tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) ); 
+					tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 
-					tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) ); 
+					tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
 
-					
+
 
 					return tmp;
 
-					
+
 
 				}
 
-			
+
 
 				return vec;
 
 			}
 
-			
+
 
 			//
 
 
 			function onDocumentMouseMove(event) {
 
@@ -275,53 +269,59 @@
 
 
 			//
 
 
-			function loop() {
 
-			
-				requestAnimationFrame( loop, renderer.domElement );
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
 				camera.updateMatrix();
 
 
 				var time = new Date().getTime() * 0.0005;
 
-				
+
 
 				for( var i = 0; i<scene.objects.length; i++ ) {
 
-				
+
 
 					scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
 
-					
+
 
 				}
 
-				
+
 
 				//renderer.render( scene, camera );
 
 
 				renderer.clear();
 
-				
+
 
 				// Render scene into texture
 
-				
+
 
 				renderer.render( scene, camera, rtTexture1 );
 
 
 				// Render quad with blured scene into texture (convolution pass 1)
 
-				
+
 
 				quadScreen.materials = [ materialConvolution ];
 
-				
+
 
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
 
 				materialConvolution.uniforms.uImageIncrement.value = blurx;
 
-				
+
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
 
-				
+
 
 				// Render quad with blured scene into texture (convolution pass 2)
 
-				
+
 
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
 
 				materialConvolution.uniforms.uImageIncrement.value = blury;
 
-				
+
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
 
-				
+
 
 				// Render original scene with superimposed blur to texture
 
-				
+
 
 				quadScreen.materials = [ materialScreen ];
 
-				
+
 
 				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
 
 				materialScreen.uniforms.opacity.value = 1.3;
 
-				
+
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
 
 
 				// Render to screen
 
@@ -329,8 +329,6 @@
 
 				materialScreen.uniforms.tDiffuse.texture = rtTexture1;
 
 				renderer.render( sceneScreen, cameraOrtho );
 
 
-				//stats.update();
 
-				
 			}

+ 49 - 52
examples/webgl_lines_cubes.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - lines - cubes - webgl</title>
 
+		<title>three.js webgl - lines - cubes</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -13,7 +13,7 @@
 
 			a {
 
 				color:#0078ff;
 
 			}
 
-			
+
 
 			#info {
 
 				position: absolute;
 
 				top: 10px; width: 100%;
 
@@ -24,7 +24,7 @@
 
 				text-align: center;
 
 				z-index:100;
 
 			}
 
-			
+
 
 			a {
 
 				color: orange;
 
 				text-decoration: none;
 
@@ -33,33 +33,34 @@
 
 			a:hover {
 
 				color: #0080ff;
 
 			}
 
-			
+
 
 		</style>
 
 	</head>
 
 	<body>
 
-	
+
 
 		<div id="info">
 
-			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL demo 
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL demo
 
 			[<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>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
-		
+
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 
-			window.onload = init;
 
-			
 			var mouseX = 0, mouseY = 0,
 
 
 			windowHalfX = window.innerWidth / 2,
 
 			windowHalfY = window.innerHeight / 2,
 
 
-			camera, scene, renderer,
 
+			camera, scene, renderer;
 
 
-			stats;
 
+			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -81,11 +82,11 @@
 
 					points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 4, 0, 1, 2, 3, 4, 5, 6, 7 );
 
 
 				for ( i = 0; i < points.length; i ++ ) {
 
-				
+
 
 					geometry.vertices.push( new THREE.Vertex( points[i] ) );
 
-				
+
 
 				}
 
-				
+
 
 
 				// lines
 
 
@@ -96,14 +97,14 @@
 
 					parameters = [ [ m3, scale*0.5, [0,0,0],  g1 ], [ m2, scale*0.5, [d, 0, 0],  g1 ], [ m2, scale*0.5, [-d, 0, 0],  g1 ],
 
 								   [ m2, scale*0.5, [0,d,0],  g1 ], [ m2, scale*0.5, [d, d, 0],  g1 ], [ m2, scale*0.5, [-d, d, 0],  g1 ],
 
 								   [ m2, scale*0.5, [0,-d,0], g1 ], [ m2, scale*0.5, [d, -d, 0], g1 ], [ m2, scale*0.5, [-d, -d, 0], g1 ],
 
-								   
+
 
 								   [ m1, scale*0.5, [2*d, 0, 0],  g1 ], [ m1, scale*0.5, [-2*d, 0, 0],  g1 ],
 
 								   [ m1, scale*0.5, [2*d, d, 0],  g1 ], [ m1, scale*0.5, [-2*d, d, 0],  g1 ],
 
 								   [ m1, scale*0.5, [2*d, -d, 0], g1 ], [ m1, scale*0.5, [-2*d, -d, 0], g1 ],
 
 								   ];
 
-				
+
 
 				for ( i = 0; i < parameters.length; ++i ) {
 
-				
+
 
 					p = parameters[ i ];
 
 					line = new THREE.Line( p[ 3 ],  p[ 0 ] );
 
 					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
 
@@ -111,33 +112,24 @@
 
 					line.position.y = p[ 2 ][ 1 ];
 
 					line.position.z = p[ 2 ][ 2 ];
 
 					scene.addObject( line );
 
-					
-				}
 
 
-				/*
 
-				stats = new Stats();
 
-				stats.domElement.style.position = 'absolute';
 
-				stats.domElement.style.top = '0px';
 
-				container.appendChild(stats.domElement);
 
-				*/
 
+				}
 
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				
-				loop();
 
-				
+
 
 			}
 
 
 			// port of Processing Java code by Thomas Diewald
 
 			// http://www.openprocessing.org/visuals/?visualID=15599
 
-			
+
 
 			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
 
-			
+
 
 				var half = side/2,
 
-					
+
 
 					vec_s = [
 
-			  
+
 
 					new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
 
 					new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
 
 					new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
 
@@ -146,31 +138,31 @@
 
 					new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
 
 					new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
 
 					new THREE.Vector3( center.x + half, center.y + half, center.z - half )
 
-				
+
 
 					],
 
-  
+
 
 					vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
 
 
 				if( --iterations >= 0 ) {
 
-			
+
 
 					var tmp = [];
 
-					
+
 
 					tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 
-					tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) ); 
+					tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 
-					tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) ); 
+					tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
 
-					
+
 
 					return tmp;
 
-					
+
 
 				}
 
-			
+
 
 				return vec;
 
 			}
 
-			
+
 
 			//
 
 
 			function onDocumentMouseMove(event) {
 
@@ -203,25 +195,30 @@
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
-				requestAnimationFrame( loop, renderer.domElement );
 
-				
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
 				camera.updateMatrix();
 
 
 				var time = new Date().getTime() * 0.0015;
 
-				
-				for( var i = 0; i<scene.objects.length; i++ ) {
 
-				
-					scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
 
-					
+
 
+				for( var i = 0; i < scene.objects.length; i++ ) {
 
+
 
+					scene.objects[ i ].rotation.y = time * ( i % 2 ? 1 : -1);
 
+
 
 				}
 
 
-				renderer.render(scene, camera);
 
+				renderer.render( scene, camera );
 
 
-				//stats.update();
 
 			}
 
 
 		</script>

+ 37 - 41
examples/webgl_lines_sphere.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - lines - spheres - webgl</title>
 
+		<title>three.js webgl - lines - spheres</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -13,7 +13,7 @@
 
 			a {
 
 				color:#0078ff;
 
 			}
 
-			
+
 
 			#info {
 
 				position: absolute;
 
 				top: 10px; width: 100%;
 
@@ -24,7 +24,7 @@
 
 				text-align: center;
 
 				z-index:100;
 
 			}
 
-			
+
 
 			a {
 
 				color: #ff0080;
 
 				text-decoration: none;
 
@@ -33,7 +33,7 @@
 
 			a:hover {
 
 				color: #0080ff;
 
 			}
 
-			
+
 
 		</style>
 
 	</head>
 
 	<body>
 
@@ -43,27 +43,28 @@
 
 		</div>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
-		
+
 
 		<script type="text/javascript">
 
-		
+
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 
-			window.onload = init;
 
-			
 			var SCREEN_WIDTH = window.innerWidth,
 
 				SCREEN_HEIGHT = window.innerHeight,
 
 
 			r = 450,
 
-			
+
 
 			mouseX = 0, mouseY = 0,
 
 
 			windowHalfX = window.innerWidth / 2,
 
 			windowHalfY = window.innerHeight / 2,
 
 
-			camera, scene, renderer,
 
+			camera, scene, renderer;
 
 
-			stats;
 
+			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -76,14 +77,14 @@
 
 				camera.position.z = 1000;
 
 
 				scene = new THREE.Scene();
 
-				
+
 
 				var i, line, vector1, vector2, material, p,
 
 					parameters = [ [ 0.25, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ], [ 0.75, 0xffaa00, 0.75, 1 ], [ 1, 0xffaa00, 0.5, 1 ], [ 1.25, 0x000833, 0.8, 1 ],
 
 							       [ 3.0, 0xaaaaaa, 0.75, 2 ], [ 3.5, 0xffffff, 0.5, 1 ], [ 4.5, 0xffffff, 0.25, 1 ], [ 5.5, 0xffffff, 0.125, 1 ] ],
 
-					
+
 
 					geometry = new THREE.Geometry();
 
-				
-				
+
 
+
 
 				for ( i = 0; i < 1500; ++i ) {
 
 
 					vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
@@ -95,13 +96,13 @@
 
 
 					geometry.vertices.push( new THREE.Vertex( vector1 ) );
 
 					geometry.vertices.push( new THREE.Vertex( vector2 ) );
 
-					
+
 
 				}
 
 
 				for( i = 0; i < parameters.length; ++i ) {
 
-					
+
 
 					p = parameters[ i ];
 
-					
+
 
 					material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );
 
 
 					line = new THREE.Line( geometry, material, THREE.LinePieces );
 
@@ -116,27 +117,18 @@
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 				container.appendChild(renderer.domElement);
 
-				
-				/*
 
-				stats = new Stats();
 
-				stats.domElement.style.position = 'absolute';
 
-				stats.domElement.style.top = '0px';
 
-				container.appendChild(stats.domElement);
 
-				*/
 
-				
+
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				
-				loop();
 
-				
+
 
 			}
 
 
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseY = event.clientY - windowHalfY;
 
-				
+
 
 			}
 
 
 			function onDocumentTouchStart( event ) {
 
@@ -148,7 +140,7 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
 
-				
+
 
 			}
 
 
 			function onDocumentTouchMove( event ) {
 
@@ -160,15 +152,21 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
 
-				
+
 
 			}
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
-				requestAnimationFrame( loop, renderer.domElement );
 
-				
 				//camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
 				camera.updateMatrix();
 
@@ -178,17 +176,15 @@
 
 				var time = new Date().getTime() * 0.0001;
 
 
 				for( var i = 0; i<scene.objects.length; i++ ) {
 
-				
+
 
 					scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
 
 
 					if ( i < 5 ) scene.objects[i].scale.x = scene.objects[i].scale.y = scene.objects[i].scale.z = scene.objects[i].originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );
 
-					
+
 
 				}
 
-				
-				//stats.update();
 
-				 
+
 
 			}
 
-			
+
 
 
 		</script>
 
 	</body>

+ 28 - 18
examples/webgl_materials.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - webgl</title>
 
+		<title>three.js webgl - materials</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -18,19 +18,21 @@
 
 		<pre id="log"></pre>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.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;
 
 
 			var camera, scene, renderer, objects;
 
 			var particleLight, pointLight;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -48,9 +50,9 @@
 
 				var line_material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ),
 
 					geometry = new THREE.Geometry(),
 
 					floor = -75, step = 25;
 
-				
+
 
 				for ( var i = 0; i <= 40; i ++ ) {
 
-				
+
 
 					geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, floor, i * step - 500 ) ) );
 
 					geometry.vertices.push( new THREE.Vertex( new THREE.Vector3(   500, floor, i * step - 500 ) ) );
 
 
@@ -58,7 +60,7 @@
 
 					geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( i * step - 500, floor,  500 ) ) );
 
 
 				}
 
-				
+
 
 				var line = new THREE.Line( geometry, line_material, THREE.LinePieces );
 
 				scene.addObject( line );
 
 
@@ -86,7 +88,7 @@
 
 				var geometry_smooth = new Sphere( 70, 32, 16 );
 
 				var geometry_flat = new Sphere( 70, 32, 16 );
 
 				var geometry_pieces = new Sphere( 70, 32, 16 ); // Extra geometry to be broken down for MeshFaceMaterial
 
-				
+
 
 				for ( var i = 0, l = geometry_pieces.faces.length; i < l; i ++ ) {
 
 
 					var face = geometry_pieces.faces[ i ];
 
@@ -95,20 +97,20 @@
 
 				}
 
 
 				geometry_pieces.sortFacesByMaterial();
 
-				
+
 
 				materials.push( new THREE.MeshFaceMaterial() );
 
 
 				objects = [];
 
 
 				var sphere, geometry, material;
 
-				
+
 
 				for ( var i = 0, l = materials.length; i < l; i ++ ) {
 
-				
+
 
 					material = materials[ i ];
 
-					
-					geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces : 
+
 
+					geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
 
 							   ( material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth );
 
-					
+
 
 					sphere = new THREE.Mesh( geometry, material );
 
 
 					sphere.position.x = ( i % 4 ) * 200 - 400;
 
@@ -195,7 +197,16 @@
 
 
 			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var timer = new Date().getTime() * 0.0001;
 
 
@@ -221,14 +232,13 @@
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}
 
-			
+
 
 			function log( text ) {
 
-			
+
 
 				var e = document.getElementById("log");
 
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
-				
+
 
 			}
 
 
 		</script>

+ 21 - 12
examples/webgl_materials_cars.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - cube reflection [cars] - webgl</title>
 
+		<title>three.js webgl - materials - cube reflection [cars]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -27,7 +27,7 @@
 
 			#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>
 
@@ -57,12 +57,14 @@
 
 		<div id="log"></div>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var STATS_ENABLED = false;
 
 
 			var CARS = {
 
@@ -150,12 +152,9 @@
 
 
 			var loader = new THREE.Loader( true );
 
 			document.body.appendChild( loader.statusDomElement );
 
-			
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 
-
 
-			setInterval(loop, 1000/60);
 
+			animate();
 
 
 			function init() {
 
 
@@ -214,6 +213,8 @@
 
 
 				}
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+
 
 				var r = "textures/cube/Bridge2/";
 
 				var urls = [ r + "posx.jpg", r + "negx.jpg",
 
 							 r + "posy.jpg", r + "negy.jpg",
 
@@ -569,16 +570,24 @@
 
 
 			}
 
 
-			var r = 0;
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
 
-			function loop() {
 
+			function render() {
 
 
-				r -= 0.005;
 
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
-				camera.position.x = 1000 * Math.cos( r );
 
-				camera.position.z = 1000 * Math.sin( r );
 
+				camera.position.x = 1000 * Math.cos( timer );
 
+				camera.position.z = 1000 * Math.sin( timer );
 
 
 				cameraCube.target.position.x = - camera.position.x;
 
 				cameraCube.target.position.y = - camera.position.y;

+ 55 - 55
examples/webgl_materials_cars_camaro.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - cube reflection [camaro] - webgl</title>
 
+		<title>three.js webgl - materials - cube reflection [camaro]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -23,17 +23,17 @@
 
 			button:hover { background:#333 }
 
 		</style>
 
 	</head>
 
-	
+
 
 	<body>
 
 		<div id="d">
 
 			<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. chevrolet camaro by <a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a></div>
 
-			
+
 
 			<div id="buttons"></div>
 
 		</div>
 
-		
+
 
 		<div id="log"></div>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
@@ -41,40 +41,32 @@
 
 		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
 
-			var container;
 
-			var stats;
 
+			var container, stats;
 
 
-			var camera;
 
-			var scene;
 
-			var webglRenderer;
 
+			var camera, scene, webglRenderer;
 
 
 			var lightMesh;
 
-			
+
 
 			var directionalLight, pointLight;
 
-			
-			var mouseX = 0;
 
-			var mouseY = 0;
 
 
-			var windowHalfX = window.innerWidth >> 1;
 
-			var windowHalfY = window.innerHeight >> 1;
 
+			var mouseX = 0, mouseY = 0;
 
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			
-			loop();
 
-						
-			setInterval(loop, 1000/60);
 
-			
+			animate();
 
+
 
 			function init() {
 
 
 				container = document.createElement('div');
 
@@ -85,7 +77,7 @@
 
 				camera.updateMatrix();
 
 
 				scene = new THREE.Scene();
 
-				
+
 
 				// LIGHTS
 
 
 				var ambient = new THREE.AmbientLight( 0x555555 );
 
@@ -125,16 +117,18 @@
 
 				stats.domElement.style.zIndex = 100;
 
 				container.appendChild( stats.domElement );
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+
 
 				var r = "textures/cube/SwedishRoyalCastle/";
 
-				var urls = [ r + "px.jpg", r + "nx.jpg", 
-							 r + "py.jpg", r + "ny.jpg", 
+				var urls = [ r + "px.jpg", r + "nx.jpg",
 
+							 r + "py.jpg", r + "ny.jpg",
 
 							 r + "pz.jpg", r + "nz.jpg" ];
 
 
 				var images = ImageUtils.loadArray( urls );
 
 				var textureCube = new THREE.Texture( images );
 
-				
+
 
 				var camaroMaterials = {
 
-					
+
 
 					body: 		[],
 
 					chrome: 	new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube } ),
 
 					darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, env_map: textureCube } ),
 
@@ -142,15 +136,15 @@
 
 					tire:       new THREE.MeshLambertMaterial( { color: 0x050505 } ),
 
 					interior:   new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
 
 					black:      new THREE.MeshLambertMaterial( { color: 0x000000 } )
 
-					
+
 
 				}
 
-				
+
 
 				camaroMaterials.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
 
 				camaroMaterials.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x226699, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
 
 				camaroMaterials.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 
 				camaroMaterials.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 
 				camaroMaterials.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 
-				
+
 
 				camaroMaterials.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, env_map: textureCube, combine: THREE.MultiplyOperation } ) ] );
 
 				camaroMaterials.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, env_map: textureCube, combine: THREE.MultiplyOperation } ) ] );
 
 				camaroMaterials.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 
@@ -158,26 +152,26 @@
 
 
 				var loader = new THREE.Loader();
 
 				loader.loadBinary( { model: "obj/camaro/CamaroNoUv_bin.js", callback: function( geometry ) { createScene( geometry, camaroMaterials ) } } );
 
-				
+
 
 			}
 
-			
+
 
 			function $( id ) { return document.getElementById( id ) }
 
-			
-			
+
 
+
 
 			function createButtons( materials, geometry ) {
 
 
 				var i, src = "", parent = $( "buttons" );
 
-				
+
 
 				for( i = 0; i < materials.length; i++ ) {
 
-				
+
 
 					src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
 
-					
+
 
 				}
 
-				
+
 
 				parent.innerHTML = src;
 
 
 				for( i = 0; i < materials.length; i++ ) {
 
-				
+
 
 					$( "m" + i ).counter = i;
 
 					$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ][ 0 ] = materials[ this.counter ][ 1 ] }, false );
 
 
@@ -188,7 +182,7 @@
 
 			function createScene( geometry, materials ) {
 
 
 				var s = 75, m = new THREE.MeshFaceMaterial();
 
-				
+
 
 				geometry.materials[ 0 ][ 0 ] = materials.body[ 0 ][ 1 ]; 	// car body
 
 				geometry.materials[ 1 ][ 0 ] = materials.chrome; 			// wheels chrome
 
 				geometry.materials[ 2 ][ 0 ] = materials.chrome; 			// grille chrome
 
@@ -198,14 +192,13 @@
 
 				geometry.materials[ 6 ][ 0 ] = materials.tire;              // tire
 
 				geometry.materials[ 7 ][ 0 ] = materials.black;             // tireling
 
 				geometry.materials[ 8 ][ 0 ] = materials.black;             // behind grille
 
-				
+
 
 				SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, 0.0, 1.0, 0.0, m );
 
 
 				createButtons( materials.body, geometry );
 
 
 			}
 
 
-			
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = ( event.clientX - windowHalfX );
 
@@ -213,31 +206,38 @@
 
 
 			}
 
 
-			var r = 0;
 
-			
-			function loop() {
 
+			// 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
-				lightMesh.position.x = 1500 * Math.cos( r );
 
-				lightMesh.position.z = 1500 * Math.sin( r );
 
-
 
-				r += 0.01;
 
+				lightMesh.position.x = 1500 * Math.cos( timer );
 
+				lightMesh.position.z = 1500 * Math.sin( timer );
 
 
 				webglRenderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 			function log(text) {
 
-			
+
 
 				var e = document.getElementById("log");
 
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
-				
+
 
 			}
 
-			
+
 
 		</script>
 
 
 	</body>

+ 26 - 15
examples/webgl_materials_cubemap.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - cube reflection / refraction [Walt] - webgl</title>
 
+		<title>three.js webgl - materials - cube reflection / refraction [Walt]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -21,7 +21,7 @@
 
 			#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>
 
@@ -37,12 +37,14 @@
 
 		<pre id="log"></pre>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.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;
 
 
 			var camera, scene, webglRenderer;
 
@@ -51,7 +53,7 @@
 
 			var mesh, zmesh, lightMesh, geometry;
 
 
 			var loader;
 
-			
+
 
 			var directionalLight, pointLight;
 
 
 			var mouseX = 0;
 
@@ -63,7 +65,7 @@
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -105,7 +107,7 @@
 
 
 				var reflectionCube = new THREE.Texture( images );
 
 				var refractionCube = new THREE.Texture( images, new THREE.CubeRefractionMapping() );
 
-				
+
 
 				//var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0x000000, specular:0xaa0000, env_map: new THREE.TextureCube( images ), combine: THREE.MixOperation, reflectivity: 0.25 } );
 
 				var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
 
 				var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, env_map: refractionCube, refraction_ratio: 0.95 } );
 
@@ -114,7 +116,7 @@
 
 				//SceneUtils.addPanoramaCubePlanes( sceneCube, 100000, images );
 
 				//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
 
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, reflectionCube );
 
-				
+
 
 				webglRenderer = new THREE.WebGLRenderer();
 
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 
 				webglRenderer.autoClear = false;
 
@@ -129,7 +131,7 @@
 
 
 				loader = new THREE.Loader( true );
 
 				document.body.appendChild( loader.statusDomElement );
 
-				
+
 
 				loader.loadBinary( { model: "obj/walt/WaltHead_bin.js", callback: function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } } );
 
 
 			}
 
@@ -141,7 +143,7 @@
 
 				SceneUtils.addMesh( scene, geometry, s,      0, 0, -100, 0,0,0, m1 );
 
 				SceneUtils.addMesh( scene, geometry, s,   -900, 0, -100, 0,0,0, m2 );
 
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, -100, 0,0,0, m3 );
 
-				
+
 
 				loader.statusDomElement.style.display = "none";
 
 
 			}
 
@@ -153,9 +155,20 @@
 
 
 			}
 
 
-			var r = 0;
 
+			//
 
 
-			function loop() {
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -165,10 +178,8 @@
 
 				cameraCube.target.position.z = - camera.position.z;
 
 
 
-				lightMesh.position.x = 1500 * Math.cos( r );
 
-				lightMesh.position.z = 1500 * Math.sin( r );
 
-
 
-				r += 0.01;
 
+				lightMesh.position.x = 1500 * Math.cos( timer );
 
+				lightMesh.position.z = 1500 * Math.sin( timer );
 
 
 				webglRenderer.clear();
 
 				webglRenderer.render( sceneCube, cameraCube );

+ 20 - 9
examples/webgl_materials_cubemap_balls_reflection.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - cube reflection [balls] - webgl</title>
 
+		<title>three.js webgl - materials - cube reflection [balls]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -26,7 +26,7 @@
 
 			a {
 
 				color: #ffffff;
 
 			}
 
-			
+
 
 			#oldie a { color:#da0 }
 
 		</style>
 
 	</head>
 
@@ -35,12 +35,14 @@
 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank">Paul Debevec</a></div>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var statsEnabled = false;
 
 
 			var container, stats;
 
@@ -61,12 +63,12 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
-				container = document.createElement('div');
 
-				document.body.appendChild(container);
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
 
 				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				camera.position.z = 3200;
 
@@ -131,7 +133,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				if ( statsEnabled ) stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -144,8 +157,6 @@
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 
 		</script>

+ 18 - 7
examples/webgl_materials_cubemap_balls_refraction.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - cube refraction [balls] - webgl</title>
 
+		<title>three.js webgl - materials - cube refraction [balls]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -26,7 +26,7 @@
 
 			a {
 
 				color: #ffffff;
 
 			}
 
-			
+
 
 			#oldie a { color:#da0 }
 
 		</style>
 
 	</head>
 
@@ -35,12 +35,14 @@
 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube refraction demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var statsEnabled = false;
 
 
 			var container, stats;
 
@@ -61,7 +63,7 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -129,7 +131,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				if ( statsEnabled ) stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -142,8 +155,6 @@
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 
 		</script>

+ 18 - 8
examples/webgl_materials_cubemap_escher.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - cube reflection [Escher] - webgl</title>
 
+		<title>three.js webgl - materials - cube reflection [Escher]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -14,11 +14,10 @@
 
 				text-align:center;
 
 			}
 
 			a {	color: #ff0080;	text-decoration: none; }
 
-			a:hover { color: #0080ff; }			
+			a:hover { color: #0080ff; }
 
 			#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>
 
@@ -33,12 +32,14 @@
 
 		<pre id="log"></pre>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var statsEnabled = false;
 
 
 			var container, stats;
 
@@ -58,7 +59,7 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -114,15 +115,24 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				if ( statsEnabled ) stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 
 			function log(text) {

+ 28 - 20
examples/webgl_materials_cubemap_refraction.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - cube refraction [Lucy] - webgl</title>
 
+		<title>three.js webgl - materials - cube refraction [Lucy]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -20,7 +20,7 @@
 
 			#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>
 
@@ -35,13 +35,15 @@
 
 
 		<pre id="log"></pre>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script> 
+		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var FLOOR = -250;
 
 
 			var container, stats;
 
@@ -52,19 +54,16 @@
 
 			var mesh, zmesh, lightMesh, geometry;
 
 
 			var loader;
 
-			
+
 
 			var directionalLight, pointLight;
 
 
-			var mouseX = 0;
 
-			var mouseY = 0;
 
+			var mouseX = 0, mouseY = 0;
 
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -126,9 +125,11 @@
 
 
 				loader = new THREE.Loader( true );
 
 				document.body.appendChild( loader.statusDomElement );
 
-				
+
 
 				loader.loadBinary( { model: 'obj/lucy/Lucy100k_bin.js', callback: function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } } );
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+
 
 			}
 
 
 			function createScene( geometry, m1, m2, m3 ) {
 
@@ -138,7 +139,7 @@
 
 				SceneUtils.addMesh( scene, geometry, s,      0, 0, z, 0,0,0, m1 );
 
 				SceneUtils.addMesh( scene, geometry, s,   -900, 0, z, 0,0,0, m2 );
 
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, z, 0,0,0, m3 );
 
-				
+
 
 				loader.statusDomElement.style.display = "none";
 
 
 			}
 
@@ -150,9 +151,20 @@
 
 
 			}
 
 
-			var r = 0;
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
-			function loop() {
 
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -162,17 +174,13 @@
 
 				cameraCube.target.position.z = - camera.position.z;
 
 
 
-				lightMesh.position.x = 1500 * Math.cos( r );
 
-				lightMesh.position.z = 1500 * Math.sin( r );
 
-
 
-				r += 0.01;
 
+				lightMesh.position.x = 1500 * Math.cos( timer );
 
+				lightMesh.position.z = 1500 * Math.sin( timer );
 
 
 				webglRenderer.clear();
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 			function log(text) {

+ 16 - 4
examples/webgl_materials_grass.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - grass - webgl</title>
 
+		<title>three.js webgl - materials - grass</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -21,15 +21,17 @@
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var camera, scene, renderer,
 
 			mesh, levels = [];
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -99,7 +101,17 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() / 6000;

+ 54 - 43
examples/webgl_materials_normalmap.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - normal map - webgl</title>
 
+		<title>three.js webgl - materials - normal map</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -23,29 +23,29 @@
 
 				font-family:Monospace;
 
 				font-size:13px;
 
 				text-align:center;
 
-				z-index:1000; 
+				z-index:1000;
 
 			}
 
-			
+
 
 			#oldie {
 
 				background:rgb(200,100,0) !important;
 
-				color:#fff;				
+				color:#fff;
 
 			}
 
-			
-			#vt { display:none } 
+
 
+			#vt { display:none }
 
 			#vt, #vt a { color:orange; }
 
 			.code { }
 
-			
+
 
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
 
 		</style>
 
 	</head>
 
 
 	<body>
 
 		<pre id="log"></pre>
 
-		
+
 
 		<div id="info">
 
-			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement</span>) map demo. 
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement</span>) map demo.
 
 			ninja head from <a href="http://developer.amd.com/archive/gpu/MeshMapper/pages/default.aspx" target="_blank">AMD GPU MeshMapper</a>
 
-			
+
 
 			<div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)<br/>
 
 			on Windows use <span class="code">Chrome --use-gl=desktop</span> <br/>
 
 			or Firefox 4 (about:config => webgl.mochitest_native_gl=true)<br/>
 
@@ -53,13 +53,15 @@
 
 			</div>
 
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script> 
+		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
-		
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var statsEnabled = true;
 
 
 			var container, stats, loader;
 
@@ -68,7 +70,7 @@
 
 
 			var mesh, zmesh, lightMesh, geometry;
 
 			var mesh1, mesh2;
 
-	
+
 
 			var directionalLight, pointLight, ambientLight;
 
 
 			var mouseX = 0;
 
@@ -82,7 +84,7 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -112,7 +114,7 @@
 
 				scene.addLight( directionalLight );
 
 
 				// light representation
 
-				
+
 
 				var sphere = new Sphere( 100, 16, 8 );
 
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
 
 				lightMesh.position = pointLight.position;
 
@@ -120,36 +122,36 @@
 
 				scene.addObject(lightMesh);
 
 
 				// common material parameters
 
-				
+
 
 				var ambient = 0x050505, diffuse = 0x555555, specular = 0xaa6600, shininess = 10, scale = 23;
 
 
 				// normal map shader
 
-				
+
 
 				var shader = ShaderUtils.lib[ "normal" ];
 
 				var uniforms = Uniforms.clone( shader.uniforms );
 
 
 				uniforms[ "enableAO" ].value = true;
 
 				uniforms[ "enableDiffuse" ].value = false;
 
-				
+
 
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" );
 
 				uniforms[ "tAO" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" );
 
-				
+
 
 				uniforms[ "tDisplacement" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/displacement.jpg" );
 
 				uniforms[ "uDisplacementBias" ].value = -0.428408 * scale;
 
 				uniforms[ "uDisplacementScale" ].value = 2.436143 * scale;
 
-				
+
 
 				uniforms[ "uPointLightPos" ].value = pointLight.position;
 
 				uniforms[ "uPointLightColor" ].value = pointLight.color;
 
 
 				uniforms[ "uDirLightPos" ].value = directionalLight.position;
 
 				uniforms[ "uDirLightColor" ].value = directionalLight.color;
 
-				
+
 
 				uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
 
-				
+
 
 				uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
 
 				uniforms[ "uSpecularColor" ].value.setHex( specular );
 
 				uniforms[ "uAmbientColor" ].value.setHex( ambient );
 
-				
+
 
 				uniforms[ "uShininess" ].value = shininess;
 
 
 				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
 
@@ -159,7 +161,7 @@
 
 
 				loader = new THREE.Loader( true );
 
 				document.body.appendChild( loader.statusDomElement );
 
-				
+
 
 				loader.loadBinary( { model: "obj/ninja/NinjaLo_bin.js", callback: function( geometry ) { createScene( geometry, scale, material1, material2 ) } } );
 
 
 				webglRenderer = new THREE.WebGLRenderer();
 
@@ -169,7 +171,7 @@
 
 				var description = "normal + ao" + ( webglRenderer.supportsVertexTextures() ? " + displacement" : " + <strike>displacement</strike>" );
 
 				document.getElementById( "description" ).innerHTML = description;
 
 				document.getElementById( "vt" ).style.display = webglRenderer.supportsVertexTextures() ? "none" : "block";
 
-				
+
 
 				if ( statsEnabled ) {
 
 
 					stats = new Stats();
 
@@ -183,41 +185,52 @@
 
 			}
 
 
 			function createScene( geometry, scale, material1, material2 ) {
 
-				
+
 
 				geometry.computeTangents();
 
-				
+
 
 				mesh1 = SceneUtils.addMesh( scene, geometry, scale, -scale * 12, 0, 0, 0,0,0, material1 );
 
 				mesh2 = SceneUtils.addMesh( scene, geometry, scale,  scale * 12, 0, 0, 0,0,0, material2 );
 
-				
+
 
 				loader.statusDomElement.style.display = "none";
 
-				
+
 
 			}
 
-			
+
 
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 
 				mouseY = ( event.clientY - windowHalfY ) * 10;
 
 
 			}
 
-			
-			function loop() {
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				if ( statsEnabled ) stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
 
-				
+
 
 				if( mesh1 ) {
 
-				
+
 
 					mesh1.rotation.y = ry;
 
 					mesh1.rotation.x = rx;
 
-					
+
 
 				}
 
-				
+
 
 				if( mesh2 ) {
 
-					
+
 
 					mesh2.rotation.y = ry;
 
 					mesh2.rotation.x = rx;
 
-					
+
 
 				}
 
-				
+
 
 				lightMesh.position.x = 2500 * Math.cos( r );
 
 				lightMesh.position.z = 2500 * Math.sin( r );
 
 
@@ -225,8 +238,6 @@
 
 
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 
 			function log( text ) {
 
@@ -235,7 +246,7 @@
 
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
 
 			}
 
-			
+
 
 
 		</script>

+ 18 - 7
examples/webgl_materials_normalmap2.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - normal map [Lee Perry-Smith] - webgl</title>
 
+		<title>three.js webgl - materials - normal map [Lee Perry-Smith]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -53,6 +53,8 @@
 
 		</div>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -76,10 +78,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -159,6 +159,8 @@
 
 
 				}
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+
 
 			}
 
 
 			function createScene( geometry, scale, material ) {
 
@@ -178,7 +180,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				if ( statsEnabled ) stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
 
 
@@ -191,8 +204,6 @@
 
 
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 
 			function log( text ) {

+ 60 - 60
examples/webgl_materials_shaders.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - shaders [Phong, Lambert] - webgl</title>
 
+		<title>three.js webgl - materials - shaders [Phong, Lambert]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -22,7 +22,7 @@
 
 			.inactive { background:#999; color:#eee }
 
 		</style>
 
 	</head>
 
-	
+
 
 	<body>
 
 		<div id="d">
 
 			<h1>Blinn-Phong / Lambert materials</h1>
 
@@ -30,22 +30,23 @@
 
 			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
 
 			<span id="rwebgl" class="button">WebGL renderer</span>
 
 			<br/>
 
-			
+
 
 			<p><a href="http://github.com/mrdoob/three.js">Three.js</a> example
 
-			
+
 
 			<br/>
 
 			<p>Best viewed in Chrome 9 or Firefox 4 using WebGL renderer.
 
 			<p>Canvas renderer is very slow on anything other than Chrome.
 
 			<p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
 
 		</div>
 
-		
+
 
 		<pre id="log"></pre>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
 		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -54,43 +55,34 @@
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
 			var FLOOR = -250;
 
 
-			var container;
 
-			var stats;
 
+			var container, stats;
 
 
-			var camera;
 
-			var scene;
 
-			var canvasRenderer, webglRenderer;
 
+			var camera, scene, canvasRenderer, webglRenderer;
 
 
 			var mesh, zmesh, lightMesh, geometry;
 
-			
+
 
 			var directionalLight, pointLight;
 
-			
-			var mouseX = 0;
 
-			var mouseY = 0;
 
 
-			var windowHalfX = window.innerWidth >> 1;
 
-			var windowHalfY = window.innerHeight >> 1;
 
+			var mouseX = 0, mouseY = 0;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
 
 			var render_canvas = 1, render_gl = 1;
 
 			var has_gl = 0;
 
-			
+
 
 			var bcanvas = document.getElementById("rcanvas");
 
 			var bwebgl = document.getElementById("rwebgl");
 
-			
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 
-			
-			loop();
 
-			
+			animate();
 
+
 
 			render_canvas = !has_gl;
 
 			bwebgl.style.display = has_gl ? "inline" : "none";
 
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 
-			
-			setInterval(loop, 1000/60);
 
-			
+
 
 			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
 
-				
+
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 
 				mesh.position.x = x;
 
@@ -102,9 +94,9 @@
 
 				mesh.overdraw = true;
 
 				mesh.updateMatrix();
 
 				scene.addObject(mesh);
 
-				
+
 
 			}
 
-			
+
 
 			function init() {
 
 
 				container = document.createElement('div');
 
@@ -147,7 +139,7 @@
 
 				sphere = new Sphere( 100, 32, 32 );
 
 
 				var y1 = 0, y2 = -200;
 
-				
+
 
 				addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x000000, specular: 0x555555, shininess: 30 } ) );
 
 				addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x050505 } ) );
 
 
@@ -180,7 +172,7 @@
 
 					catch (e) {
 
 					}
 
 				}
 
-				
+
 
 				if( render_canvas ) {
 
 					canvasRenderer = new THREE.CanvasRenderer();
 
 					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
@@ -193,7 +185,7 @@
 
 				stats.domElement.style.top = '0px';
 
 				stats.domElement.style.zIndex = 100;
 
 				container.appendChild( stats.domElement );
 
-				
+
 
 				bcanvas.addEventListener("click", toggleCanvas, false);
 
 				bwebgl.addEventListener("click", toggleWebGL, false);
 
 
@@ -201,12 +193,14 @@
 
 				loader.loadAscii( { model: "obj/torus/Torus_slim.js", callback: function( geometry ) { createScene( geometry ) } } );
 
 				//loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createScene( geometry ) } } );
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+
 
 			}
 
 
 			function createScene( geometry ) {
 
-				
+
 
 				var s = 80, t = s + 20, y = 200;
 
-				
+
 
 				addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x000000, specular: 0x333333, shininess: 10 } ) );
 
 				addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x888888, specular: 0x333333, shininess: 10 } ) );
 
 				addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xff5500, shininess: 10 } ) );
 
@@ -217,7 +211,7 @@
 
 
 			}
 
 
-			
+
 
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = ( event.clientX - windowHalfX );
 
@@ -225,63 +219,69 @@
 
 
 			}
 
 
-			var r = 0;
 
-			
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.updateMatrix();
 
-				
-				lightMesh.position.x = 700*Math.cos(r);
 
-				lightMesh.position.z = 700*Math.sin(r);
 
+
 
+				lightMesh.position.x = 700*Math.cos( timer );
 
+				lightMesh.position.z = 700*Math.sin( timer );
 
 				lightMesh.updateMatrix();
 
 
-				r += 0.01;
 
-				
-				
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 			function log(text) {
 
-			
+
 
 				var e = document.getElementById("log");
 
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
-				
+
 
 			}
 
-			
+
 
 			function toggleCanvas() {
 
-			
+
 
 				render_canvas = !render_canvas;
 
 				bcanvas.className = render_canvas ? "button" : "button inactive";
 
-				
+
 
 				render_gl = !render_canvas;
 
 				bwebgl.className = render_gl ? "button" : "button inactive";
 
-				
+
 
 				if( has_gl )
 
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 
-				
+
 
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 
-				
+
 
 			}
 
-			
+
 
 			function toggleWebGL() {
 
-			
+
 
 				render_gl = !render_gl;
 
 				bwebgl.className = render_gl ? "button" : "button inactive";
 
-				
+
 
 				render_canvas = !render_gl;
 
 				bcanvas.className = render_canvas ? "button" : "button inactive";
 
-				
+
 
 				if( has_gl )
 
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 
-					
+
 
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 
-				
+
 
 			}
 
 		</script>

+ 21 - 11
examples/webgl_materials_shaders_fresnel.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - shaders [Fresnel] - webgl</title>
 
+		<title>three.js webgl - materials - shaders [Fresnel]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -27,19 +27,21 @@
 
 				color: #ffffff;
 
 			}
 
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
 
-			
+
 
 			#oldie a { color:#0b0 }
 
 		</style>
 
 	</head>
 
 
 	<body>
 
 		<pre id="log"></pre>
 
-		
+
 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube Fresnel shader demo. texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">Humus</a> </div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script> 
+		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
-		
+
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
@@ -55,8 +57,7 @@
 
 
 			var directionalLight, pointLight;
 
 
-			var mouseX = 0;
 
-			var mouseY = 0;
 
+			var mouseX = 0, mouseY = 0;
 
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
@@ -64,7 +65,7 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -142,7 +143,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				if ( statsEnabled ) stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -155,8 +167,6 @@
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 
 			function log( text ) {

+ 17 - 11
examples/webgl_objconvert_test.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - io - OBJ converter - webgl</title>
 
+		<title>three.js webgl - io - OBJ converter</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -48,6 +48,7 @@
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -77,16 +78,12 @@
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 
-
 
-			loop();
 
+			animate();
 
 
 			render_canvas = !has_gl;
 
 			bwebgl.style.display = has_gl ? "inline" : "none";
 
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 
 
-			setInterval(loop, 1000/60);
 
-
 
-
 
 			function init() {
 
 
 				container = document.createElement('div');
 
@@ -197,10 +194,10 @@
 
 				var loader = new THREE.Loader(),
 
 					callbackMale   = function( geometry ) { createScene( geometry,  90, 50, FLOOR, 105 ) },
 
 					callbackFemale = function( geometry ) { createScene( geometry, -80, 50, FLOOR, 0 ) };
 
-					
+
 
 				//loader.loadAscii( { model: "obj/male02/Male02_slim.js", callback: callbackMale } );
 
 				//loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callbackFemale } );
 
-				
+
 
 				loader.loadBinary( { model: "obj/male02/Male02_bin.js", callback: callbackMale } );
 
 				loader.loadBinary( { model: "obj/female02/Female02_bin.js", callback: callbackFemale } );
 
 
@@ -267,7 +264,18 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -281,8 +289,6 @@
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 			function log( text ) {

+ 46 - 36
examples/webgl_particles_billboards.html
View File 

@@ -1,46 +1,47 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - billboards - webgl</title>
 
+		<title>three.js webgl - particles - billboards</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
 				background-color: #000000;
 
 				margin: 0px;
 
 				overflow: hidden;
 
-                font-family:Monospace;
 
-                font-size:13px;
 
-                text-align:center;
 
-                font-weight: bold;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+				font-weight: bold;
 
 				text-align:center;
 
 			}
 
 
 			a {
 
 				color:#0078ff;
 
 			}
 
-			
-            #info {
 
+
 
+			#info {
 
 				color:#fff;
 
-                position: absolute;
 
-                top: 0px; width: 100%;
 
-                padding: 5px;
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
 				z-index:100;
 
-				
-            }
 
-			
+			}
 
+
 
 		</style>
 
 	</head>
 
 	<body>
 
-	
-        <div id="info">
 
+
 
+		<div id="info">
 
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards example
 
 		</div>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.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;
 
@@ -51,8 +52,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-			//loop();
 
+			animate();
 
 
 			function init() {
 
 
@@ -64,19 +64,20 @@
 
 
 				scene = new THREE.Scene();
 
 				scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
 
-				
+
 
 				geometry = new THREE.Geometry();
 
-				
+
 
 				sprite = ImageUtils.loadTexture( "textures/sprites/circle.png" );
 
-				
+
 
 				for ( i = 0; i < 5000; i++ ) {
 
 
 					x = 2000 * Math.random() - 1000;
 
 					y = 2000 * Math.random() - 1000;
 
 					z = 2000 * Math.random() - 1000;
 
+
 
 					vector = new THREE.Vector3( x, y, z );
 
-					geometry.vertices.push( new THREE.Vertex( vector ) );					
-					
+					geometry.vertices.push( new THREE.Vertex( vector ) );
 
+
 
 				}
 
 
 				material = new THREE.ParticleBasicMaterial( { size: 35, map: sprite, blending: THREE.BillboardBlending } );
 
@@ -86,7 +87,7 @@
 
 				particles.sortParticles = true;
 
 				particles.updateMatrix();
 
 				scene.addObject( particles );
 
-				
+
 
 				var light = new THREE.DirectionalLight( 0xffffff );
 
 				light.position.x = 0;
 
 				light.position.y = 0;
 
@@ -105,14 +106,14 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				
+
 
 			}
 
 
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseY = event.clientY - windowHalfY;
 
-				
+
 
 			}
 
 
 			function onDocumentTouchStart( event ) {
 
@@ -123,7 +124,7 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-					
+
 
 				}
 
 			}
 
 
@@ -135,33 +136,42 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-					
+
 
 				}
 
-				
+
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.00005;
 
-				
+
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				/*
 
 				for( i = 0; i < scene.objects.length; i++ ) {
 
-				
+
 
 					scene.objects[i].rotation.y = 5*time * ( i < 4 ? i+1 : - (i+1) );
 
-					
+
 
 				}
 
 				*/
 
 
 				h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 
 				material.color.setHSV( h, 0.75, 0.8 );
 
-					
-				
+
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}
 
 
 		</script>

+ 44 - 34
examples/webgl_particles_billboards_colors.html
View File 

@@ -1,46 +1,47 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - billboards - colors - webgl</title>
 
+		<title>three.js webgl - particles - billboards - colors</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
 				background-color: #000000;
 
 				margin: 0px;
 
 				overflow: hidden;
 
-                font-family:Monospace;
 
-                font-size:13px;
 
-                text-align:center;
 
-                font-weight: bold;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+				font-weight: bold;
 
 				text-align:center;
 
 			}
 
 
 			a {
 
 				color:#0078ff;
 
 			}
 
-			
-            #info {
 
+
 
+			#info {
 
 				color:#fff;
 
-                position: absolute;
 
-                top: 0px; width: 100%;
 
-                padding: 5px;
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
 				z-index:100;
 
-				
-            }
 
-			
+			}
 
+
 
 		</style>
 
 	</head>
 
 	<body>
 
-	
-        <div id="info">
 
+
 
+		<div id="info">
 
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards colors example
 
 		</div>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.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;
 
@@ -51,8 +52,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-			//loop();
 
+			animate();
 
 
 			function init() {
 
 
@@ -64,11 +64,11 @@
 
 
 				scene = new THREE.Scene();
 
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0009 );
 
-				
+
 
 				geometry = new THREE.Geometry();
 
-				
+
 
 				sprite = ImageUtils.loadTexture( "textures/sprites/ball.png" );
 
-				
+
 
 				for ( i = 0; i < 5000; i++ ) {
 
 
 					x = 2000 * Math.random() - 1000;
 
@@ -76,12 +76,12 @@
 
 					z = 2000 * Math.random() - 1000;
 
 					vector = new THREE.Vector3( x, y, z );
 
 					geometry.vertices.push( new THREE.Vertex( vector ) );
 
-					
+
 
 					colors[ i ] = new THREE.Color( 0xffffff );
 
 					colors[ i ].setHSV( (x+1000)/2000, 1.0, 1.0 );
 
-					
+
 
 				}
 
-				
+
 
 				geometry.colors = colors;
 
 
 				material = new THREE.ParticleBasicMaterial( { size: 35, map: sprite, blending: THREE.BillboardBlending, vertex_colors: true } );
 
@@ -91,7 +91,7 @@
 
 				particles.sortParticles = true;
 
 				particles.updateMatrix();
 
 				scene.addObject( particles );
 
-				
+
 
 				var light = new THREE.DirectionalLight( 0xffffff );
 
 				light.position.x = 0;
 
 				light.position.y = 0;
 
@@ -110,14 +110,14 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				
+
 
 			}
 
 
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseY = event.clientY - windowHalfY;
 
-				
+
 
 			}
 
 
 			function onDocumentTouchStart( event ) {
 
@@ -128,7 +128,7 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-					
+
 
 				}
 
 			}
 
 
@@ -140,24 +140,34 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-					
+
 
 				}
 
-				
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
 			}
 
 
-			function loop() {
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.00005;
 
-				
+
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 
 				material.color.setHSV( h, 0.8, 1.0 );
 
-				
+
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}
 
 
 		</script>

+ 51 - 40
examples/webgl_particles_random.html
View File 

@@ -1,46 +1,47 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - webgl</title>
 
+		<title>three.js webgl - particles</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
 				background-color: #000000;
 
 				margin: 0px;
 
 				overflow: hidden;
 
-                font-family:Monospace;
 
-                font-size:13px;
 
-                text-align:center;
 
-                font-weight: bold;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+				font-weight: bold;
 
 				text-align:center;
 
 			}
 
 
 			a {
 
 				color:#0078ff;
 
 			}
 
-			
-            #info {
 
-				color:#fff;
 
-                position: absolute;
 
-                top: 0px; width: 100%;
 
-                padding: 5px;
 
-				z-index:100;
 
-				
-            }
 
-			
+
 
+			#info {
 
+				color: #fff;
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
+				z-index: 100;
 
+			}
 
+
 
 		</style>
 
 	</head>
 
 	<body>
 
-	
+
 
         <div id="info">
 
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particles example
 
 		</div>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.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;
 
@@ -51,7 +52,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -63,27 +64,27 @@
 
 
 				scene = new THREE.Scene();
 
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
 
-				
+
 
 				geometry = new THREE.Geometry();
 
-				
+
 
 				for ( i = 0; i < 4000; i++ ) {
 
 
 					vector = new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000 );
 
-					geometry.vertices.push( new THREE.Vertex( vector ) );					
-					
+					geometry.vertices.push( new THREE.Vertex( vector ) );
 
+
 
 				}
 
 
 				parameters = [ [ [1.0, 1.0, 1.0], 5 ], [ [0.95, 1, 1], 4 ], [ [0.90, 1, 1], 3 ], [ [0.85, 1, 1], 2 ], [ [0.80, 1, 1], 1 ] ];
 
 				//parameters = [ [ 0xff0000, 5 ], [ 0xff3300, 4 ], [ 0xff6600, 3 ], [ 0xff9900, 2 ], [ 0xffaa00, 1 ] ];
 
 				//parameters = [ [ 0xffffff, 5 ], [ 0xdddddd, 4 ], [ 0xaaaaaa, 3 ], [ 0x999999, 2 ], [ 0x777777, 1 ] ];
 
-				
+
 
 				for ( i = 0; i < parameters.length; i++ ) {
 
 
 					size  = parameters[i][1];
 
 					color = parameters[i][0];
 
-					
+
 
 					//materials[i] = new THREE.ParticleBasicMaterial( { color: color, size: size } );
 
-					
+
 
 					materials[i] = new THREE.ParticleBasicMaterial( { size: size } );
 
 					materials[i].color.setHSV( color[0], color[1], color[2] );
 
 
@@ -92,7 +93,7 @@
 
 					particles.rotation.y = Math.random() * 6;
 
 					particles.rotation.z = Math.random() * 6;
 
 					scene.addObject( particles );
 
-					
+
 
 				}
 
 
 				renderer = new THREE.WebGLRenderer();
 
@@ -107,14 +108,14 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				
+
 
 			}
 
 
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseY = event.clientY - windowHalfY;
 
-				
+
 
 			}
 
 
 			function onDocumentTouchStart( event ) {
 
@@ -125,7 +126,7 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-					
+
 
 				}
 
 			}
 
 
@@ -137,36 +138,46 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-					
+
 
 				}
 
-				
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
 			}
 
 
-			function loop() {
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.00005;
 
-				
+
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				for( i = 0; i < scene.objects.length; i++ ) {
 
-				
+
 
 					scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
 
-					
+
 
 				}
 
 
 				for( i = 0; i < materials.length; i++ ) {
 
-					
+
 
 					color = parameters[i][0];
 
-					
+
 
 					h = ( 360 * ( color[0] + time ) % 360 ) / 360;
 
 					materials[i].color.setHSV( h, color[1], color[2] );
 
-					
+
 
 				}
 
-				
+
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}

+ 50 - 39
examples/webgl_particles_sprites.html
View File 

@@ -1,47 +1,48 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - particles - sprites - webgl</title>
 
+		<title>three.js webgl - particles - sprites</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
 				background-color: #000000;
 
 				margin: 0px;
 
 				overflow: hidden;
 
-                font-family:Monospace;
 
-                font-size:13px;
 
-                text-align:center;
 
-                font-weight: bold;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+				font-weight: bold;
 
 				text-align:center;
 
 			}
 
 
 			a {
 
 				color:#0078ff;
 
 			}
 
-			
-            #info {
 
+
 
+			#info {
 
 				color:#fff;
 
-                position: absolute;
 
-                top: 0px; width: 100%;
 
-                padding: 5px;
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
 				z-index:100;
 
-				
-            }
 
-			
+			}
 
+
 
 		</style>
 
 	</head>
 
 	<body>
 
-	
+
 
         <div id="info">
 
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle sprites example -
 
 			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>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.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;
 
@@ -52,7 +53,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -64,31 +65,31 @@
 
 
 				scene = new THREE.Scene();
 
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0008 );
 
-				
+
 
 				geometry = new THREE.Geometry();
 
-				
+
 
 				sprite1 = ImageUtils.loadTexture( "textures/sprites/snowflake1.png" );
 
 				sprite2 = ImageUtils.loadTexture( "textures/sprites/snowflake2.png" );
 
 				sprite3 = ImageUtils.loadTexture( "textures/sprites/snowflake3.png" );
 
 				sprite4 = ImageUtils.loadTexture( "textures/sprites/snowflake4.png" );
 
 				sprite5 = ImageUtils.loadTexture( "textures/sprites/snowflake5.png" );
 
-				
+
 
 				for ( i = 0; i < 2000; i++ ) {
 
 
 					vector = new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000 );
 
-					geometry.vertices.push( new THREE.Vertex( vector ) );					
-					
+					geometry.vertices.push( new THREE.Vertex( vector ) );
 
+
 
 				}
 
 
-				parameters = [ [ [1.0, 0.2, 1.0], sprite2, 20 ], [ [0.95, 0.1, 1], sprite3, 15 ], [ [0.90, 0.05, 1], sprite1, 10 ], [ [0.85, 0, 0.8], sprite5, 8 ], [ [0.80, 0, 0.7], sprite4, 5 ],			
+				parameters = [ [ [1.0, 0.2, 1.0], sprite2, 20 ], [ [0.95, 0.1, 1], sprite3, 15 ], [ [0.90, 0.05, 1], sprite1, 10 ], [ [0.85, 0, 0.8], sprite5, 8 ], [ [0.80, 0, 0.7], sprite4, 5 ],
 
 							   ];
 
-				
+
 
 				for ( i = 0; i < parameters.length; i++ ) {
 
 
 					color  = parameters[i][0];
 
 					sprite = parameters[i][1];
 
 					size   = parameters[i][2];
 
-					
+
 
 					materials[i] = new THREE.ParticleBasicMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depth_test: false } );
 
 					materials[i].color.setHSV( color[0], color[1], color[2] );
 
 
@@ -97,7 +98,7 @@
 
 					particles.rotation.y = Math.random() * 6;
 
 					particles.rotation.z = Math.random() * 6;
 
 					scene.addObject( particles );
 
-					
+
 
 				}
 
 
 				renderer = new THREE.WebGLRenderer( { clearAlpha: 1 });
 
@@ -112,14 +113,14 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				
+
 
 			}
 
 
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseY = event.clientY - windowHalfY;
 
-				
+
 
 			}
 
 
 			function onDocumentTouchStart( event ) {
 
@@ -130,7 +131,7 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-					
+
 
 				}
 
 			}
 
 
@@ -142,36 +143,46 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-					
+
 
 				}
 
-				
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
 			}
 
 
-			function loop() {
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.00005;
 
-				
+
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				for( i = 0; i < scene.objects.length; i++ ) {
 
-				
+
 
 					scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
 
-					
+
 
 				}
 
 
 				for( i = 0; i < materials.length; i++ ) {
 
-					
+
 
 					color = parameters[i][0];
 
-					
+
 
 					h = ( 360 * ( color[0] + time ) % 360 ) / 360;
 
 					materials[i].color.setHSV( h, color[1], color[2] );
 
-					
+
 
 				}
 
-				
+
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
 			}

+ 154 - 148
examples/webgl_postprocessing.html
View File 

@@ -1,95 +1,101 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
-    <head>
 
-        <title>three.js - postprocessing - webgl</title>
 
-        <meta charset="utf-8">
 
-        <style type="text/css">
 
-            body {
 
-                color: #000;
 
-                font-family:Monospace;
 
-                font-size:13px;
 
-                text-align:center;
 
-                font-weight: bold;
 
-
 
-                background-color: #fff;
 
-                margin: 0px;
 
-                overflow: hidden;
 
-            }
 
-
 
-            #info {
 
-				color:#000;
 
-                position: absolute;
 
-                top: 0px; width: 100%;
 
-                padding: 5px;
 
-				
-            }
 
-
 
-            a { color: red; }
 
-
 
-        </style>
 
-    </head>
 
-    <body>
 
-
 
-        <div id="container"></div>
 
-        <div id="info">
 
+	<head>
 
+		<title>three.js webgl - postprocessing</title>
 
+		<meta charset="utf-8">
 
+		<style type="text/css">
 
+		    body {
 
+			color: #000;
 
+			font-family:Monospace;
 
+			font-size:13px;
 
+			text-align:center;
 
+			font-weight: bold;
 
+
 
+			background-color: #fff;
 
+			margin: 0px;
 
+			overflow: hidden;
 
+		    }
 
+
 
+		    #info {
 
+					color:#000;
 
+			position: absolute;
 
+			top: 0px; width: 100%;
 
+			padding: 5px;
 
+
 
+		    }
 
+
 
+		    a { color: red; }
 
+
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="container"></div>
 
+		<div id="info">
 
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl postprocessing example -
 
 			<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
 
 		</div>
 
 
-        <script type="text/javascript" src="js/Stats.js"></script>
 
-        <script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<!-- Time modulated procedural color fragment shader -->
 
-        <script id="fs-colors" type="x-shader/x-fragment">
 
+		<script id="fs-colors" type="x-shader/x-fragment">
 
 			varying vec2 vUv;
 
 			uniform float time;
 
-			
-            void main(void)
 
-            {
 
-                gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
 
-            }
 
-        </script>
 
+
 
+			void main(void) {
 
+
 
+				gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
 
+
 
+			}
 
+		</script>
 
 
 		<!-- Generic vertex shader -->
 
-        <script id="vs-generic" type="x-shader/x-vertex">
 
-            varying vec2 vUv;
 
+		<script id="vs-generic" type="x-shader/x-vertex">
 
+			varying vec2 vUv;
 
 
-            void main()
 
-            {
 
-               vUv = vec2( uv.x, 1.0 - uv.y );
 
-			   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
-           }
 
-        </script>
 
+			void main() {
 
 
+				vUv = vec2( uv.x, 1.0 - uv.y );
 
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
+
 
+			}
 
+		</script>
 
 
-        <script type="text/javascript">
 
+
 
+		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 
-            var container, stats;
 
+			var container, stats;
 
+
 
+			var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
 
 
-            var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
 
-			
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
-			
-            var rtTexture, materialColor, materialScreen, materialFilm, materialConvolution, blurx, blury, quadBG, quadScreen;
 
 
-            init();
 
-            setInterval( loop, 1000 / 60 );
 
+			var rtTexture, materialColor, materialScreen, materialFilm, materialConvolution, blurx, blury, quadBG, quadScreen;
 
+
 
+			var delta = 0.01;
 
 
-            function init() {
 
+			init();
 
+			animate();
 
 
-                container = document.getElementById( 'container' );
 
+			function init() {
 
 
-                cameraOrtho = new THREE.Camera();
 
+				container = document.getElementById( 'container' );
 
+
 
+				cameraOrtho = new THREE.Camera();
 
 				cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
 
-                cameraOrtho.position.z = 100;
 
+				cameraOrtho.position.z = 100;
 
 
 				cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				cameraPerspective.position.z = 900;
 
 
-                sceneModel = new THREE.Scene();
 
+				sceneModel = new THREE.Scene();
 
 				sceneScreen = new THREE.Scene();
 
 				sceneBG = new THREE.Scene();
 
 
@@ -100,108 +106,108 @@
 
 				directionalLight.position.normalize();
 
 				sceneModel.addLight( directionalLight );
 
 
-                rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
 
-                rtTexture2 = new THREE.RenderTarget( 256, 512, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
 
-                rtTexture3 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
 
+				rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
 
+				rtTexture2 = new THREE.RenderTarget( 256, 512, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
 
+				rtTexture3 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
 
 
-                materialColor = new THREE.MeshShaderMaterial( {
 
+				materialColor = new THREE.MeshShaderMaterial( {
 
 
-                    uniforms: { time: { type: "f", value: 0.0 } },
 
-                    vertex_shader: getText( 'vs-generic' ),
 
-                    fragment_shader: getText( 'fs-colors' ),
 
+					uniforms: { time: { type: "f", value: 0.0 } },
 
+					vertex_shader: getText( 'vs-generic' ),
 
+					fragment_shader: getText( 'fs-colors' ),
 
 					depth_test: false
 
-					
-                } );
 
+
 
+				} );
 
 
 				var screen_shader = ShaderUtils.lib["screen"];
 
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
 
-				
+
 
 				screen_uniforms["tDiffuse"].texture = rtTexture1;
 
 				screen_uniforms["opacity"].value = 0.4;
 
-				
-                materialScreen = new THREE.MeshShaderMaterial( {
 
 
-                    uniforms: screen_uniforms,
 
-                    vertex_shader: screen_shader.vertex_shader,
 
-                    fragment_shader: screen_shader.fragment_shader,
 
+				materialScreen = new THREE.MeshShaderMaterial( {
 
+
 
+					uniforms: screen_uniforms,
 
+					vertex_shader: screen_shader.vertex_shader,
 
+					fragment_shader: screen_shader.fragment_shader,
 
 					blending: THREE.AdditiveBlending
 
 
-                } );
 
+				} );
 
 
 				var film_shader = ShaderUtils.lib["film"];
 
 				var film_uniforms = Uniforms.clone( film_shader.uniforms );
 
-				
+
 
 				film_uniforms["tDiffuse"].texture = rtTexture1;
 
-				
-                materialFilm = new THREE.MeshShaderMaterial( {
 
 
-                    uniforms: film_uniforms,
 
-                    vertex_shader: film_shader.vertex_shader,
 
-                    fragment_shader: film_shader.fragment_shader
 
+				materialFilm = new THREE.MeshShaderMaterial( {
 
 
-                } );
 
+					uniforms: film_uniforms,
 
+					vertex_shader: film_shader.vertex_shader,
 
+					fragment_shader: film_shader.fragment_shader
 
 
+				} );
 
 
 				var increment = 0.001953125;
 
-				
+
 
 				blurx = new THREE.Vector2( increment, 0.0 ),
 
 				blury = new THREE.Vector2( 0.0, increment );
 
-				
+
 
 				var convolution_shader = ShaderUtils.lib["convolution"];
 
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
 
-				
+
 
 				convolution_uniforms["tDiffuse"].texture = rtTexture1;
 
 				convolution_uniforms["uImageIncrement"].value = blurx;
 
 				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
 
-				
-                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
 
+				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
 
 
-                } );
 
+				} );
 
 
 				var plane = new Plane( window.innerWidth, window.innerHeight );
 
-				
-                quadBG = new THREE.Mesh( plane, materialColor );
 
+
 
+				quadBG = new THREE.Mesh( plane, materialColor );
 
 				quadBG.position.z = -500;
 
-                sceneBG.addObject( quadBG );
 
+				sceneBG.addObject( quadBG );
 
 
 				loader = new THREE.Loader( true );
 
 				document.body.appendChild( loader.statusDomElement );
 
 				loader.loadAscii( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
 
-				
-                quadScreen = new THREE.Mesh( plane, materialConvolution );
 
+
 
+				quadScreen = new THREE.Mesh( plane, materialConvolution );
 
 				quadScreen.position.z = -100;
 
-                sceneScreen.addObject( quadScreen );
 
+				sceneScreen.addObject( quadScreen );
 
 
-                renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.autoClear = false;
 
-                container.appendChild( renderer.domElement );
 
-				
-                stats = new Stats();
 
-                stats.domElement.style.position = 'absolute';
 
-                stats.domElement.style.top = '0px';
 
-                //container.appendChild( stats.domElement );
 
+				container.appendChild( renderer.domElement );
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				//container.appendChild( stats.domElement );
 
 
-            }
 
+			}
 
 
 			function getText( id ) {
 
-				
+
 
 				return document.getElementById( id ).textContent;
 
+
 
 			}
 
-			
+
 
 			function createMesh( geometry, scene, scale ) {
 
 
 				geometry.computeTangents();
 
-				
+
 
 				var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
 
 
 				var shader = ShaderUtils.lib[ "normal" ];
 
 				var uniforms = Uniforms.clone( shader.uniforms );
 
- 
+
 
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 
 				uniforms[ "uNormalScale" ].value = - 0.75;
 
 
@@ -226,7 +232,7 @@
 
 
 				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
 
 				var mat2 = new THREE.MeshShaderMaterial( parameters );
 
-				
+
 
 				mesh = new THREE.Mesh( geometry, mat2 );
 
 				mesh.position.x = 0;
 
 				mesh.position.y = -50;
 
@@ -234,63 +240,66 @@
 
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 
 				mesh.updateMatrix();
 
 				scene.addObject( mesh );
 
-				
+
 
 				loader.statusDomElement.style.display = "none";
 
 
 			}
 
 
-			var delta = 0.01;
 
-			var start = 0;
 
-			
-            function loop() {
 
+			//
 
 
-				if ( ! start ) start = new Date().getTime();
 
-				var time = ( new Date().getTime() - start ) * 0.0004;
 
+			function animate() {
 
 
-				if ( mesh  ) {
 
-				
-					mesh.rotation.y = -time;
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var time = new Date().getTime() * 0.0004;
 
+
 
+				if ( mesh ) mesh.rotation.y = -time;
 
 
-				}
 
-				
 				if ( materialColor.uniforms.time.value > 1 || materialColor.uniforms.time.value < 0 ) {
 
-				
+
 
 					delta *= -1;
 
-					
+
 
 				}
 
-					
+
 
 				materialColor.uniforms.time.value += delta/2;
 
 				materialFilm.uniforms.time.value += delta;
 
-				
+
 
 				renderer.clear();
 
-				
+
 
 				// Render scene into texture
 
-				
-				// background 
-				
+
 
+				// background
 
+
 
 				renderer.render( sceneBG, cameraOrtho, rtTexture1 );
 
-				
+
 
 				// model
 
-				
-                renderer.render( sceneModel, cameraPerspective, rtTexture1 );
 
+
 
+				renderer.render( sceneModel, cameraPerspective, rtTexture1 );
 
 
 				// Render quad with blured scene into texture (convolution pass 1)
 
-				
+
 
 				quadScreen.materials = [ materialConvolution ];
 
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
 
 				materialConvolution.uniforms.uImageIncrement.value = blurx;
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
 
-				
+
 
 				// Render quad with blured scene into texture (convolution pass 2)
 
-				
+
 
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
 
 				materialConvolution.uniforms.uImageIncrement.value = blury;
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
 
-				
+
 
 				// Render original scene with superimposed blur into texture
 
-				
+
 
 				quadScreen.materials = [ materialScreen ];
 
-				
+
 
 				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
 
 				materialScreen.uniforms.opacity.value = 1.0;
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
 
@@ -301,12 +310,9 @@
 
 				quadScreen.materials = [ materialFilm ];
 
 				renderer.render( sceneScreen, cameraOrtho );
 
 
-                stats.update();
 
-
 
-            }			
-			
+			}
 
 
-        </script>
 
 
-    </body>
 
+		</script>
 
+	</body>
 
 </html>

+ 1 - 0
examples/webgl_postprocessing_dof.html
View File 

@@ -34,6 +34,7 @@
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
 		
 		<script type="text/javascript" src="js/ShaderExtras.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />

+ 41 - 43
examples/webgl_ribbons.html
View File 

@@ -1,17 +1,17 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - ribbons - webgl</title>
 
+		<title>three.js webgl - ribbons</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
 				background-color: #000000;
 
 				margin: 0px;
 
 				overflow: hidden;
 
-                font-family:Monospace;
 
-                font-size:13px;
 
-                text-align:center;
 
-                font-weight: bold;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+				font-weight: bold;
 
 				text-align:center;
 
 			}
 
 
@@ -19,23 +19,24 @@
 
 				color:#0078ff;
 
 			}
 
 
-            #info {
 
+			#info {
 
 				color:#fff;
 
-                position: absolute;
 
-                top: 0px; width: 100%;
 
-                padding: 5px;
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
 				z-index:100;
 
-
 
-            }
 
+			}
 
 		</style>
 
 	</head>
 
 
 	<body>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
-        <div id="info">
 
+		<div id="info">
 
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl ribbons example
 
 		</div>
 
 
@@ -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( {
 
-
 
-                    uniforms: screen_uniforms,
 
-                    vertex_shader: screen_shader.vertex_shader,
 
-                    fragment_shader: screen_shader.fragment_shader,
 
-					blending: THREE.AdditiveBlending
 
+				postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
 
 
-                } );
 
+					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() {
 
+			//
 
+
 
+			function animate() {
 
 
-				requestAnimationFrame( loop, renderer.domElement );
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.00005;
 
 
@@ -334,13 +337,8 @@
 
 
 				}
 
 
-				stats.update();
 
-
 
-
 
-
 
 			}
 
 
-
 
 		</script>
 
 	</body>
 
 </html>

+ 143 - 131
examples/webgl_rtt.html
View File 

@@ -1,112 +1,117 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
-    <head>
 
-        <title>three.js - render-to-texture - webgl</title>
 
-        <meta charset="utf-8">
 
-        <style type="text/css">
 
-            body {
 
-                color: #ffffff;
 
-                font-family:Monospace;
 
-                font-size:13px;
 
-                text-align:center;
 
-                font-weight: bold;
 
-
 
-                background-color: #000000;
 
-                margin: 0px;
 
-                overflow: hidden;
 
-            }
 
-
 
-            #info {
 
-                position: absolute;
 
-                top: 0px; width: 100%;
 
-                padding: 5px;
 
-            }
 
-
 
-            a {
 
-
 
-                color: #ffffff;
 
-            }
 
-
 
-        </style>
 
-    </head>
 
-    <body>
 
-
 
-        <div id="container"></div>
 
-        <div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> render-to-texture webgl example</div>
 
-
 
-        <script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
-        <script type="text/javascript" src="js/Stats.js"></script>
 
-
 
-        <script id="fragment_shader_screen" type="x-shader/x-fragment">
 
+	<head>
 
+		<title>three.js webgl - render-to-texture</title>
 
+		<meta charset="utf-8">
 
+		<style type="text/css">
 
+			body {
 
+				color: #ffffff;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+				font-weight: bold;
 
+				background-color: #000000;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
+			}
 
+
 
+			a {
 
+				color: #ffffff;
 
+			}
 
+
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="container"></div>
 
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> render-to-texture webgl example</div>
 
+
 
+		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
+		<script id="fragment_shader_screen" type="x-shader/x-fragment">
 
 			varying vec2 vUv;
 
 			uniform sampler2D tDiffuse;
 
-			
-            void main(void)
 
-            {
 
+
 
+			void main(void) {
 
+
 
 				//gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, 1.0 - vUv.y ) );
 
 				gl_FragColor = texture2D( tDiffuse, vUv );
 
-            }
 
-        </script>
 
 
-        <script id="fragment_shader_pass_1" type="x-shader/x-fragment">
 
+			}
 
+		</script>
 
+
 
+		<script id="fragment_shader_pass_1" type="x-shader/x-fragment">
 
 			varying vec2 vUv;
 
 			uniform float time;
 
-			
-            void main(void)
 
-            {
 
-                //gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
 
+
 
+			void main(void) {
 
+
 
+				//gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
 
 				float r = vUv.x;
 
 				if( vUv.y < 0.5 ) r = 0.0;
 
 				float g = vUv.y;
 
 				if( vUv.x < 0.5 ) g = 0.0;
 
-				
+
 
 				gl_FragColor = vec4( r, g, time, 1.0 );
 
-            }
 
-        </script>
 
 
-        <script id="vertex_shader" type="x-shader/x-vertex">
 
-            varying vec2 vUv;
 
+			}
 
+		</script>
 
+
 
+		<script id="vertex_shader" type="x-shader/x-vertex">
 
+			varying vec2 vUv;
 
+
 
+			void main() {
 
+
 
+				vUv = uv;
 
+				//gl_Position = vec4( position, 1.0 );
 
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
 
-            void main()
 
-            {
 
-               vUv = uv;
 
-               //gl_Position = vec4( position, 1.0 );
 
-			   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
-           }
 
-        </script>
 
+			}
 
+		</script>
 
 
 
-        <script type="text/javascript">
 
+		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
-            var container, stats;
 
 
-            var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
 
+			var container, stats;
 
+
 
+			var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
 
 
 			var mouseX = 0, mouseY = 0;
 
-			
+
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
-			
-            var rtTexture, material, quad;
 
 
-            init();
 
-            setInterval( loop, 1000 / 60 );
 
+			var rtTexture, material, quad;
 
 
-            function init() {
 
+			var delta = 0.01;
 
 
-                container = document.getElementById( 'container' );
 
+			init();
 
+			animate();
 
 
-                cameraRTT = new THREE.Camera();
 
+			function init() {
 
+
 
+				container = document.getElementById( 'container' );
 
+
 
+				cameraRTT = new THREE.Camera();
 
 				cameraRTT.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
 
-                cameraRTT.position.z = 100;
 
+				cameraRTT.position.z = 100;
 
 
 				camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 100;
 
 				camera.updateMatrix();
 
 
-                sceneRTT = new THREE.Scene();
 
+				sceneRTT = new THREE.Scene();
 
 				sceneScreen = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
@@ -126,76 +131,77 @@
 
 				light.position.normalize();
 
 				scene.addLight( light );
 
 
-                rtTexture = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
 
+				rtTexture = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
 
+
 
+				material = new THREE.MeshShaderMaterial( {
 
 
-                material = new THREE.MeshShaderMaterial( {
 
+					uniforms: { time: { type: "f", value: 0.0 } },
 
+					vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
 
+					fragment_shader: document.getElementById( 'fragment_shader_pass_1' ).textContent
 
 
-                    uniforms: { time: { type: "f", value: 0.0 } },
 
-                    vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
 
-                    fragment_shader: document.getElementById( 'fragment_shader_pass_1' ).textContent
 
+				} );
 
 
-                } );
 
+				var materialScreen = new THREE.MeshShaderMaterial( {
 
 
-                var materialScreen = new THREE.MeshShaderMaterial( {
 
+					uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture } },
 
+					vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
 
+					fragment_shader: document.getElementById( 'fragment_shader_screen' ).textContent
 
 
-                    uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture } },
 
-                    vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
 
-                    fragment_shader: document.getElementById( 'fragment_shader_screen' ).textContent
 
+				} );
 
 
-                } );
 
+				// var mt = new THREE.MeshBasicMaterial( { color:0xffffff, map: ImageUtils.loadTexture( "textures/land_ocean_ice_cloud_2048.jpg" ) } );
 
 
-				//var mt = new THREE.MeshBasicMaterial( { color:0xffffff, map: ImageUtils.loadTexture( "textures/land_ocean_ice_cloud_2048.jpg" ) } );
 
-				
 				var plane = new Plane( window.innerWidth, window.innerHeight );
 
-				
-                quad = new THREE.Mesh( plane, material );
 
+
 
+				quad = new THREE.Mesh( plane, material );
 
 				quad.position.z = -100;
 
-                sceneRTT.addObject( quad );
 
+				sceneRTT.addObject( quad );
 
 
 				var loader = new THREE.Loader();
 
 				loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createMesh( geometry, sceneRTT ) } } );
 
 
-                quad = new THREE.Mesh( plane, materialScreen );
 
+				quad = new THREE.Mesh( plane, materialScreen );
 
 				quad.position.z = -100;
 
-                sceneScreen.addObject( quad );
 
+				sceneScreen.addObject( quad );
 
 
 				var n = 5,
 
 					geometry = new Sphere( 10, 64, 32 ),
 
 					material2 = new THREE.MeshLambertMaterial( { color:0xffffff, map: rtTexture } );
 
 					//material2 = new THREE.MeshBasicMaterial( { color:0xffffff, map: rtTexture } );
 
-				
+
 
 				for( var j = 0; j < n; j++ ) {
 
+
 
 					for( var i = 0; i < n; i++ ) {
 
-					
+
 
 						mesh = new THREE.Mesh( geometry, material2 );
 
 						mesh.position.x = ( i - (n-1)/2 ) * 20;
 
 						mesh.position.y = ( j - (n-1)/2 ) * 20;
 
 						mesh.position.z = 0;
 
 						mesh.rotation.y = 1.57;
 
 						scene.addObject( mesh );
 
-						
+
 
 					}
 
 				}
 
 
-                renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.autoClear = false;
 
-                container.appendChild( renderer.domElement );
 
-				
-                stats = new Stats();
 
-                stats.domElement.style.position = 'absolute';
 
-                stats.domElement.style.top = '0px';
 
-                container.appendChild( stats.domElement );
 
-				
+				container.appendChild( renderer.domElement );
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				container.appendChild( stats.domElement );
 
+
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
-            }
 
+			}
 
 
 			function createMesh( geometry, xscene ) {
 
 
 				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular:0xffaa00, shininess:5 } ),
 
 					mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular:0xff2200, shininess:5 } );
 
-				
+
 
 				zmesh1 = new THREE.Mesh( geometry, mat1 );
 
 				zmesh1.position.x = 0;
 
 				zmesh1.position.y = 0;
 
@@ -219,17 +225,26 @@
 
 
 			}
 
 
-			var delta = 0.01;
 
-			
-            function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0015;
 
-				
+
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
 				if ( zmesh1 && zmesh2 ) {
 
-				
+
 
 					zmesh1.rotation.x = 1.57;
 
 					zmesh1.rotation.z = time;
 
 
@@ -237,41 +252,38 @@
 
 					zmesh2.rotation.y = -time;
 
 
 				}
 
-				
+
 
 				if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
 
-				
+
 
 					delta *= -1;
 
-					
+
 
 				}
 
-					
+
 
 				material.uniforms.time.value += delta;
 
-				
+
 
 				renderer.clear();
 
-				
+
 
 				// Render first scene into texture
 
-				
-                renderer.render( sceneRTT, cameraRTT, rtTexture );
 
-				
-				
+
 
+				renderer.render( sceneRTT, cameraRTT, rtTexture );
 
+
 
 				// Render full screen quad with generated texture
 
 				// (disable depth writing so that it stays in the background)
 
-				
+
 
 				renderer.context.depthMask( 0 );
 
 				renderer.render( sceneScreen, cameraRTT );
 
 				//renderer.render( sceneRTT, cameraRTT );
 
 				renderer.context.depthMask( 1 );
 
-				
-                // Render second scene to screen
 
+
 
+				// Render second scene to screen
 
 				// (using first scene as regular texture)
 
-				
-                renderer.render( scene, camera );
 
-				
 
-                stats.update();
 
+				renderer.render( scene, camera );
 
 
-            }
 
+				stats.update();
 
 
-        </script>
 
+			}
 
 
-    </body>
 
-</html>
 
+		</script>
 
+	</body>
 
+</html>

+ 16 - 6
examples/webgl_scene_test.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - io - scene loader - webgl</title>
 
+		<title>three.js webgl - io - scene loader</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -150,6 +150,8 @@
 
 		<pre id="log"></pre>
 
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
+
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 
@@ -174,6 +176,7 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 
+			animate();
 
 
 			function $( id ) {
 
 
@@ -237,8 +240,6 @@
 
 
 				$( "start" ).addEventListener( 'click', onStartClick, false );
 
 
-				setInterval( loop, 1000/60 );
 
-
 
 				var callback_progress = function( progress, result ) {
 
 
 					var bar = 250,
 
@@ -379,15 +380,24 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .001;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .001;
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 			function log( text ) {

+ 41 - 30
examples/webgl_shader.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - shaders [Monjori] - webgl</title>
 
+		<title>three.js webgl - materials - shaders [Monjori]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -35,12 +35,13 @@
 
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div> 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
 		<script id="vertex_shader" type="x-shader/x-vertex">
 
 			void main()
 
 			{
 
@@ -58,34 +59,34 @@
 
 
 			void main(void)
 
 			{
 
-			    vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
 
-			    float a = time*40.0;
 
-			    float d,e,f,g=1.0/40.0,h,i,r,q;
 
-			    e=400.0*(p.x*0.5+0.5);
 
-			    f=400.0*(p.y*0.5+0.5);
 
-			    i=200.0+sin(e*g+a/150.0)*20.0;
 
-			    d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
 
-			    r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
 
-			    q=f/r;
 
-			    e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
 
-			    d=sin(e*g)*176.0+sin(e*g)*164.0+r;
 
-			    h=((f+d)+a/2.0)*g;
 
-			    i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
 
-			    h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
 
-			    h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
 
-			    i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
 
-			    i=mod(i/5.6,256.0)/64.0;
 
-			    if(i<0.0) i+=4.0;
 
-			    if(i>=2.0) i=4.0-i;
 
-			    d=r/350.0;
 
-			    d+=sin(d*d*8.0)*0.52;
 
-			    f=(sin(a*g)+1.0)/2.0;
 
-			    gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
 
+				vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
 
+				float a = time*40.0;
 
+				float d,e,f,g=1.0/40.0,h,i,r,q;
 
+				e=400.0*(p.x*0.5+0.5);
 
+				f=400.0*(p.y*0.5+0.5);
 
+				i=200.0+sin(e*g+a/150.0)*20.0;
 
+				d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
 
+				r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
 
+				q=f/r;
 
+				e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
 
+				d=sin(e*g)*176.0+sin(e*g)*164.0+r;
 
+				h=((f+d)+a/2.0)*g;
 
+				i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
 
+				h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
 
+				h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
 
+				i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
 
+				i=mod(i/5.6,256.0)/64.0;
 
+				if(i<0.0) i+=4.0;
 
+				if(i>=2.0) i=4.0-i;
 
+				d=r/350.0;
 
+				d+=sin(d*d*8.0)*0.52;
 
+				f=(sin(a*g)+1.0)/2.0;
 
+				gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
 
 			}
 
 		</script>
 
 
 		<script type="text/javascript">
 
-		
+
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 
 			var container, stats;
 
@@ -101,7 +102,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -150,12 +151,22 @@
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				uniforms.time.value += 0.05;
 
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
 
 			}

+ 73 - 62
examples/webgl_shader2.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - materials - shaders [custom] - webgl</title>
 
+		<title>three.js webgl - materials - shaders [custom]</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -32,12 +32,13 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="container"></div> 
-		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div> 
+		<div id="container"></div>
 
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script id="fragment_shader4" type="x-shader/x-fragment">
 
 
@@ -45,11 +46,11 @@
 
 			uniform vec2 resolution;
 
 
 			varying vec2 vUv;
 
-			
+
 
 			void main( void ) {
 
 
 				vec2 position = -1.0 + 2.0 * vUv;
 
-				
+
 
 				float red = abs( sin( position.x * position.y + time / 5.0 ) );
 
 				float green = abs( sin( position.x * position.y + time / 4.0 ) );
 
 				float blue = abs( sin( position.x * position.y + time / 3.0 ) );
 
@@ -58,18 +59,18 @@
 
 			}
 
 
 		</script>
 
-		
+
 
 		<script id="fragment_shader3" type="x-shader/x-fragment">
 
 
 			uniform float time;
 
 			uniform vec2 resolution;
 
-			
+
 
 			varying vec2 vUv;
 
-			
+
 
 			void main( void ) {
 
 
 				vec2 position = vUv;
 
-				
+
 
 				float color = 0.0;
 
 				color += sin( position.x * cos( time / 15.0 ) * 80.0 ) + cos( position.y * cos( time / 15.0 ) * 10.0 );
 
 				color += sin( position.y * sin( time / 10.0 ) * 40.0 ) + cos( position.x * sin( time / 25.0 ) * 40.0 );
 
@@ -83,18 +84,18 @@
 
 		</script>
 
 
 		<script id="fragment_shader2" type="x-shader/x-fragment">
 
-		
+
 
 			uniform float time;
 
 			uniform vec2 resolution;
 
 
 			uniform sampler2D texture;
 
-			
+
 
 			varying vec2 vUv;
 
-			
+
 
 			void main( void ) {
 
 
 				vec2 position = -1.0 + 2.0 * vUv;
 
-				
+
 
 				float a = atan( position.y, position.x );
 
 				float r = sqrt( dot( position, position ) );
 
 
@@ -120,60 +121,60 @@
 
 			uniform float time;
 
 
 			varying vec2 vUv;
 
-			
+
 
 			void main(void)
 
 			{
 
-			    
+
 
 				vec2 p = -1.0 + 2.0 * vUv;
 
-			    float a = time*40.0;
 
-			    float d,e,f,g=1.0/40.0,h,i,r,q;
 
-				
-			    e=400.0*(p.x*0.5+0.5);
 
-			    f=400.0*(p.y*0.5+0.5);
 
-			    i=200.0+sin(e*g+a/150.0)*20.0;
 
-			    d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
 
-			    r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
 
-			    q=f/r;
 
-			    e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
 
-			    d=sin(e*g)*176.0+sin(e*g)*164.0+r;
 
-			    h=((f+d)+a/2.0)*g;
 
-			    i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
 
-			    h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
 
-			    h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
 
-			    i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
 
-			    i=mod(i/5.6,256.0)/64.0;
 
-			    if(i<0.0) i+=4.0;
 
-			    if(i>=2.0) i=4.0-i;
 
-			    d=r/350.0;
 
-			    d+=sin(d*d*8.0)*0.52;
 
-			    f=(sin(a*g)+1.0)/2.0;
 
-			    gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
 
-				
+				float a = time*40.0;
 
+				float d,e,f,g=1.0/40.0,h,i,r,q;
 
+
 
+				e=400.0*(p.x*0.5+0.5);
 
+				f=400.0*(p.y*0.5+0.5);
 
+				i=200.0+sin(e*g+a/150.0)*20.0;
 
+				d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
 
+				r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
 
+				q=f/r;
 
+				e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
 
+				d=sin(e*g)*176.0+sin(e*g)*164.0+r;
 
+				h=((f+d)+a/2.0)*g;
 
+				i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
 
+				h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
 
+				h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
 
+				i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
 
+				i=mod(i/5.6,256.0)/64.0;
 
+				if(i<0.0) i+=4.0;
 
+				if(i>=2.0) i=4.0-i;
 
+				d=r/350.0;
 
+				d+=sin(d*d*8.0)*0.52;
 
+				f=(sin(a*g)+1.0)/2.0;
 
+				gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
 
+
 
 			}
 
-			
+
 
 		</script>
 
 
 		<script id="vertex_shader" type="x-shader/x-vertex">
 
-		
+
 
 			varying vec2 vUv;
 
-			
+
 
 			void main()
 
 			{
 
 				vUv = uv;
 
 				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
 				gl_Position = projectionMatrix * mvPosition;
 
 			}
 
-			
+
 
 		</script>
 
 
 		<script type="text/javascript">
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var container, stats;
 
 
 			var start_time;
 
-			
+
 
 			var camera, scene, renderer;
 
 
 			var uniforms1, uniforms2, material1, material2, mesh, meshes = [];
 
@@ -185,7 +186,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 			function init() {
 
 
@@ -197,7 +198,7 @@
 
 				scene = new THREE.Scene();
 
 
 				start_time = new Date().getTime();
 
-				
+
 
 				uniforms1 = {
 
 					time: { type: "f", value: 1.0 },
 
 					resolution: { type: "v2", value: new THREE.Vector2() }
 
@@ -208,14 +209,14 @@
 
 					resolution: { type: "v2", value: new THREE.Vector2() },
 
 					texture: { type: "t", value: 0, texture: ImageUtils.loadTexture( "textures/disturb.jpg" ) }
 
 				};
 
-				
+
 
 				uniforms2.texture.texture.wrap_s = uniforms2.texture.texture.wrap_t = THREE.Repeat;
 
 
-				var size = 0.75, mlib = [], 
+				var size = 0.75, mlib = [],
 
 					params = [ [ 'fragment_shader1', uniforms1 ],  [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
 
-				
+
 
 				for( var i = 0; i < params.length; i++ ) {
 
-				
+
 
 					material = new THREE.MeshShaderMaterial( {
 
 
 						uniforms: params[ i ][ 1 ],
 
@@ -223,18 +224,18 @@
 
 						fragment_shader: document.getElementById( params[ i ][ 0 ] ).textContent
 
 
 						} );
 
-						
+
 
 					mlib[ i ] = material;
 
 
 					mesh = new THREE.Mesh( new Cube( size, size, size, 1, 1, [ mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ] ], false ), new THREE.MeshFaceMaterial() );
 
 					mesh.position.x = i - (params.length - 1)/2;
 
 					mesh.position.y = i % 2 - 0.5;
 
 					scene.addObject( mesh );
 
-					
+
 
 					meshes[ i ] = mesh;
 
 
 				}
 
-				
+
 
 				renderer = new THREE.WebGLRenderer();
 
 				container.appendChild( renderer.domElement );
 
 
@@ -253,28 +254,38 @@
 
 
 				uniforms1.resolution.value.x = window.innerWidth;
 
 				uniforms1.resolution.value.y = window.innerHeight;
 
-				
+
 
 				uniforms2.resolution.value.x = window.innerWidth;
 
 				uniforms2.resolution.value.y = window.innerHeight;
 
-				
+
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 			}
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 				uniforms1.time.value += 0.05;
 
 				uniforms2.time.value = ( new Date().getTime() - start_time ) / 1000;
 
-				
+
 
 				for( var i = 0; i < meshes.length; ++i ) {
 
-					
+
 
 					meshes[ i ].rotation.y += 0.01 * ( i % 2 ? 1 : -1 );
 
 					meshes[ i ].rotation.x += 0.01 * ( i % 2 ? -1 : 1 );
 
-					
+
 
 				}
 
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
 
 			}

+ 0 - 16
src/extras/MiscUtils.js
View File 

@@ -1,16 +0,0 @@
 
-/**
 
- * @author greggman / http://greggman.com/
 
- */
 
- 
-if (!window.requestAnimationFrame) {
 
-  window.requestAnimationFrame = (function() {
 
-    return window.requestAnimationFrame ||
 
-           window.webkitRequestAnimationFrame ||
 
-           window.mozRequestAnimationFrame ||
 
-           window.oRequestAnimationFrame ||
 
-           window.msRequestAnimationFrame ||
 
-           function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
 
-             window.setTimeout(callback, 1000/60);
 
-           };
 
-  })();
 
-};

+ 2 - 0
src/materials/Texture.js
View File 

@@ -6,6 +6,8 @@
 
 
 THREE.Texture = function ( image, mapping, wrap_s, wrap_t, mag_filter, min_filter ) {
 
 
+	if ( image.getContext ) image.loaded = true;
 
+
 
 	this.image = image;
 
 
 	this.mapping = mapping !== undefined ? mapping : new THREE.UVMapping();

+ 1 - 2
utils/build.py
View File 

@@ -82,7 +82,6 @@ EXTRAS_FILES = [
 
 'extras/Detector.js',
 
 'extras/GeometryUtils.js',
 
 'extras/ImageUtils.js',
 
-'extras/MiscUtils.js',
 
 'extras/SceneUtils.js',
 
 'extras/ShaderUtils.js',
 
 'extras/primitives/Cube.js',
 
@@ -396,7 +395,7 @@ def main(argv=None):
 
 	debug = args.debug
 
 
 	config = [
 
-	['Three', 	  	'includes_common', COMMON_FILES, args.common],
 
+	['Three', 	'includes_common', COMMON_FILES, args.common],
 
 	['ThreeCanvas', 'includes_canvas', CANVAS_FILES, args.canvas],
 
 	['ThreeWebGL',  'includes_webgl',  WEBGL_FILES,  args.webgl],
 
 	['ThreeSVG', 	'includes_svg',    SVG_FILES,    args.svg],