Tinting mesh colors without changing materials

Questions
1

Greetings,

I am trying to show “selected objects” in a different way that:

  • Applies a semi-transparent color to selected objects (whole set of child meshes of a mesh)
  • Does not modify materials
  • Preferably not as demanding as GlowLayer or HighlightLayer in terms of performance.

Consider Photoshop equivalent of “Blending Options > Color Overlay (with reduced opacity)”

I actually had found a PG link long ago but cannot find it again now. The PG had a matrix of spheres and those were on the right-hand side had a slight color applied on them. No changes on materials.

I’d be happy if someone guides me through. Thanks!

2

Hi @Caner,

I have two solutions for your problem, but i’m sure there are many others

  1. display the bounding box of the selected mesh (basic and simple)

  2. try to enable edge rendering of the selected mesh with a color. It can be a little bit slow with meshes with a lot of vertices such as trees.

Boris

3

Hi @bvaisman
I am familiar with the concepts you mentioned, yet I specifically need the solution that I described :frowning:
Thank you in any case! I appreciate your suggestions!

4

You could draw a semi-transparent mesh over the mesh you want to highlight and play with blending modes a bit?

5

Did you try mesh.overlayColor and mesh.overlayAlpha ?

Also, you may try to use material.clearCoat and play with settings like tintColor, intensity, roughness and other clearCoat parameters.

2 Likes
6

Yes! Overlay color and overlay alpha works in PG! Here is the link: https://playground.babylonjs.com/#0YG7IF#62

BUT!

I can’t get it working in my source code. I’m tree shaking, could it be about that?
Thanks @labris.

1 Like
7

Seems you need to import OutlineRenderer - OutlineRenderer | Babylon.js Documentation

3 Likes
8

Thank you very much!

1 Like