Why can't I add an InstancedMesh to HighlightLayer

Code is the following

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
The second sphere should be highlighted

Thanks

Pinging @sebavan

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.

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?

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

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.