Advantages of Loading Babylon.js Assets from Memory Using Blob URLs vs. Other Methods?

Questions
1

Hi everyone,

I’ve been experimenting with Babylon.js and discovered that you can load 3D assets directly from memory by converting an ArrayBuffer to a Blob URL, like this:

// 1. Load the GLB into memory
const assetArrayBuffer = await BABYLON.Tools.LoadFileAsync(“scenes/BoomBox.glb”, true);

// 2. Convert the ArrayBuffer to a Blob
const assetBlob = new Blob([assetArrayBuffer]);

// 3. Create an in-memory URL for the Blob
const assetUrl = URL.createObjectURL(assetBlob);

// 4. Append the scene from the Blob URL, specifying the loader extensionawait 
BABYLON.SceneLoader.AppendAsync(assetUrl, scene, { pluginExtension: “.glb” });

This works great—even offline, if you’ve pre-cached or pre-loaded the buffer—and offers explicit control over memory for each asset via URL.revokeObjectURL() when you’re done.

My question:
What are the key advantages (and potential drawbacks) of this Blob‑URL memory‑loading approach compared to more traditional methods?

2

You can perform some operations on the data before AppendAsync.
For example, binary decryption.
For example, storing files in indexDB to manage local cache yourself.
You can compress the model, for example：

Optimize GLTF models on the web and perform ktx2 compression

1 Like
3

Could you please share a simple example of using IndexedDB in this context?

4

First, if you just want to use indexDB to implement local caching of assets, babylonjs has already integrated indexDB.https://playground.babylonjs.com/#XYHEVU#3
BABYLON.Database.IDBStorageEnabled = true

If you want more freedom in managing indexDB, please refer to IndexedDB - Web API | MDN .

There are also some third-party libraries that simplify indexDB API calls.

If you only want to implement local caching, I think the updated service worker technology is better than indexDB. Service Worker API - Web API | MDN

1 Like
5

This example uses a service worker. The key file is sw.js. You can open the console and view the network. Click to add a model, wait for the model to finish loading, close the page, reopen it, and add the same model again. In the network, you will see the service worker cache.

1 Like