Clean up.

examples/webgl_animation_cloth.html

@@ -91,7 +91,7 @@
 			/* testing cloth simulation */
 
 			var pinsFormation = [];
-			var pins = [6];
+			var pins = [ 6 ];
 
 			pinsFormation.push( pins );
 
@@ -112,7 +112,7 @@
 
 			function togglePins() {
 
-				pins = pinsFormation[ ~~( Math.random() * pinsFormation.length ) ];
+				pins = pinsFormation[ ~~ ( Math.random() * pinsFormation.length ) ];
 
 			}
 
@@ -165,10 +165,10 @@
 
 				var d = 300;
 
-				light.shadow.camera.left = -d;
+				light.shadow.camera.left = - d;
 				light.shadow.camera.right = d;
 				light.shadow.camera.top = d;
-				light.shadow.camera.bottom = -d;
+				light.shadow.camera.bottom = - d;
 
 				light.shadow.camera.far = 1000;
 
@@ -230,7 +230,7 @@
 				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: groundTexture } );
 
 				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
-				mesh.position.y = -250;
+				mesh.position.y = - 250;
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
@@ -241,21 +241,21 @@
 				var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100 } );
 
 				var mesh = new THREE.Mesh( poleGeo, poleMat );
-				mesh.position.x = -125;
-				mesh.position.y = -62;
+				mesh.position.x = - 125;
+				mesh.position.y = - 62;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
 				var mesh = new THREE.Mesh( poleGeo, poleMat );
 				mesh.position.x = 125;
-				mesh.position.y = -62;
+				mesh.position.y = - 62;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
 				var mesh = new THREE.Mesh( new THREE.BoxGeometry( 255, 5, 5 ), poleMat );
-				mesh.position.y = -250 + 750/2;
+				mesh.position.y = - 250 + ( 750 / 2 );
 				mesh.position.x = 0;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
@@ -263,15 +263,15 @@
 
 				var gg = new THREE.BoxGeometry( 10, 10, 10 );
 				var mesh = new THREE.Mesh( gg, poleMat );
-				mesh.position.y = -250;
+				mesh.position.y = - 250;
 				mesh.position.x = 125;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
 				var mesh = new THREE.Mesh( gg, poleMat );
-				mesh.position.y = -250;
-				mesh.position.x = -125;
+				mesh.position.y = - 250;
+				mesh.position.x = - 125;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
@@ -301,7 +301,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				sphere.visible = !true
+				sphere.visible = ! true
 
 			}
 
