Decode images in a web worker

While porting my game engine from raw WebGL to PIXI I noticed that I got back those dreaded dropped frames while decoding game backgrounds and spritesheets. While profiling it, I noticed the browser was decoding images in the main thread whenever it dropped frames:

In this exampe, the task took 27 ms. Decoding the image (a JPG of 1250x500 pixels) took 19.92 ms, and the rest of texImage2D (preparing and uploading to the GPU) took 5.24 ms. If it wasn’t for the decoding part, the task would have fit within the frame budget without issues.

In my original code I used to have a tiny web worker that would decode the images off the main thread using createImageBitmap. I was using the same approach that PIXI already uses for the BASIS web worker (declare a function, convert it to string, and use a blob as the URL for the worker).

It caught me by surprise that PIXI didn’t do that as well for non-basis images, given how much love there is for solid frame-rates.

Is this something that could be included in the next version of PIXI? If not by default, it would be awesome to have it as a flag that can be turned on for those of us dealing with large images.

In the meantime, can the application code do this with a loader middleware? I didn’t see support for ImageBitmap in the ResourceType enum, but I couldn’t find much documentation for the resource-loader library, so I might be looking at the wrong place.

Thanks!

[eXponenta]

As you can see, it keeps blocking the main thread even though it uses createImageBitmap. The good news is that createTexImage2D was running on another task, so the chances of dropping frames seems to decrease slightly when using this flag.

Oops. This is problem how we create ImageBitmap Because there are BIG difference between createImageBitmap from Image or blob. First case run decoding in main thread, second in worker pool.

Right implementation: https://www.pixiplayground.com/#/edit/Uvpg4lY5Aw-Avf_T8bI6H

Frong implementation: https://www.pixiplayground.com/#/edit/tSTW9CUJTMKXijnct469N

Isolated demo: From Image: https://jsfiddle.net/3sb410zt/1/ From blob: https://jsfiddle.net/wfu04js1/

Possible solution:

https://www.pixiplayground.com/#/edit/XXAC6nMLN2X9_RZNTrcjY

[rubenlg]

Thanks guys!