Model loader with external files from file storage with credentials

Questions
1

In Babylon.js, is it possible to “intercept” file loading process and redirect it to somewhere else? e.g. when we are loading a glTF file with external bin & texture files, while all the files come a data source which requires credentials (e.g. need AWS/Azure SDK to load), we need to redirect the request to the relevant SDK for credentials.

I used to work on similar solutions in three.js, these are the similar solutions:

  1. For lower security requirements, we can use “uriModifier” to intercept the URL request and add credentials in. Use case: in AWS S3, it can create “pre-signed” URL, which allows people to add credentials (by default, it’s valid for a short period) as parameters in URL, so in uriModifier, we can modify the URL by adding credentials.
  2. For higher security requirements, as we can’t put credentials in URL, while uriModifier is not async like SDKs, we can either update per-file-type handler (three.js/Loader.js at 4fa01465053d3d95e5c6e05fee701b1b217878aa · mrdoob/three.js · GitHub), or change the handling code (iot-app-kit/GLTFLoader.js at main · awslabs/iot-app-kit · GitHub).

Is there any similar solution in babylon.js?

2

Hello! I haven’t tried doing this before, but it should be possible using tools like the CustomRequestModifier: Babylon.js/webRequest.ts at 81ed63be0f0d6716591a3751ec7a866fb0edbf72 · BabylonJS/Babylon.js · GitHub, LoaderPlugin: Babylon.js/loaderPlugin.ts at master · BabylonJS/Babylon.js (github.com) and/or custom loaders: Create Your Own File Importer | Babylon.js Documentation (babylonjs.com)

1 Like
3

Thanks for the reply!

I found it seems like preprocessUrlAsync within glTF loader can serve the same purpose, I’m trying the following code currently:

BABYLON.SceneLoader.OnPluginActivatedObservable.add(function(plugin) {
    if (plugin.name === "gltf") {
        const glTFPlugin = plugin as GLTFFileLoader;
        glTFPlugin.validate = true;
        glTFPlugin.preprocessUrlAsync = processFunc;
    }
});

As Babylon.js only supports STL, OBJ and glTF currently and STL doesn’t require external file, if I manage to resolve the issue for glTF, then I can try similar approach in OBJ loader (may need code changes). I’ll update to this thread for my results :slight_smile:

4

The solution for preprocessUrlAsync works for glTF loader! The steps are simple:

  1. Like I mentioned, add the customized preprocessUrlAsync
  2. In the customized preprocessUrlAsync, download the real file
  3. Convert the content to a blob by URL.createObjectURL
  4. Return the new URL within the customized preprocessUrlAsync

I will try OBJ loader later, will open a new thread if I found issues.

1 Like