Raytracing: make render time worker spin up work flawlessly

examples/js/renderers/RaytracingWorker.js

@@ -2,7 +2,7 @@ var workers, worker;
 var BLOCK = 128;
 var startX, startY, division, completed = 0;
 
-var scene, camera, renderer, loader;
+var scene, camera, renderer, loader, sceneId;
 
 importScripts( '../../../build/three.min.js' );
 
@@ -14,7 +14,6 @@ self.onmessage = function( e ) {
 
 	if ( data.init ) {
 
-		console.log( 'init' )
 		var
 			width = data.init[ 0 ],
 			height = data.init[ 1 ];
@@ -23,8 +22,8 @@ self.onmessage = function( e ) {
 		workers = data.workers;
 		BLOCK = data.blockSize;
 
-		if (!renderer) renderer = new THREE.RaytracingRendererWorker();
-		if (!loader) loader = new THREE.ObjectLoader();
+		if ( ! renderer ) renderer = new THREE.RaytracingRendererWorker();
+		if ( ! loader ) loader = new THREE.ObjectLoader();
 
 		renderer.setSize( width, height );
 
@@ -62,6 +61,7 @@ self.onmessage = function( e ) {
 
 		} );
 
+		sceneId = data.sceneId;
 	}
 
 	if ( data.render && scene && camera ) {
@@ -487,27 +487,22 @@ THREE.RaytracingRendererWorker = function ( parameters ) {
 				}
 
 			}
-
+			
 			// Use transferable objects! :)
 			self.postMessage( {
 				data: data.buffer,
 				blockX: blockX,
 				blockY: blockY,
 				blockSize: blockSize,
+				sceneId: sceneId,
+				time: Date.now() - reallyThen, // time for this renderer
 			}, [ data.buffer ] );
 
 			data = new Uint8ClampedArray( blockSize * blockSize * 4 );
 
 			// OK Done!
-
 			completed ++;
 
-			self.postMessage( {
-				type: 'complete',
-				worker: worker,
-				time: Date.now() - reallyThen
-			} );
-
 		};
 
 	}() );

examples/js/renderers/RaytracingWorkerRenderer.js

@@ -39,7 +39,7 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 
 	var workers = parameters.workers;
 	var blockSize = parameters.blockSize || 64;
-	var toRender = [], workerId = 0;
+	var toRender = [], workerId = 0, sceneId = 0;
 
 	console.log( '%cSpinning off ' + workers + ' Workers ', 'font-size: 20px; background: black; color: white; font-family: monospace;' );
 
@@ -48,11 +48,6 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 		workers = w || navigator.hardwareConcurrency || 4;
 
 		while ( pool.length < workers ) {
-
-			console.log( workers, pool.length );
-
-			var i = pool.length;
-
 			var worker = new Worker( 'js/renderers/RaytracingWorker.js' );
 			worker.id = workerId++;
 
@@ -62,15 +57,14 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 
 				if ( ! data ) return;
 
-				if ( data.blockSize ) {
+				if ( data.blockSize && sceneId == data.sceneId ) { // we match sceneId here to be sure
 
-					var d = data.data;
-					var imagedata = new ImageData( new Uint8ClampedArray( d ), data.blockSize, data.blockSize );
+					var imagedata = new ImageData( new Uint8ClampedArray( data.data ), data.blockSize, data.blockSize );
 					context.putImageData( imagedata, data.blockX, data.blockY );
 
-				} else if ( data.type == 'complete' ) {
+					// completed
 
-					console.log( 'Worker ' + data.worker, data.time / 1000, ( Date.now() - reallyThen ) / 1000 + ' s' );
+					console.log( 'Worker ' + this.id, data.time / 1000, ( Date.now() - reallyThen ) / 1000 + ' s' );
 
 					if ( pool.length > workers ) {
 
@@ -85,13 +79,20 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 
 			}
 
-			worker.color = new THREE.Color().setHSL( i / workers, 0.8, 0.8 ).getHexString();
+			worker.color = new THREE.Color().setHSL( Math.random() , 0.8, 0.8 ).getHexString();
 			pool.push( worker );
 
 			if ( renderering ) {
 
 				updateSettings( worker );
 
+				worker.postMessage( {
+					scene: sceneJSON,
+					camera: cameraJSON,
+					annex: materials,
+					sceneId: sceneId
+				} );
+
 				renderNext( worker );
 
 			}
@@ -176,7 +177,8 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 		worker.postMessage( {
 			render: true,
 			x: blockX,
-			y: blockY
+			y: blockY,
+			sceneId: sceneId
 		} );
 
 		context.fillStyle = '#' + worker.color;
@@ -187,6 +189,8 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 
 	var materials = {};
 
+	var sceneJSON, cameraJSON, reallyThen;
+
 	// additional properties that were not serialize automatically
 
 	var _annex = {
@@ -231,18 +235,21 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 		if ( camera.parent === null ) camera.updateMatrixWorld();
 
 
-		var sceneJSON = scene.toJSON();
-		var cameraJSON = camera.toJSON();
+		sceneJSON = scene.toJSON();
+		cameraJSON = camera.toJSON();
+		++ sceneId;
 
 		scene.traverse( serializeObject );
 
-		pool.forEach(function(worker) {
-			worker.postMessage({
+		pool.forEach( function( worker ) {
+
+			worker.postMessage( {
 				scene: sceneJSON,
 				camera: cameraJSON,
-				annex: materials
-			});
-		});
+				annex: materials,
+				sceneId: sceneId
+			} );
+		} );
 
 		context.clearRect( 0, 0, canvasWidth, canvasHeight );
 		reallyThen = Date.now();
@@ -276,7 +283,6 @@ THREE.RaytracingWorkerRenderer = function ( parameters ) {
 		}
 
 
-
 		pool.forEach( renderNext );
 
 	};