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

+ 17 - 8
examples/canvas_geometry_birds.html
View File 

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

+ 3 - 3
examples/canvas_geometry_cube.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - geometry - cube</title>
 
+		<title>three.js canvas - geometry - cube</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
 		<style type="text/css">
 
@@ -171,8 +171,8 @@
 
 
 
 			function render() {
 
 			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>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - geometry - earth</title>
 
+		<title>three.js canvas - geometry - earth</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -33,14 +33,14 @@
 
 		<div id="container"></div> 
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</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="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/ImageUtils.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/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.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">
 
 		<script type="text/javascript">
 
 
 
 			var container, stats;
 
 			var container, stats;
 
@@ -54,10 +54,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
-
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 
 			function init() {
 
 			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.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
@@ -106,7 +115,6 @@
 
 				mesh.rotation.y -= 0.005;
 
 				mesh.rotation.y -= 0.005;
 
 
 
 				renderer.render( scene, camera );
 
 				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>
 
 		<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="../build/Three.js"></script>
 
-
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">

+ 34 - 24
examples/canvas_geometry_terrain.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - geometry - terrain</title>
 
+		<title>three.js canvas - geometry - terrain</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -33,12 +33,14 @@
 
 		<div id="container"><br /><br /><br /><br /><br />Generating...</div> 
 		<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> 
 		<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="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.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">
 
 		<script type="text/javascript">
 
 
 
 			var container, stats;
 
 			var container, stats;
 
@@ -53,10 +55,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
-
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 
 			function init() {
 
 			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 ) {
 
 			function generateHeight( width, height ) {
 
 
 
 				var data = Float32Array ? new Float32Array() : [], perlin = new ImprovedNoise(),
 
 				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>
 
 		</script>

+ 18 - 6
examples/canvas_interactive_cubes.html
View File 

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

+ 17 - 5
examples/canvas_interactive_cubes_tween.html
View File 

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

+ 17 - 6
examples/canvas_interactive_voxelpainter.html
View File 

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

+ 18 - 6
examples/canvas_lights_pointlights.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - point light</title>
 
+		<title>three.js canvas - point light</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			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>
 
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 
 		</div>
 
 		</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">
 
 		<script type="text/javascript">
 
 
 
@@ -49,7 +51,7 @@
 
 			mesh;
 
 			mesh;
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -93,7 +95,17 @@
 
 
 
 			}
 
 			}
 
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 
 				var time = new Date().getTime() * 0.0005;
 
 				var time = new Date().getTime() * 0.0005;
 
 
 
@@ -123,7 +135,7 @@
 
 				light3.position.y = particle3.position.y;
 
 				light3.position.y = particle3.position.y;
 
 				light3.position.z = particle3.position.z;
 
 				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>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - point light</title>
 
+		<title>three.js canvas - point light smooth</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			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>
 
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 
 		</div>
 
 		</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">
 
 		<script type="text/javascript">
 
 
 
@@ -49,7 +51,7 @@
 
 			geometry, mesh;
 
 			geometry, mesh;
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -96,7 +98,17 @@
 
 
 
 			}
 
 			}
 
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 
 				var time = new Date().getTime() * 0.0005;
 
 				var time = new Date().getTime() * 0.0005;
 
 
 
@@ -126,7 +138,7 @@
 
 				light3.position.y = particle3.position.y;
 
 				light3.position.y = particle3.position.y;
 
 				light3.position.z = particle3.position.z;
 
 				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>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - particles - floor</title>
 
+		<title>three.js canvas - lines - random</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
 		<style type="text/css">
 
@@ -18,7 +18,9 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<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">
 
 		<script type="text/javascript">
 
 
 
@@ -31,12 +33,10 @@
 
 			AMOUNTX = 10,
 
 			AMOUNTX = 10,
 
 			AMOUNTY = 10,
 
 			AMOUNTY = 10,
 
 
 
-			camera, scene, renderer,
 
-
 
-			stats;
 
+			camera, scene, renderer;
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -80,13 +80,6 @@
 
 				var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
 
 				var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
 
 				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( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
@@ -108,7 +101,9 @@
 
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
+
 
 				}
 
 				}
 
+
 
 			}
 
 			}
 
 
 
 			function onDocumentTouchMove( event ) {
 
 			function onDocumentTouchMove( event ) {
 
@@ -119,20 +114,28 @@
 
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 					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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
-				camera.updateMatrix();
 
 
 
-				renderer.render(scene, camera);
 
+				renderer.render( scene, camera );
 
 
 
-				// stats.update();
 
 			}
 
 			}
 
 
 
 		</script>
 
 		</script>

+ 22 - 19
examples/canvas_lines_sphere.html
View File 

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

+ 13 - 6
examples/canvas_materials.html
View File 

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

+ 17 - 11
examples/canvas_materials_depth.html
View File 

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

+ 16 - 5
examples/canvas_materials_normal.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - normal material</title>
 
+		<title>three.js canvas - normal material</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -41,13 +41,15 @@
 
 		<script type="text/javascript" src="../build/Three.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="obj/WaltHead.js"></script>
 
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
 			var camera, scene, renderer,
 
 			var camera, scene, renderer,
 
 			object;
 
 			object;
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -64,20 +66,29 @@
 
 				scene.addObject( object );
 
 				scene.addObject( object );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
-				//renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 			}
 
 			}
 
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 
 				var time = new Date().getTime() * 0.0005;
 
 				var time = new Date().getTime() * 0.0005;
 
 
 
 				object.rotation.x -= 0.005;
 
 				object.rotation.x -= 0.005;
 
 				object.rotation.y -= 0.01;
 
 				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>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - spherical reflection</title>
 
+		<title>three.js canvas - spherical reflection</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -42,6 +42,8 @@
 
 
 
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
+
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
 			var camera, scene, renderer,
 
 			var camera, scene, renderer,
 
@@ -50,7 +52,7 @@
 
 			geometry, mesh;
 
 			geometry, mesh;
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -74,13 +76,23 @@
 
 
 
 			}
 
 			}
 
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 
 				var time = new Date().getTime() * 0.0005;
 
 				var time = new Date().getTime() * 0.0005;
 
 
 
 				mesh.rotation.y -= 0.01;
 
 				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>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - materials - video</title>
 
+		<title>three.js canvas - materials - video</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
 		<style type="text/css">
 
@@ -15,11 +15,12 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-
 
 		<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/Plane.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">
 
 		<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.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 
 			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
 
 			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
 
@@ -44,12 +45,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
-
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -148,6 +145,8 @@
 
 				stats.domElement.style.top = '0px';
 
 				stats.domElement.style.top = '0px';
 
 				container.appendChild( stats.domElement );
 
 				container.appendChild( stats.domElement );
 
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+
 
 			}
 
 			}
 
 
 
 			function onDocumentMouseMove(event) {
 
 			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.x += ( mouseX - camera.position.x ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
@@ -172,7 +182,6 @@
 
 				textureReflectionContext.fillRect( 0, 0, 480, 204 );
 
 				textureReflectionContext.fillRect( 0, 0, 480, 204 );
 
 
 
 				renderer.render( scene, camera );
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
 
 
 			}
 
 			}

+ 14 - 4
examples/canvas_particles_floor.html
View File 

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

+ 15 - 6
examples/canvas_particles_random.html
View File 

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

+ 21 - 8
examples/canvas_particles_sprites.html
View File 

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

+ 14 - 5
examples/canvas_particles_waves.html
View File 

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

+ 14 - 25
examples/canvas_performance.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - geometry - sphere</title>
 
