Is there any way to detect if a GUI or Mesh behind camera

[imarabinda]

I have added multiple points in a mesh and i attached a spheres in those points, and in that sphere i have attached one gui element circle number to mark those points as 1 2 3 4 etc. And the sphere isVisible set to false, so the spheres will be hidden only gui numbers are shown. I was creating ray onAfterRenderObserbable from sphere to camera, if this ray intersects any main mesh it is not in front of camera other wise it is in front of camera. By creating ray on each render cause lag when multiple positions available. Can any one give me other example of checking mesh or gui element is front of camera kr behind camera?

[brianzinn]

Does this help?

ICullable | Babylon.js Documentation

Sometimes knowing the term is enough to get started. Looking for meshes in the frustum.

[imarabinda]

No it doesn’t work

[brianzinn]

what did you try?

sphere completely in frustum | Babylon.js Playground (babylonjs.com)

[imarabinda]

This is my playground link https://playground.babylonjs.com/#S0KJUA#40 , you can add point just click add sphere then click anywhere in the mesh, then move around you can see that the gui elements opacity is 0.3 when it is behind any mesh, currenlty i’m doing this by sending a ray from point to camera on each render, which causes lag issue when i have multiple points.

[Evgeni_Popov]

See my answer in this post, but only the last part:

Adding "floating labels"

You can easily generate 2D coordinates from 3D coordinates to position your label on screen with HTML/CSS. Have a look at this thread Check if a point is in front or behind the mesh and PG https://playground.babylonjs.com/#CUH660#3. In this PG, I draw in CSS two squares, given two 3D positions. If you need that the “i” icons be transparent when they are behind something (which was the purpose of the thread), don’t do it as I did, copying the zbuffer is taxing to do each frame. Do it as @Makc3…

Quoting myself:

Do it as @Makc3d did in this thread How to create Sketchfab like annotations with Three.js? - Questions - three.js forum 23 - it’s a 3js thread, but the technic is not specific.

To sum it up, use two “i” icons, one normal and one with transparency on + depth test false. Both will be drawn on each other. Where parts of the normal icon are not drawn (because behind something), the same part of the transparent one will still be drawn because the depth test is disabled.