# Loading two resolutions of mesh

**URL:** https://forum.babylonjs.com/t/loading-two-resolutions-of-mesh/8622
**Category:** Questions
**Created:** [February 17, 2020, 10:13am UTC](https://forum.babylonjs.com/t/loading-two-resolutions-of-mesh/8622 "2020-02-17T10:13:45Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Symlis](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/symlis/32/7350_2.png) [@Symlis](https://forum.babylonjs.com/u/Symlis)
#### Post date: [February 17, 2020, 10:13am UTC](https://forum.babylonjs.com/t/loading-two-resolutions-of-mesh/8622/1 "2020-02-17T10:13:45Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [February 17, 2020, 10:36am UTC](https://forum.babylonjs.com/t/loading-two-resolutions-of-mesh/8622/2 "2020-02-17T10:36:20Z")

</div>

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](https://doc.babylonjs.com/how_to/how_to_use_lod)

If you have any other questions, let us all know 🙂

---

<div class="post-metadata">

### Author: ![Symlis](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/symlis/32/7350_2.png) [@Symlis](https://forum.babylonjs.com/u/Symlis)
#### Post date: [February 17, 2020, 1:52pm UTC](https://forum.babylonjs.com/t/loading-two-resolutions-of-mesh/8622/3 "2020-02-17T13:52:51Z")

</div>

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 🙃

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [February 17, 2020, 1:55pm UTC](https://forum.babylonjs.com/t/loading-two-resolutions-of-mesh/8622/4 "2020-02-17T13:55:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Symlis](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/symlis/32/7350_2.png) [@Symlis](https://forum.babylonjs.com/u/Symlis)
#### Post date: [February 19, 2020, 9:25am UTC](https://forum.babylonjs.com/t/loading-two-resolutions-of-mesh/8622/5 "2020-02-19T09:25:03Z")

</div>

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:

```auto
    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?

```auto
    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.

---

<div class="post-metadata">

### Author: ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)
#### Post date: [February 19, 2020, 9:47am UTC](https://forum.babylonjs.com/t/loading-two-resolutions-of-mesh/8622/6 "2020-02-19T09:47:04Z")

</div>

Here, in JavaScript, is a very crude swap mesh on camera distance PG [https://www.babylonjs-playground.com/##HIHHY2](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.
