How to make a dynamic 3D grid in Babylon.js (spacing increases with distance)?

I’d like to show a dynamic grid in my scene that becomes sparser as the camera moves away, like blender and other 3d modeling softwares do. I check the grid material, but it apparently not what I want, it’s not infinity and not dynamic. Someone metioned node material, but I cant find any similar exapmle. Could you please give me a clue or simple solution?

You can dynamically set GridMaterial.gridRatio based on scene.activeCamera.globalPosition distance to the grid plane. How you determine that distance would need some thought as I don’t think that simply projecting the camera’s forward vector to the plane would produce the desired results for all camera orientations e.g. when the camera forward vector is near parallel to the grid plane or oriented up, away from the grid plane.

1 Like

Looking at Blender, in the perspective viewport it uses a combination of strategies and is not truly infinite (the grid fades out at distance), however in the orthographic viewports the grid units are fully dynamic.

1 Like

It’s not infinite, but it’s a somewhat imitated grid.

2 Likes

god, it’s exactly what i want! thanks for the code!!!

Thanks a lot everyone!

2 Likes