How to solve the problem in show/hide the height map, dispose and rebuild height map

Hello everyone

I have an height map and I want to hide it with check box to increase the performance. how can I dispose the height map when I turn off the check box and then rebuild it when I turn on the check box. how can I dispose the height map and rebuild it?
here is my PG: https://playground.babylonjs.com/#X2ULQN#69
here is my code, but I have some errors:

const tm = new TileManager(scene);

...
  checkbox1.onIsCheckedChangedObservable.add(function (value) {
    if (map) {
      tm.update(true);
    } else {
        console.log("there is no map")
    }
  });
... 

and then

class TileManager {
....
update(value) {
...
                var ground;
                if (value) {
                ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", heightURL, width * factor, width * factor, 2, 0, 64, scene, true);

                ground.position = new BABYLON.Vector3(
                    (tileX * factor - xTileBase + factor / 2) * width,
                    -factor * 0.1,
                    -(tileY * factor - yTileBase + factor / 2) * width
                );
                ground.material = material;
                } else {
                    ground.dispose();
                    ground =  BABYLON.Mesh.CreateGroundFromHeightMap("ground", "heightURL", 0, scene, true);
                }
}

This would be very inefficient.
You should use mesh.setEnabled() if you’re just looking to temporarily disable the mesh

2 Likes

Thank you so much for answering to my question. :pray:
Thanks a lot for your recommend.

I changed my code to the following code :

  checkbox1.onIsCheckedChangedObservable.add(function (value) {
    scene.registerBeforeRender(() => {
    // camera.speed = Math.min(4500, Math.abs(camera.position.y * 0.05));

    if (value ) {
      tm.update(true);
      console.log("there is map")
    } else {
     tm.update(false)
     console.log("there is no map")
    }
      }); 
  });

....

class TileManager {
...
    update(value) {
    ....

                    ground.setEnabled(value)

    }
}

but when the checkbox is turn on its toggled between true and false.
is it possible to use scene.registerBeforeRender inside the checkbox?

and also change it to this PG but it doesn’t work. https://playground.babylonjs.com/#X2ULQN#72