Loading base64 data

Questions
1

Hello, this is my 1st post in this forum.
I use babylonjs with webpack, and while using textures and 3D model files in my project, I need to build a package that doesn’t have external files, with all assets packed into one js file.
Webpack url-loader plugin doesn’t help with this though. Maybe the assetsManager can solve it somehow?

2

Hi @Coatl and welcome to the forum. You may have to wait for someone more expert in this region, @bghgary for example. In the meantime this maybe worth a read Load glb model into scene directly from content string. - Questions & Answers - HTML5 Game Devs Forum

3

You can load from objects as well. You can use the serializer to save your scene or just meshes to json.
I have a feeling, though, that you’re looking for a way to “import” files and embed them directly into your js code at compile-time, so you won’t have to first use a third-party scene to import/serialize/encode. Is this true?

4

@JohnK: I need the “content string” to be loaded from external file, so that I can change just the file, and not the string inside the js code.

@Raggar: Not sure if I fully understand your question, but my problem is that the app needs to be able to run just by launching index.html. No localhost, no xhr requests. So as you say, the asset files probably need to be embedded at compile-time.

5

Apologies, I misinterpreted your question. The other thing I noted is that the link did not go straight to this post from the old forum.

This is a case that the code doesn’t handle. I’ve filed an issue: Add support for loading glb from a base64-encoded string or arraybuffer · Issue #5579 · BabylonJS/Babylon.js · GitHub

In the meantime, you can do this a bit indirectly by using a blob with an object url.

https://playground.babylonjs.com/#7F6S08#2

Note that your base64 encoded string was incorrect compared to the file you attached. I had to re-encoded the data.

As I stated I know very little about glb files and base64 strings. For example I have no idea if a glb file supports all you needs nor whether you can load it as a local file. If glb files support your use no problem. If not my next idea might be either complete nonsense or still not fulfill your use case, so just ignore if necessary

Can you convert your file of assets to a base6m4 string?

If so the your js file could be

model = [];
model[0] = "base64string0";
model[1] = "bas64string1"
etc.

You could, of course, keep each string in a separate file.

6

Anything can be converted to base64, afaik. But what I need is keeping all assets (models and textures) as normal separate files, and embedding them into one js file at compile-time to avoid cross-origin problems when running index.html. (Which I suppose can be done only by converting the assets data into base64 format.)

7

Does this help Loading local files into a Babylonjs scene directly - Stack Overflow?

1 Like
8

If you are strictly dealing with glTF files, there is a form of glTF that is a single file with base64 encoded binary inside it.

See:

Doing this is possibly slightly more efficient than encoding a GLB or a bunch of loose glTF files as base64.

1 Like
9

Well, I probably misled you guys (and myself too) by insisting on the base64 encoding. As I figured out, this kind of embedding (with the npm url-loader) is good for image/texture files, but not for 3d models. (OK, I am not sure about glTF, have tested only .babylon so far.) The .babylon file type can be embedded by using the npm json-loader (as Raggar and JohnK had hinted too). So, as it seems, I solved the problem for .babylon files this way:

in webpack.config.js:

module: { rules: [
test: /\.babylon$/,
loader: 'json-loader' ...

and when importing the model:

let json = require('../assets/models/model.babylon');
let blob = new Blob([JSON.stringify(json)]);
let url = URL.createObjectURL(blob);
let model = SceneLoader.ImportMesh('', '', url, this, (newMeshes) => { ... });

Thank you for your insights!

1 Like
10

Normally, something like this should work:

let json = require('../assets/models/model.babylon');
let model = SceneLoader.ImportMesh('', '', "data:" + JSON.stringify(json), this,
    (newMeshes) => { ... });
4 Likes
11

Indeed, this works too!
(Provided that you use the json-loader plugin.)