+		<title>three.js canvas - performance</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -16,7 +16,7 @@
 
 
 
 		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
 
 		<!-- <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/Color.js"></script>
 
 		<script type="text/javascript" src="../src/core/Vector2.js"></script>
 
 		<script type="text/javascript" src="../src/core/Vector2.js"></script>
 
 		<script type="text/javascript" src="../src/core/Vector3.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="../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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -103,27 +104,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
 			init();
 
 			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() {
 
 			function init() {
 
 
 
@@ -203,11 +184,19 @@
 
 
 
 			//
 
 			//
 
 
 
-			function loop() {
 
+			function animate() {
 
 
 
-				renderer.render( scene, camera );
 
+				requestAnimationFrame( animate );
 
 
 
+				render();
 
 				stats.update();
 
 				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				renderer.render( scene, camera );
 
+
 
 			}
 
 			}
 
 
 
 		</script>
 
 		</script>

+ 13 - 5
examples/canvas_sandbox.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - geometry - sphere</title>
 
+		<title>three.js canvas - sandbox</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -83,6 +83,7 @@
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.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="../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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -114,7 +115,7 @@
 
 			var debugContext;
 
 			var debugContext;
 
 
 
 			init();
 
 			init();
 
-			setInterval( render, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -259,6 +260,15 @@
 
 
 
 			//
 
 			//
 
 
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
 			function render() {
 
 			function render() {
 
 
 
 				if ( moveForward ) camera.position.z -= 5;
 
 				if ( moveForward ) camera.position.z -= 5;
 
@@ -313,9 +323,7 @@
 
 				debugContext.closePath();
 
 				debugContext.closePath();
 
 				debugContext.stroke();
 
 				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>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - lights - point + directional - webgl</title>
 
+		<title>three.js misc - lights - point + directional</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<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/objects/MarchingCubes.js"></script>
 
 		<script type="text/javascript" src="../src/extras/io/Loader.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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -144,18 +144,15 @@
 
 			var bcanvas = document.getElementById( 'rcanvas' );
 
 			var bcanvas = document.getElementById( 'rcanvas' );
 
 			var bwebgl = document.getElementById( 'rwebgl' );
 
 			var bwebgl = document.getElementById( 'rwebgl' );
 
 
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 
 			init();
 
 			init();
 
-
 
-			loop();
 
+			animate();
 
 
 
 			//render_canvas = !has_gl;
 
 			//render_canvas = !has_gl;
 
 			bwebgl.style.display = has_gl ? 'inline' : 'none';
 
 			bwebgl.style.display = has_gl ? 'inline' : 'none';
 
 			bcanvas.className = render_canvas ? 'button' : 'button inactive';
 
 			bcanvas.className = render_canvas ? 'button' : 'button inactive';
 
 
 
-			setInterval(loop, 1000/60);
 
-
 
 			function init() {
 
 			function init() {
 
 
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
@@ -180,8 +177,7 @@
 
 					mesh.position.z = 500 * ( Math.random() - 0.5 );
 
 					mesh.position.z = 500 * ( Math.random() - 0.5 );
 
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
 
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
 
 					mesh.overdraw = true;
 
 					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.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
 
 				lightMesh.position = pointLight.position;
 
 				lightMesh.position = pointLight.position;
 
 				lightMesh.overdraw = true;
 
 				lightMesh.overdraw = true;
 
-				lightMesh.updateMatrix();
 
 				scene.addObject(lightMesh);
 
 				scene.addObject(lightMesh);
 
 
 
 
 
@@ -270,24 +265,25 @@
 
 
 
 			}
 
 			}
 
 
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
 			var r = 0, counter = 0;
 
 			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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				camera.updateMatrix();
 
-
 
 
 
 				for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
 
 				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].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;
 
 				r += 0.1;
 
 
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
 
-				stats.update();
 
-
 
 			}
 
 			}
 
 
 
 			function log(text) {
 
 			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/Sphere.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -80,15 +81,12 @@
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 
 			init();
 
 			init();
 
-
 
-			loop();
 
+			animate();
 
 
 
 			//render_canvas = !has_gl;
 
 			//render_canvas = !has_gl;
 
 			bwebgl.style.display = has_gl ? "inline" : "none";
 
 			bwebgl.style.display = has_gl ? "inline" : "none";
 
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 
 
 
-			setInterval(loop, 1000/60);
 
-
 
 			function init() {
 
 			function init() {
 
 
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
@@ -167,7 +165,7 @@
 
 
 
 				var loader = new THREE.Loader(),
 
 				var loader = new THREE.Loader(),
 
 					callback = function( geometry ) { createScene( geometry) };
 
 					callback = function( geometry ) { createScene( geometry) };
 
-				
+
 
 				loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callback } );
 
 				loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callback } );
 
 				//loader.loadBinary( { model: "obj/female02/Female02_bin.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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -293,8 +302,6 @@
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
 
-				stats.update();
 
-
 
 			}
 
 			}
 
 
 
 			function log(text) {
 
 			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/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Cylinder.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/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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
-			window.onload = init;
 
-			
 			var SCREEN_WIDTH = window.innerWidth / 3;
 
 			var SCREEN_WIDTH = window.innerWidth / 3;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
 			var AMOUNT = 100;
 
 			var AMOUNT = 100;
 
@@ -111,7 +109,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+			init();
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -234,8 +233,8 @@
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.top = '0px';
 
 				stats.domElement.style.top = '0px';
 
 				container.appendChild( stats.domElement );
 
 				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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -266,8 +274,6 @@
 
 				svgRenderer.render( scene, camera );
 
 				svgRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 
 
-				stats.update();
 
-
 
 			}
 
 			}
 
 
 
 		</script>
 
 		</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/ImageUtils.js"></script>
 
 		<script type="text/javascript" src="../src/extras/ShaderUtils.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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -118,12 +119,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
 			init();
 
 			init();
 
-			// loop();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -212,6 +209,8 @@
 
 
 
 				}
 
 				}
 
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+
 
 			}
 
 			}
 
 
 
 			function generateTexture( r, g, b ) {
 
 			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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
 
 				renderer.render( scene, camera );
 
 				renderer.render( scene, camera );
 
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 			}
 
 
 
 			function log( text ) {
 
 			function log( text ) {

+ 33 - 26
examples/webgl_geometry_blenderexport_colors.html
View File 

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

+ 30 - 20
examples/webgl_geometry_colors.html
View File 

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

+ 39 - 32
examples/webgl_geometry_dynamic.html
View File 

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

+ 65 - 56
examples/webgl_geometry_large_mesh.html
View File 

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

+ 22 - 15
examples/webgl_geometry_minecraft.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - geometry - minecraft - webgl</title>
 
+		<title>three.js webgl - geometry - minecraft</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -40,25 +40,24 @@
 
 		<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
 
 		<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>
 
 		<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="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/GeometryUtils.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/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.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">
 
 		<script type="text/javascript">
 
 
 
 			if ( ! THREE.Detector.webgl ) {
 
 			if ( ! THREE.Detector.webgl ) {
 
-				
+
 
 				THREE.Detector.addGetWebGLMessage();
 
 				THREE.Detector.addGetWebGLMessage();
 
 				document.getElementById( 'container' ).innerHTML = "";
 
 				document.getElementById( 'container' ).innerHTML = "";
 
-				
+
 
 			}
 
 			}
 
-			
-			window.onload = init;
 
 
 
 			var container, stats;
 
 			var container, stats;
 
 
 
@@ -79,6 +78,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
+			init();
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -187,8 +188,6 @@
 
 
 
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
 				document.addEventListener( 'keyup', onDocumentKeyUp, 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 ( moveForward ) camera.translateZ( - 15 );
 
 				if ( moveBackward ) 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;
 
 				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
 
 
 
 				renderer.render(scene, camera);
 
 				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>
 
 			<button id="baot">texture + ao</button>
 
 		</div>
 
 		</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="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/GeometryUtils.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/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.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">
 
 		<script type="text/javascript">
 
 
 
 			if ( ! THREE.Detector.webgl ) {
 
 			if ( ! THREE.Detector.webgl ) {
 
-				
+
 
 				THREE.Detector.addGetWebGLMessage();
 
 				THREE.Detector.addGetWebGLMessage();
 
 				document.getElementById( 'container' ).innerHTML = "";
 
 				document.getElementById( 'container' ).innerHTML = "";
 
-				
+
 
 			}
 
 			}
 
 
 
-			window.onload = init;
 
-			
 			var fogExp2 = true;
 
 			var fogExp2 = true;
 
-			
+
 
 			var container, stats;
 
 			var container, stats;
 
 
 
 			var camera, scene, renderer;
 
 			var camera, scene, renderer;
 
@@ -88,6 +87,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
+			init();
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -97,14 +98,14 @@
 
 					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
 					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
 				else
 
 				else
 
 					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 7500 );
 
 					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 7500 );
 
-					
+
 
 				camera.target.position.z = - 100;
 
 				camera.target.position.z = - 100;
 
 
 
 				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 
 				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 
 				camera.target.position.y = camera.position.y;
 
 				camera.target.position.y = camera.position.y;
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
-				
+
 
 				if( fogExp2 )
 
 				if( fogExp2 )
 
 					scene.fog = new THREE.FogExp2( 0xffffff, 0.00025 );
 
 					scene.fog = new THREE.FogExp2( 0xffffff, 0.00025 );
 
 				else
 
 				else
 
@@ -486,8 +487,6 @@
 
 				document.getElementById( "bao" ).addEventListener( "click",  function() { mat.map = m_ao.map; }, false );
 
 				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( "baot" ).addEventListener( "click", function() { mat.map = m_aot.map; }, false );
 
 				document.getElementById( "bt" ).addEventListener( "click",   function() { mat.map = m_t.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 ( moveForward )  camera.translateZ( - 15 );
 
 				if ( moveBackward ) 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;
 
 				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
 
 
 
 				renderer.render(scene, camera);
 
 				renderer.render(scene, camera);
 
-				stats.update();
 
 
 
 			}
 
 			}

+ 25 - 15
examples/webgl_geometry_terrain.html
View File 

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

 <!DOCTYPE HTML>

 <html lang="en">

 <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 -

 			<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>

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

 		</div>

 		</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 -->

 		<!-- HDR fragment shader -->

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

 		<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>

 		</script>

-		

+

 		<!-- HDR vertex shader -->

 		<!-- HDR vertex shader -->

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

 		<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>

-		

 

 

-        <script type="text/javascript">

+

+		<script type="text/javascript">

 

 

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

 			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 windowHalfX = window.innerWidth / 2;

 			var windowHalfY = window.innerHeight / 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 = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );

 				camera.position.z = 900;

 				camera.position.z = 900;

 

 

