# HighlightLayer bug

**URL:** <https://forum.babylonjs.com/t/highlightlayer-bug/62674>\
**Category:** Bugs\
**Created:** [March 5, 2026, 8:20am UTC](https://forum.babylonjs.com/t/highlightlayer-bug/62674 "2026-03-05T08:20:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sambler](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sambler/32/49632_2.png) [@Sambler](https://forum.babylonjs.com/u/Sambler)\
**Post date:** [March 5, 2026, 8:20am UTC](https://forum.babylonjs.com/t/highlightlayer-bug/62674/1 "2026-03-05T08:20:20Z")

</div>

Hello everyone, I’ve been facing this problem for a long time: the HighlightLayer starts to overexpose and behave very strangely when it interacts with certain other functions. For example, in this case, I reproduced the moment when objects intersect with each other while two HighlightLayers are enabled simultaneously—one blue and one red.  
This also happens with text.

Because of this, in my main project, I have to somehow work around it or completely disable the HighlightLayer (but I really like it and want to use it).

Is there any solution to this problem (other than simply disabling the other color)?

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/5/65528a766c2d951775535107ff90079de851f104.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/e/6e9bf0016b719402665c57352b26a5333adf1694.jpeg)

For example, in my project there is a transparency mode, and through it this kind of effect occurs.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/7/67fb55fb575f464bd8090d8bd3eb7e4b5a559539.jpeg)

Or, for example, when we see text, I had to completely disable the HighlightLayer, otherwise the same bug would happen—the object would start glowing very brightly.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/0/b0e8cdab125b5a94955e8826c7e5a732af0b0020.jpeg)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/9/a938904f0385bb4fb50b9e5d9d261cbf1b991e3e.jpeg)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/4/54874d7dc61b33192f6b6355b607a4d72b8b1920.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 5, 2026, 8:49am UTC](https://forum.babylonjs.com/t/highlightlayer-bug/62674/2 "2026-03-05T08:49:44Z")

</div>

What’s the purpose of the overlap highlight layer? If I disable it and exclude the labels from the layer, it seems to work as expected (?)

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

Also, have you tried the new selection outline layer?

> **[Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/mesh/selectionOutlineLayer/)**

Perhaps this will be more suitable for your use case.

---

<div class="post-metadata">

**Author:** ![Sambler](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sambler/32/49632_2.png) [@Sambler](https://forum.babylonjs.com/u/Sambler)\
**Post date:** [March 5, 2026, 10:23am UTC](https://forum.babylonjs.com/t/highlightlayer-bug/62674/3 "2026-03-05T10:23:55Z")

</div>

**SelectionOutlineLayer**

has a compatibility bug with WebGPU — there is a problem with sampler binding at the engine level, and it cannot be worked around.

I tried to run it, but it didn’t work.  
Does it only work on WebGL?

The problem is that **SelectionOutlineLayer** has a compatibility bug with WebGPU — it incorrectly sets up the sampler binding (Filtering sampler incompatible with non-filtering sampler binding), which breaks the entire render pipeline. Neither `forceGLSL` nor disabling MSAA helps — this is a bug at the Babylon.js engine level.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/2/32f228232b048c63ccec7cc263d17d74b224bb81.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 5, 2026, 1:22pm UTC](https://forum.babylonjs.com/t/highlightlayer-bug/62674/4 "2026-03-05T13:22:58Z")

</div>

Can you provide a repro, as it does work in the sample from the documentation:

> **[Babylon.js Playground](https://playground.babylonjs.com/?webgpu#LA850M%2320)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![Sambler](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sambler/32/49632_2.png) [@Sambler](https://forum.babylonjs.com/u/Sambler)\
**Post date:** [March 5, 2026, 2:18pm UTC](https://forum.babylonjs.com/t/highlightlayer-bug/62674/5 "2026-03-05T14:18:47Z")

</div>

The problem has been solved, I found your correspondence on the forum 4 days ago, and decided to update the version to the latest, and indeed the problem has been solved.

> [@WebGPU failing to render with \`SelectionOutlineLayer\` (and \`scene.enableDepthRenderer()\`)](https://forum.babylonjs.com/t/webgpu-failing-to-render-with-selectionoutlinelayer-and-scene-enabledepthrenderer/62611):
>
> Hi folks! I recently upgraded my project using SelectionOutlineLayer from the standard Engine to WebGPUEngineusing the [same options as the Playground does](https://github.com/BabylonJS/Babylon.js/blob/master/packages/tools/playground/src/components/rendererComponent.tsx#L262-L266): const engine = new BABYLON.WebGPUEngine(canvas, { enableAllFeatures: true, setMaximumLimits: true, enableGPUDebugMarkers: true, }); But it failed to render due to the 2 issues below: Issue #1: DepthRenderer - “PushDebugGroup called 1 time(s) without a corresponding PopDebugGroup” Initially, it was failing to render with: babylon.js:1…

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/0/1063a47ae094afc03673ede2ed95d13282520d78.jpeg)
