Raytracing Workers: Code formatting

examples/js/renderers/RaytracingWorker.js

@@ -4,24 +4,26 @@ var startX, startY, division, completed = 0;
 
 var scene, camera, renderer, loader;
 
-importScripts('../../../build/three.min.js');
+importScripts( '../../../build/three.min.js' );
 
 
-self.onmessage = function(e) {
+self.onmessage = function( e ) {
+
 	var data = e.data;
-	if (!data) return;
+	if ( ! data ) return;
+
+	if ( data.init ) {
 
-	if (data.init) {
-		console.log('init')
+		console.log( 'init' )
 		var
-			width = data.init[0],
-			height = data.init[1];
+			width = data.init[ 0 ],
+			height = data.init[ 1 ];
 
 		worker = data.worker;
 		workers = data.workers;
 		BLOCK = data.blockSize;
-		eval(data.initScene);
-		initScene(width, height);
+		eval( data.initScene );
+		initScene( width, height );
 
 		renderer = new THREE.RaytracingRendererWorker();
 		loader = new THREE.ObjectLoader();
@@ -31,35 +33,42 @@ self.onmessage = function(e) {
 		// if (data.maxRecursionDepth) maxRecursionDepth = data.maxRecursionDepth;
 
 		completed = 0;
+
 	}
 
-	if (data.scene) {
+	if ( data.scene ) {
+
+		scene = loader.parse( data.scene );
+		camera = loader.parse( data.camera );
 
-		scene = loader.parse(data.scene);
-		camera = loader.parse(data.camera);
-		
 		var positions = data.positions;
-		copyPositions(camera, positions);
-		scene.traverse( function(o) {
+		copyPositions( camera, positions );
+		scene.traverse( function( o ) {
+
 			copyPositions( o, positions );
+
 		} );
-		
+
 	}
 
-	if (data.render && scene && camera) {
+	if ( data.render && scene && camera ) {
+
 		startX = data.x;
 		startY = data.y;
-		renderer.render(scene, camera);
+		renderer.render( scene, camera );
+
 	}
 
 }
 
-function copyPositions(object, positions) {
-	var info = positions[object.uuid];
+function copyPositions( object, positions ) {
+
+	var info = positions[ object.uuid ];
+
+	object.position.fromArray( info.position );
+	object.scale.fromArray( info.scale );
+	object.rotation.fromArray( info.rotation );
 
-	object.position.fromArray(info.position);
-	object.scale.fromArray(info.scale);
-	object.rotation.fromArray(info.rotation);
 }
 
 /**
@@ -100,11 +109,13 @@ THREE.RaytracingRendererWorker = function ( parameters ) {
 	var animationFrameId = null;
 
 	this.setSize = function ( width, height ) {
+
 		canvasWidth = width;
 		canvasHeight = height;
 
 		canvasWidthHalf = Math.floor( canvasWidth / 2 );
 		canvasHeightHalf = Math.floor( canvasHeight / 2 );
+
 	};
 
 	//
@@ -442,7 +453,7 @@ THREE.RaytracingRendererWorker = function ( parameters ) {
 
 		var blockSize = BLOCK;
 
-		var data = new Uint8ClampedArray(blockSize * blockSize * 4);
+		var data = new Uint8ClampedArray( blockSize * blockSize * 4 );
 
 		var pixelColor = new THREE.Color();
 
@@ -475,29 +486,31 @@ THREE.RaytracingRendererWorker = function ( parameters ) {
 			}
 
 			// Use transferable objects! :)
-			self.postMessage({
+			self.postMessage( {
 				data: data.buffer,
 				blockX: blockX,
 				blockY: blockY,
 				blockSize: blockSize,
-			}, [data.buffer]);
+			}, [ data.buffer ] );
 
-			data = new Uint8ClampedArray(blockSize * blockSize * 4);
+			data = new Uint8ClampedArray( blockSize * blockSize * 4 );
 
 			// OK Done!
 
-			completed++;
+			completed ++;
 
-			self.postMessage({
+			self.postMessage( {
 				type: 'complete',
 				worker: worker,
 				time: Date.now() - reallyThen
-			});
+			} );
+
 		};
 
 	}() );
 
 	this.render = function ( scene, camera ) {
+
 		reallyThen = Date.now()
 
 		cancelAnimationFrame( animationFrameId );

examples/js/renderers/RaytracingWorkerRenderer.js

@@ -40,48 +40,53 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 	var workers = parameters.workers;
 	var blockSize = parameters.blockSize || 64;
 
-	console.log('%cSpinning off ' + workers + ' Workers ', 'font-size: 20px; background: black; color: white; font-family: monospace;');
+	console.log( '%cSpinning off ' + workers + ' Workers ', 'font-size: 20px; background: black; color: white; font-family: monospace;' );
 
 	this.setWorkers = function( w ) {
 
 		workers = w || navigator.hardwareConcurrency || 4;
 
-		while (pool.length < workers ) {
-
-			console.log('New Worker!!');
+		while ( pool.length < workers ) {
 
 			var i = pool.length;
 
-			var worker = new Worker('js/renderers/RaytracingWorker.js');
+			var worker = new Worker( 'js/renderers/RaytracingWorker.js' );
+
+			worker.onmessage = function( e ) {
 
-			worker.onmessage = function(e) {
 				var data = e.data;
 
-				if (!data) return;
+				if ( ! data ) return;
+
+				if ( data.blockSize ) {
 
-				if (data.blockSize) {
 					var d = data.data;
-					var imagedata = new ImageData(new Uint8ClampedArray(d), data.blockSize, data.blockSize);
+					var imagedata = new ImageData( new Uint8ClampedArray( d ), data.blockSize, data.blockSize );
 					context.putImageData( imagedata, data.blockX, data.blockY );
-				} else if (data.type == 'complete') {
-					console.log('Worker ' + data.worker, data.time / 1000, (Date.now() - reallyThen) / 1000 + ' s');
+
+				} else if ( data.type == 'complete' ) {
+
+					console.log( 'Worker ' + data.worker, data.time / 1000, ( Date.now() - reallyThen ) / 1000 + ' s' );
 
 					if ( pool.length > workers ) {
-						pool.splice( pool.indexOf( this ), 1)
+
+						pool.splice( pool.indexOf( this ), 1 )
 						return this.terminate();
+
 					}
 
-					renderNext(this);
+					renderNext( this );
+
 				}
 
 			}
 
-			worker.color = new THREE.Color().setHSL(i / workers, 0.8, 0.8).getHexString();
-			pool.push(worker);
+			worker.color = new THREE.Color().setHSL( i / workers, 0.8, 0.8 ).getHexString();
+			pool.push( worker );
 
-			if (renderering) {
+			if ( renderering ) {
 
-				worker.postMessage({
+				worker.postMessage( {
 
 					init: [ canvasWidth, canvasHeight ],
 					worker: i,
@@ -89,17 +94,22 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 					blockSize: blockSize,
 					initScene: initScene.toString()
 
-				});
+				} );
+
+				renderNext( worker );
 
-				renderNext(worker);
 			}
 
 		}
 
-		if (!renderering) {
+		if ( ! renderering ) {
+
 			while ( pool.length > workers ) {
+
 				pool.pop().terminate();
+
 			}
+
 		}
 
 	};
@@ -129,7 +139,7 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 
 		pool.forEach( function( p, i ) {
 
-			p.postMessage({
+			p.postMessage( {
 
 				init: [ width, height ],
 				worker: i,
@@ -137,7 +147,7 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 				blockSize: blockSize,
 				initScene: initScene.toString()
 
-			});
+			} );
 
 		} );
 
@@ -153,42 +163,48 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 
 	var nextBlock, totalBlocks, xblocks, yblocks;
 
-	function renderNext(worker) {
-		var current = nextBlock++;
-		if (nextBlock > totalBlocks) {
+	function renderNext( worker ) {
+
+		var current = nextBlock ++;
+		if ( nextBlock > totalBlocks ) {
+
 			renderering = false;
 			return scope.dispatchEvent( { type: "complete" } );
+
 		}
 
-		var blockX = (current % xblocks) * blockSize;
-		var blockY = (current / xblocks | 0) * blockSize;
+		var blockX = ( current % xblocks ) * blockSize;
+		var blockY = ( current / xblocks | 0 ) * blockSize;
 
-		worker.postMessage({
+		worker.postMessage( {
 			render: true,
 			x: blockX,
 			y: blockY
-		});
+		} );
 
 		context.fillStyle = '#' + worker.color;
 
 		context.fillRect( blockX, blockY, blockSize, blockSize );
+
 	}
 
 	var all = {};
 	function serializeObject( o ) {
-		all[o.uuid] = {
+
+		all[ o.uuid ] = {
 			position: o.position.toArray(),
 			rotation: o.rotation.toArray(),
 			scale: o.scale.toArray()
 		}
+
 	}
 
 	this.render = function ( scene, camera ) {
 
 		renderering = true;
 
-		var sceneJSON = scene.toJSON();
-		var cameraJSON = camera.toJSON();
+		// var sceneJSON = scene.toJSON();
+		// var cameraJSON = camera.toJSON();
 
 		// scene.traverse( serializeObject );
 		// serializeObject( camera );
@@ -204,12 +220,12 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 		context.clearRect( 0, 0, canvasWidth, canvasHeight );
 		reallyThen = Date.now();
 
-		xblocks = Math.ceil(canvasWidth / blockSize);
-		yblocks = Math.ceil(canvasHeight / blockSize);
+		xblocks = Math.ceil( canvasWidth / blockSize );
+		yblocks = Math.ceil( canvasHeight / blockSize );
 		nextBlock = 0;
 		totalBlocks = xblocks * yblocks;
 
-		pool.forEach(renderNext);
+		pool.forEach( renderNext );
 
 	};
 

examples/raytracing_sandbox_workers.html

@@ -19,9 +19,9 @@
 
 		<script>
 
-			var hash = location.hash ? location.hash.substring(1) : '3';
+			var hash = location.hash ? location.hash.substring( 1 ) : '3';
 
-			var WORKERS = +hash || navigator.hardwareConcurrency || 3;
+			var WORKERS = + hash || navigator.hardwareConcurrency || 3;
 
 			var container, info;
 
@@ -32,7 +32,7 @@
 			init();
 			render();
 
-			function initScene(width, height) {
+			function initScene( width, height ) {
 
 				camera = new THREE.PerspectiveCamera( 60, width / height, 1, 1000 );
 				camera.position.z = 600;
@@ -148,18 +148,18 @@
 
 				sphere = new THREE.Mesh( sphereGeometry, phongMaterial );
 				sphere.scale.multiplyScalar( 0.5 );
-				sphere.position.set( -50, -250+5, -50 );
+				sphere.position.set( - 50, - 250 + 5, - 50 );
 				scene.add( sphere );
 
 				sphere2 = new THREE.Mesh( sphereGeometry, mirrorMaterialSmooth );
 				sphere2.scale.multiplyScalar( 0.5 );
-				sphere2.position.set( 175, -250+5, -150 );
+				sphere2.position.set( 175, - 250 + 5, - 150 );
 				scene.add( sphere2 );
 
 				// Box
 
 				box = new THREE.Mesh( boxGeometry, mirrorMaterialFlat );
-				box.position.set( -175, -250+2.5, -150 );
+				box.position.set( - 175, - 250 + 2.5, - 150 );
 				box.rotation.y = 0.5;
 				scene.add( box );
 
@@ -167,32 +167,32 @@
 
 				glass = new THREE.Mesh( sphereGeometry, glassMaterialSmooth );
 				glass.scale.multiplyScalar( 0.5 );
-				glass.position.set( 75, -250+5, -75 );
+				glass.position.set( 75, - 250 + 5, - 75 );
 				glass.rotation.y = 0.5;
 				scene.add( glass );
 
 				// bottom
 
 				plane = new THREE.Mesh( planeGeometry, phongMaterialBoxBottom );
-				plane.position.set( 0, -300+2.5, -300 );
+				plane.position.set( 0, - 300 + 2.5, - 300 );
 				scene.add( plane );
 
 				// top
 
 				plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
-				plane.position.set( 0, 300-2.5, -300 );
+				plane.position.set( 0, 300 - 2.5, - 300 );
 				scene.add( plane );
 
 				// back
 
 				plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
 				plane.rotation.x = 1.57;
-				plane.position.set( 0, 0, -300 );
+				plane.position.set( 0, 0, - 300 );
 				scene.add( plane );
 
 				plane = new THREE.Mesh( planeGeometry, mirrorMaterialFlatDark );
 				plane.rotation.x = 1.57;
-				plane.position.set( 0, 0, -300+10 );
+				plane.position.set( 0, 0, - 300 + 10 );
 				plane.scale.multiplyScalar( 0.85 );
 				scene.add( plane );
 
@@ -200,14 +200,14 @@
 
 				plane = new THREE.Mesh( planeGeometry, phongMaterialBoxLeft );
 				plane.rotation.z = 1.57;
-				plane.position.set( -300, 0, -300 );
+				plane.position.set( - 300, 0, - 300 );
 				scene.add( plane );
 
 				// right
 
 				plane = new THREE.Mesh( planeGeometry, phongMaterialBoxRight );
 				plane.rotation.z = 1.57;
-				plane.position.set( 300, 0, -300 );
+				plane.position.set( 300, 0, - 300 );
 				scene.add( plane );
 
 				// light
@@ -215,7 +215,7 @@
 				var intensity = 70000;
 
 				var light = new THREE.PointLight( 0xffaa55, intensity );
-				light.position.set( -200, 100, 100 );
+				light.position.set( - 200, 100, 100 );
 				light.physicalAttenuation = true;
 				scene.add( light );
 
@@ -252,9 +252,9 @@
 
 				//
 
-				renderer = new THREE.RaytracingWorkerRenderer({
+				renderer = new THREE.RaytracingWorkerRenderer( {
 					workers: WORKERS
-				});
+				} );
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -266,10 +266,13 @@
 
 			}
 
-			function updateWorkers(x) {
-				if (x) {
-					WORKERS = Math.max(1, WORKERS + x);
+			function updateWorkers( x ) {
+
+				if ( x ) {
+
+					WORKERS = Math.max( 1, WORKERS + x );
 					renderer.setWorkers( WORKERS );
+
 				}
 
 				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js<a/> - raytracing renderer (using '  + WORKERS + ' <button onclick="updateWorkers(-1)">-</button><button onclick="updateWorkers(1)">+</button> web workers)';
@@ -285,6 +288,7 @@
 
 			}
 
+
 		</script>
 
 	</body>