Three.js: [r102] Resized textures are flipped upside-down

[drcmda]

Description of the problem

Sprites are flipped. This happened after somewhere between 101 (which works) and 102. In the sandbox below you can exchange the three version, going back to the last major has them positioned correctly.

https://codesandbox.io/s/1z92z6xwz4

Three.js version

• [x] r102

Browser

• [x] Chrome

OS

• [x] macOS

[drcmda]

I noticed it seems to have to do something with texture resizing, doing this:

canvas.width = canvas.height = 1024

makes it project correct again. But when it has to resize, it flips.

[MasterJames]

I noticed trying version 102 from 99 that the texture looked flipped. I think though after attempts to flip it, and it didn't change, that there was an error in reading in the texture coordinates from the OBJ via OBJLoader.
I was originally confused by the fact that I could not find an OBJLoader.js anywhere in src so I had actually just Grabbed ObjectLoader [which is the native json format].

I had used the examples OBJLoader from r102 but I've also attempted 102 with a recovered version.

It seems only r99 (that I have or tried but probably it's okay in r100?! Alas I'm statistically doubting it's okay in r101), that is working with this OBJLoader from the examples [ or wherever I had copied it from a previous version/time ].

I even pondered that maybe there's is some documentation on a "new way" I've not been able to fully realize? please advise if so but maybe this issue with Sprites addresses something deeper.

Is a new OBJLoader.js missing from the build somehow or was it always only in the examples?

Note: this is loading how Blender 2.79 Exporter writes out the OBJ.
Maybe I'm missing loading module.js or something? I've considered renaming with three_r###.min.js and am unsure if that's wise so maybe I'll prefer to do a version folder for testing instead.

[peteshea]

I'm seeing a similar (same) issue in the latest version of the three.js/editor. If you create a plane object and then upload and map a texture to it, the UVs will be flipped and inverted.

[mmakrzem]

In the release notes for 102 (https://github.com/mrdoob/three.js/releases) under the WebGLRenderer section it says Make .setViewport(), .setScissor() relative to lower-left corner. https://github.com/mrdoob/three.js/pull/13593 Perhaps that has something to do with the flip?

[Mugen87]

Okay, I can reproduce the bug with the following fiddle. It happens when the renderer tries to resize a texture. https://jsfiddle.net/nrjL28px/4/

I can also confirm that the problem was introduced with this PR: #15805

@merwaaan Right now, resizeImage() always returns an ImageBitmap after resizing since useOffscreenCanvas evaluates to true even in a non-worker scenario. I think this is not correct and needs to be fixed. resizeImage() should only return an instance of ImageBitmap if the original source file is of type ImageBitmap.

[merwaaan]

@Mugen87 Didn't realize that ImageBitmap was flipped. I'll propose a fix.

[mrdoob]

This should now be fixed in the dev branch.
Sorry about the regression!