Grid Enable / Disable

[Joffrey_Vedlem_Ved]

I’ve create a grid with lines but i cant dispose that, “linebuilder” not defined :///
PS: to playground migration dont work for and for upload my html support it’s very convenient for me

i try all solution, getmeshes, by tags, by id, name. But delete lines its impossible

linebuilder is not a mesh, how to remove lines ?

const GridSwitch = BABYLON.GUI.Button.CreateSimpleButton("GridSwitch", "#️⃣");
GridSwitch.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
GridSwitch.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
GridSwitch.onPointerClickObservable.add(() => {
  
  createLines(10, 10 , 1);
  
 
});
advancedTexture.addControl(GridSwitch);

-----
-----
-----

let linebuilder;

function createLines(numCellsX, numCellsZ, cellSize, points, p1, p2, p3, colors, c1, c2 , c3) {
  for (var x = 0; x < numCellsX; x++) {
    for (var z = 0; z < numCellsZ; z++) {
      const points = [
        new BABYLON.Vector3((x * cellSize) - 5, 0, (z * cellSize) - 5),
        new BABYLON.Vector3(((x+1) * cellSize) - 5, 0, (z * cellSize) - 5),
        new BABYLON.Vector3(((x+1) * cellSize) - 5, 0, ((z+1) * cellSize) - 5),
      ]
      const colors = [ 
          new BABYLON.Color4( 0,  0, 0, 1), // black
          new BABYLON.Color4( 0,  0, 0, 1), // black
          new BABYLON.Color4( 0,  0, 0, 1), // black
      ]   
      linebuilder = BABYLON.MeshBuilder.CreateLines("linename", {points: points, colors: colors
                                                                // });
      }, scene);
    }
  }
}

---
---
---

const mystery3 = BABYLON.GUI.Button.CreateSimpleButton("mystery3", "♒");
mystery3.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
mystery3.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
mystery3.onPointerClickObservable.add(() => {
  
  linebuilder.dispose();
 
});
advancedTexture.addControl(mystery3);

[mawa]

Hi, Hope you are well.
What I can already tell you is that you are looking at a mesh that does not exist. If you open the inspector, you’ll see that each line is a mesh of name “linename”.
To be honest, I don’t do this often (understand I do not create and dispose such a large number of meshes in the scene without a parent, an abstract mesh or a transform node). I don’t know why just exactly but when I run a loop to dispose’em, it only goes through a number of them, not all.
So I used a small trick to fix it. It throws an error but is harmless. Still, not the best. Probably someone else will know of a better way.
Anyways, I already fixed a few issues in your script. Lines are not created twice and are disposed only if they have been created.

Babylon.js Playground

Hope this helps and in the meantime, have a great time on this Season Holidays

@labris @carolhmj Do yours know why disposing a large number of meshes in the scene with a loop would cause to not go through the entire loop? And then, what would be the better way? Thanks,

[labris]

@mawa

@labris @carolhmj Do yours know why disposing a large number of meshes in the scene with a loop would cause to not go through the entire loop? And then, what would be the better way? Thanks,

It depends on how you dispose them. The best way is like that - Disposing scene.meshes leaving last meshes? - #4 by labris

[mawa]

Oh thanks. Completely forgot about ‘while’. Tells you just how much my js skills are not yet up to the challenge Have a great time during this Season Holidays

[Joffrey_Vedlem_Ved]

You are a boss! Thanks for that <3

" Lines are not created twice and are disposed only if they have been created."

[Joffrey_Vedlem_Ved]

i dont understand .dispose work for you, and not for my project. Why works for you, i dont understand where you are make a fix :DDD

[mawa]

Don’t know. It should work despite for the error thrown.

But then, by any means, I updated the PG inspired by the method from @labris and this one doesn’t need a clumsy fix, works and doesn’t throw an error. You should give it a try.

Babylon.js Playground

[Joffrey_Vedlem_Ved]

You’re help enlightened me. I have a THE THING but i dont understand why work/dont work

Working

let linebuilder = 0;

