Clicking on canvas2d element without clicking on mesh?

[MacSkelly]

I'm just starting out with getting to grips with Canvs2D. I'm using it to make a GUI I'm having a problem with my GUI buttons.

I have meshes that you can interact with by clicking on and a GUI in front. If I try to click on one of my GUI buttons while a mesh is behind it the mesh is picked as well.

Is there a built-in way to get around this?

[Wingnut]

Hi @MacSkelly  I recently made this mess... http://babylonjs-playground.com/#1KRMMG#12

The fonts are much more "fuzzy" than when I first created it, so, maybe the font superSample is currently broken.  Canvas2D is new new new, and still being hammered-on, a bit.

And, I don't know if a "hole-in-the-middle" is going to work for you.  Perhaps layerMasks (z-ordering) could get involved, not sure.

I assume you are using a screenSpaceCanvas2D.  Notice I use worldSpaceCanvas2D, which are essentially the same thing, only there is a node (a plane) involved.  Since there IS a plane involved, clicks won't be able to go through them and hit mesh beyond... IF you parent those planes close-to the camera (closer than the scene).

SO your gui would be a worldSpaceCanvas2D (on its node/plane) which is parented to the camera... and positioned close to the cam.  Hopefully, the clicks will not pass thru the node/plane of the worldSpaceCanvas2D.  lines 390-402 are the area where I parent the nodes to the camera.

There is another thread on the forum that is grappling with similar issues. 

Hope this helps.  @Nockawa and his team COULD be working-on, or may have already found a solution to this issue (surely a better solution than mine, by far).  Maybe he or other experts will come visit.  Be patient.

[MacSkelly]

Thanks. I'll try various suggestions. I'll be patient in the meantime and hopefully a solution comes to light!

[Wingnut]

Hi again.  Does your GUI layer pop-open and closed?  If so, you COULD set all mesh.isPickable = false... when the GUI is open.  With me? 

In other words, if you don't need mesh to be pickable when the GUI is being displayed, turn off the mesh picking.  Then when you close the GUI layer, set your pickable mesh again.

It's a bit of a hassle, but it's an idea, and it might work for you.  Scene.meshes contains ALL scene mesh, so if ALL your mesh are pickable, it is a nice array to iterate-thru and toggle all their isPickable properties.

If only a few of your total mesh are pickable, you'll want to maintain your own list of which mesh need their isPickable set FALSE when the GUI is open/overlayed (and re-set TRUE when GUI closes.)  *shrug* 

 

I have one other idea.  Not sure how well it will work.  Try putting a plane "behind" your GUI (blocking the entire camera lens) that is set plane.visibility = 0 or perhaps .01... or put a material on the plane and set the material.alpha = 0.   (It is not REALLY behind the GUI, but it's in-front-of all pickable scene mesh.)   A pick blocker. 

You might want to parent this plane to the camera... so it is always "with you".  You can turn it ON/OFF with plane.setEnabled(true or false).  Perhaps, you also need to set the plane.isPickable = true/false at times.  (setEnabled(false) or isPickable = false when you need to click mesh in your scene).  Again, visibility = 0 or perhaps .001.

The objective here, is to BLOCK picks from passing through your GUI (intercepting picks) with the see-through plane.  But it might not work.  I'm not an expert at picking.  Just maybe... picking goes right through mesh/blocking-planes, and uses the LAST mesh it hits... as the picked mesh (the furthest mesh that the picking ray hits). 

Not sure, you'll need to do some testing.  I'll keep thinking.  Perhaps you and/or others will have more ideas, too.