title: Loading texture from Web Worker in Three.js
body: <p>When applying a large texture image to a Mesh for a noticeable period of time Three.js locks-up browser's main thread. Let's consider the following example:</p>
  
  <pre><code>var texLoader = new THREE.TextureLoader();
  
  texLoader.load('someLargeTexture.jpg', function(texture) {
      var geometry = new THREE.SphereGeometry(10, 32, 32);
      var material = new THREE.MeshBasicMaterial({map: texture});
      var sphere = new THREE.Mesh(geometry, material);
  
      // adding the object to the scene will lock up the browser's main thread
      scene.add(sphere);
  });
  </code></pre>
  
  <p>I also noticed the following:</p>
  
  <ul>
  <li>no thread lock-up occurs if the new object <strong>is not</strong> added to the scene</li>
  <li>changing the geometry of an object doesn't cause lock-up</li>
  <li>if a new object is created with a material borrowed from an existing object (which already is in the scene) will <strong>will not cause</strong> lock-up</li>
  <li>assigning a new material to an existing object (which already is in the scene) <strong>will causes</strong> lock-up</li>
  </ul>
  
  <p>My conclusion is that Three.js does some work on a material at point at which it's added to the scene. The result is the cached and later re-used.</p>
  
  <p>The question is if this work can somehow be offloaded to web worker, so that the main thread doesn't get locked-up?</p>
  
  <p>The worker could look like this:</p>
  
  <pre><code>var texLoader = new THREE.TextureLoader();
  
  texLoader.load('someLargeTexture.jpg', function(texture) {
      var material = new THREE.MeshBasicMaterial({map: texture});
  
      // ... long-running work goes here ...
  
      // adding the object to the scene will lock up the browser's main thread
      self.postMessage({
          msg: 'objectCreated',
          material: material.toJson(), // converting material to JSON
      });
  });
  </code></pre>
  
  <p>Then in the main thread we could do:</p>
  
  <pre><code>var worker = new Worker('worker.js');
  
  worker.addEventListener('message', function(ev) {
      var geometry = new THREE.SphereGeometry(10, 32, 32);
  
      // converting JSON back to material object
      var material = MaterialLoader.prototype.parse( ev.data.material );
  
      // this should't lock-up the main thread
      var sphere = new THREE.Mesh(geometry, material);
  
      scene.add(sphere);
  });
  </code></pre>
  
  <p>Can something like this be done?</p>