-                scene = new THREE.Scene();

+				scene = new THREE.Scene();

 

 

 				directionalLight = new THREE.DirectionalLight( 0xffffff );

 				directionalLight = new THREE.DirectionalLight( 0xffffff );

 				directionalLight.position.x = 0;

 				directionalLight.position.x = 0;

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

 				var texture = ImageUtils.loadTexture( "textures/memorial.png" );

 				texture.min_filter = THREE.LinearFilter;

 				texture.min_filter = THREE.LinearFilter;

 				texture.mag_filter = THREE.NearestFilter;

 				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;

 				quad.position.z = -100;

-                scene.addObject( quad );

+				scene.addObject( quad );

 

 

-                renderer = new THREE.WebGLRenderer();

+				renderer = new THREE.WebGLRenderer();

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

 				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 ) {

 			function getText( id ) {

-				

+

 				return document.getElementById( id ).textContent;

 				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();

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

 				current = new Date().getTime();

 				current = new Date().getTime();

 				delta = (current  - old ) * 0.005;

 				delta = (current  - old ) * 0.005;

 				old = current;

 				old = current;

-				

+

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

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

-				

+

 					rate = 0.25;

 					rate = 0.25;

-					

+

 				} else {

 				} else {

-				

+

 					rate = 1;

 					rate = 1;

-					

+

 				}

 				}

-				

-				

+

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

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

-				

+

 					sign *= -1;

 					sign *= -1;

-					

-				}				

-				

+

+				}

 

 

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

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

-				

+

 				// Render final scene to the screen with film shader

 				// Render final scene to the screen with film shader

 

 

 				renderer.render( scene, camera );

 				renderer.render( scene, camera );

 

 

-                stats.update();

+			}

 

 

-            }

-			

 			function is_browser_compatible() {

 			function is_browser_compatible() {

 

 

 				// WebGL support

 				// WebGL support

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

 				return !!window.Worker;

 

 

 			}

 			}

-			

 

 

-        </script>

-

-    </body>

+		</script>

+	</body>

 </html>

 </html>

+ 50 - 38
examples/webgl_interactive_voxelpainter.html
View File 

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

+ 34 - 25
examples/webgl_lights_pointlights.html
View File 

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

+ 92 - 94
examples/webgl_lines_colors.html
View File 

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

+ 49 - 52
examples/webgl_lines_cubes.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - lines - cubes - webgl</title>
 
+		<title>three.js webgl - lines - cubes</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -13,7 +13,7 @@
 
 			a {
 
 			a {
 
 				color:#0078ff;
 
 				color:#0078ff;
 
 			}
 
 			}
 
-			
+
 
 			#info {
 
 			#info {
 
 				position: absolute;
 
 				position: absolute;
 
 				top: 10px; width: 100%;
 
 				top: 10px; width: 100%;
 
@@ -24,7 +24,7 @@
 
 				text-align: center;
 
 				text-align: center;
 
 				z-index:100;
 
 				z-index:100;
 
 			}
 
 			}
 
-			
+
 
 			a {
 
 			a {
 
 				color: orange;
 
 				color: orange;
 
 				text-decoration: none;
 
 				text-decoration: none;
 
@@ -33,33 +33,34 @@
 
 			a:hover {
 
 			a:hover {
 
 				color: #0080ff;
 
 				color: #0080ff;
 
 			}
 
 			}
 
-			
+
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-	
+
 
 		<div id="info">
 
 		<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>]
 
 			[<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>
 
 		</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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
-		
+
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 
 
-			window.onload = init;
 
-			
 			var mouseX = 0, mouseY = 0,
 
 			var mouseX = 0, mouseY = 0,
 
 
 
 			windowHalfX = window.innerWidth / 2,
 
 			windowHalfX = window.innerWidth / 2,
 
 			windowHalfY = window.innerHeight / 2,
 
 			windowHalfY = window.innerHeight / 2,
 
 
 
-			camera, scene, renderer,
 
+			camera, scene, renderer;
 
 
 
-			stats;
 
+			init();
 
+			animate();
 
 
 
 			function init() {
 
 			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 );
 
 					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 ++ ) {
 
 				for ( i = 0; i < points.length; i ++ ) {
 
-				
+
 
 					geometry.vertices.push( new THREE.Vertex( points[i] ) );
 
 					geometry.vertices.push( new THREE.Vertex( points[i] ) );
 
-				
+
 
 				}
 
 				}
 
-				
+
 
 
 
 				// lines
 
 				// 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 ],
 
 					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 ],
 
 								   [ 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, 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 ],
 
 								   [ 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 ) {
 
 				for ( i = 0; i < parameters.length; ++i ) {
 
-				
+
 
 					p = parameters[ i ];
 
 					p = parameters[ i ];
 
 					line = new THREE.Line( p[ 3 ],  p[ 0 ] );
 
 					line = new THREE.Line( p[ 3 ],  p[ 0 ] );
 
 					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
 
 					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
 
@@ -111,33 +112,24 @@
 
 					line.position.y = p[ 2 ][ 1 ];
 
 					line.position.y = p[ 2 ][ 1 ];
 
 					line.position.z = p[ 2 ][ 2 ];
 
 					line.position.z = p[ 2 ][ 2 ];
 
 					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( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				
-				loop();
 
-				
+
 
 			}
 
 			}
 
 
 
 			// port of Processing Java code by Thomas Diewald
 
 			// port of Processing Java code by Thomas Diewald
 
 			// http://www.openprocessing.org/visuals/?visualID=15599
 
 			// http://www.openprocessing.org/visuals/?visualID=15599
 
-			
+
 
 			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
 
 			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
 
-			
+
 
 				var half = side/2,
 
 				var half = side/2,
 
-					
+
 
 					vec_s = [
 
 					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 ),
 
 					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 ),
 
 					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 ] ];
 
 					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 ) {
 
 				if( --iterations >= 0 ) {
 
-			
+
 
 					var tmp = [];
 
 					var tmp = [];
 
-					
+
 
 					tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 
 					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[ 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[ 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[ 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[ 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 ) );
 
 					tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
 
-					
+
 
 					return tmp;
 
 					return tmp;
 
-					
+
 
 				}
 
 				}
 
-			
+
 
 				return vec;
 
 				return vec;
 
 			}
 
 			}
 
