Adapt loader to output blob for createImageBitmap

[m9dfukc]

Setup:
Pixi: v5 next #cb75b1d,
Browser: Chrome 64.0.3282
OS: macOs 10.12.06

What happens:
I am trying to offload image decoding from the main thread to avoid bumps in framerate. Using the current version of Pixi.js next the ResourceLoader provides an HTMLImageElement to createImageBitmap which seems to block the main thread as opposed to createImageBitmap(Blob) which spans a separate thread.

Code to replicate:
I uploaded my test code to github which you can find here.

[ivanpopelyshev]

---

never mind

[m9dfukc]

Yes, I know that the current version doesn't use createBitmap. This issue targets the current next branch as stated above in the Setup section.

[ivanpopelyshev]

Can you measure it in firefox?

[m9dfukc]

I would love to do measurements in Firefox, unfortunately I am not really familiar with their developer tools. Especially the performance tools a hard to read and I don't get any reasonable information from that :/

[englercj]

You can specify how an image should be loaded already, it just defaults to using HTMLImageElement as specified in the default extension-loadType mapping here.

You can set an individual resource's load type like so:

loader.add('myimage', 'myimage.png', { loadType: Resource.LOAD_TYPE.XHR, xhrType: Resource.XHR_RESPONSE_TYPE.BLOB });

That will force the loader to load that single image as a Blob over XHR, but will refer back to the extension map for any other images.

If you want to force all images to load as XHR blobs, resource-loader supports doing so by extension:

Resource.setExtensionLoadType('png', Resource.LOAD_TYPE.XHR);
Resource.setExtensionXhrType('png', Resource.XHR_RESPONSE_TYPE.BLOB);

This modifies the map linked above to map 'png' to being loaded over XHR as a Blob. When you add a resource without a specific loadType, it will look up the extension in the map and find your changed defaults.

If there is no entry in the extension-loadType mapping it will fall back to XHR. If there is no entry in the extension-xhrType mapping it will fall back to Text.

I think in pixi resource-loader's Resource class is exposed as LoaderResource.

Hope this helps.

[m9dfukc]

@englercj Ah good to know. Unfortunately this still doesn't work as wanted. The createImageBitmap still get's a inline HTMLImageElement but this time instead with <img src="image.png"> it's <img src="blob:http://192.168.178.24:9966/394aa032-57ac-4a10-8bec-16949242e74f"> ... no separate worker thread spawned for the image decoding process.

It's important to pass a Blob to createImageBitmap otherwise decoding will still happen in blocking nature on the main thread!

[m9dfukc]

I'm slowly digging through all the source code but still missing the whole picture. I'll submit a pull request whenever I am ready.

[ivanpopelyshev]

It would be good to get another specialist on texture uploading process in v5. I, @bigtimebuddy and @GoodBoyDigital understand how it works.

We've made texture-resource refactoring, but we didnt test createImageBitmap, we assumed that all problems can be solved later, architecture allows it.

[ivanpopelyshev]

texture-resource API is upgraded from completely internal pile of ... code (i guess?) to hooks for advanced users.

[themoonrat]

Hi @m9dfukc - Have you had a chance to look at opening a PR for this? Thanks! :)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.