ray picking a rectangle2d( canvas2d) while in a scene

[jinxsterz]

is it possible to ray pick a rectangle2d in a worldspacecanvas2D? any1 can enlighten me  

[Wingnut]

Hi @jinxsterz, welcome to the forum.  I will ping @Nockawa... he is an expert for Canvas2D. 

Also, I will try to answer.  (oh no!)  heh

(I think) The picking ray needs to hit mesh.  So...

IF you are using a screenSpaceCanvas2D - Perhaps put your rect2d inside the .children [ here ] of a Group2d.  Then set the group2d trackNode = myInvisiblePlane.  Even though the plane is invisible, you can use it to position your rect2d, and a picking ray should be able to hit group2d.trackedNode (which is the plane with .visibility = 0).  I think... using this method, your rect2d's will always be facing the camera... in automatic billboard/lookAt mode.

IF you are using a worldSpaceCanvas2D - There is a mesh node already associated with each worldSpaceCanvas2d.  It is worldSpaceCanvas2d.worldSpaceCanvasNode .  Wow, huh?   But, there is only ONE mesh-node for each wsc2d.  So, if you have many rect2d widely-positioned, perhaps you should create a new wsc2d for EACH rect2d.  That way, each wsc2d (each rect2) has its OWN .worldSpaceCanvasNode.  Keep in mind... that although no Group2d is needed for my method, you can STILL use (many) Group2d to "cluster" multiple rect2 together, and use the group's trackNode parameter (wsc2d.trackedNode property) as a picking ray target for a particular group/cluster.

I have been working with wsc2d and .worldSpaceCanvasNode myself, recently.

http://www.babylonjs-playground.com/#14VFYX#18

Line 252... I create a wsc2d for EACH button label.

Line 263 - I parent the invisible-by-default worldSpaceCanvasNode... to a mesh.  I "affix" the label (a wsc2d with children[ rect2d ]).  I glue-on the button label. 

Borrow code and ideas from that playground demo, if you wish.  Hope this helps.  Others may comment soon.  (Hopefully, they are people who know more than I... about using picking rays on canvas2d prim2d's).

[jinxsterz]

eh thanks mate i will try it out 

[jinxsterz]

so theres no way of ray picking a canvas2d object on its own?

had an idea of using ray pick to pick the object and to interact with it while looking at it, like a vr gazing.

nonetheless thanks for the help 

[Nockawa]

All primitive have a pointerEventObservable event, whether they are displayed in a World Space or Screen Space canvas, check this PG: http://babylonjs-playground.com/#1BKDEO#22

You can find more about interaction here: http://doc.babylonjs.com/overviews/Canvas2D_Interaction

Cheers

[Wingnut]

Yep, good words, Nockawa, thx.  When I answered, I was not thinking about pointer events and focus-on-something clicking.  I was thinking about distanceFrom and directionTo... which would be called "rays" and not "picking rays", I suppose.    Dummy me.

Sorry if I lead you astray, jinxsterz.

Changing arrow-pointer cursor... to hand-pointer cursor... when mousing-over a clickable canvas2d prim2d... is that active/doable?

I don't know if I have ever seen a demo of a pickable/clickable rect2d/text2d/sprite2d/shape2d/group2d... on a screenSpaceCanvas... that changed its mouse pointer on mouseover.  Perhaps that will be today's project for me. 

When there is a trackNode or a worldSpaceCanvasNode... we can put a no-action onPointerOver/onPointerOut actionManager on the mesh, and that will make the pointer change on mouseover.  There might be newer, better ways to do that, now.   Party on!