-			
+
 
 			//
 
 			//
 
 
 
 			function onDocumentMouseMove(event) {
 
 			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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
 				camera.updateMatrix();
 
 				camera.updateMatrix();
 
 
 
 				var time = new Date().getTime() * 0.0015;
 
 				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>
 
 		</script>

+ 37 - 41
examples/webgl_lines_sphere.html
View File 

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

+ 28 - 18
examples/webgl_materials.html
View File 

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

+ 21 - 12
examples/webgl_materials_cars.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - materials - cube reflection [cars] - webgl</title>
 
+		<title>three.js webgl - materials - cube reflection [cars]</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -27,7 +27,7 @@
 
 			#car_info { text-align:center; }
 
 			#car_info { text-align:center; }
 
 			#car_name { font-size:1em }
 
 			#car_name { font-size:1em }
 
 			#car_author { font-size:1em }
 
 			#car_author { font-size:1em }
 
-			
+
 
 			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
 
 			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
@@ -57,12 +57,14 @@
 
 		<div id="log"></div>
 
 		<div id="log"></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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var STATS_ENABLED = false;
 
 			var STATS_ENABLED = false;
 
 
 
 			var CARS = {
 
 			var CARS = {
 
@@ -150,12 +152,9 @@
 
 
 
 			var loader = new THREE.Loader( true );
 
 			var loader = new THREE.Loader( true );
 
 			document.body.appendChild( loader.statusDomElement );
 
 			document.body.appendChild( loader.statusDomElement );
 
-			
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 
 			init();
 
 			init();
 
-
 
-			setInterval(loop, 1000/60);
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -214,6 +213,8 @@
 
 
 
 				}
 
 				}
 
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+
 
 				var r = "textures/cube/Bridge2/";
 
 				var r = "textures/cube/Bridge2/";
 
 				var urls = [ r + "posx.jpg", r + "negx.jpg",
 
 				var urls = [ r + "posx.jpg", r + "negx.jpg",
 
 							 r + "posy.jpg", r + "negy.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.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.x = - camera.position.x;
 
 				cameraCube.target.position.y = - camera.position.y;
 
 				cameraCube.target.position.y = - camera.position.y;

+ 55 - 55
examples/webgl_materials_cars_camaro.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - materials - cube reflection [camaro] - webgl</title>
 
+		<title>three.js webgl - materials - cube reflection [camaro]</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -23,17 +23,17 @@
 
 			button:hover { background:#333 }
 
 			button:hover { background:#333 }
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
-	
+
 
 	<body>
 
 	<body>
 
 		<div id="d">
 
 		<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="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 id="buttons"></div>
 
 		</div>
 
 		</div>
 
-		
+
 
 		<div id="log"></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/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="../src/extras/ImageUtils.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/io/Loader.js"></script>
 
 		<script type="text/javascript" src="../src/extras/Detector.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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
 			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 lightMesh;
 
-			
+
 
 			var directionalLight, pointLight;
 
 			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();
 
 			init();
 
-			
-			loop();
 
-						
-			setInterval(loop, 1000/60);
 
-			
+			animate();
 
+
 
 			function init() {
 
 			function init() {
 
 
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
@@ -85,7 +77,7 @@
 
 				camera.updateMatrix();
 
 				camera.updateMatrix();
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
-				
+
 
 				// LIGHTS
 
 				// LIGHTS
 
 
 
 				var ambient = new THREE.AmbientLight( 0x555555 );
 
 				var ambient = new THREE.AmbientLight( 0x555555 );
 
@@ -125,16 +117,18 @@
 
 				stats.domElement.style.zIndex = 100;
 
 				stats.domElement.style.zIndex = 100;
 
 				container.appendChild( stats.domElement );
 
 				container.appendChild( stats.domElement );
 
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+
 
 				var r = "textures/cube/SwedishRoyalCastle/";
 
 				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" ];
 
 							 r + "pz.jpg", r + "nz.jpg" ];
 
 
 
 				var images = ImageUtils.loadArray( urls );
 
 				var images = ImageUtils.loadArray( urls );
 
 				var textureCube = new THREE.Texture( images );
 
 				var textureCube = new THREE.Texture( images );
 
-				
+
 
 				var camaroMaterials = {
 
 				var camaroMaterials = {
 
-					
+
 
 					body: 		[],
 
 					body: 		[],
 
 					chrome: 	new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube } ),
 
 					chrome: 	new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube } ),
 
 					darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, env_map: textureCube } ),
 
 					darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, env_map: textureCube } ),
 
@@ -142,15 +136,15 @@
 
 					tire:       new THREE.MeshLambertMaterial( { color: 0x050505 } ),
 
 					tire:       new THREE.MeshLambertMaterial( { color: 0x050505 } ),
 
 					interior:   new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
 
 					interior:   new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
 
 					black:      new THREE.MeshLambertMaterial( { color: 0x000000 } )
 
 					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( [ "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( [ "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( [ "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( [ "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( [ "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( [ "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( [ "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 } ) ] );
 
 				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();
 
 				var loader = new THREE.Loader();
 
 				loader.loadBinary( { model: "obj/camaro/CamaroNoUv_bin.js", callback: function( geometry ) { createScene( geometry, camaroMaterials ) } } );
 
 				loader.loadBinary( { model: "obj/camaro/CamaroNoUv_bin.js", callback: function( geometry ) { createScene( geometry, camaroMaterials ) } } );
 
-				
+
 
 			}
 
 			}
 
-			
+
 
 			function $( id ) { return document.getElementById( id ) }
 
 			function $( id ) { return document.getElementById( id ) }
 
-			
-			
+
 
+
 
 			function createButtons( materials, geometry ) {
 
 			function createButtons( materials, geometry ) {
 
 
 
 				var i, src = "", parent = $( "buttons" );
 
 				var i, src = "", parent = $( "buttons" );
 
-				
+
 
 				for( i = 0; i < materials.length; i++ ) {
 
 				for( i = 0; i < materials.length; i++ ) {
 
-				
+
 
 					src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
 
 					src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
 
-					
+
 
 				}
 
 				}
 
-				
+
 
 				parent.innerHTML = src;
 
 				parent.innerHTML = src;
 
 
 
 				for( i = 0; i < materials.length; i++ ) {
 
 				for( i = 0; i < materials.length; i++ ) {
 
-				
+
 
 					$( "m" + i ).counter = i;
 
 					$( "m" + i ).counter = i;
 
 					$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ][ 0 ] = materials[ this.counter ][ 1 ] }, false );
 
 					$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ][ 0 ] = materials[ this.counter ][ 1 ] }, false );
 
 
 
@@ -188,7 +182,7 @@
 
 			function createScene( geometry, materials ) {
 
 			function createScene( geometry, materials ) {
 
 
 
 				var s = 75, m = new THREE.MeshFaceMaterial();
 
 				var s = 75, m = new THREE.MeshFaceMaterial();
 
-				
+
 
 				geometry.materials[ 0 ][ 0 ] = materials.body[ 0 ][ 1 ]; 	// car body
 
 				geometry.materials[ 0 ][ 0 ] = materials.body[ 0 ][ 1 ]; 	// car body
 
 				geometry.materials[ 1 ][ 0 ] = materials.chrome; 			// wheels chrome
 
 				geometry.materials[ 1 ][ 0 ] = materials.chrome; 			// wheels chrome
 
 				geometry.materials[ 2 ][ 0 ] = materials.chrome; 			// grille chrome
 
 				geometry.materials[ 2 ][ 0 ] = materials.chrome; 			// grille chrome
 
@@ -198,14 +192,13 @@
 
 				geometry.materials[ 6 ][ 0 ] = materials.tire;              // tire
 
 				geometry.materials[ 6 ][ 0 ] = materials.tire;              // tire
 
 				geometry.materials[ 7 ][ 0 ] = materials.black;             // tireling
 
 				geometry.materials[ 7 ][ 0 ] = materials.black;             // tireling
 
 				geometry.materials[ 8 ][ 0 ] = materials.black;             // behind grille
 
 				geometry.materials[ 8 ][ 0 ] = materials.black;             // behind grille
 
-				
+
 
 				SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, 0.0, 1.0, 0.0, m );
 
 				SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, 0.0, 1.0, 0.0, m );
 
 
 
 				createButtons( materials.body, geometry );
 
 				createButtons( materials.body, geometry );
 
 
 
 			}
 
 			}
 
 
 
-			
 			function onDocumentMouseMove(event) {
 
 			function onDocumentMouseMove(event) {
 
 
 
 				mouseX = ( event.clientX - windowHalfX );
 
 				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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .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 );
 
 				webglRenderer.render( scene, camera );
 
 
 
-				stats.update();
 
-
 
 			}
 
 			}
 
 
 
 			function log(text) {
 
 			function log(text) {
 
-			
+
 
 				var e = document.getElementById("log");
 
 				var e = document.getElementById("log");
 
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
-				
+
 
 			}
 
 			}
 
-			
+
 
 		</script>
 
 		</script>
 
 
 
 	</body>
 
 	</body>

+ 26 - 15
examples/webgl_materials_cubemap.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<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">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -21,7 +21,7 @@
 
 			#d { text-align:center; margin:1em 0 -7.5em 0; z-index:1000; position:relative; display:block }
 
 			#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 }
 
 			.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
 
 			.inactive { background:#999; color:#eee }
 
 			.inactive { background:#999; color:#eee }
 
-			
+
 
 			#oldie { margin-top:11em !important }
 
 			#oldie { margin-top:11em !important }
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
@@ -37,12 +37,14 @@
 
 		<pre id="log"></pre>
 
 		<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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var container, stats;
 
 			var container, stats;
 
 
 
 			var camera, scene, webglRenderer;
 
 			var camera, scene, webglRenderer;
 
@@ -51,7 +53,7 @@
 
 			var mesh, zmesh, lightMesh, geometry;
 
 			var mesh, zmesh, lightMesh, geometry;
 
 
 
 			var loader;
 
 			var loader;
 
-			
+
 
 			var directionalLight, pointLight;
 
 			var directionalLight, pointLight;
 
 
 
 			var mouseX = 0;
 
 			var mouseX = 0;
 
@@ -63,7 +65,7 @@
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -105,7 +107,7 @@
 
 
 
 				var reflectionCube = new THREE.Texture( images );
 
 				var reflectionCube = new THREE.Texture( images );
 
 				var refractionCube = new THREE.Texture( images, new THREE.CubeRefractionMapping() );
 
 				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.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 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 } );
 
 				var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, env_map: refractionCube, refraction_ratio: 0.95 } );
 
@@ -114,7 +116,7 @@
 
 				//SceneUtils.addPanoramaCubePlanes( sceneCube, 100000, images );
 
 				//SceneUtils.addPanoramaCubePlanes( sceneCube, 100000, images );
 
 				//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
 
 				//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
 
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, reflectionCube );
 
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, reflectionCube );
 
-				
+
 
 				webglRenderer = new THREE.WebGLRenderer();
 
 				webglRenderer = new THREE.WebGLRenderer();
 
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 
 				webglRenderer.autoClear = false;
 
 				webglRenderer.autoClear = false;
 
