Loading two resolutions of mesh

Questions
1

Hello,
I import mesh with ImportMeshAsync method and I want to switch between low and high resolution model in my application. Do I have to load two meshes and hide one at start? Or is there any method to solve my problem. E.g. High resolution model will load if camera is close to object. I did research about this topic and I couldn’t find it, sorry if it is duplication.

2

Hi @Symlis,

welcome to the forum!

You are perfectly descripbing LOD (Level of details). Documentation can be found herre:

https://doc.babylonjs.com/how_to/how_to_use_lod

If you have any other questions, let us all know :slight_smile:

1 Like
3

Hi @RaananW,
thanks for the fast reply. LOD seems very good but I think that I don’t wanna load those 2 models at the same time. The best solution would be to load high resolution model and make it low resolution if camera is away… LOD makes my ram memory very hot :upside_down_face:

4

Wouldn’t loading a second model after a while be the same? You are not going to dispose the high-res model once the low-res is loaded, so eventually, the result will be the same - two models are loaded, one is shown.

You don’t have to add the low-res model together with the highres. you can decide when to load it and add it to the lod-list

2 Likes
5

Hello,
I think I’ve got problem with implementation of this idea.
This is how I load low-res mesh and below there is a function to load hi-res mesh:

    let tower = this.towerModels.lowResolution50;
    Promise.all(
      tower.tilesArr
        // .slice(0, 15)
        .map(asset =>
          BABYLON.SceneLoader.ImportMeshAsync(
            "",
            `http://localhost:2050/${asset}/`,
            "model.glb",
            this.scene,
            handleMeshLoading
          )
        )
    ).then(handleComplete);

    const loadHightResolution = () => {
      let tower2 = this.towerModels.hightResolution100;
      Promise.all(
        tower2.tilesArr
        // .slice(0, 15)
        .map(asset =>
          BABYLON.SceneLoader.ImportMeshAsync(
            "",
            `http://localhost:2100/${asset}/`,
            "model.glb",
            this.scene,
            handleMeshLoading2
          )
        )
      ).then(handleComplete);
    };

How am I supposed to use ‘addLODLevel’ method on low-res model in handleMeshLoading if I don’t have loaded those hi-res model. ‘addLODLevel’ takes mesh as a second argument. Should I put a function in second argument of ‘addLODLevel’ method which will return hi-res mesh?

something like this?

    const handleMeshLoading = (newMesh: any) => {
      try {
       newMesh.addLODLevel(200, loadHighResModel);
        }
      } catch (err) {
        console.log(err);
      }
    };

I think that I understand the concept but I’ve got problem with implementation.

6

Here, in JavaScript, is a very crude swap mesh on camera distance PG https://www.babylonjs-playground.com/##HIHHY2

Remember to click on canvas before first key press - w to zoom in, s to zoom out

If useful I am sure you can adapt for your coding.