Using rel="preload" with SceneLoader

Questions
1

I’m trying to use rel=“preload”, to begin downloading .gltf and .dds assets before the application’s JavaScript bundle (including Babylon.js) has finished downloading and parsing. Unfortunately Safari doesn’t make this easy, and you need to use a very specific fetch() API configuration or it will turn into a duplicate HTTP request.

<link rel="preload" as="fetch" href="/path/to/model.glb">

fetch('/path/to/model.glb', {
    method: 'GET',
    credentials: 'include',
    mode: 'no-cors',
});

Once I’ve added the <link rel="preload"...> tag to the document.head as shown above, is it possible to configure SceneLoader with options equivalent to the Fetch API configuration shown? E.g. SceneLoader.LoadAssetContainerAsync. I have found the WebRequest documentation but it seems to assume the request will be made with XmlHttpRequest rather than fetch(). Thanks!

2

Hi @donmccurdy! Welcome!
If you can fetch the data you can:

const data = fetch()
const blob = await data.blob()
const file = new File([blob], filename, { type: 'application/octet-stream' })

You can pass the file object into the SceneLoader.LoadAssetContainerAsync instead of the filename.

2 Likes
3

Hi @donmccurdy, welcome to the Babylon.js forums! :slight_smile:

Babylon.js isn’t able to use the fetch APIs because they are not available on old browsers. I’m not aware of a way to preload using XHR, so I don’t believe there is a way to configure this directly.

@roland’s solution seems reasonable. You can also create a blob url instead of a file if that is easier.

3 Likes
4

That works for me, thanks! I suspect there’s a way to preload with XHR too, but given the browser-specific differences with preloading (which are at least documented for Fetch on Stack Overflow) I’m hoping to stick with the Fetch API.

2 Likes
5

You are welcome! I recently switched to load my assets using fetch to have better control as well.

6

If you ever figure it out, please let us know. It will be useful.

1 Like