OffscreenCanvas textures are inverted

When running Babylon.js in a web worker using an OffscreenCanvas, it does not correctly invert images when loading textures.

You can see the problem in this playground:

I found a way to work around this issue by supplying invertY to LoadImage() and adding imageOrientation: invertY ? "flipY" : "none" to createImageBitmap(). But, I’m not certain that is the best way to handle this.

I created a github issue already, but I should have posted about this here first. :pleading_face:

1 Like

When I open your playground in MacOS Chrome or Edge, I don’t see anything on the right canvas at all. Is this expected? This may be an unrelated issue but it is preventing me from repro’ing

(The PG does not work at all in Safari as transferControlToOffscreen is not supported)

I was running on Linux. I’ll see if I can run a vm.

It works on the latest Chrome in Windows 10 for me. It must be a Mac issue.

There is another post about a similar (or the same?) error. But that appears to have been fixed recently: Offscreen canvas issue - document is not defined

It seems it is a known caveat:

Thanks for the reply. Very interesting.

So, according to the spec “the equivalent ImageBitmapOptions should be used to create an ImageBitmap with the desired format.”

This is how I fixed the problem by modifying LoadImage() to create the image in the desired format. Would you be intrested if I created a PR with my changes to make LoadImage() follow the WebGL spec?

That would be awesome !!!


You rock @nmrugg !!!

1 Like