Best practice for background rendering?

Next to our main scene, we sometimes need to render another object in an offscreen context without showing it to the user.
The offscreen demo Babylon.js - Worker mode is not even running on Chrome under MacOS. What alternatives do I have?
Thanks so much!

You can render into an hidden canvas which will have the same results except for perfs :frowning: I truly wonder why it does not work on MacOS in Chrome.

@Cedric could you have a look ?

Sure! I’ll take a look.


Ok, thanks! I’ll try that. Performance is not an issue in this case.

Indeed, there is no offscreen canvas rendering on Chrome/MacOS.
I’ve tried with Safari and Firefox and a message is displayed saying that offscreen canvas is not supported. Is it possible that it’s not available for Chrome as well but the error message is not displayed?

This sheet says, it should work on Chrome:

This error comes up in Chrome on Mac:

I’ll fix that

Thanks for the report

Thanks @Deltakosh :slight_smile:

Please allow me another question about the hidden canvas concept: How can I make sure, everything is set up correctly (scene, mesh, shader, material) before accessing the created image? Right now, I wait one frame and on MacOS, the image is ready and perfect.
On Windows, sometimes I get the image without the object’s material, sometimes a black image and sometimes everything is fine. When I wait four frames on Windows, most of the times, it seems to be alright - but that cannot be the best solution, right?

I’m not sure this is the problem, but are you using scene.executeWhenReady or something similar?

FWIW , this broke in three recently too. OffscreenCanvas support broken · Issue #22811 · mrdoob/three.js · GitHub

1 Like

No, but I’l try that, thanks!

@jeremy-coleman you nailed it :wink:

I ll have a fix soon

PR is up it will be in the next nightly Fix babylon worker and texture WhenAllReady by sebavan · Pull Request #11457 · BabylonJS/Babylon.js · GitHub

1 Like