Support for offscreen canvas

Announcements
1

Hey team!

I’m glad to announce that I’ve just pushed an update for Babylon.js to support offscreen canvas.
Here is the link to the demo: Babylon.js - Worker mode

image
image.jpg1952×1555 280 KB

16 Likes
2

This killed my chrome tab! :laughing:

3

excellent !!! :slightly_smiling_face:

4

Firefox needs to fully support this! It’s been partially supported since FF 44. We’re now on 69!

2 Likes
5

Can’t agree more!

6

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.

5 Likes
7

really cool! Would you like to add this to the doc?

8

The scene takes a lot of time to load. In the console I get: Active camera not set. I’m using Google Chrome 70

9

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.

10

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
11

I speak js better than English, but I`ll try this week.

2 Likes
12

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
13

Not even sure unfortunately

14

Well not a good news: Can I use... Support tables for HTML5, CSS3, etc

1 Like
15

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
16

https://xcraft.net/tutorial/lab/babylon_worker/index.html
Input handling in worker

4 Likes
17

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

18

This MUST be in the doc of the offscreen canvas!!!

1 Like
19

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
20

Awesome! We have similar architecture - 2D TXT ANMS share CPU… like your clever solution. : )