@@ -129,7 +131,7 @@
 
 
 
 				loader = new THREE.Loader( true );
 
 				loader = new THREE.Loader( true );
 
 				document.body.appendChild( loader.statusDomElement );
 
 				document.body.appendChild( loader.statusDomElement );
 
-				
+
 
 				loader.loadBinary( { model: "obj/walt/WaltHead_bin.js", callback: function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } } );
 
 				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,      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, m2 );
 
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, -100, 0,0,0, m3 );
 
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, -100, 0,0,0, m3 );
 
-				
+
 
 				loader.statusDomElement.style.display = "none";
 
 				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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -165,10 +178,8 @@
 
 				cameraCube.target.position.z = - camera.position.z;
 
 				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.clear();
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( sceneCube, cameraCube );

+ 20 - 9
examples/webgl_materials_cubemap_balls_reflection.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - materials - cube reflection [balls] - webgl</title>
 
+		<title>three.js webgl - materials - cube reflection [balls]</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -26,7 +26,7 @@
 
 			a {
 
 			a {
 
 				color: #ffffff;
 
 				color: #ffffff;
 
 			}
 
 			}
 
-			
+
 
 			#oldie a { color:#da0 }
 
 			#oldie a { color:#da0 }
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</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>
 
 		<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="../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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var statsEnabled = false;
 
 			var statsEnabled = false;
 
 
 
 			var container, stats;
 
 			var container, stats;
 
@@ -61,12 +63,12 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			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 = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				camera.position.z = 3200;
 
 				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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -144,8 +157,6 @@
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 			}
 
 
 
 		</script>
 
 		</script>

+ 18 - 7
examples/webgl_materials_cubemap_balls_refraction.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - materials - cube refraction [balls] - webgl</title>
 
+		<title>three.js webgl - materials - cube refraction [balls]</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -26,7 +26,7 @@
 
 			a {
 
 			a {
 
 				color: #ffffff;
 
 				color: #ffffff;
 
 			}
 
 			}
 
-			
+
 
 			#oldie a { color:#da0 }
 
 			#oldie a { color:#da0 }
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</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>
 
 		<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="../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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var statsEnabled = false;
 
 			var statsEnabled = false;
 
 
 
 			var container, stats;
 
 			var container, stats;
 
@@ -61,7 +63,7 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -142,8 +155,6 @@
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 			}
 
 
 
 		</script>
 
 		</script>

+ 18 - 8
examples/webgl_materials_cubemap_escher.html
View File 

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

+ 28 - 20
examples/webgl_materials_cubemap_refraction.html
View File 

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

+ 16 - 4
examples/webgl_materials_grass.html
View File 

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

+ 54 - 43
examples/webgl_materials_normalmap.html
View File 

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

+ 18 - 7
examples/webgl_materials_normalmap2.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<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">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -53,6 +53,8 @@
 
 		</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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -76,10 +78,8 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -159,6 +159,8 @@
 
 
 
 				}
 
 				}
 
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+
 
 			}
 
 			}
 
 
 
 			function createScene( geometry, scale, material ) {
 
 			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;
 
 				var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
 
 
 
@@ -191,8 +204,6 @@
 
 
 
 				webglRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 			}
 
 
 
 			function log( text ) {
 
 			function log( text ) {

+ 60 - 60
examples/webgl_materials_shaders.html
View File 

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

+ 21 - 11
examples/webgl_materials_shaders_fresnel.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - materials - shaders [Fresnel] - webgl</title>
 
+		<title>three.js webgl - materials - shaders [Fresnel]</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -27,19 +27,21 @@
 
 				color: #ffffff;
 
 				color: #ffffff;
 
 			}
 
 			}
 
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
 
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
 
-			
+
 
 			#oldie a { color:#0b0 }
 
 			#oldie a { color:#0b0 }
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
 		<pre id="log"></pre>
 
 		<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>
 
 		<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" src="js/Stats.js"></script>
 
-		
+
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
@@ -55,8 +57,7 @@
 
 
 
 			var directionalLight, pointLight;
 
 			var directionalLight, pointLight;
 
 
 
-			var mouseX = 0;
 
-			var mouseY = 0;
 
+			var mouseX = 0, mouseY = 0;
 
 
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
@@ -64,7 +65,7 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			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.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
@@ -155,8 +167,6 @@
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( sceneCube, cameraCube );
 
 				webglRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 
 
-				if ( statsEnabled ) stats.update();
 
-
 
 			}
 
 			}
 
 
 
 			function log( text ) {
 
 			function log( text ) {

+ 17 - 11
examples/webgl_objconvert_test.html
View File 

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

+ 46 - 36
examples/webgl_particles_billboards.html
View File 

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

+ 44 - 34
examples/webgl_particles_billboards_colors.html
View File 

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

+ 51 - 40
examples/webgl_particles_random.html
View File 

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

+ 50 - 39
examples/webgl_particles_sprites.html
View File 

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

+ 154 - 148
examples/webgl_postprocessing.html
View File 

@@ -1,95 +1,101 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <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://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
 
 			<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
 
 		</div>
 
 		</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 -->
 
 		<!-- 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;
 
 			varying vec2 vUv;
 
 			uniform float time;
 
 			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 -->
 
 		<!-- 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();
 
 			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 windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 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.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 = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				cameraPerspective.position.z = 900;
 
 				cameraPerspective.position.z = 900;
 
 
 
-                sceneModel = new THREE.Scene();
 
+				sceneModel = new THREE.Scene();
 
 				sceneScreen = new THREE.Scene();
 
 				sceneScreen = new THREE.Scene();
 
 				sceneBG = new THREE.Scene();
 
 				sceneBG = new THREE.Scene();
 
 
 
@@ -100,108 +106,108 @@
 
 				directionalLight.position.normalize();
 
 				directionalLight.position.normalize();
 
 				sceneModel.addLight( directionalLight );
 
 				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
 
 					depth_test: false
 
-					
-                } );
 
+
 
+				} );
 
 
 
 				var screen_shader = ShaderUtils.lib["screen"];
 
 				var screen_shader = ShaderUtils.lib["screen"];
 
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
 
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
 
-				
+
 
 				screen_uniforms["tDiffuse"].texture = rtTexture1;
 
 				screen_uniforms["tDiffuse"].texture = rtTexture1;
 
 				screen_uniforms["opacity"].value = 0.4;
 
 				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
 
 					blending: THREE.AdditiveBlending
 
 
 
-                } );
 
+				} );
 
 
 
 				var film_shader = ShaderUtils.lib["film"];
 
 				var film_shader = ShaderUtils.lib["film"];
 
 				var film_uniforms = Uniforms.clone( film_shader.uniforms );
 
 				var film_uniforms = Uniforms.clone( film_shader.uniforms );
 
-				
+
 
 				film_uniforms["tDiffuse"].texture = rtTexture1;
 
 				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;
 
 				var increment = 0.001953125;
 
-				
+
 
 				blurx = new THREE.Vector2( increment, 0.0 ),
 
 				blurx = new THREE.Vector2( increment, 0.0 ),
 
 				blury = new THREE.Vector2( 0.0, increment );
 
 				blury = new THREE.Vector2( 0.0, increment );
 
-				
+
 
 				var convolution_shader = ShaderUtils.lib["convolution"];
 
 				var convolution_shader = ShaderUtils.lib["convolution"];
 
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
 
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
 
-				
+
 
 				convolution_uniforms["tDiffuse"].texture = rtTexture1;
 
 				convolution_uniforms["tDiffuse"].texture = rtTexture1;
 
 				convolution_uniforms["uImageIncrement"].value = blurx;
 
 				convolution_uniforms["uImageIncrement"].value = blurx;
 
 				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
 
 				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 );
 
 				var plane = new Plane( window.innerWidth, window.innerHeight );
 
-				
-                quadBG = new THREE.Mesh( plane, materialColor );
 
+
 
+				quadBG = new THREE.Mesh( plane, materialColor );
 
 				quadBG.position.z = -500;
 
 				quadBG.position.z = -500;
 
-                sceneBG.addObject( quadBG );
 
+				sceneBG.addObject( quadBG );
 
 
 
 				loader = new THREE.Loader( true );
 
 				loader = new THREE.Loader( true );
 
 				document.body.appendChild( loader.statusDomElement );
 
 				document.body.appendChild( loader.statusDomElement );
 
 				loader.loadAscii( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
 
 				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;
 
 				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.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.autoClear = false;
 
 				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 ) {
 
 			function getText( id ) {
 
-				
+
 
 				return document.getElementById( id ).textContent;
 
 				return document.getElementById( id ).textContent;
 
+
 
 			}
 
 			}
 
