Support for offscreen canvas

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?

nodeJS does not support offscreen canvas :slight_smile:

1 Like

Thanks, following the doc then :wink:

Another question about this great feature.

If we have several canvas on one page, does that mean that each canvas will have its own worker and thus its own thread?

If you use offscreen canvas: yes

1 Like

Wow :scream:

I noticed that the function


does not work properly inside a worker.

Based on @kyptov awesome work, I build a typescript version and added stuff.
You can check it here:

screen and worker are the two classes making the connection.
As you requested @Deltakosh I guess a link to these files would be great in the documentation?

This is not possible to not have webGL if offscreen canvas is supported :slight_smile:

We tested this feature on mobile.

And we get this message with an iphone

So I guess offscreencanvas are not yet available on some smartphone?

Plus I use that test which I found in your demo page @Deltakosh

if (‘OffscreenCanvas’ in window)

to make sure I can use offscreen canvas but again this test doesn’t work on mobile
From the bug above I guess we should also test ?

if (‘transferControlToOffsceen’ in canvas)

If right, I would add that to the documentation. Pretty sure a lot of people will have that issue too! :wink:

1 Like

It depends on the phone:) some supports a partial version of the offscreen canvas so yeah you can definitely update the doc :wink:

Hi. I saw you added use of ImageBitmap instead of Image class in a worker, but there is an issue. According to the WebGl spec

If the TexImageSource is an ImageBitmap, then these three parameters will be ignored. Instead the equivalent ImageBitmapOptions should be used to create an ImageBitmap with the desired format.

invertY has default true in Texture constructor and it cause that some ImageBitmap a flipped. (to restore Image class its need to reload page)

Yes this is a very good point!

We have no choice but using ImageBitmap. Then you are forced to not use invertY and instead either:

  • invert source image
  • use texture.vScale with -1
1 Like

Just thought about something similar and searched the web for this. Surprised to see this in babylon forums, since I thought I read all about this topic here. Super nice and simple implementation! Going to try this. Thank you!
Please @Deltakosh please place at least a link in the docs to this post :slight_smile: (Comparing BabylonJS:master...dennemark:patch-1 · BabylonJS/Documentation · GitHub)

1 Like

Let me add @PatrickRyan our doc keeper :slight_smile:

I’ve found @kyptov event handling methods to still be relevant for passing UI events back and forth with an offscreenCanvas. I created this code sandbox demo to show how I implemented his code in my project. It’s an attempt to put the UI specific code into their own files so they’re not interfering with other project code.
Much appriciation to @kyptov

1 Like