mrdoob#12456 ImageBitmapLoader relies on THREE.LoaderSupport.WorkerSupport

Author: kaisalmen

examples/js/loaders/ImageBitmapLoader.js

@@ -62,37 +62,44 @@ var canUseImageBitmapOptions = detectCreateImageBitmap( [
  * Self-contained worker for fetching and decoding an image, returning an
  * ImageBitmap to the main thread.
  */
-var ImageBitmapWorker = function () {
+var Parser = (function () {
 
-	/* global self */
-
-	self.onmessage = function ( message ) {
-
-		fetch( message.data.url ).then( function ( response ) {
-
-			return response.blob();
-
-		} ).then( function ( blob ) {
+	function Parser() {
+		this.callbackBuilder = null;
+		this.callbackProgress = null;
+	}
 
-			return message.data.options === undefined
-				? self.createImageBitmap( blob )
-				: self.createImageBitmap( blob, message.data.options );
+	/* global self */
+	Parser.prototype.parse = function ( input, options ) {
+		var imageBitmapCreator = ( options === undefined )	? this.workerScope.createImageBitmap( input ) : this.workerScope.createImageBitmap( input, options );
 
-		} ).then( function (imageBitmap) {
+		var scope = this;
+		imageBitmapCreator.then( function ( imageBitmap ) {
 
-			self.postMessage( imageBitmap );
+			scope.callbackBuilder(
+				{
+					cmd: 'imageData',
+					data: imageBitmap
+				}
+			);
 
 		} ).catch( function ( error ) {
 
-			console.error('THREE.ImageBitmapWorker: ' + error);
+			var errorMessage = 'THREE.ImageBitmapWorker: ' + error;
+			console.error( errorMessage );
 
-			self.postMessage( error );
+			scope.callbackBuilder(
+				{
+					cmd: 'error',
+					msg: errorMessage
+				}
+			);
 
 		} );
-
 	};
 
-};
+	return Parser;
+})();
 
 var createAbsolutePath = function ( href ) {
 
@@ -135,6 +142,10 @@ THREE.ImageBitmapLoader.prototype = {
 
 	},
 
+	run: function run( prepData ) {
+
+	},
+
 	load: function load( url, onLoad, onProgress, onError ) {
 
 		if ( url === undefined ) url = '';
@@ -161,24 +172,19 @@ THREE.ImageBitmapLoader.prototype = {
 
 		}
 
-		// Build a worker from an anonymous function body
-		var workerBlobURL = URL.createObjectURL( new Blob(
-			[ '(', ImageBitmapWorker.toString(), ')()' ],
-			{ type: 'application/javascript' }
-		) );
-
-		var worker = new Worker( workerBlobURL );
-
-		worker.postMessage( {
-			url: createAbsolutePath( url ),
-			options: scope.options
-		} );
+		var workerSupport = new THREE.LoaderSupport.WorkerSupport();
+		var buildWorkerCode = function ( funcBuildObject, funcBuildSingelton ) {
+			var workerCode = '';
+			workerCode += '/**\n';
+			workerCode += '  * This code was constructed by ImageBitmapLoader buildWorkerCode.\n';
+			workerCode += '  */\n\n';
+			workerCode += funcBuildSingelton( 'Parser', 'Parser', Parser );
 
-		worker.onmessage = function ( message ) {
-
-			var result = message.data;
-
-			if ( result instanceof ImageBitmap ) {
+			return workerCode;
+		};
+		var scopeBuilderFunc = function ( payload ) {
+			var result = payload.data;
+			if ( payload.data instanceof ImageBitmap ) {
 
 				THREE.Cache.add( url, result );
 
@@ -194,10 +200,29 @@ THREE.ImageBitmapLoader.prototype = {
 				scope.manager.itemError( url );
 
 			}
-
 		};
+		var scopeFuncComplete = function ( message ) {
+		};
+
+		workerSupport.validate( buildWorkerCode, false );
+		workerSupport.setCallbacks( scopeBuilderFunc, scopeFuncComplete );
+		fetch( url ).then( function ( response ) {
+
+			return response.blob();
+
+		} ).then( function ( arrayBuffer ) {
+
+			workerSupport.run(
+				{
+					data: {
+						input: arrayBuffer,
+						options: scope.options
+					}
+				},
+				[ arrayBuffer.buffer ]
+			);
 
-		URL.revokeObjectURL( workerBlobURL );
+		} )
 
 	}
 

examples/js/loaders/LoaderSupport.js

@@ -891,7 +891,7 @@ THREE.LoaderSupport.WorkerRunnerRefImpl = (function () {
 	function WorkerRunnerRefImpl() {
 		var scope = this;
 		var scopedRunner = function( event ) {
-			scope.run( event.data );
+			scope.processMessage( event.data );
 		};
 		self.addEventListener( 'message', scopedRunner, false );
 	}
@@ -927,12 +927,15 @@ THREE.LoaderSupport.WorkerRunnerRefImpl = (function () {
 	 *
 	 * @param {Object} payload Raw mesh description (buffers, params, materials) used to build one to many meshes.
 	 */
-	WorkerRunnerRefImpl.prototype.run = function ( payload ) {
-		var logger = new ConsoleLogger( payload.logger.enabled, payload.logger.debug );
+	WorkerRunnerRefImpl.prototype.processMessage = function ( payload ) {
+		var logger = new ConsoleLogger();
+		if ( Validator.isValid( payload.logger ) ) {
 
-		if ( payload.cmd === 'run' ) {
+			logger.setEnabled( payload.logger.enabled );
+			logger.setDebug( payload.logger.debug );
 
-			logger.logInfo( 'WorkerRunner: Starting Run...' );
+		}
+		if ( payload.cmd === 'run' ) {
 
 			var callbacks = {
 				callbackBuilder: function ( payload ) {
@@ -948,7 +951,8 @@ THREE.LoaderSupport.WorkerRunnerRefImpl = (function () {
 			this.applyProperties( parser, payload.params );
 			this.applyProperties( parser, payload.materials );
 			this.applyProperties( parser, callbacks );
-			parser.parse( payload.buffers.input );
+			parser.workerScope = self;
+			parser.parse( payload.data.input, payload.data.options );
 
 			logger.logInfo( 'WorkerRunner: Run complete!' );
 
@@ -1046,11 +1050,17 @@ THREE.LoaderSupport.WorkerSupport = (function () {
 			var scope = this;
 			var buildWorkerCode = function ( baseWorkerCode ) {
 				scope.workerCode = baseWorkerCode;
+				if ( workerRunner == THREE.LoaderSupport.WorkerRunnerRefImpl ) {
+
+					scope.workerCode += buildObject( 'Validator', THREE.LoaderSupport.Validator );
+					scope.workerCode += buildSingelton( 'ConsoleLogger', 'ConsoleLogger', THREE.LoaderSupport.ConsoleLogger );
+
+				}
 				scope.workerCode += functionCodeBuilder( buildObject, buildSingelton );
 				scope.workerCode += buildSingelton( workerRunner.name, workerRunner.name, workerRunner );
 				scope.workerCode += 'new ' + workerRunner.name + '();\n\n';
 
-				var blob = new Blob( [ scope.workerCode ], { type: 'text/plain' } );
+				var blob = new Blob( [ scope.workerCode ], { type: 'application/javascript' } );
 				scope.worker = new Worker( window.URL.createObjectURL( blob ) );
 				scope.logger.logTimeEnd( 'buildWebWorkerCode' );
 
@@ -1059,10 +1069,8 @@ THREE.LoaderSupport.WorkerSupport = (function () {
 
 					switch ( payload.cmd ) {
 						case 'meshData':
-							scope.callbacks.builder( payload );
-							break;
-
 						case 'materialData':
+						case 'imageData':
 							scope.callbacks.builder( payload );
 							break;
 
@@ -1223,8 +1231,9 @@ THREE.LoaderSupport.WorkerSupport = (function () {
 		if ( ! Validator.isValid( this.callbacks.builder ) ) throw 'Unable to run as no "builder" callback is set.';
 		if ( ! Validator.isValid( this.callbacks.onLoad ) ) throw 'Unable to run as no "onLoad" callback is set.';
 		if ( Validator.isValid( this.worker ) || this.loading ) {
-			this.running = true;
+			if ( payload.cmd !== 'run' ) payload.cmd = 'run';
 			this.queuedMessage = payload;
+			this.running = true;
 			this._postMessage();
 
 		}

examples/js/loaders/OBJLoader2.js

@@ -254,12 +254,10 @@ THREE.OBJLoader2 = (function () {
 		var buildCode = function ( funcBuildObject, funcBuildSingelton ) {
 			var workerCode = '';
 			workerCode += '/**\n';
-			workerCode += '  * This code was constructed by OBJLoader2 buildWorkerCode.\n';
+			workerCode += '  * This code was constructed by OBJLoader2 buildCode.\n';
 			workerCode += '  */\n\n';
 			workerCode += funcBuildSingelton( 'LoaderBase', 'LoaderBase', LoaderBase );
 			workerCode += funcBuildObject( 'Consts', Consts );
-			workerCode += funcBuildObject( 'Validator', Validator );
-			workerCode += funcBuildSingelton( 'ConsoleLogger', 'ConsoleLogger', ConsoleLogger );
 			workerCode += funcBuildSingelton( 'Parser', 'Parser', Parser );
 			workerCode += funcBuildSingelton( 'RawMesh', 'RawMesh', RawMesh );
 			workerCode += funcBuildSingelton( 'RawMeshSubGroup', 'RawMeshSubGroup', RawMeshSubGroup );
@@ -278,7 +276,6 @@ THREE.OBJLoader2 = (function () {
 		}
 		this.workerSupport.run(
 			{
-				cmd: 'run',
 				params: {
 					useAsync: true,
 					materialPerSmoothingGroup: this.materialPerSmoothingGroup,
@@ -293,8 +290,9 @@ THREE.OBJLoader2 = (function () {
 					// in async case only material names are supplied to parser
 					materials: materialNames
 				},
-				buffers: {
-					input: content
+				data: {
+					input: content,
+					options: null
 				}
 			},
 			[ content.buffer ]

examples/webgl_loader_imagebitmap.html

@@ -55,6 +55,7 @@
 	<body>
 		<script src="../build/three.js"></script>
 		<script src="js/Detector.js"></script>
+		<script src="js/loaders/LoaderSupport.js"></script>
 		<script src="js/loaders/ImageBitmapLoader.js"></script>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Texture loader using ImageBitmap