Clean up

examples/webgl_postprocessing_outline.html

@@ -57,7 +57,7 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var container, stats;
-			var camera, scene, renderer;
+			var camera, scene, renderer, controls;
 			var raycaster = new THREE.Raycaster();
 
 			var mouse = new THREE.Vector2();
@@ -78,75 +78,59 @@
 			};
 
 			// Init gui
+
 			var gui = new dat.GUI( { width: 300 } );
-			gui.add( params, 'edgeStrength', 0.01, 10 ).onChange( function( value ) {
+
+			gui.add( params, 'edgeStrength', 0.01, 10 ).onChange( function ( value ) {
+
 				outlinePass.edgeStrength = Number( value );
-			});
-			gui.add( params, 'edgeGlow', 0.0, 1 ).onChange( function( value ) {
+
+			} );
+
+			gui.add( params, 'edgeGlow', 0.0, 1 ).onChange( function ( value ) {
+
 				outlinePass.edgeGlow = Number( value );
-			});
-			gui.add( params, 'edgeThickness', 1, 4 ).onChange( function( value ) {
+
+			} );
+
+			gui.add( params, 'edgeThickness', 1, 4 ).onChange( function ( value ) {
+
 				outlinePass.edgeThickness = Number( value );
-			});
-			gui.add( params, 'pulsePeriod', 0.0, 5 ).onChange( function( value ) {
+
+			} );
+
+			gui.add( params, 'pulsePeriod', 0.0, 5 ).onChange( function ( value ) {
+
 				outlinePass.pulsePeriod = Number( value );
-			});
+
+			} );
+
 			gui.add( params, 'rotate' );
-			gui.add( params, 'usePatternTexture' ).onChange( function( value ) {
-				outlinePass.usePatternTexture = value;
-			});
-			var Configuration = function() {
-				this.visibleEdgeColor = '#ffffff';
-				this.hiddenEdgeColor  = '#190a05';
-			};
-			var conf = new Configuration();
 
-			var controladorVisible = gui.addColor( conf, 'visibleEdgeColor' );
-			var controladorHidden = gui.addColor( conf, 'hiddenEdgeColor' );
+			gui.add( params, 'usePatternTexture' ).onChange( function ( value ) {
 
-			controladorVisible.onChange( function( colorValue ) {
-				//the return value by the chooser is like as: #ffff
-				colorValue = colorValue.replace( '#', '' );
+				outlinePass.usePatternTexture = value;
 
-				function hexToRgb( hex ) {
+			} );
 
-					var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
-					return result ? {
-						r: parseInt( result[ 1 ], 16 ),
-						g: parseInt( result[ 2 ], 16 ),
-						b: parseInt( result[ 3 ], 16 )
-					} : null;
+			var Configuration = function () {
 
-				}
+				this.visibleEdgeColor = '#ffffff';
+				this.hiddenEdgeColor = '#190a05';
 
-				var rgba  = hexToRgb( colorValue );
-				var color = outlinePass.visibleEdgeColor;
-				color.r   = rgba.r / 255;
-				color.g   = rgba.g / 255;
-				color.b   = rgba.b / 255;
+			};
 
-			} );
+			var conf = new Configuration();
 
-			controladorHidden.onChange( function( colorValue ) {
-				//the return value by the chooser is like as: #ffff
-				colorValue = colorValue.replace( '#', '' );
+			var controllerVisible = gui.addColor( conf, 'visibleEdgeColor' ).onChange( function ( value ) {
 
-				function hexToRgb( hex ) {
+				outlinePass.visibleEdgeColor.set( value );
 
-					var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
-					return result ? {
-						r: parseInt( result[ 1 ], 16 ),
-						g: parseInt( result[ 2 ], 16 ),
-						b: parseInt( result[ 3 ], 16 )
-					} : null;
+			} );
 
-				}
+			var controllerHidden = gui.addColor( conf, 'hiddenEdgeColor' ).onChange( function ( value ) {
 
-				var rgba  = hexToRgb( colorValue );
-				var color = outlinePass.hiddenEdgeColor;
-				color.r   = rgba.r / 255;
-				color.g   = rgba.g / 255;
-				color.b   = rgba.b / 255;
+				outlinePass.hiddenEdgeColor.set( value );
 
 			} );
 
@@ -158,26 +142,60 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var width = window.innerWidth || 1;
-				var height = window.innerHeight || 1;
+				var width = window.innerWidth;
+				var height = window.innerHeight;
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 				renderer.shadowMap.enabled = true;
-				renderer.setClearColor( 0xa0a0a0 );
+				// todo - support pixelRatio in this demo
 				renderer.setSize( width, height );
 				document.body.appendChild( renderer.domElement );
 
+				scene = new THREE.Scene();
+
 				camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 100 );
-				camera.position.z = 8;
-				camera.position.x = 0;
+				camera.position.set( 0, 0, 8 );
 
-				scene = new THREE.Scene();
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 5;
+				controls.maxDistance = 20;
+				controls.enablePan = false;
+				controls.enableDamping = true;
+				controls.dampingFactor = 0.25;
+
+				//
+
+				scene.add( new THREE.AmbientLight( 0xaaaaaa, 0.2 ) );
+
+				var light = new THREE.DirectionalLight( 0xddffdd, 0.6 );
+				light.position.set( 1, 1, 1 );
+
+				light.castShadow = true;
+
+				light.shadow.mapSize.width = 1024;
+				light.shadow.mapSize.height = 1024;
+
+				var d = 10;
+
+				light.shadow.camera.left = - d;
+				light.shadow.camera.right = d;
+				light.shadow.camera.top = d;
+				light.shadow.camera.bottom = - d;
+
+				light.shadow.camera.far = 1000;
+
+				scene.add( light );
+
+				// model
 
 				var manager = new THREE.LoadingManager();
+
 				manager.onProgress = function ( item, loaded, total ) {
+
 					console.log( item, loaded, total );
+
 				};
-				// model
+
 				var loader = new THREE.OBJLoader( manager );
 				loader.load( 'models/obj/tree.obj', function ( object ) {
 
@@ -190,9 +208,9 @@
 							child.geometry.center();
 							child.geometry.computeBoundingSphere();
 							scale = 0.2 * child.geometry.boundingSphere.radius;
-							var phongMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 5 } );
+
+							var phongMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 5 } );
 							child.material = phongMaterial;
