Non POT ImageBitmap texture can be upside down

[takahirox]

Description of the problem

Non POT ImageBitmap texture can be upside down.

Demo: https://jsfiddle.net/7do6um2f/ (Use Chrome)

Non POT image can be resized to POT canvas in WebGLRenderer(WebGLTexture). If original image is ImageBitmap and texture.flipY is true, texture will be upside down.

This is from the difference of ImageBitmap API from others. ImageBitmap requires flipY on bitmap creation while others requires on uploading data to GPU (= texture.flipY).

texture.flipY used on uploading data to GPU is ignored for ImageBItmap. But if non POT ImageBitmap is converted to canvas, texture.flipY will have an effect. So texture will be upside down.

texture.flipY has no effect for ImageBitmap so we should force it to false if texture's image is ImageBitmap?

API difference has another issue. (May be it isn't so serious tho.) FlipY and premultiplyAlpha is required on bitmap creation. texture.flipY/premultiplyAlpha used on uploading data to GPU are ignored for ImageBitmap.

So the following code has no effect for ImageBitmap, but the code has effect if ImageBitmap is resized and converted to canvas.

texture.premultiplyAlpha = ! texture.premultiplyAlpha;
texture.flipY = ! texture.flipY;
texture.needsUpdate = true;

Three.js version

• Dev
• r103
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, ...)

[Usnul]

POT = Power-of-two (2^X), like 2, 8, 16, 32, 64...

[Mugen87]

A workaround for this issue is the usage of a WebGL 2 rendering context since it's not necessary to resize NPOT textures anymore.

[J-Rojas]

I've encountered this bug with non-POT images using WebGL2 on Firefox using Three@0.108.0. Not sure if this conversation relates to Firefox workarounds, but just adding this Firefox bug here for reference:

https://bugzilla.mozilla.org/show_bug.cgi?id=1367251

[matthewjosephtaylor]

Not sure if this is an issue that three.js needs to solve via the Texture interface.

https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap

The ImageBitmap itself has the orientation built in. I don't believe this can be changed after creation.

Example of how to flipY (maybe workaround, maybe just how to do it)

  const canvas = new OffscreenCanvas(16,16);
  // ...do stuff to canvas
  const bitmap = await createImageBitmap(canvas, {
    imageOrientation: "flipY",
  });
  const texture = new THREE.CanvasTexture(bitmap);

[ewmb7701]

This is solved using ImageBitmapLoader.setOptions.

Snippet:

const imageBitmapLoader = new THREE.ImageBitmapLoader()
imageBitmapLoader.setOptions({
  imageOrientation: 'flipY'
} as ImageBitmapOptions)

Example:

three.js/docs/api/en/loaders/ImageBitmapLoader.html

Line 34 in 3d1c5b8

loader.setOptions( { imageOrientation: 'flipY' } );

[Mugen87]

A workaround for this issue is the usage of a WebGL 2 rendering context since it's not necessary to resize NPOT textures anymore.

This workaround does not work for textures exceeding the maximum texture dimensions of the device. In this case, the resize also happens and produces a flipped image.

[LearningMike]

Just adding this incase anyone has a flipping inconsistency, it seems on mobile when ImageBitmapLoader's flipY orientation doesn't work, the setting texture's flipY to false gives you the same orientation on both PC and mobile devices.

I'm using 8k panoramic pictures so i assume the reason flipY doesn't work on an ImageBitmapLoader/CanvasTexture is primarily due to resizing on mobile. I don't know why it works, but it does.

[taphos]

WebGL ignores UNPACK_FLIP_Y_WEBGL, as ImageBitmap already contains imageOrientation, takes that into account instead
So to make behavior consistent after resize, this could be added to WebGLTextures.js
@Mugen87 what do you think?

// Dont flip ImageBitmap as flipping is ignored by WebGL, for sake of consistency in case of resize
const flipY = texture.image instanceof ImageBitmap ? false : texture.flipY;
_gl.pixelStorei( _gl.UNPACK_FLIP_Y_WEBGL, flipY );