GLTF File Cache Not Updating

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:

before2


After:

after2

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

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