I’m tried different ways to save a skeleton, but I cannot get any of them to work
In all cases, saving seems to work just fine and file sizes appear more-or-less ok, but I cannot load what was saved
-
Saving to using native
SceneSerializer.Serializeworks,
But when loading nothing is shown
Andnodesas seen in inspectors are definitely not in correct relationship
See attached image - left is original and right is after load from saved serialized scene -
Saving using either
GLTF2Export.GLBAsyncorGLTF2Export.GLTFAsyncworks,
But when loading I get runtime error
Uncaught (in promise) RuntimeError: Unable to load from ./assets/test.glb: Cannot read properties of undefined (reading 'length')
at RuntimeError2.BaseError2 [as constructor] (error.ts:6:1)
at new RuntimeError2 (error.ts:71:9)
at errorHandler (sceneLoader.ts:688:46)
at sceneLoader.ts:745:21
Full reproduction:
(sorry, cant place it as PG as it requires load/save from filesystem, but example is pretty much trivial)
(note: Exactly the same behavior using SceneLoader.LoadAsync)
import * as BABYLON from '@babylonjs/core';
import '@babylonjs/inspector';
import { GLTF2Export } from '@babylonjs/serializers';
async function saveBabylon(s: BABYLON.Scene) {
const serializedScene = BABYLON.SceneSerializer.Serialize(s);
const strMesh = JSON.stringify(serializedScene);
const blob = new Blob([strMesh], { type: 'octet/stream' });
const objectUrl = URL.createObjectURL(blob);
const link = window.document.createElement('a');
link.href = objectUrl;
link.download = 'test.babylon';
const click = document.createEvent('MouseEvents');
click.initEvent('click', true, false);
link.dispatchEvent(click);
}
async function main() {
// simplest scene setup
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine, {});
scene.debugLayer.show({ embedMode: true, overlay: false, showExplorer: true, showInspector: true });
const camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
light.diffuse = BABYLON.Color3.FromHexString('#FFFFFF');
engine.runRenderLoop(() => scene.render());
// code used to save babylon, glb and gltf:
/*
await saveBabylon(scene);
const glb = await GLTF2Export.GLBAsync(scene, 'test', {});
glb.downloadFiles();
const gltf = await GLTF2Export.GLTFAsync(scene, 'test', {});
gltf.downloadFiles();
*/
// loading original works just fine
// const res = await BABYLON.SceneLoader.ImportMeshAsync('', './assets/', 'dummy3.babylon', scene);
// loading serialized scene doesnt fail, but nothing shown
// const res = await BABYLON.SceneLoader.ImportMeshAsync('', './assets/', 'test.babylon', scene);
// fails with runtime error
// const res = await BABYLON.SceneLoader.ImportMeshAsync('', './assets/', 'test.glb', scene);
// fails with runtime error
// const res = await BABYLON.SceneLoader.ImportMeshAsync('', './assets/', 'test.gltf', scene);
}
window.onload = main;
Environment: BabylonJS 5.0.0-rc.1 with Chrome 99
Screenshot from inspector views of original skeleton and one that was saved using serialization and then loaded back in:
