I am working on a big 2D application with babylonJS, where you basically have a canvas with lots of items to interact with, e.g. hovering over them, selecting them, moving around etc. I am using Thin Instances to speed this up, e.g. I have one mesh per item type.
All my meshes have the same z value of 0.0. I disabled z-testing and all my meshes materials have
needAlphaBlending set to true and I am basically using the
alphaIndex to control the draw order.
This works all fine so far regarding drawing, but now I face a problem with the ActionManager: I use ActionManager to implement all the hover/select actions. I have two overlapping items and I get pointerIn/out events for an item that is underneath another item. So from a user’s point of view, the topmost item gets “unhovered” because some item underneath / not visible item is now hovered.
I could partially reproduce the problem in this playground: https://playground.babylonjs.com/#W29PVX#2
You see one square, but actually it is two squares: A bigger and a smaller one. When hovering the square, it changes its color to red, but once you move the mouse closer to the center, it changes its color back to gray.
So although you do not see the inner square, e.g. it is drawn “underneath” the big square, it has hover priority. If you change the order of initialization, e.g. swap the initialization of ground 1 and two, you can change the behavior so that the smaller square is ignored.
You can also uncomment the block regarding alphaIndex etc. and you can make the smaller square appear.
However, it will not change the pick priority.
I have to admit that simply changing the order of initialization of the meshes did not fix the issue in my application. I guess it is because of thin instances or some other delayed initialization. However, the basic problem is the same: ActionManager internally calls Scene.pick which returns only one result and somehow it has to decide which mesh to return if it is ambigous. Looks like I can pass a pickPredicate, but it only allows me to filter out a certain mesh. It does not give me the list of picks so I can pick one or sort them.
How can I influence which mesh is picked if the z-index is the same?
Any help is appreciated. I see that the alternative is to implement a huge logic on my application side