Aligning a set of planes to another objects path/sides

[thrice]

So, making a card game. Im trying to spread the cards in the players hand out, essentially along an upside down, elongated U pattern (basically, the reverse of how you would hold playing cards in real life. - But reverse or not, the task is pretty much the same, fanning the cards and rotating, evenly distributing amongst a finite amount of space. - originally I tried solving it via a super janky function. Then I realized: if I draw the shape I am trying to align the objects around, in theory I could get the coordinates of various points of the shape and then essentially assign each card in hand the distributed coordinates. - So I guess I'm wondering, is there an easy way to do this?

I've finally set up a playground to replicate the basic structure of my scene. Sidenote: I am trying to replicate as close as I can to what I actually have, because what I actually have is less than ideal (im having various issues with text rendering, positioning, and other things, that I think may be a scene structure type of issue. (So if you see something stupid that I am doing or that could be improved I'm all ears.) - Anyways here's scene 1, with what I am currently doing with the hand (the rotation is causing the middle cards to appear higher than the cards on the ends, which is the opposite of what I want).

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

Instead I would rather align the bottoms of the cards to the bottom of the half ovalish shape seen here (the player hand shape object)

https://playground.babylonjs.com/#H1D1PB

But I have been struggling to figure out how to do so. Is there a technique to do this easily? Or anyone have any suggestions? Any help much appreciated as always.

P.S.

I read https://doc.babylonjs.com/overviews/how_rotations_and_translations_work which sounded like it might lead me to what I am trying to do, but it's still a little advanced for me, and ultimately, the starting point would be knowing how to split up the path of the oval shape into positions, which I am failing to figure out. (and IDK if there is a built in, easier way to align the planes to the bottom of the oval).

 

 

[adam]

This might be helpful:

 

[JohnK]

You could get a range of curves using curve3. Then use curve3.getPoints() and use these to create a path3D object and then not only can you get positions but also normals, tangents and binormals to the curve. You could then align the cards to the normals using RotationFromAxis to get the rotation values.

http://doc.babylonjs.com/tutorials/how_to_use_curve3

https://doc.babylonjs.com/tutorials/how_to_use_path3d

http://doc.babylonjs.com/overviews/how_rotations_and_translations_work#generating-a-rotation-from-a-target-system

[thrice]

3 hours ago, adam said:

This might be helpful:

 

That extension seems pretty awesome. Although I couldn't get it to work with my use case. (cards were always standing up no matter how I rotated the cylinder, and doesn't handle the direction of the rotation as far as I can tell)

[thrice]

2 hours ago, JohnK said:

You could get a range of curves using curve3. Then use curve3.getPoints() and use these to create a path3D object and then not only can you get positions but also normals, tangents and binormals to the curve. You could then align the cards to the normals using RotationFromAxis to get the rotation values.

http://doc.babylonjs.com/tutorials/how_to_use_curve3

https://doc.babylonjs.com/tutorials/how_to_use_path3d

http://doc.babylonjs.com/overviews/how_rotations_and_translations_work#generating-a-rotation-from-a-target-system

Cool, I will take a stab at that, thanks

[hunts]

@thrice check this out, click on the plane to make paths where you want the card to be positioned, you can make a "U" path by clicking at different point, wait for sometime the card will appear:   http://www.babylonjs-playground.com/#Z7YI2T#2

[hunts]

This will be a good place to start off:

http://www.babylonjs-playground.com/#Z7YI2T#3

[JohnK]

Couldn't give a suggestion without trying it out to check it works

It does in version 2.5 http://www.babylonjs-playground.com/index2_5.html#D3UFQ2

but something has changed in latest version 3.0 http://www.babylonjs-playground.com/index.html#D3UFQ2

Did you know about this @jerome

[jerome]

I didn't follow this thread until now, but to answer your question : yes, the code of RotationFromAxis() changed in an improved way (I hope) https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/what's new.md

it's weird that the behavior changes though

Actually the former algo was more tolerant to not well designed 3 axis system (left handed) passed as a parameter (in other terms, it could compute something even with not a real LH orthogonal system and the result often looked like it were right)

Does this one run a bit better ? http://www.babylonjs-playground.com/index.html#D3UFQ2#1

I just shift the parameters

or this one (+ addRotation) : http://www.babylonjs-playground.com/index.html#D3UFQ2#2

