Dealing with overlapping highlights

Questions
,
1

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

Thanks!

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

2

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

1 Like
3

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

image
image863×685 57 KB

4

Thanks! I’ll have a look :grinning:

5

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

6

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.

Playground:

1 Like
7

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!

Thanks!!

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

8

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