Clean up.

examples/webgl_tiled_forward.html

@@ -45,139 +45,157 @@
 		<script src="js/libs/stats.min.js"></script>
 
 		<script>
-		
-		// Simple form of tiled forward lighting 
+
+		// Simple form of tiled forward lighting
 		// using texels as bitmasks of 32 lights
 
 		var RADIUS = 75;
 
-		THREE.ShaderChunk["lights_pars"] += [
-			"#if defined TILED_FORWARD",
-			"uniform vec4 tileData;",
-			"uniform sampler2D tileTexture;",
-			"uniform sampler2D lightTexture;",
-			"#endif"
-		].join("\n");
-
-		THREE.ShaderChunk["lights_template"] += [
-			"",
-			"#if defined TILED_FORWARD",
-			"vec2 tUv = floor(gl_FragCoord.xy / tileData.xy * 32.) / 32. + tileData.zw;",
-			"vec4 tile = texture2D(tileTexture, tUv);",
-			"for (int i=0; i < 4; i++) {",
-			"	float tileVal = tile.x * 255.;",	
-			"  	tile.xyzw = tile.yzwx;",
-			"	if(tileVal == 0.){ continue; }",
-			"  	float tileDiv = 128.;",
-			"	for (int j=0; j < 8; j++) {",
-			"  		if (tileVal < tileDiv) {  tileDiv *= 0.5; continue; }",
-			"		tileVal -= tileDiv;",
-			"		tileDiv *= 0.5;",
-			"  		PointLight pointlight;",
-			"		float uvx = (float(8 * i + j) + 0.5) / 32.;",
-			"  		vec4 lightData = texture2D(lightTexture, vec2(uvx, 0.));",
-			"  		vec4 lightColor = texture2D(lightTexture, vec2(uvx, 1.));",
-			"  		pointlight.position = lightData.xyz;",
-			"  		pointlight.distance = lightData.w;",
-			"  		pointlight.color = lightColor.rgb;",
-			"  		pointlight.decay = lightColor.a;",
-			"  		getPointDirectLightIrradiance( pointlight, geometry, directLight );",
-			"		RE_Direct( directLight, geometry, material, reflectedLight );",
-			"	}",
-			"}",
-			"#endif"
-		].join("\n");
+		THREE.ShaderChunk[ 'lights_pars' ] += [
+			'#if defined TILED_FORWARD',
+			'uniform vec4 tileData;',
+			'uniform sampler2D tileTexture;',
+			'uniform sampler2D lightTexture;',
+			'#endif'
+		].join( '\n' );
+
+		THREE.ShaderChunk[ 'lights_template' ] += [
+			'',
+			'#if defined TILED_FORWARD',
+			'vec2 tUv = floor(gl_FragCoord.xy / tileData.xy * 32.) / 32. + tileData.zw;',
+			'vec4 tile = texture2D(tileTexture, tUv);',
+			'for (int i=0; i < 4; i++) {',
+			'	float tileVal = tile.x * 255.;',
+			'  	tile.xyzw = tile.yzwx;',
+			'	if(tileVal == 0.){ continue; }',
+			'  	float tileDiv = 128.;',
+			'	for (int j=0; j < 8; j++) {',
+			'  		if (tileVal < tileDiv) {  tileDiv *= 0.5; continue; }',
+			'		tileVal -= tileDiv;',
+			'		tileDiv *= 0.5;',
+			'  		PointLight pointlight;',
+			'		float uvx = (float(8 * i + j) + 0.5) / 32.;',
+			'  		vec4 lightData = texture2D(lightTexture, vec2(uvx, 0.));',
+			'  		vec4 lightColor = texture2D(lightTexture, vec2(uvx, 1.));',
+			'  		pointlight.position = lightData.xyz;',
+			'  		pointlight.distance = lightData.w;',
+			'  		pointlight.color = lightColor.rgb;',
+			'  		pointlight.decay = lightColor.a;',
+			'  		getPointDirectLightIrradiance( pointlight, geometry, directLight );',
+			'		RE_Direct( directLight, geometry, material, reflectedLight );',
+			'	}',
+			'}',
+			'#endif'
+		].join( '\n' );
 
 		var lights = [], objects = [];
 
 		var State = {
-			rows:0,
-			cols:0,
+			rows: 0,
+			cols: 0,
 			width: 0,
 			height: 0,
-			tileData : { type: "v4", value: null },
-			tileTexture: { type: "t", value: null },
+			tileData: { type: 'v4', value: null },
+			tileTexture: { type: 't', value: null },
 			lightTexture: {
-				type: "t", 
-				value: new THREE.DataTexture(new Float32Array(32 * 2 * 4), 32, 2, THREE.RGBAFormat, THREE.FloatType)
+				type: 't',
+				value: new THREE.DataTexture( new Float32Array( 32 * 2 * 4 ), 32, 2, THREE.RGBAFormat, THREE.FloatType )
 			},
 		};
 
 		function resizeTiles() {
+
 			var width = window.innerWidth;
 			var height = window.innerHeight;
-			
+
 			State.width = width;
 			State.height = height;
-			State.cols = Math.ceil(width / 32);
-			State.rows = Math.ceil(height / 32);
-			State.tileData.value = [ width, height, 0.5 / Math.ceil( width / 32), 0.5 / Math.ceil( height / 32) ];
-			State.tileTexture.value = new THREE.DataTexture( new Uint8Array(State.cols * State.rows * 4), State.cols, State.rows);
+			State.cols = Math.ceil( width / 32 );
+			State.rows = Math.ceil( height / 32 );
+			State.tileData.value = [ width, height, 0.5 / Math.ceil( width / 32 ), 0.5 / Math.ceil( height / 32 ) ];
+			State.tileTexture.value = new THREE.DataTexture( new Uint8Array( State.cols * State.rows * 4 ), State.cols, State.rows );
+
 		}
 
 		// Generate the light bitmasks and store them in the tile texture
