# Highlight Layer issues

**URL:** <https://forum.babylonjs.com/t/highlight-layer-issues/31173>\
**Category:** Questions\
**Created:** [June 8, 2022, 4:57pm UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173 "2022-06-08T16:57:54Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)\
**Post date:** [June 8, 2022, 4:57pm UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/1 "2022-06-08T16:57:54Z")

</div>

I’m trying to add/remove a mesh to/from a highlight layer when it is clicked. The cubes work fine, as intended, but imported meshes do not work correctly. After doing some digging, selecting a child mesh appears to work partially, though still not as intended. How can I have the entire mesh be added to the highlight layer? Here is a PG:  
Controls:  
Shift: Select/deselect multiple meshes  
Ctrl: Selects the first child mesh of the object, or the main mesh if there is not one  
Alt: Selects all child meshes, or the main mesh if there are none (this is close to what I want though not the correct way)

> **[Babylon.js Playground](https://playground.babylonjs.com/#PUL349%2310)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [June 8, 2022, 8:33pm UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/2 "2022-06-08T20:33:51Z")

</div>

You need to add all the meshes part of the object you are trying to select. Can you take a screenshot of what does not work in the alt case ? just to help me understand the issue better ?

---

<div class="post-metadata">

**Author:** ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)\
**Post date:** [June 8, 2022, 9:26pm UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/3 "2022-06-08T21:26:11Z")

</div>

The alt cause is visually correct, though does not select the main mesh (the container / parent). I’m trying to add the main mesh to the highlight layer, which doesn’t work. I need clicking on the space ship (without `Ctrl` or `Alt`) to highlight the whole mesh.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [June 22, 2022, 4:50pm UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/4 "2022-06-22T16:50:20Z")

</div>

It’s because in the imported mesh case, the container doesn’t have any of the vertices, it’s the children that have it.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/9/89c01eab9c999fc48883363c49d5e53f3e51993d.png)

If you want to highlight all of the vertices, you’ll have to highlight all of the children: [Highlight | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#L1NWMH)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [July 21, 2022, 11:49am UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/5 "2022-07-21T11:49:47Z")

</div>

Hello just checking in if you’d like any more help on this issue @Vortex

---

<div class="post-metadata">

**Author:** ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)\
**Post date:** [July 29, 2022, 12:42am UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/6 "2022-07-29T00:42:49Z")

</div>

Sorry for the late reply - I don’t, thanks for asking. Now I’m working on pathfinding (A\*).

---

<div class="post-metadata">

**Author:** ![Dark\_Horse](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dark_horse/32/39718_2.png) [@Dark\_Horse](https://forum.babylonjs.com/u/Dark_Horse)\
**Post date:** [September 11, 2025, 5:43pm UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/7 "2025-09-11T17:43:53Z")

</div>

The extension to this question. This highlight pass is highlighting the object as a whole. What if i want to create animation where a line is traveling around the edges ? How can i do that ?  
CC : @sebavan @carolhmj (Sorry don’t know whom to tag)  
Shared the example :

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 12, 2025, 4:46pm UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/8 "2025-09-12T16:46:53Z")

</div>

I would not use an highlight layer for it. I would probably do it from within the mesh itself.

---

<div class="post-metadata">

**Author:** ![Dark\_Horse](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dark_horse/32/39718_2.png) [@Dark\_Horse](https://forum.babylonjs.com/u/Dark_Horse)\
**Post date:** [September 17, 2025, 11:40am UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/9 "2025-09-17T11:40:01Z")

</div>

Hi,

Thanks for the reply!

Yeah, I tried the mesh approach too - having separate meshes with lines traveling through them. But that means our 3D artists have to create individual highlight meshes for every single object, which just isn’t practical for us.

Fortunately, I found a solution by tweaking the post-processing outline shader instead. I modified the edge detection fragment shader to create animated dot patterns. Basically, I take the screen coordinates, add some animated offset based on time, and use modulo operations to create a repeating dot grid that moves across the detected edges. The dots are created using distance calculations and smoothstep functions to get clean circular shapes. It’s not following the exact edge topology like A→B→C→D, but it gives a nice animated dotted outline effect that moves consistently across all edges without needing extra geometry from the art team.

Works pretty well for our use case!

Here’s the result :

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 17, 2025, 3:53pm UTC](https://forum.babylonjs.com/t/highlight-layer-issues/31173/10 "2025-09-17T15:53:10Z")

</div>

nice !!!
