# Why can't I add an InstancedMesh to HighlightLayer

**URL:** <https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183>\
**Category:** Questions\
**Created:** [October 8, 2019, 11:51am UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183 "2019-10-08T11:51:43Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![kmitov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kmitov/32/4969_2.png) [@kmitov](https://forum.babylonjs.com/u/kmitov)\
**Post date:** [October 8, 2019, 11:51am UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/1 "2019-10-08T11:51:43Z")

</div>

Code is the following

```auto
const engine = new BABYLON.Engine(canvas, { stencil: true });
const scene = ...
const hl = new BABYLON.HighlightLayer("hl1", scene);
this._meshes.forEach((mesh) => {
        this._hl.addMesh(mesh, this._hlColor)
})

```

The problem is that I can not add a mesh to the highlightLayer because it does not have onBeforeBindObservable

There is a check inside addMesh for this.

And since InstancedMesh does not have onBeforeBindObservable I can not add InstancedMesh to the HighlightLayer?

Playground example - [https://www.babylonjs-playground.com/#1KUJ0A#193](https://www.babylonjs-playground.com/#1KUJ0A#193)  
The second sphere should be highlighted

Thanks

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 8, 2019, 3:33pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/2 "2019-10-08T15:33:56Z")

</div>

Pinging @sebavan

---

<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:** [October 8, 2019, 3:47pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/3 "2019-10-08T15:47:09Z")

</div>

It is by design for rhe same reson that you can not specify the material of an instanced mesh.

Basically instances render in one call so you can not individually add them in. Cause we would need to separate the calls and lose the instances advantage.

In your Case the easiest is to keep one uninstanced and the rest as instances so you can highlight the none instanced one.

---

<div class="post-metadata">

**Author:** ![kmitov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kmitov/32/4969_2.png) [@kmitov](https://forum.babylonjs.com/u/kmitov)\
**Post date:** [October 8, 2019, 4:48pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/4 "2019-10-08T16:48:02Z")

</div>

Thanks. But the one that should be highlighted changes with by a user interaction. Like when the user points with the mouse to a mesh. And they are 500 of these meshes on the scene.

From my limited knowledge about instancing I though that it is the geometry that is shared, but the instances could vary in things like position and color. Turns out they can vary in position and not in colors.

Is clone/dispose the only way to have 500-1000 instancedmeshes on the scree and quickly highlight 300 of them, than 2 of them, then 1000, then 732, than 1?

---

<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:** [October 8, 2019, 4:52pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/5 "2019-10-08T16:52:14Z")

</div>

You could use different sets of instances and highlight the full set at once ?

---

<div class="post-metadata">

**Author:** ![kmitov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kmitov/32/4969_2.png) [@kmitov](https://forum.babylonjs.com/u/kmitov)\
**Post date:** [October 8, 2019, 4:57pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/6 "2019-10-08T16:57:59Z")

</div>

Yes. That’s a good idea.

The reason I have not though about it is because the InstancedMesh(es) get created by GLTFLoader and I have no control over which meshes are InstancedMesh and which are not.

---

<div class="post-metadata">

**Author:** ![kekeqy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kekeqy/32/12447_2.png) [@kekeqy](https://forum.babylonjs.com/u/kekeqy)\
**Post date:** [April 8, 2021, 7:12am UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/7 "2021-04-08T07:12:15Z")

</div>

This design is a bit lame, I wish it could be improved.

---

<div class="post-metadata">

**Author:** ![Lazarus\_Rainhard](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lazarus_rainhard/32/17217_2.png) [@Lazarus\_Rainhard](https://forum.babylonjs.com/u/Lazarus_Rainhard)\
**Post date:** [October 19, 2021, 4:58pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/8 "2021-10-19T16:58:18Z")

</div>

Good afternoon. I bring up an old topic so as not to create a new one (I apologize, if necessary, vice versa). I had a similar problem, in my development I plan to use a lot of models, so instances were chosen for optimization, but when I tried to use “HighlightLayer” highlighting, I ran into the same problem.  
And I have a question - is there an alternative? Or maybe there is some advice on what to do in my situation. As in the usual strategy, I need to highlight the selected units, enemy and allies. I cannot refuse instances, since several thousand models will kill the system, and I also cannot select a parent, since my bootloader is arranged in this way for all loaded models (universal):  
async function \_loadAsset(file) {  
let a = await BABYLON.SceneLoader.ImportMeshAsync("", “./images/”, file, scene)  
a = a.meshes[1]  
a.position.y = -2  
a.setEnabled(false)  
return a  
}

---

<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:** [October 19, 2021, 5:07pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/9 "2021-10-19T17:07:33Z")

</div>

@kekeqy feel free to improve it, it is all open source, you can make a PR for it.

@Lazarus_Rainhard the main issue boils down to the underlying tech. there is not much to do here. Maybe you could rely on a custom shader where you would use a custom attribute to enable/disable highlights in the effect layer.

---

<div class="post-metadata">

**Author:** ![Lazarus\_Rainhard](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lazarus_rainhard/32/17217_2.png) [@Lazarus\_Rainhard](https://forum.babylonjs.com/u/Lazarus_Rainhard)\
**Post date:** [October 20, 2021, 3:54am UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/10 "2021-10-20T03:54:03Z")

</div>

oh, I read the introduction to shaders and it’s too early for me, it’s difficult…

> **[Introduction to Shaders | Babylon.js Documentation](https://doc.babylonjs.com/advanced_topics/shaders/introToShaders)**
>
> Dive deep into the inner workings of shaders in Babylon.js.

Oh, sad, the backlight looks very good, but I still have the option to use showBoundingBox, it’s not so beautiful, very, very sorry

---

<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:** [October 20, 2021, 3:11pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/11 "2021-10-20T15:11:34Z")

</div>

In this case the simplest is to keep one none instanced mesh and when you need a highlight, hide the instance to lit, clone it s position rotation scale into the none instanced one and it would visually looks the same

---

<div class="post-metadata">

**Author:** ![Lazarus\_Rainhard](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lazarus_rainhard/32/17217_2.png) [@Lazarus\_Rainhard](https://forum.babylonjs.com/u/Lazarus_Rainhard)\
**Post date:** [October 21, 2021, 6:53am UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/12 "2021-10-21T06:53:51Z")

</div>

Hi, I did not understand at all what is required, later I will make a detailed PG what is happening and how, otherwise it’s difficult for me to understand without clarity 🙂

---

<div class="post-metadata">

**Author:** ![Lazarus\_Rainhard](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lazarus_rainhard/32/17217_2.png) [@Lazarus\_Rainhard](https://forum.babylonjs.com/u/Lazarus_Rainhard)\
**Post date:** [October 21, 2021, 8:41am UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/13 "2021-10-21T08:41:20Z")

</div>

[https://playground.babylonjs.com/#AHP3J7#6](https://playground.babylonjs.com/#AHP3J7#6)  
compiled a PG close to my reality: a universal loader of simple models loads a model, writes the base to the “Models” object and creates instances based on the basics. I could use highlighting for Models.neutralBase or Models.redBase (base), for example “hl.addMesh (Models.neutralBase, BABYLON.Color3.Green ());”, but then all instances of this base will be highlighted, but I need specifically selected.  
To understand what exactly is required, you need to comment out lines 197 and 207 (enabling and disabling “hl”)  
I apologize, if it is not very clear written, I have to use a translator 🙂

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [October 21, 2021, 7:19pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/14 "2021-10-21T19:19:17Z")

</div>

Heya, here’s a simple implementation for example.

The source mesh is cloned once to create a highlighted mesh. Then on select this highlighted clone is set enabled and made a child of the selected mesh, which is set invisible. And on deselect, the highlighted clone is set to disabled and the previously selected mesh is made visible again.

I also changed it to only select when the picked mesh is an instance of the source mesh, otherwise deselect is called.🙂

[https://playground.babylonjs.com/#AHP3J7#8](https://playground.babylonjs.com/#AHP3J7#8)

---

<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:** [October 21, 2021, 7:20pm UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/15 "2021-10-21T19:20:04Z")

</div>

You beat me to it 🙂 [Babylon.js Playground](https://playground.babylonjs.com/#HRBTTJ)

---

<div class="post-metadata">

**Author:** ![Lazarus\_Rainhard](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lazarus_rainhard/32/17217_2.png) [@Lazarus\_Rainhard](https://forum.babylonjs.com/u/Lazarus_Rainhard)\
**Post date:** [October 22, 2021, 3:14am UTC](https://forum.babylonjs.com/t/why-cant-i-add-an-instancedmesh-to-highlightlayer/6183/16 "2021-10-22T03:14:42Z")

</div>

You are miracle workers, guys, thank you very much! 😃 💪