The SpriteManager I created along with the sprites inside it, when serialized into a .babylon file using ‘SceneSerializer.Serialize(scene)’, disappear upon loading again with ‘SceneLoader.AppendAsync’
Could you set up a small reproduction in the playground so we can have a look? Please also make sure you test with the latest version of Babylon, to rule out the possibility that the problem has already been fixed.
this my pg the .babylon don’t have any informantion of sprite or spriteManager
const createScene = function () {
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 8, new BABYLON.Vector3(0, 0, 0));
camera.attachControl(canvas, true);
const light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5));
// Create a sprite manager
// Parameters : name, imgUrl, capacity, cellSize, scene
const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2000, {width: 512, height: 1024});
//Mutliple trees
for (let i = 0; i < 2000; i++) {
const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
tree.width = 1;
tree.height = 2;
tree.position.x = BABYLON.Scalar.RandomRange(-25, 25) ;
tree.position.z = BABYLON.Scalar.RandomRange(-25, 25);
}
//download as .babylon file
var filename = 'sprite'
var objectUrl;
if (objectUrl) {
window.URL.revokeObjectURL(objectUrl);
}
var serializedScene = BABYLON.SceneSerializer.Serialize(scene);
var strMesh = JSON.stringify(serializedScene);
if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9) {
filename += ".babylon";
}
var blob = new Blob([strMesh], { type: "octet/stream" });
// turn blob into an object URL; saved as a member, so can be cleaned out later
objectUrl = (window.webkitURL || window.URL).createObjectURL(blob);
var link = window.document.createElement('a');
link.href = objectUrl;
link.download = filename;
var click = document.createEvent("MouseEvents");
click.initEvent("click", true, false);
link.dispatchEvent(click);
//this the .babylon file
/*
{
"autoClear": true,
"clearColor": [0.2, 0.2, 0.3, 1],
"ambientColor": [0, 0, 0],
"gravity": [0, -9.807, 0],
"collisionsEnabled": true,
"useRightHandedSystem": false,
"morphTargetManagers": [],
"lights": [{
"tags": null,
"shadowAngle": 1.5707963267948966,
"diffuse": [1, 1, 1],
"specular": [1, 1, 1],
"falloffType": 0,
"intensity": 1,
"range": 1.7976931348623157e+308,
"intensityMode": 0,
"radius": 0.00001,
"_renderPriority": 0,
"shadowEnabled": true,
"excludeWithLayerMask": 0,
"includeOnlyWithLayerMask": 0,
"lightmapMode": 0,
"position": [5, 10, 5],
"name": "Point",
"id": "Point",
"state": "",
"uniqueId": 6014,
"type": 0,
"animations": [],
"ranges": [],
"isEnabled": true
}],
"cameras": [{
"tags": null,
"alpha": -1.5707963267948966,
"beta": 1.5707963267948966,
"radius": 8,
"target": [0, 0, 0],
"inertialAlphaOffset": 0,
"inertialBetaOffset": 0,
"inertialRadiusOffset": 0,
"lowerBetaLimit": 0.01,
"upperBetaLimit": 3.1315926535897933,
"inertialPanningX": 0,
"inertialPanningY": 0,
"pinchToPanMaxDistance": 20,
"panningOriginTarget": [0, 0, 0],
"panningInertia": 0.9,
"zoomToMouseLocation": false,
"zoomOnFactor": 1,
"targetScreenOffset": [0, 0],
"allowUpsideDown": true,
"useInputToRestoreState": true,
"rotation": [0, 0, 0],
"speed": 2,
"position": [4.898587196589413e-16, 4.898587196589413e-16, -8],
"upVector": [0, 1, 0],
"fov": 0.8,
"projectionPlaneTilt": 0,
"minZ": 1,
"maxZ": 10000,
"inertia": 0.9,
"mode": 0,
"layerMask": 268435455,
"fovMode": 0,
"cameraRigMode": 0,
"name": "Camera",
"id": "Camera",
"state": "",
"uniqueId": 6013,
"type": "ArcRotateCamera",
"inputsmgr": {
"ArcRotateCameraKeyboardMoveInput": {
"tags": null,
"keysUp": [38],
"keysDown": [40],
"keysLeft": [37],
"keysRight": [39],
"keysReset": [220],
"panningSensibility": 50,
"zoomingSensibility": 25,
"useAltToZoom": true,
"angularSpeed": 0.01
},
"ArcRotateCameraMouseWheelInput": {
"tags": null,
"wheelPrecision": 3,
"zoomToMouseLocation": false,
"wheelDeltaPercentage": 0
},
"ArcRotateCameraPointersInput": {
"tags": null,
"buttons": [0, 1, 2],
"angularSensibilityX": 1000,
"angularSensibilityY": 1000,
"pinchPrecision": 12,
"pinchDeltaPercentage": 0,
"useNaturalPinchZoom": false,
"pinchZoom": true,
"panningSensibility": 1000,
"multiTouchPanning": true,
"multiTouchPanAndZoom": true
}
},
"animations": [],
"ranges": [],
"isEnabled": true
}],
"activeCameraID": "Camera",
"animations": [],
"materials": [],
"multiMaterials": [],
"environmentIntensity": 1,
"skeletons": [],
"transformNodes": [],
"geometries": {
"boxes": [],
"spheres": [],
"cylinders": [],
"toruses": [],
"grounds": [],
"planes": [],
"torusKnots": [],
"vertexData": []
},
"meshes": [],
"particleSystems": [],
"postProcesses": []
}
*/
return scene;
}
The strange thing is that the scene serializer and scene loader don’t handle sprite managers, and the AbstractScene class itself doesn’t have a property to store the sprite managers either (so AssetContainer doesn’t handle them either)…
Seems like a missing feature to me, but I don’t understand why we didn’t get complaints sooner, so cc @sebavan in case I missed something.
For my part I serialize the sprites like this in a separate file.
const serialized = spriteManager.spritePackedManagerGrass.serialize(true);
let str_serialized = JSON.stringify(serialized);
Then the reloads like this in my scene.
var Sprites = {];
$.getJSON("sprite.babylon"?"+Date.now()).done((data) =>
{
let spriteManager = new BABYLON.SpritePackedManager(data.metadata.id, data.texture.url, 200000, scene);
for (let i = 0; i < data.sprites.length; i++) {
Sprites[i] = new BABYLON.Sprite(i, spriteManager);
Sprites[i].cellRef = data.sprites[i].cellRef;
Sprites[i].position = new BABYLON.Vector3(data.sprites[i].position[0], data.sprites[i].position[1], data.sprites[i].position[2]);
Sprites[i].width = data.sprites[i].width;
Sprites[i].height = data.sprites[i].height;
}
});
That works well. I always thought sprite serialization wasn’t supported, so I never reported it.
First of all, thank you for your solution. I think sprite input scene as a part of the scene (such as trees, birds, clouds, etc.), so I’m curious why babylonjs can’t serialize it.
Yes, I believe sprites are also a part of the scene, so I’m curious why they cannot be serialized
Agree with @Evgeni_Popov it looks like an oversight, @Deltakosh any specific reasons ?
Gosh! Yeah this is missing
I’ve create an issue for it:
I ll be working on it ASAP