CODEWITHSUNDEEP
javascriptweb-worker
Alexander Hein
Alexander Hein

Reputation: 990

How to load inline Javascript with webworkers?

As far as I can tell, web workers need to be written in a separate JavaScript files. But How can I load the following inline Javascript with webworkers?

The following script is a example of three.js. Three.js is a JavaScript 3D Library which makes WebGL simpler.

<script>
  var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

var loader = new THREE.JSONLoader();
loader.load("mesh1.json", function(geometry) {
  var mesh1 = new THREE.Mesh(geometry, material["demomaterial"]);
  scene.add(mesh1);
});
loader.load("mesh2.json", function(geometry) {
  var mesh2 = new THREE.Mesh(geometry, material["demomaterial"]);
  scene.add(mesh2);
});
loader.load("mesh3.json", function(geometry) {
  var mesh2 = new THREE.Mesh(geometry, material["demomaterial"]);
  scene.add(mesh3);
});
var render = function() {
  requestAnimationFrame(render);

  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;

  renderer.render(scene, camera);
};

render(); 

</script>

Upvotes: 2

Views: 1334

Answers (2)

yehyaawad
yehyaawad

Reputation: 126

Checkout Bonobo.js, it allows inline Web Workers.

Since it is a Web Worker THREE.js will not be defined inside the WebWorker code. To get around this you just need to include the code for THREE.js inside the Web Worker as well.

To use THREE.js in the WebWorker you would have to add all of THREE.js's code into the hoist function shown in the snippet below.

// Create new worker
Bonobo("worker-ID");

// Hoist is like defining the functions and variables you'll use in your
// web worker code later on
Bonobo("worker-ID").hoist(function() {
  // Add THREE.js code here. copy/paste minified version
  var add = function(a, b) {
    return a + b;
  };
});

// Define a function you want to run in the Web Worker called useAdd
Bonobo("worker-ID").define("useAdd", function(data) {
  // Use THREE.js here...
  var result = add(data.a, data.b); // here we are using the function we hoisted previously
  Bonobo.log(result); // Log it in the browser
  Bonobo.done(result);
}).compile();

// Data we will add
var data = {
  a: 3,
  b: 7
};

// We use our defined function that will run in a web worker.
Bonobo("worker-ID").run("useAdd", data);

// Output: [Bonobo('worker-ID') : LOG]: 10

Bonobo('worker-ID').done(function(data) {
  $("body").append('<p>Response from Bonobo(\'' + this.ref + '\'): ' + data + "</p>");
});
<script src="https://cdn.rawgit.com/f5io/bonobo-js/master/dist/bonobo.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  Bonobo.js
</body>

Note: If THREE.js has any dependencies they will also need to be included in the Web Worker, and if THREE.js depends on the DOM then it will probably not work because the DOM is not available, or to be more specific, the window environment is missing..

Upvotes: 0

Peter Wagener
Peter Wagener

Reputation: 2092

I don't know much about three.js, but Web Workers explicitly do not have access to the window object where requestAnimationFrame(...) is defined. So the script as written above cannot be loaded into a worker, even if it was defined in a separate JS file and instantiated inside a new Worker("file.js");. If you do want to load the script "inline", almost all browsers now support the URL and Blob API's needed to do so, though the worker will still not have access to window, document, etc. See this HTML5Rocks article for details on that technique.

If the question you're really after is "How can I use Web Workers to help render WebGL?", the short answer is to do all the non-window, non-document work in a Worker, then use ArrayBuffers to pass messages back & forth between the main thread & the worker thread. You can pass large amounts of data back & forth between threads that way with minimal overhead.

Upvotes: 2

Related Questions