Assets loading/caching issues in 1.57.1

Help & Support
#1

Hello,
I noticed that when using the 1.57.1 engine to build my project, I had loading/caching issues. These issues do not occur when building with 1.56.0.

It happens both when checking the “preload” toggle on the assets, or by preloading the assets through script.

Here are two screencap of my “network” tab when launching my game. Top one is on 1.56.0, bottom one on 1.57.1.

5657
56571165×600 111 KB

On 1.56.0, everything is fine, the thumbnails are preloaded (that’s the first batch of GET requests), then when they’re needed in-game, the browser uses the cached thumbnails.

Now the same thing on 1.57.1:
As you can see the browser actually performs a new request for each thumbnail, rendering the preloading useless. As you can imagine this results in texture popping up a bit late when playing the game.
It seems like the browser can’t make the link between the preloaded asset and the asset requested in-game. I wonder if this can be related to the fact that on 1.56.0, the preload request type is (img), but on 1.57.1 it is (xhr) ?

It happens on firefox and chrome both desktop and android

Thanks for your help !

#2

In 1.57, we’ve moved from Image DOM s to use ImageBitmap data for texture loading due to performance reasons.

Interesting that it breaks caching which is odd. Given it’s the same HTTP request, I wouldn’t have expected the behaviour

#3

Just tried this with some random images and don’t see the issue you are seeing. All the textures are fetched from diskcache:

image
image2054×410 111 KB

Can you provide a repro project for us to take a look at please?

#4

Thanks for you help,
I can’t share the project unfortunately.

There is something that I did not mention though because I thought it was irrelevant, but your comment makes me think it might be a clue.
We’re using lots of HTML overlays on top of our games. To make these overlays, we’re doing it like this :

this.homeButton = document.createElement("button");
this.homeButton.style["background-image"] = "url(" + this.homeButtonTexture.getFileUrl() + ")";

In that case, homeButtonTexture would be texture attribute, and the texture asset would look like this

image
image480×616 19.8 KB

Do you think the issue could happen only when using the texture this way? If you think that’s a possibility then I will investigate this a bit more

#5

Could you share a new, small project repro of the issue though?

Could be related and would need to do a small test to confirm. When you have an HTML overlay, it’s using an Image DOM element so perhaps the browser is treating this as a different request and processes the image different.

I would like to think that the browser can handle this as it’s the same URL but perhaps it’s some deliberate behaviour from the browser.

#6

Can you access this project ?
https://playcanvas.com/project/999676/overview/caching

Made two builds from here, 56 and 57, same behaviour over the texture.jpg asset (caching on 56 not caching on 57)

#7

Had a look here: https://playcanvas.com/project/999680/overview/image-html-cache-problem

In 1.57, it does 2 requests, one for the texture and the other for HTML UI
In 1.56, it’s just the one request.

We have a request here to force to use the old Image DOM element for assets here: Add option to use Image instead of ImageBitmap when loading textures · Issue #4759 · playcanvas/engine · GitHub

For now you would need to patch the engine to force it to use the older load method globally.

eg https://playcanvas.com/project/999688/overview/image-html-cache-problem-patch

This has to be set to load AFTER the engine for it to work

#8

The patch script is working!
I’ll keep an eye on that request :wink:

Thanks a lot for your support!