OffscreenCanvas textures are inverted

Bugs
1

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: https://playground.babylonjs.com/#NMPB99#5

offscreen-canvas-bug
offscreen-canvas-bug719×695 64 KB

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
3

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

image
image1674×1478 24.5 KB

Screen Shot 2021-09-13 at 12.07.44 PM
Screen Shot 2021-09-13 at 12.07.44 PM1094×260 49.2 KB

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

4

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

5

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

6

It seems it is a known caveat:

8

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?

9

That would be awesome !!!

10
3 Likes
11

You rock @nmrugg !!!

1 Like