function createLines(numCellsX, numCellsZ, cellSize, points, p1, p2, p3, colors, c1, c2 , c3) {
    if (linebuilder == 0){
    for (var x = 0; x < numCellsX; x++) {
        for (var z = 0; z < numCellsZ; z++) {
            const points = [
                new BABYLON.Vector3((x * cellSize) - 5, 0, (z * cellSize) - 5),
                new BABYLON.Vector3(((x+1) * cellSize) - 5, 0, (z * cellSize) - 5),
                new BABYLON.Vector3(((x+1) * cellSize) - 5, 0, ((z+1) * cellSize) - 5),
            ]
            const colors = [ 
                new BABYLON.Color4( 0,  0, 0, 1), // black
                new BABYLON.Color4( 0,  0, 0, 1), // black
                new BABYLON.Color4( 0,  0, 0, 1), // black
            ]   
            BABYLON.MeshBuilder.CreateLines("linename", {points: points, colors: colors}, scene);
            linebuilder = 1;
            }
        }
    }
    // else{ console.log("lines already built")}
}

Don’t working

// let linebuilder = 0;

function createLines(numCellsX, numCellsZ, cellSize, points, p1, p2, p3, colors, c1, c2 , c3) {
    // if (linebuilder == 0){
    for (var x = 0; x < numCellsX; x++) {
        for (var z = 0; z < numCellsZ; z++) {
            const points = [
                new BABYLON.Vector3((x * cellSize) - 5, 0, (z * cellSize) - 5),
                new BABYLON.Vector3(((x+1) * cellSize) - 5, 0, (z * cellSize) - 5),
                new BABYLON.Vector3(((x+1) * cellSize) - 5, 0, ((z+1) * cellSize) - 5),
            ]
            const colors = [ 
                new BABYLON.Color4( 0,  0, 0, 1), // black
                new BABYLON.Color4( 0,  0, 0, 1), // black
                new BABYLON.Color4( 0,  0, 0, 1), // black
            ]   
            BABYLON.MeshBuilder.CreateLines("linename", {points: points, colors: colors}, scene);
            // linebuilder = 1;
            }
        }
    // }
    // else{ console.log("lines already built")}
}

[Joffrey_Vedlem_Ved]

i look !

[mawa]

What do you mean when you say “Not working”. This should create your lines just as it did before.
Only thing is that it does not record a state for whether the lines already exist or not. So each time you call the function you are creating a new set of lines.
Here I copied your code overwritting the PG and it works (except you create lines each time you click)

Babylon.js Playground

[Joffrey_Vedlem_Ved]

Yeahhh its works perfectly! And i succesful integer to my project! Very thanks.

I wanted to say code with a var linebuilder works, and code without var linebuilder dont work

I want know why, why with a little changes dissapear grid dont work. why linebuilder its obligatory

:DDD

[mawa]

@Joffrey_Vedlem_Ved

Yeahhh its works perfectly! And i succesful integer to my project!

Glad to hear that

@Joffrey_Vedlem_Ved

I wanted to say code with a var linebuilder works, and code without var linebuilder dont work

As always with BJS, this is just one way to achieve this. The point is, you need some way to detect if the lines are already created or not. Else, you will create lines each time you click, potentially generating hundreds of duplicate lines/meshes and, on dispose, you would eventually attempt to dispose of lines that have never been created (which will throw an error or just do nothing).

Edit: And just to make this clear, “linebuilder” is the name of the variable you created. It could be any name. It’s not a Babylon.js method or accessor. I could have named it “christmas” and it would work the same. It’s just a variable to store this state of whether lines have been created or disposed.

Hope these explanations are clear and helpful. Incidentally, english is also not my language.

[Joffrey_Vedlem_Ved]

yeah yeah any name. just i say with existence of this var (linebuilder) destroy/dispose lines work but wihtout existence of (linebuilder) destroy/dispose dont work. I dont understand logical of this :DDD

[mawa]

I don’t know, you must have missed something.
It does work for me in this PG where I have removed this part.

Babylon.js Playground

You should open the console and the ‘inspector’ at all times when doing things with uncertainty.
There could be just a simple syntax error somewhere. Happens to me all the time.

[Joffrey_Vedlem_Ved]

NICE! i told about that, thanks! Thanks for your patience <3

[mawa]

@Joffrey_Vedlem_Ved

Thanks for your patience <3

No worries. You are welcome and have a great day

[Joffrey_Vedlem_Ved]

[Pryme8]

Why would you just not use the grid material?

Grid Material | Babylon.js Documentation

[Joffrey_Vedlem_Ved]

beautiful idea :DD but! i want move grid in the air, material no transparent only on line its difficult no ? or easy make transparent on white square ?

[mawa]

Indeed. I didn’t dare asking. See, I don’t feel entitled to challenge the design thinking of others if they don’t ask for it. With that said, I was also questionning myself about the purpose for the use of this method.