-			
+
 
 			function createMesh( geometry, scene, scale ) {
 
 			function createMesh( geometry, scene, scale ) {
 
 
 
 				geometry.computeTangents();
 
 				geometry.computeTangents();
 
-				
+
 
 				var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
 
 				var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
 
 
 
 				var shader = ShaderUtils.lib[ "normal" ];
 
 				var shader = ShaderUtils.lib[ "normal" ];
 
 				var uniforms = Uniforms.clone( shader.uniforms );
 
 				var uniforms = Uniforms.clone( shader.uniforms );
 
- 
+
 
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 
 				uniforms[ "uNormalScale" ].value = - 0.75;
 
 				uniforms[ "uNormalScale" ].value = - 0.75;
 
 
 
@@ -226,7 +232,7 @@
 
 
 
 				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
 
 				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
 
 				var mat2 = new THREE.MeshShaderMaterial( parameters );
 
 				var mat2 = new THREE.MeshShaderMaterial( parameters );
 
-				
+
 
 				mesh = new THREE.Mesh( geometry, mat2 );
 
 				mesh = new THREE.Mesh( geometry, mat2 );
 
 				mesh.position.x = 0;
 
 				mesh.position.x = 0;
 
 				mesh.position.y = -50;
 
 				mesh.position.y = -50;
 
@@ -234,63 +240,66 @@
 
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 
 				mesh.updateMatrix();
 
 				mesh.updateMatrix();
 
 				scene.addObject( mesh );
 
 				scene.addObject( mesh );
 
-				
+
 
 				loader.statusDomElement.style.display = "none";
 
 				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 ) {
 
 				if ( materialColor.uniforms.time.value > 1 || materialColor.uniforms.time.value < 0 ) {
 
-				
+
 
 					delta *= -1;
 
 					delta *= -1;
 
-					
+
 
 				}
 
 				}
 
-					
+
 
 				materialColor.uniforms.time.value += delta/2;
 
 				materialColor.uniforms.time.value += delta/2;
 
 				materialFilm.uniforms.time.value += delta;
 
 				materialFilm.uniforms.time.value += delta;
 
-				
+
 
 				renderer.clear();
 
 				renderer.clear();
 
-				
+
 
 				// Render scene into texture
 
 				// Render scene into texture
 
-				
-				// background 
-				
+
 
+				// background
 
+
 
 				renderer.render( sceneBG, cameraOrtho, rtTexture1 );
 
 				renderer.render( sceneBG, cameraOrtho, rtTexture1 );
 
-				
+
 
 				// model
 
 				// model
 
-				
-                renderer.render( sceneModel, cameraPerspective, rtTexture1 );
 
+
 
+				renderer.render( sceneModel, cameraPerspective, rtTexture1 );
 
 
 
 				// Render quad with blured scene into texture (convolution pass 1)
 
 				// Render quad with blured scene into texture (convolution pass 1)
 
-				
+
 
 				quadScreen.materials = [ materialConvolution ];
 
 				quadScreen.materials = [ materialConvolution ];
 
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
 
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
 
 				materialConvolution.uniforms.uImageIncrement.value = blurx;
 
 				materialConvolution.uniforms.uImageIncrement.value = blurx;
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
 
-				
+
 
 				// Render quad with blured scene into texture (convolution pass 2)
 
 				// Render quad with blured scene into texture (convolution pass 2)
 
-				
+
 
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
 
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
 
 				materialConvolution.uniforms.uImageIncrement.value = blury;
 
 				materialConvolution.uniforms.uImageIncrement.value = blury;
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
 
-				
+
 
 				// Render original scene with superimposed blur into texture
 
 				// Render original scene with superimposed blur into texture
 
-				
+
 
 				quadScreen.materials = [ materialScreen ];
 
 				quadScreen.materials = [ materialScreen ];
 
-				
+
 
 				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
 
 				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
 
 				materialScreen.uniforms.opacity.value = 1.0;
 
 				materialScreen.uniforms.opacity.value = 1.0;
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
 
 				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
 
@@ -301,12 +310,9 @@
 
 				quadScreen.materials = [ materialFilm ];
 
 				quadScreen.materials = [ materialFilm ];
 
 				renderer.render( sceneScreen, cameraOrtho );
 
 				renderer.render( sceneScreen, cameraOrtho );
 
 
 
-                stats.update();
 
-
 
-            }			
-			
+			}
 
 
 
-        </script>
 
 
 
-    </body>
 
+		</script>
 
+	</body>
 
 </html>
 
 </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="../build/ThreeExtras.js"></script>
 
 		
 		
 		<script type="text/javascript" src="js/ShaderExtras.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>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 
 		<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />
 
 		<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>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - ribbons - webgl</title>
 
+		<title>three.js webgl - ribbons</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
 				background-color: #000000;
 
 				background-color: #000000;
 
 				margin: 0px;
 
 				margin: 0px;
 
 				overflow: hidden;
 
 				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;
 
 				text-align:center;
 
 			}
 
 			}
 
 
 
@@ -19,23 +19,24 @@
 
 				color:#0078ff;
 
 				color:#0078ff;
 
 			}
 
 			}
 
 
 
-            #info {
 
+			#info {
 
 				color:#fff;
 
 				color:#fff;
 
-                position: absolute;
 
-                top: 0px; width: 100%;
 
-                padding: 5px;
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
 				z-index:100;
 
 				z-index:100;
 
-
 
-            }
 
+			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
 
 
 		<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" 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
 
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl ribbons example
 
 		</div>
 
 		</div>
 
 
 
@@ -44,8 +45,6 @@
 
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 
 
-			window.onload = init;
 
-
 
 			var container, stats;
 
 			var container, stats;
 
 			var camera, scene, renderer, ribbon, geometry, geometry2, materials = [], ribbons = [],
 
 			var camera, scene, renderer, ribbon, geometry, geometry2, materials = [], ribbons = [],
 
 				parameters, i, i2, h, color, x, y, z, z2, s, n, n2, nribbons, grid;
 
 				parameters, i, i2, h, color, x, y, z, z2, s, n, n2, nribbons, grid;
 
@@ -55,11 +54,10 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
-			var postprocessing = {
 
+			var postprocessing = { enabled  : true };
 
 
 
-				enabled  : true
 
-
 
-			};
 
+			init();
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -167,8 +165,6 @@
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 
 
-				loop();
 
-
 
 			}
 
 			}
 
 
 
 			function onDocumentMouseMove( event ) {
 
 			function onDocumentMouseMove( event ) {
 
@@ -212,9 +208,9 @@
 
 				postprocessing.camera.position.z = 100;
 
 				postprocessing.camera.position.z = 100;
 
 
 
 				var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
 
 				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_shader = ShaderUtils.lib["screen"];
 
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
 
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
 
@@ -222,15 +218,14 @@
 
 				screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
 
 				screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
 
 				screen_uniforms["opacity"].value = 1.0;
 
 				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_shader = ShaderUtils.lib["convolution"];
 
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
 
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
 
@@ -242,14 +237,13 @@
 
 				convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
 
 				convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
 
 				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
 
 				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 = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
 
 				postprocessing.quad.position.z = -500;
 
 				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;
 
 				var time = new Date().getTime() * 0.00005;
 
 
 
@@ -334,13 +337,8 @@
 
 
 
 				}
 
 				}
 
 
 
-				stats.update();
 
-
 
-
 
-
 
 			}
 
 			}
 
 
 
-
 
 		</script>
 
 		</script>
 
 	</body>
 
 	</body>
 
 </html>
 
 </html>

+ 143 - 131
examples/webgl_rtt.html
View File 

@@ -1,112 +1,117 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <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;
 
 			varying vec2 vUv;
 
 			uniform sampler2D tDiffuse;
 
 			uniform sampler2D tDiffuse;
 
-			
-            void main(void)
 
-            {
 
+
 
+			void main(void) {
 
+
 
 				//gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, 1.0 - vUv.y ) );
 
 				//gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, 1.0 - vUv.y ) );
 
 				gl_FragColor = texture2D( tDiffuse, vUv );
 
 				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;
 
 			varying vec2 vUv;
 
 			uniform float time;
 
 			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;
 
 				float r = vUv.x;
 
 				if( vUv.y < 0.5 ) r = 0.0;
 
 				if( vUv.y < 0.5 ) r = 0.0;
 
 				float g = vUv.y;
 
 				float g = vUv.y;
 
 				if( vUv.x < 0.5 ) g = 0.0;
 
 				if( vUv.x < 0.5 ) g = 0.0;
 
-				
+
 
 				gl_FragColor = vec4( r, g, time, 1.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();
 
 			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 mouseX = 0, mouseY = 0;
 
-			
+
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 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.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 = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 100;
 
 				camera.position.z = 100;
 
 				camera.updateMatrix();
 
 				camera.updateMatrix();
 
 
 
-                sceneRTT = new THREE.Scene();
 
+				sceneRTT = new THREE.Scene();
 
 				sceneScreen = new THREE.Scene();
 
 				sceneScreen = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
 
@@ -126,76 +131,77 @@
 
 				light.position.normalize();
 
 				light.position.normalize();
 
 				scene.addLight( light );
 
 				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 );
 
 				var plane = new Plane( window.innerWidth, window.innerHeight );
 
-				
-                quad = new THREE.Mesh( plane, material );
 
+
 
+				quad = new THREE.Mesh( plane, material );
 
 				quad.position.z = -100;
 
 				quad.position.z = -100;
 
-                sceneRTT.addObject( quad );
 
+				sceneRTT.addObject( quad );
 
 
 
 				var loader = new THREE.Loader();
 
 				var loader = new THREE.Loader();
 
 				loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createMesh( geometry, sceneRTT ) } } );
 
 				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;
 
 				quad.position.z = -100;
 
