Why can't I add an InstancedMesh to HighlightLayer

Questions
1

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

2

Pinging @sebavan

3

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.

4

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?

5

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

6

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.

7

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

8

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
}

1 Like
9

@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.

1 Like
10

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

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

1 Like
11

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

2 Likes
12

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 :slight_smile:

1 Like
13

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 :slight_smile:

1 Like
14

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.:slightly_smiling_face:

https://playground.babylonjs.com/#AHP3J7#8

4 Likes
15

You beat me to it :slight_smile: Babylon.js Playground

4 Likes
16

You are miracle workers, guys, thank you very much! :smiley: :muscle:

2 Likes