Dealing with overlapping highlights

Hi :wave:

I’m trying to implement a simple object selection logic and came across this HighlightLayer docs.
I have implemented a simple scene at Babylon.js Playground
You can try pick the ground or sphere and it should highlight.

The issue I have is that with overlapping geometry, it can look like multiple meshes are selected, as in this gif
CleanShot 2022-09-19 at 18.13.53

What I’m trying to achieve is select the edges of the geometry only (and show a ghost when occluded, but that’s more optional at this stage).

I have seen similar questions, but usually the solution involves multiple layers. I’m trying to implement something that ideally would work for any arbitrary scene with any amount of objects.

Any way to control the overlapping logic?

Do you recommend implementing this with a different approach?
I tried Edge Renderer but it wouldn’t work for spheres (at least I couldn’t) as it renders the actual mesh edges


EDIT: I could try using a glow effect, but I assumed that’s too costly for this application

Maybe using something like the cavity shader? Screen Space Curvature | Babylon.js Playground (

1 Like

Here are some docs about Overlapping Highlights - Highlighting Meshes | Babylon.js Documentation
Here how it would look at your PG

Thanks! I’ll have a look :grinning:

Thanks! The issue I’m trying to solve unfortunately is the opposite. I’d like the sphere to not look highlighted when inside the ground, in screen space

Does addExcludedMesh on ground when sphere is highlighted solve your issue?

Like you can loop through all meshes (that you store in an array) and if it is not your pickedMesh you exclude the mesh.


1 Like

At the moment that’s the only way I managed to do, but I was trying to avoid doing loop over all meshes on every mouse click if there’s a better option.

While explaining this… I just realised I can invert the problem… I could start by adding all meshes to the excluded list, and only swap 1, when picking!


EDIT: Has the advantage I don’t need to keep a separate list (although that part wouldn’t necessarily be an issue

On further thinking… I’m not sure if complete object fill render is better… I’m following @Takemura 's advice and also setting the visibility to slight transparency to make it look nicer.

See (still buggy but demonstrates the visuals)

EDIT: Another option is to simple enable alpha blending for all, but I assume that’s a dangerous assumption to make