-                sceneScreen.addObject( quad );
 
+				sceneScreen.addObject( quad );
 
 
 
 				var n = 5,
 
 				var n = 5,
 
 					geometry = new Sphere( 10, 64, 32 ),
 
 					geometry = new Sphere( 10, 64, 32 ),
 
 					material2 = new THREE.MeshLambertMaterial( { color:0xffffff, map: rtTexture } );
 
 					material2 = new THREE.MeshLambertMaterial( { color:0xffffff, map: rtTexture } );
 
 					//material2 = new THREE.MeshBasicMaterial( { color:0xffffff, map: rtTexture } );
 
 					//material2 = new THREE.MeshBasicMaterial( { color:0xffffff, map: rtTexture } );
 
-				
+
 
 				for( var j = 0; j < n; j++ ) {
 
 				for( var j = 0; j < n; j++ ) {
 
+
 
 					for( var i = 0; i < n; i++ ) {
 
 					for( var i = 0; i < n; i++ ) {
 
-					
+
 
 						mesh = new THREE.Mesh( geometry, material2 );
 
 						mesh = new THREE.Mesh( geometry, material2 );
 
 						mesh.position.x = ( i - (n-1)/2 ) * 20;
 
 						mesh.position.x = ( i - (n-1)/2 ) * 20;
 
 						mesh.position.y = ( j - (n-1)/2 ) * 20;
 
 						mesh.position.y = ( j - (n-1)/2 ) * 20;
 
 						mesh.position.z = 0;
 
 						mesh.position.z = 0;
 
 						mesh.rotation.y = 1.57;
 
 						mesh.rotation.y = 1.57;
 
 						scene.addObject( mesh );
 
 						scene.addObject( mesh );
 
-						
+
 
 					}
 
 					}
 
 				}
 
 				}
 
 
 
-                renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.autoClear = false;
 
 				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 );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 
-            }
 
+			}
 
 
 
 			function createMesh( geometry, xscene ) {
 
 			function createMesh( geometry, xscene ) {
 
 
 
 				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular:0xffaa00, shininess:5 } ),
 
 				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular:0xffaa00, shininess:5 } ),
 
 					mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular:0xff2200, shininess:5 } );
 
 					mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular:0xff2200, shininess:5 } );
 
-				
+
 
 				zmesh1 = new THREE.Mesh( geometry, mat1 );
 
 				zmesh1 = new THREE.Mesh( geometry, mat1 );
 
 				zmesh1.position.x = 0;
 
 				zmesh1.position.x = 0;
 
 				zmesh1.position.y = 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;
 
 				var time = new Date().getTime() * 0.0015;
 
-				
+
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
 
 				if ( zmesh1 && zmesh2 ) {
 
 				if ( zmesh1 && zmesh2 ) {
 
-				
+
 
 					zmesh1.rotation.x = 1.57;
 
 					zmesh1.rotation.x = 1.57;
 
 					zmesh1.rotation.z = time;
 
 					zmesh1.rotation.z = time;
 
 
 
@@ -237,41 +252,38 @@
 
 					zmesh2.rotation.y = -time;
 
 					zmesh2.rotation.y = -time;
 
 
 
 				}
 
 				}
 
-				
+
 
 				if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
 
 				if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
 
-				
+
 
 					delta *= -1;
 
 					delta *= -1;
 
-					
+
 
 				}
 
 				}
 
-					
+
 
 				material.uniforms.time.value += delta;
 
 				material.uniforms.time.value += delta;
 
-				
+
 
 				renderer.clear();
 
 				renderer.clear();
 
-				
+
 
 				// Render first scene into texture
 
 				// Render first scene into texture
 
-				
-                renderer.render( sceneRTT, cameraRTT, rtTexture );
 
-				
-				
+
 
+				renderer.render( sceneRTT, cameraRTT, rtTexture );
 
+
 
 				// Render full screen quad with generated texture
 
 				// Render full screen quad with generated texture
 
 				// (disable depth writing so that it stays in the background)
 
 				// (disable depth writing so that it stays in the background)
 
-				
+
 
 				renderer.context.depthMask( 0 );
 
 				renderer.context.depthMask( 0 );
 
 				renderer.render( sceneScreen, cameraRTT );
 
 				renderer.render( sceneScreen, cameraRTT );
 
 				//renderer.render( sceneRTT, cameraRTT );
 
 				//renderer.render( sceneRTT, cameraRTT );
 
 				renderer.context.depthMask( 1 );
 
 				renderer.context.depthMask( 1 );
 
-				
-                // Render second scene to screen
 
+
 
+				// Render second scene to screen
 
 				// (using first scene as regular texture)
 
 				// (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>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - io - scene loader - webgl</title>
 
+		<title>three.js webgl - io - scene loader</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -150,6 +150,8 @@
 
 		<pre id="log"></pre>
 
 		<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" src="js/Stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -174,6 +176,7 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 
 			init();
 
 			init();
 
