Hide and/or Unhide Objects Based on Distance From Camera

I have an effect I’m trying to achieve, but I’m not really sure how to go about it. I have a plane (blue) with a sprite manager and some sprites above it (green) and a series of smaller planes above that (red). That’s figure A below. I want to make it so when the camera is far away, the sprites are hidden and the planes are not (Figure B). When the camera gets closer, I want the red planes to be hidden and the sprites to be visible (figure C). The blue plane should always be visible.

My first thought was clipping planes, but I don’t know if it’s possible to exclude things from them. Could I have one plane hide the red planes and still show the sprites, then a second that hides the sprites but shows the planes? And could those move with the camera? Then I thought I could do it with a material, which could work well for the red planes (though I’m not sure how). But I don’t know if a material would work on the sprites.

Any suggestions on a method to try would be appreciated.

Hello and welcome,

I think clipping planes should work but we need to see how you use sprites and stuff so I recommend providing a playground of what you have

but I’m sure this could work :smiley:

Thanks for getting back so fast and for the optimism! This isn’t super polished, but it illustrates what I’m after. When the camera zooms in to a certain point I want the white numbers to be hidden and the black sprites to appear.

I hope that helps.

So I see a few options:

  • You can manually run a loop through your sprite on every frame and check the distance (and hide them accordingly)
  • You can NOT use sprites but meshes with billboard mode (to make them look like sprites) and then use LOD: Levels of Detail (LOD) | Babylon.js Documentation

I had actually tried using billboard meshes, but since there are 80,000 of them or so, the file chugs to a crawl.


I’ll try looping through the sprites. Any suggestions for what to do about the white labels? I guess I could make an empty LOP and use that as the main mesh, then use the current mesh as the first level LOD.