Achieving consistent outline hover effect on meshes

Hi everyone,

I’ve been trying to get a consistent hover effect for the items on the ground for my project

I’ve built a playground to illustrate what I’m trying to do: https://playground.babylonjs.com/#R3QNJG#61

Currently it only works if I use isRecursive=true on the action manager, additionnally if I scale a mesh, it also seems to influence the result,

Any suggestions/tips on how to improve my hover mesh effect?

Thanks,
Orion

What do you mean by ’ if I scale a mesh, it also seems to influence the result’ ? it looks ok to me when I scaled every object with a uniform scaling.

isRecursive is necessary since the action manager is registered with the root of the glTF which does not have geometry to pick from. I think maybe you intend on putting the action manager on the collision box instead?

PG: https://playground.babylonjs.com/#R3QNJG#62

2 Likes

That’s perfect. So simple that I missed it. Thanks

look at this playground: https://playground.babylonjs.com/#R3QNJG#63

The apple outline is different to the potion outline for example.

That’s odd. @Evgeni_Popov maybe can help?

I updated the playground to add a character outline example too:

The render outline effect only works for meshes whose normals are “smooth”, meaning that a vertex shared by several faces will have the same normal for each of these faces.

image

We can see that each vertex of the object has several different normals, one for each face to which it belongs (in fact, it’s not one vertex with several normals, it’s several vertices, each with its own normal).

image

Here, the vertices are not duplicated, and the outline effect will work as expected.

Maybe you can try to use the highlight layer instead?

PG: https://playground.babylonjs.com/#R3QNJG#67

1 Like

thanks @Evgeni_Popov, thanks for explaining, it makes total sense.

That highlight layer solution is pretty cool too.

I’ve decided use a full renderOverlay color with alpha 0.2 to highlight all the meshes, it’s effective and simple.

PG here for anyone curious: https://playground.babylonjs.com/#R3QNJG#68

Quick one, it works fine on my local (as I’m importing the inspector) but on the server, it does not, and I’m not sure what I need to import to be able to use renderOverlay on my meshes? Any ideas?

Try import "@babylonjs/core/Rendering/outlineRenderer";

2 Likes

Thanks, that worked. :slight_smile: