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] 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:

Properly invert ImageBitmaps BabylonJS:master ← nmrugg:invert-imageBitmaps opened 06:26PM - 18 Sep 21 UTC (UTC) [nmrugg] nmrugg +14 -7 This is primarily aimed at fixing issues with loading .babylon assets when using… an OffscreenCanvas. The issue is that according to the WebGL spec section [6.10](https://www.khronos.org/registry/webgl/specs/latest/1.0/#6.10), `pixelStorei()` ignores `UNPACK_FLIP_Y_WEBGL` (and other parameters) for ImageBitmaps. Instead, `{imageOrientation: "flipY"}` should be passed to `createImageBitmap()`. See https://forum.babylonjs.com/t/offscreencanvas-textures-are-inverted/23798 Unfortunately, both Firefox (92) and Safari (15) do not currently support OffscreenCanvas or passing options to createImageBitmap. Therefore, these changes are not possible to test on those platforms. So, I didn't add any tests to go along with this PR. Here are some example playgrounds that should be fixed by this PR: https://playground.babylonjs.com/#ZG8XE3#3 https://playground.babylonjs.com/#BES426#3 https://playground.babylonjs.com/#NMPB99#5

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] [Screen Shot 2021-09-13 at 12.07.44 PM] (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: [image] Support for offscreen canvas Announcements 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 UNPACK_FLIP_Y_WEBGL, UNPACK_PREMULTIPLY_ALPHA_WEBGL , UNPACK_COLORSPACE_CONVERSION_WEBGL … 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 …

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?

OffscreenCanvas textures are inverted

Bugs

Evgeni_Popov September 14, 2021, 10:07am 6

It seems it is a known caveat:

Topic		Replies	Views
Issue With Using Offscreen Canvas - Model Loading In With UVs off Bugs	1	1073	September 13, 2021
Make invertY flag more consistent across different texture loading scenarios Feature requests	0	93	August 12, 2024
Environment texture flipped when created using ImageBitmap Questions	3	104	April 3, 2025
Invert cubeTexture/environmentTexture Questions	5	322	December 16, 2020
Correct upside down Imgur image Questions	2	367	July 19, 2020

OffscreenCanvas textures are inverted

Related topics