Saving and loading a serialized scene with gltf meshes

Questions
1

Having some issues making this work. Keep running into errors when trying to reload it.

However on drag and dropping the serialised scene in Babylon Sandbox, everything works but when trying to use a load function it does not work at all.

Im basing my code on the following playground which works for a simple scene:

My playground:

Code from my personal repo:

   //save
    const serializedScene = SceneSerializer.Serialize(this.scene);
    serializedScene.cameras.forEach((c) => { c.tags = null; });
    const strScene = JSON.stringify(serializedScene);


  //load
 SceneLoader.Load("", `data:${serializedScene.data}`, this.engine, (newScene) => {
  this.scene = newScene;
});
2

Here is an example

base on this doc page :

1 Like
4

Thanks for the response @Cedric

I’ve tried updating the code and im not seeing it work:

My data is stringified serialised data, not a glb - which was used in the previous playground example to add a mesh to the scene, which is then serialised using SceneSerializer

5

data and url are mixed
LoadFile needs a url, not the datas

6

my goal is to reload a scene that has been serialized

7

That’s what it does:

    BABYLON.Tools.LoadFile(dataurl, (data) => {
        console.log(data);
        const assetBlob = new Blob([data]);
        const assetUrl = URL.createObjectURL(assetBlob);
        BABYLON.SceneLoader.AppendAsync(assetUrl, undefined, scene, undefined, ".glb");
    },undefined, undefined, true);

LoadFile loads the dataurl into a data uint8array.
Then, from the doc, the uint8array is converted to a blob and an object URL
then, the url is loaded as a glb

a .glb is a binary file, i don’t think it’s safe to be managed as a string.

1 Like
8

Thanks for the response.
I think there is some confusion here.

The babylon scene i serialize contains some meshes, i serialize the entire scene along with the mesh using SceneSerializer, i then stringify this and store it somewhere. I reload the ENTIRE scene along with the meshes back into BabylonJS.

I was not asking how to load a .GLB or best practices. Look at the subject of this post.

https://playground.babylonjs.com/#WGZLGJ#9006 shows the example of a stringified Scene that was serialized. I am trying to RELOAD this.

9

Is this what you expect?

2 Likes
10

Yes this is exactly it, it works in the PG.

This is now really confusing me because it works in the playground but not working on my local repo project which uses es6 npm build of babylon @babylonjs/core etc etc, not sure if thats broken it or what the difference could be.

I get this error:

app-index.js:31 BJS - [10:14:58]: Unable to load from data:{"autoClear":false,"clearColor":[0.2,0.2,0.3,1],"ambientColor":[0,0,0],"gravity":[0,-9.807,0],"collisionsEnabled":true,"useRightHandedSystem":false,"morphTargetManagers":[],"lights":[],"cameras":```




SceneLoader.Append("", `data:${testData}`, this.scene, (scene) => {
  // do something with the scene
});

Code is the exact same

11

do you have a dependency on @babylonjs/loaders in your project ?

12

Yes Its already in there,

    "@babylonjs/core": "latest",
    "@babylonjs/gui": "latest",
    "@babylonjs/loaders": "latest",
    "@babylonjs/materials": "latest",

Its at the top of the class as well as an import.

13

Any idea why it doesn’t work @carolhmj ?

14

There is this warning in the PG:

image

So, try to import “Materials/material.decalMap” in your project and see if that helps.

15

Thanks for the response.

decal map config
decal map config712×844 23 KB

Cant find the import to add it in, i tried just using import ‘@babylonjs/materials’

Where is that supposed to be in the @babylon npm packages?

Not sure why that is coming up as an issue on the PG either

EDIT:

I see now that DecalMapConfiguration is inside @babylonjs/core/ but i still get the error as well as the warning.

import { DecalMapConfiguration, SceneLoader, SceneSerializer } from "@babylonjs/core";
16

You should do import "@babylonjs/core/Materials/material.decalMap" instead, to import the side-effects.

17

Thanks for the response.

Added that line in and i still get the same error and same warning:

logger.js:49 BJS - [11:38:30]: BABYLON.DecalMapConfiguration not found, you may have missed an import.
_LogEnabled @ logger.js:49
Instantiate @ instantiationTools.js:20
Instantiate @ tools.js:112
_parsePlugins @ material.js:1315
Parse @ pbrMaterial.js:502
Parse @ material.js:1302
loadAssetContainer @ babylonFileLoader.js:234
load @ babylonFileLoader.js:887
eval @ sceneLoader.js:533
_LoadData @ sceneLoader.js:172
Append @ sceneLoader.js:530
load @ manageSceneState.ts:63
await in load (async)
Load @ manageSceneState.ts:22
app-index.js:31 BJS - [11:38:30]: Unable to load from data:{"autoClear":false,"clearColor":[0.2,0.2,0.3,1],"ambientColor":[0,0,0],"gravity":
18

Did you add this import in addition to the other one?

If so, then I guess this is when we need to summon our secret weapon to fight ES6 demons, @RaananW!

2 Likes
19

this class is found in material.decalMapConfiguration, so you will need to import this one as well.
if this doesn’t work - try importing one of your classes directly from babylonjs/core (without any other directory). If this works - it is a missing side effect. In this case I will be happy to get a reproduction (zip file or a github project?) if possible, to be able to see what happened

2 Likes
20

Thanks for the response.

I have added the code to load the scene data, and getting the same aforementioned error. It seems to be related to the nextjs setup somehow. I tested it on a blank webpack project and it worked there, but does not work with a nextjs project.

1 Like