Loading images using workers

[Aykelith]

Now that workers are available pretty everywhere I think it would benefit marzipano to use them. I created this fork and it works on Chrome and only on Chrome will work until other browsers will implement OffscreenCanvas and createImageBitmap, but the workers files must be moved to the public_html/static folder of the website for the Worker constructor to be able to load them.

I created 3 workers:

• a worker that load the image using createImageBitmap and return the image bitmap; this worker is used when there is no need of transformations on the image;
• a worker that load the image using createImageBitmap and then transform it using OffscreenCanvas.

These workers are created in the constructor of loaders/HtmlImage.js where I check which workers are available on the current browser. If the features required for workers are not available we use the current implemented method using <img>

I know that there should be some refactoring done and I want to know what I need to refactor.
Also I don't what is the best method to handle the workers files that must be in the public_html/static folder.

I also create a worker for just fetching the the image data and returning a Blob and then load it normally using <img> but I don't see performance gains from doing this.

[6r33z3]

Excellent work. Just wondering is this working in your end?

In my environment (Chrome v80) I'm getting Uncaught (in promise) DOMException: The source image could not be decoded. (fetchImageUsingOffscreenCanvas.js:64)

At first I'm under impression this might due to the incompatibility between createImageBitmap() and SVG, however the issue persists in an empty scene.

[Aykelith]

Thank you, @Novezeil

Yes, on my end, with this exact code it works, same version of Chrome as you, but all my images are JPEG.

I might be able to investigate why it fails on creating an empty scene.

[6r33z3]

Thanks @Aykelith. If possible might be also worth to look at if there's any reason blocking producing release build. (I'm getting same result as CI, but npm run dev runs fine, not sure if that's the case of why I'm getting error described above).

Meanwhile I'm wondering do you have any release/dev build could potentially share? Very curious to see how much performance gain we are getting by utilizing workers. Thanks.

[Aykelith]

I had some free time and I fixed the release build. Looks like the release build require stricter syntax rules.

When I will have more time I will invest more to resolve the problems.

EDIT: Here is the release build (I hope this is what you need)
release.zip

[tjgq]

This is interesting, thanks for investigating.

I'm wondering whether we could get the same benefit without using a worker, by leveraging the resizeWidth and resizeHeight parameters to createImageBitmap, and having loadImage return the ImageBitmap instead of a canvas. The WebGL rendering pipeline should already work with ImageBitmap (and if it doesn't, it can be fixed).

Since createImageBitmap returns a promise instead of blocking, it can (in theory) be called from the main thread without an impact on performance.

Did you, by any chance, also try out this approach? How does it compare?