Clean up webgl_shader examples.

examples/webgl_shader.html

@@ -94,13 +94,7 @@
 
 			var camera, scene, renderer;
 
-			var uniforms, material, mesh;
-
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			var uniforms;
 
 			init();
 			animate();
@@ -114,12 +108,14 @@
 
 				scene = new THREE.Scene();
 
+				var geometry = new THREE.PlaneGeometry( 2, 2 );
+
 				uniforms = {
 					time: { type: "f", value: 1.0 },
 					resolution: { type: "v2", value: new THREE.Vector2() }
 				};
 
-				material = new THREE.ShaderMaterial( {
+				var material = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -127,7 +123,7 @@
 
 				} );
 
-				mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material );
+				var mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();
@@ -148,6 +144,7 @@
 
 				uniforms.resolution.value.x = window.innerWidth;
 				uniforms.resolution.value.y = window.innerHeight;
+
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}

examples/webgl_shader2.html

@@ -171,17 +171,9 @@
 
 			var container, stats;
 
-			var start_time;
-
 			var camera, scene, renderer;
 
-			var uniforms1, uniforms2, material1, material2, mesh, meshes = [];
-
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			var uniforms1, uniforms2;
 
 			var clock = new THREE.Clock();
 
@@ -192,12 +184,12 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 40, windowHalfX / windowHalfY, 1, 3000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 4;
 
 				scene = new THREE.Scene();
 
-				start_time = Date.now();
+				var geometry = new THREE.BoxGeometry( 0.75, 0.75, 0.75 );
 
 				uniforms1 = {
 					time: { type: "f", value: 1.0 },
@@ -212,12 +204,16 @@
 
 				uniforms2.texture.value.wrapS = uniforms2.texture.value.wrapT = THREE.RepeatWrapping;
 
-				var size = 0.75, mlib = [],
-					params = [ [ 'fragment_shader1', uniforms1 ],  [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
+				var params = [
+					[ 'fragment_shader1', uniforms1 ],
+					[ 'fragment_shader2', uniforms2 ],
+					[ 'fragment_shader3', uniforms1 ],
+					[ 'fragment_shader4', uniforms1 ]
+				];
 
 				for( var i = 0; i < params.length; i++ ) {
 
-					material = new THREE.ShaderMaterial( {
+					var material = new THREE.ShaderMaterial( {
 
 						uniforms: params[ i ][ 1 ],
 						vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -225,15 +221,11 @@
 
 						} );
 
-					mlib[ i ] = material;
-
-					mesh = new THREE.Mesh( new THREE.BoxGeometry( size, size, size ), new THREE.MeshFaceMaterial( [ mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ] ] ) );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = i - ( params.length - 1 ) / 2;
 					mesh.position.y = i % 2 - 0.5;
 					scene.add( mesh );
 
-					meshes[ i ] = mesh;
-
 				}
 
 				renderer = new THREE.WebGLRenderer();
@@ -283,10 +275,12 @@
 				uniforms1.time.value += delta * 5;
 				uniforms2.time.value = clock.elapsedTime;
 
-				for( var i = 0; i < meshes.length; ++ i ) {
+				for ( var i = 0; i < scene.children.length; i ++ ) {
+
+					var object = scene.children[ i ];
 
-					meshes[ i ].rotation.y += delta * 0.5 * ( i % 2 ? 1 : -1 );
-					meshes[ i ].rotation.x += delta * 0.5 * ( i % 2 ? -1 : 1 );
+					object.rotation.y += delta * 0.5 * ( i % 2 ? 1 : -1 );
+					object.rotation.x += delta * 0.5 * ( i % 2 ? -1 : 1 );
 
 				}