+			animate();
 
 
 
 			function $( id ) {
 
 			function $( id ) {
 
 
 
@@ -237,8 +240,6 @@
 
 
 
 				$( "start" ).addEventListener( 'click', onStartClick, false );
 
 				$( "start" ).addEventListener( 'click', onStartClick, false );
 
 
 
-				setInterval( loop, 1000/60 );
 
-
 
 				var callback_progress = function( progress, result ) {
 
 				var callback_progress = function( progress, result ) {
 
 
 
 					var bar = 250,
 
 					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.x += ( mouseX - camera.position.x ) * .001;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .001;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .001;
 
 
 
 				renderer.render( scene, camera );
 
 				renderer.render( scene, camera );
 
 
 
-				stats.update();
 
-
 
 			}
 
 			}
 
 
 
 			function log( text ) {
 
 			function log( text ) {

+ 41 - 30
examples/webgl_shader.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - materials - shaders [Monjori] - webgl</title>
 
+		<title>three.js webgl - materials - shaders [Monjori]</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -35,12 +35,13 @@
 
 		<div id="container"></div> 
 		<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> 
 		<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="../build/Three.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.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="../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">
 
 		<script id="vertex_shader" type="x-shader/x-vertex">
 
 			void main()
 
 			void main()
 
 			{
 
 			{
 
@@ -58,34 +59,34 @@
 
 
 
 			void main(void)
 
 			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>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
-		
+
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 
 
 			var container, stats;
 
 			var container, stats;
 
@@ -101,7 +102,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -150,12 +151,22 @@
 
 
 
 			}
 
 			}
 
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 
 				uniforms.time.value += 0.05;
 
 				uniforms.time.value += 0.05;
 
 
 
 				renderer.render( scene, camera );
 
 				renderer.render( scene, camera );
 
-				stats.update();
 
 
 
 			}
 
 			}

+ 73 - 62
examples/webgl_shader2.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - materials - shaders [custom] - webgl</title>
 
+		<title>three.js webgl - materials - shaders [custom]</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
@@ -32,12 +32,13 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<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="../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">
 
 		<script id="fragment_shader4" type="x-shader/x-fragment">
 
 
 
@@ -45,11 +46,11 @@
 
 			uniform vec2 resolution;
 
 			uniform vec2 resolution;
 
 
 
 			varying vec2 vUv;
 
 			varying vec2 vUv;
 
-			
+
 
 			void main( void ) {
 
 			void main( void ) {
 
 
 
 				vec2 position = -1.0 + 2.0 * vUv;
 
 				vec2 position = -1.0 + 2.0 * vUv;
 
-				
+
 
 				float red = abs( sin( position.x * position.y + time / 5.0 ) );
 
 				float red = abs( sin( position.x * position.y + time / 5.0 ) );
 
 				float green = abs( sin( position.x * position.y + time / 4.0 ) );
 
 				float green = abs( sin( position.x * position.y + time / 4.0 ) );
 
 				float blue = abs( sin( position.x * position.y + time / 3.0 ) );
 
 				float blue = abs( sin( position.x * position.y + time / 3.0 ) );
 
@@ -58,18 +59,18 @@
 
 			}
 
 			}
 
 
 
 		</script>
 
 		</script>
 
-		
+
 
 		<script id="fragment_shader3" type="x-shader/x-fragment">
 
 		<script id="fragment_shader3" type="x-shader/x-fragment">
 
 
 
 			uniform float time;
 
 			uniform float time;
 
 			uniform vec2 resolution;
 
 			uniform vec2 resolution;
 
-			
+
 
 			varying vec2 vUv;
 
 			varying vec2 vUv;
 
-			
+
 
 			void main( void ) {
 
 			void main( void ) {
 
 
 
 				vec2 position = vUv;
 
 				vec2 position = vUv;
 
-				
+
 
 				float color = 0.0;
 
 				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.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 );
 
 				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>
 
 
 
 		<script id="fragment_shader2" type="x-shader/x-fragment">
 
 		<script id="fragment_shader2" type="x-shader/x-fragment">
 
-		
+
 
 			uniform float time;
 
 			uniform float time;
 
 			uniform vec2 resolution;
 
 			uniform vec2 resolution;
 
 
 
 			uniform sampler2D texture;
 
 			uniform sampler2D texture;
 
-			
+
 
 			varying vec2 vUv;
 
 			varying vec2 vUv;
 
-			
+
 
 			void main( void ) {
 
 			void main( void ) {
 
 
 
 				vec2 position = -1.0 + 2.0 * vUv;
 
 				vec2 position = -1.0 + 2.0 * vUv;
 
-				
+
 
 				float a = atan( position.y, position.x );
 
 				float a = atan( position.y, position.x );
 
 				float r = sqrt( dot( position, position ) );
 
 				float r = sqrt( dot( position, position ) );
 
 
 
@@ -120,60 +121,60 @@
 
 			uniform float time;
 
 			uniform float time;
 
 
 
 			varying vec2 vUv;
 
 			varying vec2 vUv;
 
-			
+
 
 			void main(void)
 
 			void main(void)
 
 			{
 
 			{
 
-			    
+
 
 				vec2 p = -1.0 + 2.0 * vUv;
 
 				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>
 
 
 
 		<script id="vertex_shader" type="x-shader/x-vertex">
 
 		<script id="vertex_shader" type="x-shader/x-vertex">
 
-		
+
 
 			varying vec2 vUv;
 
 			varying vec2 vUv;
 
-			
+
 
 			void main()
 
 			void main()
 
 			{
 
 			{
 
 				vUv = uv;
 
 				vUv = uv;
 
 				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
 				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
 				gl_Position = projectionMatrix * mvPosition;
 
 				gl_Position = projectionMatrix * mvPosition;
 
 			}
 
 			}
 
-			
+
 
 		</script>
 
 		</script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
-			
+
 
 			var container, stats;
 
 			var container, stats;
 
 
 
 			var start_time;
 
 			var start_time;
 
-			
+
 
 			var camera, scene, renderer;
 
 			var camera, scene, renderer;
 
 
 
 			var uniforms1, uniforms2, material1, material2, mesh, meshes = [];
 
 			var uniforms1, uniforms2, material1, material2, mesh, meshes = [];
 
@@ -185,7 +186,7 @@
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
 			init();
 
 			init();
 
-			setInterval( loop, 1000 / 60 );
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -197,7 +198,7 @@
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
 
 				start_time = new Date().getTime();
 
 				start_time = new Date().getTime();
 
-				
+
 
 				uniforms1 = {
 
 				uniforms1 = {
 
 					time: { type: "f", value: 1.0 },
 
 					time: { type: "f", value: 1.0 },
 
 					resolution: { type: "v2", value: new THREE.Vector2() }
 
 					resolution: { type: "v2", value: new THREE.Vector2() }
 
@@ -208,14 +209,14 @@
 
 					resolution: { type: "v2", value: new THREE.Vector2() },
 
 					resolution: { type: "v2", value: new THREE.Vector2() },
 
 					texture: { type: "t", value: 0, texture: ImageUtils.loadTexture( "textures/disturb.jpg" ) }
 
 					texture: { type: "t", value: 0, texture: ImageUtils.loadTexture( "textures/disturb.jpg" ) }
 
 				};
 
 				};
 
-				
+
 
 				uniforms2.texture.texture.wrap_s = uniforms2.texture.texture.wrap_t = THREE.Repeat;
 
 				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 ] ];
 
 					params = [ [ 'fragment_shader1', uniforms1 ],  [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
 
-				
+
 
 				for( var i = 0; i < params.length; i++ ) {
 
 				for( var i = 0; i < params.length; i++ ) {
 
-				
+
 
 					material = new THREE.MeshShaderMaterial( {
 
 					material = new THREE.MeshShaderMaterial( {
 
 
 
 						uniforms: params[ i ][ 1 ],
 
 						uniforms: params[ i ][ 1 ],
 
@@ -223,18 +224,18 @@
 
 						fragment_shader: document.getElementById( params[ i ][ 0 ] ).textContent
 
 						fragment_shader: document.getElementById( params[ i ][ 0 ] ).textContent
 
 
 
 						} );
 
 						} );
 
-						
+
 
 					mlib[ i ] = material;
 
 					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 = 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.x = i - (params.length - 1)/2;
 
 					mesh.position.y = i % 2 - 0.5;
 
 					mesh.position.y = i % 2 - 0.5;
 
 					scene.addObject( mesh );
 
 					scene.addObject( mesh );
 
-					
+
 
 					meshes[ i ] = mesh;
 
 					meshes[ i ] = mesh;
 
 
 
 				}
 
 				}
 
-				
+
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer = new THREE.WebGLRenderer();
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
@@ -253,28 +254,38 @@
 
 
 
 				uniforms1.resolution.value.x = window.innerWidth;
 
 				uniforms1.resolution.value.x = window.innerWidth;
 
 				uniforms1.resolution.value.y = window.innerHeight;
 
 				uniforms1.resolution.value.y = window.innerHeight;
 
-				
+
 
 				uniforms2.resolution.value.x = window.innerWidth;
 
 				uniforms2.resolution.value.x = window.innerWidth;
 
 				uniforms2.resolution.value.y = window.innerHeight;
 
 				uniforms2.resolution.value.y = window.innerHeight;
 
-				
+
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 			}
 
 			}
 
 
 
-			function loop() {
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
 
 
 				uniforms1.time.value += 0.05;
 
 				uniforms1.time.value += 0.05;
 
 				uniforms2.time.value = ( new Date().getTime() - start_time ) / 1000;
 
 				uniforms2.time.value = ( new Date().getTime() - start_time ) / 1000;
 
-				
+
 
 				for( var i = 0; i < meshes.length; ++i ) {
 
 				for( var i = 0; i < meshes.length; ++i ) {
 
-					
+
 
 					meshes[ i ].rotation.y += 0.01 * ( i % 2 ? 1 : -1 );
 
 					meshes[ i ].rotation.y += 0.01 * ( i % 2 ? 1 : -1 );
 
 					meshes[ i ].rotation.x += 0.01 * ( i % 2 ? -1 : 1 );
 
 					meshes[ i ].rotation.x += 0.01 * ( i % 2 ? -1 : 1 );
 
-					
+
 
 				}
 
 				}
 
 
 
 				renderer.render( scene, camera );
 
 				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 ) {
 
 THREE.Texture = function ( image, mapping, wrap_s, wrap_t, mag_filter, min_filter ) {
 
 
 
+	if ( image.getContext ) image.loaded = true;
 
+
 
 	this.image = image;
 
 	this.image = image;
 
 
 
 	this.mapping = mapping !== undefined ? mapping : new THREE.UVMapping();
 
 	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/Detector.js',
 
 'extras/GeometryUtils.js',
 
 'extras/GeometryUtils.js',
 
 'extras/ImageUtils.js',
 
 'extras/ImageUtils.js',
 
-'extras/MiscUtils.js',
 
 'extras/SceneUtils.js',
 
 'extras/SceneUtils.js',
 
 'extras/ShaderUtils.js',
 
 'extras/ShaderUtils.js',
 
 'extras/primitives/Cube.js',
 
 'extras/primitives/Cube.js',
 
@@ -396,7 +395,7 @@ def main(argv=None):
 
 	debug = args.debug
 
 	debug = args.debug
 
 
 
 	config = [
 
 	config = [
 
-	['Three', 	  	'includes_common', COMMON_FILES, args.common],
 
+	['Three', 	'includes_common', COMMON_FILES, args.common],
 
 	['ThreeCanvas', 'includes_canvas', CANVAS_FILES, args.canvas],
 
 	['ThreeCanvas', 'includes_canvas', CANVAS_FILES, args.canvas],
 
 	['ThreeWebGL',  'includes_webgl',  WEBGL_FILES,  args.webgl],
 
 	['ThreeWebGL',  'includes_webgl',  WEBGL_FILES,  args.webgl],
 
 	['ThreeSVG', 	'includes_svg',    SVG_FILES,    args.svg],
 
 	['ThreeSVG', 	'includes_svg',    SVG_FILES,    args.svg],