Allow GLTFLoader to use ImageBitmapLoader

[toji]

Fixes #19511

This is one potential approach for allowing GLTFLoader to utilize ImageBitmaps, which significantly reduce stalls in rendering when uploading textures to the GPU. Alternatively, if allowing a custom ImageLoader to be supplied to the TextureLoader is not desirable, we could use ImageBitmapLoader and CanvasTexture in this class directly when ImageBitmaps are supported and fallback to TextureLoader otherwise.

The reason this is limited to GLTFLoader for now is that ImageBitmap-based textures don't support Y-flipping in the same way that the traditional approach does. If a workaround is figured out for that then ImageBitmaps could be used more widely.

[Mugen87]

I think we should give this a try. When merged, I can update the docs and TS files.

[donmccurdy]

Thanks you!

[donmccurdy]

It's worth noting that ImageBitmapLoader depends on fetch() rather than XmlHttpRequest. I think that's OK in terms of browser support — browsers like IE11 that don't support fetch won't support createImageBitmap either, and so won't try to use this feature. But our use of fetch() does not include any HTTP request headers...

three.js/src/loaders/ImageBitmapLoader.js

Line 69 in 400acd3

fetch( url ).then( function ( res ) {

...which could be a problem for some users who specify them. We should probably try to pass those request parameters into the fetch() call.

[mrdoob]

Starting with GLTFLoader seemed like a good idea until I saw we have to add new API (setImageLoader)...

The reason this is limited to GLTFLoader for now is that ImageBitmap-based textures don't support Y-flipping in the same way that the traditional approach does. If a workaround is figured out for that then ImageBitmaps could be used more widely.

I think it may be better to try to implement glsl based Y-flipping and then implement this right in TextureLoader. Probably after taking care of #17949 though.

[toji]

An alternate route to adding this would be to have the glTF loader internally use TextureLoader on browsers that don't support ImageBitmaps and ImageBitmapLoader + CanvasTextures on browsers that do. That felt messier to me, but if we're trying to keep new API surface off of TextureLoader at all costs it's a more self contained approach.

[donmccurdy]

I'd be OK with @toji's suggestion of just putting it on GLTFLoader for now, without a new API. Might be a safer place to start, and see if there are any browser support edge cases we've missed?

[Mugen87]

Sounds good!

[toji]

Okay, updated the PR to a variant that doesn't alter TextureLoader at all. Let me know how it looks!

[mrdoob]

Okay!

[mrdoob]

Thanks!

[mrdoob]

@toji FYI, this PR broke model-viewer.

I've fixed it by passing { premultiplyAlpha: 'none' } to createImageBitmap by default: 7e5d148

[mrdoob]

@jdashg FYI, I had to add Firefox UA sniffing because the current implementation of createImageBitmap breaks when passing { premultiplyAlpha: 'none' } as options: 70aed3c

[donmccurdy]

Should have a user-facing option to disable the ImageBitmapLoader? I wonder if there may be other browser compatibility issues...

[mrdoob]

I've tested Safari too. Seems like it's not shipping createImageBitmap yet.

[larsbergstrom]

Ooof, sorry about that! I know @fernandojsg and @daoshengmu and @takahirox were looking into this, e.g., for:
https://bugzilla.mozilla.org/show_bug.cgi?id=1367251
https://bugzilla.mozilla.org/show_bug.cgi?id=1367251

[toji]

Blech. Sorry for missing the premultiplied alpha bit, but I'm glad the fix was trivial. And yes, Safari hasn't shipped createImageBitmap yet, which is 😢 but at least lends itself to clean feature detection.