GLTF File Cache Not Updating

Questions
, ,
1

I am following the instruction from here caching tutorial.

The browser does not get the new version of the .gltf file after the manifest file version has been incremented.

Before:

before
before1049×54 3.78 KB
before2

After:

after
after1030×52 3.56 KB
after2

Even after the manifest file has been updated, the browser is still serving the .gltf file from disk cache.

2

Personally, I’d rely more so on browser caching + service worker caching instead of application-level caching.

What I do is:
(1) Every model’s filename is a hash of the content (run crc32 path-to-file.gltf)
(2) Have a service worker setup to always cache any .gltf/.glb/.bin
(3) Disable range requests in SceneLoader[1]
(4) Have CDN or NGINX or whatever return proper Cache-Control headers (immutable, public)
(5) Have a manifest in your JS code which lists out the filenames mapping.

Additionally, I always use GLBs instead of GLTF. This minimizes the number of requests the browser makes, which can still be a bottleneck even with Keep Alive and all that stuff.

I also use gltfpack to compress models: GitHub - zeux/meshoptimizer: Mesh optimization library that makes meshes smaller and faster to render, which is quite a good library.

If you have lots of shared texture images or your models are large (> 5 MB), then its probably better to have multiple files.

[1]:

SceneLoader.OnPluginActivatedObservable.add(function (loader) {
  if (loader.name === "gltf") {
    const gltf: GLTFFileLoader = loader;
    gltf.useRangeRequests = false;
  }
});
1 Like
3

Hi,

Look awesome =)
I have a lot of GLB to make in cache, even if I have a manifest file for each, no one are in cache, so the ImportMesh always redownload the file.

To let me understand and see correctly, to be sure to not make mistakes.
Can you share me a PG, GIT or other?

Best regards.

4

Feel like it would be good for our documentation to have a section on service worker caching, so I created a Github issue for it: Add section on service worker caching · Issue #417 · BabylonJS/Documentation (github.com) :smiley:

1 Like