Textures flipped in export when using Safari

When you export a scene with the GLTF2Export exporter, the textures are flipped vertically (pixels on the bottom right edge of the texture are on the top right edge after exporting). This issue seems to occur only when using Safari. It can be reproduced by loading a glTF file in the sandbox, exporting it as GLB from the sandbox and then loading that exported file. When you export that file again and load it, everything is back to normal.

Pinging @Drigax

Thanks, i was able to reproduce this using this scene:
https://playground.babylonjs.com/#T79ZIN#1

Nothing looks suspicious in the inspector after loading in my test scene, I assume that the glTF loader is working fine:

However I can confirm that exporting the textures in safari results in the exported textures being vertically flipped:

However, this doesn’t appear to occur when exported from Chrome:

I’ll look through our texture serialization code to see if there is anything suspicious there.

Thanks for looking into it!

I discovered a workaround for this problem, maybe this is helpful to others:
The exporter seems to create a local engine, which renders a WebGL canvas that the texture is drawn on. When setting premultipliedAlpha to true in the constructor of the local engine (line 1317 babylon.glTF2Serializer.js) the problem seems to be gone. I am guessing there’s a deeper reason why this needs to be set to false, so this quick fix is not a final solution, but maybe it helps temporarily.

1 Like

Thanks for the insight @raffael_kaehn, I’m not totally sure why either, but I can see that this issue is somewhat known:




Using your workaround seems to work well, so I opened this PR containing the fix: