excellent !!! 
Firefox needs to fully support this! It’s been partially supported since FF 44. We’re now on 69!
2 Likes
Can’t agree more!
About events. I used to run unity webgl using offscreen canvas. I handled events and it works as expected without caveats.
On worker side I changed method offscreen.addEventListener = proxyEventHandler; in the beginning of worker`s code.
function proxyEventHandler(name, handler, useCapture) {
// Storing all handlers in map
handlers[name] = handler;
// Calling main thread with event name
workerToMain('bind', [name, useCapture]);
}
// Function called from main thread, where event is a plain object
function onCanvasEvent(event) {
event.preventDefault = noop;
handlers[name](event);
}
In main thread I bind real canvas for worker and send cloned event to worker.
function workerToBrowser(msg) {
switch (msg.data.type) {
case 'bind':
// Real canvas in DOM
canvas.addEventListener(name, onCanvasEvent, useCapture);
return;
}
}
function onCanvasEvent(event) {
// We need plain object to send to worker
const mouseEventCloned = {};
// where mouseEventFields = ['altKey', 'bubbles', 'clientX', ...most events field]
for (let field of mouseEventFields) {
mouseEventCloned[field] = event[field];
}
worker.postMessage({
type: 'event',
body: mouseEventCloned,
});
}
I did a lot of other changes to simulate DOM, added some properties like offscreen.clientWidth = offscreen.width and other stuff.
4 Likes
really cool! Would you like to add this to the doc?
The scene takes a lot of time to load. In the console I get: Active camera not set. I’m using Google Chrome 70
Like offscreen canvas very much! Two questions to clarify use-cases.
CONTEXT:
Someday, we would like to render movieMode, “behind the scenes.” while user interacts with gameMode. Then switch back and forth seamlessly between the two. So…
QUESTION 1: Sequential Scene Loading
Would offscreen canvas be good for: “seamless switching” between a stack of many sequential scenes? Meaning, nextScene is always loading in the background, and switched (without loading cost) to currentScene? Is that a use-case for offscreen canvas?
Thx. Also…
QUESTION: Worker Threads loading GIANT assets - like AUDIO. We wonder.
Does off screen canvas have potential for loading BIG AUDIO in the background (or big poly) and have it available to the UI Thread (without UI performance cost)? Perhaps that exists, or does Worker Thread open up potential for background-audio-loading options?
Thanks so much.
Q1: yes!
Q2: no:) if you need to get data back to main thread you will face the issue of sending data using shared array buffers
1 Like
I speak js better than English, but I`ll try this week.
2 Likes
Are Shared Array Buffers now back in all the latest versions of the major browsers ?
I remember they disabled them (or removed them) because of the Spectre/Meltdown bug.
1 Like
Not even sure unfortunately
From my own experiments a while ago, as long as sharedArrayBuffers aren’t enabled by default, big data exchanges between workers will keep painful and sub-optimal.
This reduces also the interest for workers more generally.
2 Likes
LIKE (input handling in worker)!
- First, like how service worker loads babylon.
clone events, why?
- running engine.loop in service worker?
Oh wow!
- canvas factory.
Interesting concept.
How were you planning to use this with offscreen canvas? multiplayer splitscreen?
I was going to use it as ANMFACTORY: to fetch big arrays of numbers, in format anm={POS:[],ROT:[],META:{}}.
But you made CANVASFACTORY - really interesting.
DO YOU SEE PERFORMANCE GAINS WITH THIS APPROACH?
Impressive @kyptov
This MUST be in the doc of the offscreen canvas!!!
1 Like
In our game we have huge HTML interface which runs smoothly if engine runs in a worker. My goal is to get rid of any impact of running 3d engine on interface.
1 Like
Awesome! We have similar architecture - 2D TXT ANMS share CPU… like your clever solution. : )
Current solution is little bit ugly. For example class HTMLElement {} line is needed to work in stable version but it will be a bit confusing for documentation.
I was wondering, could we have offscreen canvas using worker-threads of nodeJS?