@@ -327,7 +327,7 @@
 				windStrength = Math.cos( time / 7000 ) * 20 + 40;
 				windForce.set( Math.sin( time / 2000 ), Math.cos( time / 3000 ), Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
 
-				simulate(time);
+				simulate( time );
 				render();
 				stats.update();
 

examples/webgl_shadowmap.html

@@ -37,6 +37,7 @@
 		<script src="js/controls/FirstPersonControls.js"></script>
 
 		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
+		<script src="js/utils/ShadowMapViewer.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -51,18 +52,17 @@
 
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
-			var FLOOR = -250;
+			var FLOOR = - 250;
 
 			var camera, controls, scene, renderer;
 			var container, stats;
 
 			var NEAR = 10, FAR = 3000;
 
-			var sceneHUD, cameraOrtho, hudMesh;
-
 			var mixer, morphs = [];
 
 			var light;
+			var lightShadowMapViewer;
 
 			var clock = new THREE.Clock();
 
@@ -167,25 +167,17 @@
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-				var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
-				cameraOrtho.left = - aspect;
-				cameraOrtho.right = aspect;
-				cameraOrtho.top = 1;
-				cameraOrtho.bottom = - 1;
-				cameraOrtho.updateProjectionMatrix();
-
-				hudMesh.position.x = cameraOrtho.left + HUD_MARGIN;
-				hudMesh.position.y = cameraOrtho.bottom + HUD_MARGIN;
-
 				controls.handleResize();
 
 			}
 
 			function onKeyDown ( event ) {
 
-				switch( event.keyCode ) {
+				switch ( event.keyCode ) {
 
-					case 84: /*t*/ showHUD = !showHUD; break;
+					case 84:	/*t*/
+						showHUD = ! showHUD;
+						break;
 
 				}
 
@@ -193,38 +185,12 @@
 
 			function createHUD() {
 
-				var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
-
-				cameraOrtho = new THREE.OrthographicCamera( - aspect, aspect,  1, - 1, 1, 10 );
-				cameraOrtho.position.z = 5;
-
-				var shader = THREE.UnpackDepthRGBAShader;
-				var uniforms = new THREE.UniformsUtils.clone( shader.uniforms );
-
-				uniforms.tDiffuse.value = light.shadowMap;
-
-				var hudMaterial = new THREE.ShaderMaterial( {
-					uniforms: uniforms,
-					vertexShader: shader.vertexShader,
-					fragmentShader: shader.fragmentShader
-				} );
-
-				var hudHeight = 2 / 3;
-
-				var hudWidth = hudHeight * SHADOW_MAP_WIDTH / SHADOW_MAP_HEIGHT;
-
-				var hudGeo = new THREE.PlaneBufferGeometry( hudWidth, hudHeight );
-				hudGeo.translate( hudWidth / 2, hudHeight / 2, 0 );
-
-				hudMesh = new THREE.Mesh( hudGeo, hudMaterial );
-
-				hudMesh.position.x = cameraOrtho.left + HUD_MARGIN;
-				hudMesh.position.y = cameraOrtho.bottom + HUD_MARGIN;
-
-				sceneHUD = new THREE.Scene();
-				sceneHUD.add( hudMesh );
-
-				cameraOrtho.lookAt( sceneHUD.position );
+				lightShadowMapViewer = new THREE.ShadowMapViewer( light );
+				lightShadowMapViewer.position.x = 10;
+				lightShadowMapViewer.position.y = SCREEN_HEIGHT - ( SHADOW_MAP_HEIGHT / 4 ) - 10;
+				lightShadowMapViewer.size.width = SHADOW_MAP_WIDTH / 4;
+				lightShadowMapViewer.size.height = SHADOW_MAP_HEIGHT / 4;
+				lightShadowMapViewer.update();
 
 			}
 
@@ -263,10 +229,10 @@
 						bevelSize: 5,
 						bevelEnabled: true
 
-					});
+					} );
 
 					textGeo.computeBoundingBox();
-					var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+					var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
 					var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
 
@@ -329,7 +295,7 @@
 							play();
 
 					mesh.position.set( x, y, z );
-					mesh.rotation.y = Math.PI/2;
+					mesh.rotation.y = Math.PI / 2;
 
 					mesh.castShadow = true;
 					mesh.receiveShadow = true;
@@ -348,9 +314,9 @@
 					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, 450, true );
 					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, 600, true );
 
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, -300, true );
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, -450, true );
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, -600, true );
+					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, - 300, true );
+					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, - 450, true );
+					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, - 600, true );
 
 				} );
 
@@ -397,7 +363,7 @@
 
 					if ( morph.position.x  > 2000 )  {
 
-						morph.position.x = -1000 - Math.random() * 500;
+						morph.position.x = - 1000 - Math.random() * 500;
 
 					}
 
@@ -412,8 +378,7 @@
 
 				if ( showHUD ) {
 
-					renderer.clearDepth();
-					renderer.render( sceneHUD, cameraOrtho );
+					lightShadowMapViewer.render( renderer );
 
 				}
 

examples/webgl_shadowmap_viewer.html

@@ -91,9 +91,9 @@
 				dirLight.shadowCameraNear = 1;
 				dirLight.shadowCameraFar = 10;
 				dirLight.shadowCameraRight = 15;
-				dirLight.shadowCameraLeft = -15;
+				dirLight.shadowCameraLeft = - 15;
 				dirLight.shadowCameraTop	= 15;
-				dirLight.shadowCameraBottom = -15;
+				dirLight.shadowCameraBottom = - 15;
 				dirLight.shadowMapWidth = 1024;
 				dirLight.shadowMapHeight = 1024;
 				scene.add( dirLight );