I have a query regarding the ability to use one asset (an outside file .glb for example) for multiple scenes.
What I plan to do is to have different meshes from the same model appear in different scenes, for example one model loaded and scene 1 contains all meshes, scene 2 contains only 3/4 meshes, etc, etc
Then i would be able to switch through scenes to see each result.
Is this possible? At present, I can āImportMeshā into a scene but I feel if I do this with multiple scenes then I would be loading the asset(s) (.glb file) more than once as Import mesh seems to be for a specific scene only.
I am also planning to be able to view the scene(s) through āenableScissorā and āsplittingā the views through manipulating the engine width and height and using multiple cameras. I mention this to give more context.
Here is the quick example - https://playground.babylonjs.com/#5NFRVE#61
Toggle Asset containers with any key press.
Actually in this example there is just one scene with two containers; if you need more you can add them through container.scene property.
If you are planning to use multiviews you may control cameras with container.cameras property.
Thank you for the fast replies. I feel this approach is heading in the right direction but having looked at āasset containersā i feel this is still limited to a scene by scene basis.
Here is a quick PG to hopefully highlight what Iām trying to do.
You can see Iām using more than one scene to achieve this.
Here I have a split screen using āenableScissorsā on the engine. (I will be animating the position of the split in a final draft). What I hope to achieve is to have one area of the engine show just a part of the model and the other area to show the whole model. But, I think that in this playground I am āloadingā the model twice? When using ImportMesh?
By the way, wireframe isnāt necessary. I have just used this so you can see the split more clearly.
e.g Add assets to container and then instead of addAllToScene() have a addToScene(scene)
or is there perhaps another way to get the scissor approach without using scenes?
Apologies for all the questions but I understand (as much as I can) the individual parts but just putting everything together for what I want is proving the more difficult part.
OK. Understood. Would it be ok to do something like this ā¦
var container0 = new BABYLON.AssetContainer(scene0);
var container1 = new BABYLON.AssetContainer(scene1);
BABYLON.SceneLoader.ImportMesh(
null,
"https://models.babylonjs.com/Marble/marbleTower/",
"marbleTower.gltf",
scene0,
function (meshes) {
//console.log(meshes)
for(let i=0; i < meshes.length; i++){
container0.meshes.push(meshes[i]);
if(meshes[i].name === "wheel"){
container1.meshes.push(meshes[i])
}
}
container0.addAllToScene();
container1.addAllToScene();
}
);
and then I can still use the same 1 engine many scenes approach
Or have 1 scene and add all the meshes and then run
mesh.onBeforeRenderObservable.add(()=>{
var e = scene.getEngine();
var w = e.getRenderWidth();
var h = e.getRenderHeight();
e.enableScissor(0,0,w,h)
e.clear(scene0.clearColor, true, true, true);
})
Sorry for dragging this topic up again but I have a problem that I canāt seem to get my head around. When using the above PG (specifically the code inside it) on a local rendition I seem to run into the fact that I lose the material. It seems to render in white.
Hi @sebavan Thanks for the reply. I moved the ābefore renderā (with the enable scissor) code into the callback of the ImportMesh function and everything renders fine. Iām guessing itās not loading completely before trying to enable scissor and render.
If I remove the scissor it renders fine. If I render one scene only it renders fine (i.e with all materials in model file) itās just when I add the scissors code.
Just to clarify this is how it looks from a code perspective
BABYLON.SceneLoader.ImportMeshAsync(
null,
"https://models.babylonjs.com/Marble/marbleTower/",
"marbleTower.gltf",
scene0
)
.then(result => {
scene0.onBeforeCameraRenderObservable.add(()=>{
var e = scene0.getEngine();
var w = e.getRenderWidth();
var h = e.getRenderHeight();
e.enableScissor(0,0,w,h)
e.clear(scene0.clearColor, true, true, true);
})
})
instead of
BABYLON.SceneLoader.ImportMeshAsync(
null,
"https://models.babylonjs.com/Marble/marbleTower/",
"marbleTower.gltf",
scene0
)
.then(result => {
})
scene0.onBeforeCameraRenderObservable.add(()=>{
var e = scene0.getEngine();
var w = e.getRenderWidth();
var h = e.getRenderHeight();
e.enableScissor(0,0,w,h)
e.clear(scene0.clearColor, true, true, true);
})
Hey Qamelian - did you manage to share one .glb asset between scenes in the end? Iām trying to do the same and canāt figure it out!
Thanks,
Adam
edit: for future referenceā¦
The solution to this was to load and then .serialise the meshes / materials / geometries you want to share between scenes and then .parse them into each scene you want them in.
I had like 30 scenes and had to load my .glb asset for each of them, which took a while before this, and now I just load once and itās waaay quicker.