-							child.material.side = THREE.DoubleSide;
 							child.receiveShadow = true;
 							child.castShadow = true;
 
@@ -201,54 +219,16 @@
 					} );
 
 					object.position.y = 1;
-					object.scale.x /= scale;
-					object.scale.y /= scale;
-					object.scale.z /= scale;
+					object.scale.divideScalar( scale );
 					obj3d.add( object );
 
 				} );
 
-				group.add( obj3d );
-
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.enableDamping = true;
-				controls.dampingFactor = 0.25;
-
 				scene.add( group );
 
-				var light = new THREE.DirectionalLight( 0xddffdd, 0.4 );
-				light.position.z = 1;
-				light.position.y = 1;
-				light.position.x = 1;
-				scene.add( light );
-				light.castShadow = true;
-
-				light.shadow.mapSize.width = 1024;
-				light.shadow.mapSize.height = 1024;
-
-				var d = 20;
-
-				light.shadow.camera.left = - d;
-				light.shadow.camera.right = d;
-				light.shadow.camera.top = d;
-				light.shadow.camera.bottom = - d;
-
-				light.shadow.camera.far = 1000;
-
-				var light2 = new THREE.DirectionalLight( 0xaadddd, 0.15 );
-				light2.position.z = 1;
-				light2.position.x = -1;
-				light2.position.y = -1;
-				scene.add( light2 );
-
-				var light3 = new THREE.DirectionalLight( 0xddddaa, 0.1 );
-				light3.position.z = 1;
-				light3.position.x = -1;
-				light3.position.y = 1;
-				scene.add( light3 );
+				group.add( obj3d );
 
-				var light3 = new THREE.AmbientLight( 0xaaaaaa, 0.2 );
-				scene.add( light3 );
+				//
 
 				var geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
 
@@ -261,20 +241,14 @@
 					mesh.position.x = Math.random() * 4 - 2;
 					mesh.position.y = Math.random() * 4 - 2;
 					mesh.position.z = Math.random() * 4 - 2;
-					mesh.rotation.x = Math.random();
-					mesh.rotation.y = Math.random();
-					mesh.rotation.z = Math.random();
 					mesh.receiveShadow = true;
 					mesh.castShadow = true;
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 0.3 + 0.1;
+					mesh.scale.multiplyScalar( Math.random() * 0.3 + 0.1 );
 					group.add( mesh );
 
 				}
 
-				var floorMaterial = new THREE.MeshLambertMaterial();
-				floorMaterial.side = THREE.DoubleSide;
-				material.roughness = 0.5 * Math.random() + 0.25;
-				material.metalness = 0;
+				var floorMaterial = new THREE.MeshLambertMaterial( { side: THREE.DoubleSide } );
 
 				var floorGeometry = new THREE.PlaneBufferGeometry( 12, 12 );
 				var floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
@@ -286,21 +260,24 @@
 				var geometry = new THREE.TorusBufferGeometry( 1, 0.3, 16, 100 );
 				var material = new THREE.MeshPhongMaterial( { color: 0xffaaff } );
 				var torus = new THREE.Mesh( geometry, material );
-				torus.position.z = -4;
+				torus.position.z = - 4;
 				group.add( torus );
 				torus.receiveShadow = true;
 				torus.castShadow = true;
 
+				//
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
 				// postprocessing
+
 				composer = new THREE.EffectComposer( renderer );
 
 				var renderPass = new THREE.RenderPass( scene, camera );
 				composer.addPass( renderPass );
 
-				outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera);
+				outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );
 				composer.addPass( outlinePass );
 
 				var onLoad = function ( texture ) {
@@ -313,13 +290,7 @@
 
 				var loader = new THREE.TextureLoader();
 
-				// load a resource
-				loader.load(
-					// resource URL
-					'textures/tri_pattern.jpg',
-					// function when resource is loaded
-					onLoad
-				);
+				loader.load( 'textures/tri_pattern.jpg', onLoad );
 
 				effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
@@ -385,14 +356,15 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth || 1;
-				var height = window.innerHeight || 1;
+				var width = window.innerWidth;
+				var height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
 				composer.setSize( width, height );
+
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
 
 			}
@@ -411,11 +383,10 @@
 
 				}
 
-				renderer.autoClear = true;
-				renderer.setClearColor( 0xfff0f0 );
-				renderer.setClearAlpha( 0.0 );
+				controls.update();
 
 				composer.render();
+
 				stats.end();
 
 			}