Maybe did I do something wrong with the quaternion and matrices used in this new version .?I need to check this with @adam

[thrice]

1 hour ago, JohnK said:

Couldn't give a suggestion without trying it out to check it works

It does in version 2.5 http://www.babylonjs-playground.com/index2_5.html#D3UFQ2

but something has changed in latest version 3.0 http://www.babylonjs-playground.com/index.html#D3UFQ2

Did you know about this @jerome

Exactly what I was trying to do, thanks so much!

[adam]

@jerome   It works if you flip the x axis:

http://www.babylonjs-playground.com/index.html#D3UFQ2#3

[JohnK]

So very helpful as usual @jerome and @adam thank you

[jerome]

you're right @adam

but it used to behave differently in 2.5 http://www.babylonjs-playground.com/index2_5.html#D3UFQ2#4     I'm showing here the default axes (nothing flipped)

That's what I don't really get.

[adam]

The functions that RotationFromAxis is now using expects the axes to be left handed.

There probably needs to be some code to check for that if we want to maintain the behavior of 2.5.

[jerome]

Actually the old behavior tolerance was just a side-effect ...

It MUST be passed a LH orthogonal system like it's written in the API doc.

[thrice]

On 5/18/2017 at 2:20 PM, jerome said:

I didn't follow this thread until now, but to answer your question : yes, the code of RotationFromAxis() changed in an improved way (I hope) https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/what's new.md

it's weird that the behavior changes though

Actually the former algo was more tolerant to not well designed 3 axis system (left handed) passed as a parameter (in other terms, it could compute something even with not a real LH orthogonal system and the result often looked like it were right)

Does this one run a bit better ? http://www.babylonjs-playground.com/index.html#D3UFQ2#1

I just shift the parameters

or this one (+ addRotation) : http://www.babylonjs-playground.com/index.html#D3UFQ2#2

Maybe did I do something wrong with the quaternion and matrices used in this new version .?I need to check this with @adam

@jerome @JohnK

So I am close to getting this working in my project, but realized there is still one more issue, which may or may not be related to what you guys were talking about the axis system (I am stuck on 2.5 version as I am using Canvas2d text library in project), but, once I got it implemented in my project, I realize that the cards were facing the wrong direction (like they were flipped over facing away), and rotated 180 degrees (flat), from where I expected them to be. - I can reproduce if I use FRONTSIDE instead of DOUBLESIDE in the playground.

The only playground where I can get FRONTSIDE working as expected, is in a 3.0 playground, using the addRotation method as shown in I believe one of Jeromes examples.

http://www.babylonjs-playground.com/index.html#D3UFQ2#5

When I try to replicate the behavior in 2.5 by manually adding, it falls apart

https://playground.babylonjs.com/index2_5.html#KGPGAV

Any idea what's going on, or what I am doing wrong, or if this is related to issue mentioned above?

[thrice]

2 hours ago, thrice said:

@jerome @JohnK

So I am close to getting this working in my project, but realized there is still one more issue, which may or may not be related to what you guys were talking about the axis system (I am stuck on 2.5 version as I am using Canvas2d text library in project), but, once I got it implemented in my project, I realize that the cards were facing the wrong direction (like they were flipped over facing away), and rotated 180 degrees (flat), from where I expected them to be. - I can reproduce if I use FRONTSIDE instead of DOUBLESIDE in the playground.

The only playground where I can get FRONTSIDE working as expected, is in a 3.0 playground, using the addRotation method as shown in I believe one of Jeromes examples.

http://www.babylonjs-playground.com/index.html#D3UFQ2#5

When I try to replicate the behavior in 2.5 by manually adding, it falls apart

https://playground.babylonjs.com/index2_5.html#KGPGAV

Any idea what's going on, or what I am doing wrong, or if this is related to issue mentioned above?

I THINK, I may have finally figured out a working solution by backporting the addRotation method in master.

https://playground.babylonjs.com/index2_5.html#KGPGAV#1

Still, I had to rotate Y by -Math.PI (not -Math.PI /2 as in master version), so the discrepancy seems a bit strange

[thrice]

Looks like that did it, except still suffering from upside down behavior (which ended up being easy fixed after backporting addRotation, as just needed to rotate z by Math.PI) https://playground.babylonjs.com/index2_5.html#KGPGAV#2 - coolio