-		function tileLights(renderer, scene, camera) {
-			if(!camera.projectionMatrix) return;
-			
+		function tileLights( renderer, scene, camera ) {
+
+			if ( ! camera.projectionMatrix ) return;
+
 			var d = State.tileTexture.value.image.data;
 			var ld = State.lightTexture.value.image.data;
-			
+
 			var viewMatrix = camera.matrixWorldInverse;
-			
-			d.fill(0);
-			
+
+			d.fill( 0 );
+
 			var vector = new THREE.Vector3();
 
-			lights.forEach(function (light, index) {
+			lights.forEach( function ( light, index ) {
 
 				vector.setFromMatrixPosition( light.matrixWorld );
-				
-				var bs = lightBounds(camera, vector, light._light.radius);
-				
+
+				var bs = lightBounds( camera, vector, light._light.radius );
+
 				vector.applyMatrix4( viewMatrix );
-				vector.toArray(ld, 4 * index);
-				ld[4 * index + 3] = light._light.radius;
-				light._light.color.toArray(ld,32 * 4 + 4 * index);
-				ld[32 * 4 + 4 * index + 3] = light._light.decay;
-
-				if(bs[1] < 0 || bs[0] > State.width || bs[3] < 0 || bs[2] > State.height) return;
-				if(bs[0] < 0) bs[0] = 0;
-				if(bs[1] > State.width) bs[1] = State.width;
-				if(bs[2] < 0) bs[2] = 0;
-				if(bs[3] > State.height) bs[3] = State.height;
-				
-				var i4 = Math.floor(index / 8), i8 = 7 - (index % 8);
-				for (var i = Math.floor(bs[2] / 32); i <= Math.ceil(bs[3]/32); i++) {
-					for(var j = Math.floor(bs[0]/32); j <= Math.ceil(bs[1]/32); j++) {
-						d[(State.cols * i + j) * 4 + i4] |= 1 << i8;
+				vector.toArray( ld, 4 * index );
+				ld[ 4 * index + 3 ] = light._light.radius;
+				light._light.color.toArray( ld, 32 * 4 + 4 * index );
+				ld[ 32 * 4 + 4 * index + 3 ] = light._light.decay;
+
+				if ( bs[ 1 ] < 0 || bs[ 0 ] > State.width || bs[ 3 ] < 0 || bs[ 2 ] > State.height ) return;
+				if ( bs[ 0 ] < 0 ) bs[ 0 ] = 0;
+				if ( bs[ 1 ] > State.width ) bs[ 1 ] = State.width;
+				if ( bs[ 2 ] < 0 ) bs[ 2 ] = 0;
+				if ( bs[ 3 ] > State.height ) bs[ 3 ] = State.height;
+
+				var i4 = Math.floor( index / 8 ), i8 = 7 - ( index % 8 );
+
+				for ( var i = Math.floor( bs[ 2 ] / 32 ); i <= Math.ceil( bs[ 3 ] / 32 ); i ++ ) {
+
+					for ( var j = Math.floor( bs[ 0 ] / 32 ); j <= Math.ceil( bs[ 1 ] / 32 ); j ++ ) {
+
+						d[ ( State.cols * i + j ) * 4 + i4 ] |= 1 << i8;
+
 					}
-				}        
-			});
+
+				}
+
+			} );
 
 			State.tileTexture.value.needsUpdate = true;
 			State.lightTexture.value.needsUpdate = true;
+
 		}
 
 		// Screen rectangle bounds from light sphere's world AABB
-		var lightBounds = function (){
+		var lightBounds = function () {
+
 			v = new THREE.Vector3();
-			return function (camera, pos, r) {
+			return function ( camera, pos, r ) {
+
 				var minX = State.width, maxX = 0, minY = State.height, maxY = 0, hw = State.width / 2, hh = State.height / 2;
-				for(var i = 0; i < 8; i++){
-					v.copy(pos);
-					v.x += i & 1 ? r : -r;
-					v.y += i & 2 ? r : -r;
-					v.z += i & 4 ? r : -r;
-					var vector = v.project(camera);
-					var x = (vector.x * hw) + hw;
-					var y = (vector.y * hh) + hh;
-					minX = Math.min(minX, x);
-					maxX = Math.max(maxX, x);
-					minY = Math.min(minY, y);
-					maxY = Math.max(maxY, y);
-				}	
-				return [minX, maxX, minY, maxY];
-			}
+
+				for ( var i = 0; i < 8; i ++ ) {
+
+					v.copy( pos );
+					v.x += i & 1 ? r : - r;
+					v.y += i & 2 ? r : - r;
+					v.z += i & 4 ? r : - r;
+					var vector = v.project( camera );
+					var x = ( vector.x * hw ) + hw;
+					var y = ( vector.y * hh ) + hh;
+					minX = Math.min( minX, x );
+					maxX = Math.max( maxX, x );
+					minY = Math.min( minY, y );
+					maxY = Math.max( maxY, y );
+
+				}
+
+				return [ minX, maxX, minY, maxY ];
+
+		};
+
 		}();
 
 
@@ -193,15 +211,15 @@
 		var renderer = new THREE.WebGLRenderer( { antialias: false } );
 		renderer.toneMapping = THREE.LinearToneMapping;
 		container.appendChild( renderer.domElement );
-		
+
 		var renderTarget = new THREE.WebGLRenderTarget();
 
 		scene.add( new THREE.AmbientLight( 0xffffff, 0.33 ) );
-		// At least one regular Pointlight is needed to activate light support 
-		scene.add(new THREE.PointLight( 0xff0000, 0.1, 0.1 ));
-		
+		// At least one regular Pointlight is needed to activate light support
+		scene.add( new THREE.PointLight( 0xff0000, 0.1, 0.1 ) );
+
 		var bloom = new THREE.UnrealBloomPass( new THREE.Vector2(), 0.8, 0.6, 0.8 );
-		bloom.renderToScreen = true;				
+		bloom.renderToScreen = true;
 
 		var stats = new Stats();
 		container.appendChild( stats.dom );
@@ -209,104 +227,129 @@
 		controls = new THREE.OrbitControls( camera, renderer.domElement );
 		controls.minDistance = 120;
 		controls.maxDistance = 320;
-			
+
 		var materials = [];
 
 		var Heads = [
-			{ type: "physical", uniforms: { diffuse: 0x888888, metalness: 1.0, roughness: 0.66}, defines: {} },
-			{ type: "standard", uniforms: { diffuse: 0x666666, metalness: 0.1, roughness: 0.33}, defines: {} },
-			{ type: "phong", uniforms: { diffuse: 0x777777, shininess: 20}, defines: {} },
-			{ type: "phong", uniforms: { diffuse: 0x555555, shininess: 10}, defines: { TOON: 1} }
+			{ type: 'physical', uniforms: { diffuse: 0x888888, metalness: 1.0, roughness: 0.66 }, defines: {} },
+			{ type: 'standard', uniforms: { diffuse: 0x666666, metalness: 0.1, roughness: 0.33 }, defines: {} },
+			{ type: 'phong', uniforms: { diffuse: 0x777777, shininess: 20 }, defines: {} },
+			{ type: 'phong', uniforms: { diffuse: 0x555555, shininess: 10 }, defines: { TOON: 1 } }
 		];
 
-		function init (geom) {
+		function init( geom ) {
+
 			var sphereGeom = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
-			var tIndex = Math.round(Math.random() * 3);
-			Object.keys(Heads).forEach(function(t, index) {
+			var tIndex = Math.round( Math.random() * 3 );
+			Object.keys( Heads ).forEach( function ( t, index ) {
+
 				var g = new THREE.Group();
-				var conf = Heads[t];
-				var ml = THREE.ShaderLib[conf.type];
-				var mtl = new THREE.ShaderMaterial({
+				var conf = Heads[ t ];
+				var ml = THREE.ShaderLib[ conf.type ];
+				var mtl = new THREE.ShaderMaterial( {
 					lights: true,
 					fragmentShader: ml.fragmentShader,
 					vertexShader: ml.vertexShader,
-					uniforms: THREE.UniformsUtils.clone(ml.uniforms),
+					uniforms: THREE.UniformsUtils.clone( ml.uniforms ),
 					defines: conf.defines,
 					transparent: tIndex === index ? true : false,
 
-				});
+				} );
+
 				mtl.uniforms.opacity.value = tIndex === index ? 0.9 : 1;
 				mtl.uniforms.tileData = State.tileData;
 				mtl.uniforms.tileTexture = State.tileTexture;
 				mtl.uniforms.lightTexture = State.lightTexture;
-				for( var u in conf.uniforms ) {
-					var vu = conf.uniforms[u];
-					if(mtl.uniforms[u].value.set) {
-						mtl.uniforms[u].value.set(vu);
+
+				for ( var u in conf.uniforms ) {
+
+					var vu = conf.uniforms[ u ];
+
+					if ( mtl.uniforms[ u ].value.set ) {
+
+						mtl.uniforms[ u ].value.set( vu );
+
 					} else {
-						mtl.uniforms[u].value = vu;
+
+						mtl.uniforms[ u ].value = vu;
+
 					}
+
 				}
-				mtl.defines["TILED_FORWARD"] = 1;
-				materials.push(mtl);
-				var obj = new THREE.Mesh(geom, mtl);
+
+				mtl.defines[ 'TILED_FORWARD' ] = 1;
+				materials.push( mtl );
+				var obj = new THREE.Mesh( geom, mtl );
 				mtl.side = tIndex === index ? THREE.FrontSide : THREE.DoubleSide;
-				
+
 				g.rotation.y = index * Math.PI / 2;
-				g.position.x = Math.sin(index * Math.PI / 2) * RADIUS;
-				g.position.z = Math.cos(index * Math.PI / 2) * RADIUS;
-				g.add(obj);
+				g.position.x = Math.sin( index * Math.PI / 2 ) * RADIUS;
+				g.position.z = Math.cos( index * Math.PI / 2 ) * RADIUS;
+				g.add( obj );
+
+				for ( var i = 0; i < 8; i ++ ) {
 
-				for(var i=0; i < 8; i++) {
-					var sat = Math.floor(33 + 33 * Math.random());
-					var chroma = Math.random() * 100; 
+					var color = new THREE.Color().setHSL( Math.random(), 1.0, 0.5 );
 					var l = new THREE.Group();
 
-					l.add(new THREE.Mesh(
-						sphereGeom, 
-						new THREE.MeshBasicMaterial( { color: new THREE.Color("hsl(" + chroma + ", " + sat + "%, 50%)") } )
-					));
-					l.add(new THREE.Mesh(
-						sphereGeom, 
-						new THREE.MeshBasicMaterial( { 
-							color: new THREE.Color("hsl(" + chroma + ", " + sat + "%, 50%)"), 
+					l.add( new THREE.Mesh(
+						sphereGeom,
+						new THREE.MeshBasicMaterial( {
+							color: color
+						} )
+					) );
+
+					l.add( new THREE.Mesh(
+						sphereGeom,
+						new THREE.MeshBasicMaterial( {
+							color: color,
 							transparent: true,
 							opacity: 0.033
 						} )
-					));
-					l.children[1].scale.set(6.66,6.66,6.66);
+					) );
+
+					l.children[ 1 ].scale.set( 6.66, 6.66, 6.66 );
 
 					l._light = {
-						color: new THREE.Color("hsl(" + chroma + ", " + sat + "%, 50%)"),
+						color: color,
 						radius: RADIUS,
 						decay: 1,
 						sy: Math.random(),
 						sr: Math.random(),
-						sc: Math.random() ,
-						py: Math.random() * Math.PI ,
-						pr: Math.random() * Math.PI ,
-						pc: Math.random() * Math.PI ,
-						dir: Math.random() > 0.5 ? 1:-1
+						sc: Math.random(),
+						py: Math.random() * Math.PI,
+						pr: Math.random() * Math.PI,
+						pc: Math.random() * Math.PI,
+						dir: Math.random() > 0.5 ? 1 : - 1
 					};
 
-					lights.push(l);
-					g.add(l);
+					lights.push( l );
+					g.add( l );
+
 				}
-				scene.add(g);
-			});
+
+				scene.add( g );
+
+			} );
+
 		}
 
-		function update(now) {
-			lights.forEach(function (l) {
+		function update( now ) {
+
+			lights.forEach( function ( l ) {
+
 				var ld = l._light;
-				var radius = 0.8 + 0.2 * Math.sin(ld.pr + (0.6 + 0.3 * ld.sr) * now);
-				l.position.x =(Math.sin(ld.pc + (0.8 + 0.2 * ld.sc) * now * ld.dir)) * radius * RADIUS;
-				l.position.z =(Math.cos(ld.pc + (0.8 + 0.2 * ld.sc) * now * ld.dir)) * radius * RADIUS;
-				l.position.y = Math.sin(ld.py + (0.8 + 0.2 * ld.sy) * now) * radius * 32;
-			});
+				var radius = 0.8 + 0.2 * Math.sin( ld.pr + ( 0.6 + 0.3 * ld.sr ) * now );
+				l.position.x = ( Math.sin( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
+				l.position.z = ( Math.cos( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
+				l.position.y = Math.sin( ld.py + ( 0.8 + 0.2 * ld.sy ) * now ) * radius * 32;
+
+			} );
+
 		}
 
 		function resize() {
+
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderTarget.setSize( window.innerWidth, window.innerHeight );
@@ -314,10 +357,13 @@
 			camera.aspect = window.innerWidth / window.innerHeight;
 			camera.updateProjectionMatrix();
 			resizeTiles();
+
 		}
 
-		function postEffect(renderer, scene, camera) {
-			bloom.render(renderer, null, renderTarget);
+		function postEffect( renderer, scene, camera ) {
+
+			bloom.render( renderer, null, renderTarget );
+
 		}
 
 		scene.onBeforeRender = tileLights;
@@ -326,18 +372,23 @@
 
 		var loader = new THREE.JSONLoader();
 
-		loader.load('./obj/walt/WaltHead_slim.js', function(geometry) {
-			window.addEventListener("resize", resize);
-			init(geometry);
+		loader.load( './obj/walt/WaltHead_slim.js', function ( geometry ) {
+
+			window.addEventListener( 'resize', resize );
+			init( geometry );
 			resize();
-			
-			renderer.animate( function(time) {
-				update(time/1000);
+
+			renderer.animate( function ( time ) {
+
+				update( time / 1000 );
 				stats.begin();
-				renderer.render(scene, camera, renderTarget); 
+				renderer.render( scene, camera, renderTarget );
 				stats.end();
-			});
-		});
+
+			} );
+
+		} );
+
 		</script>
 	</body>
-</html>
+</html>