How to load inline Javascript with webworkers?
Question
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>
2 answers
solution1
2 2016-03-12 22:05:55
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.
solution2
0 2016-03-31 05:00:37
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..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.