reference icon indicating copy to clipboard operation
reference copied to clipboard

[Feature Request] Inverse Kinematics & Position Transforms

Open Bug-Reaper opened this issue 3 years ago • 9 comments

I'd be down for helping with a PR for this but I wanted gauge your interest in adding these features?

Love how clean and well put together this repo is. Definitely the best react/three I've seen :+1:

Bug-Reaper avatar Oct 08 '20 16:10 Bug-Reaper

I'd be down for helping with a PR for this but I wanted gauge your interest in adding these features?

Definitely. How do you plan to integrate it into the UI? Do you have anything in mind ?

Love how clean and well put together this repo is. Definitely the best react/three I've seen

Thanks a lot for your kind words. ❤️

ritz078 avatar Oct 08 '20 16:10 ritz078

Definitely. How do you plan to integrate it into the UI? Do you have anything in mind ?

For sure man, I'm not really married to any of these ideas but this is how I'd approach it.

So you already have a pretty good implementation of the rotational transform controller. I think I'd add a radio style toggle on the left sidebar right beneath the gender select. This radio style toggle would have the options "Rotation", "Position", and "Scale" and these could be buttons with text or sensible icons. When "rotation" is selected, the app would essentially work the same as it does now. When "position" or "scale" is selected, the app would work very similar to how it does now except we'd swap in the corresponding "position"/"scale" transformation controller instead of the "rotation" controller. Sensible hotkeys for switching between the helpers is probably good if we take this approach.

Somethings I'd consider off the top of my head would be:

  1. Possibly allow for any subset of rotation/position/scale controllers to be visible/usable at the same time. I know this would work with something like rotation+position controllers but the scale+position controllers might conflict, would need some testing and also we'd probably want to play around with the controller sizing to make it work as good as possible.
  2. If you have something selected already with one of the controllers, when you change to a different controller that thing should remain selected.
  3. Example of the THREE position/rotation/scale controller. Documentation of the THREE position/rotation/scale controller.

As for the inverse kinematics I need to do more due diligence here. I'd like to examine any closed/open source implementations of reverse kinematics and relevant UI, particularly any 3D UI. Then draw from the best of all worlds as much as possible.

Bug-Reaper avatar Oct 08 '20 19:10 Bug-Reaper

I have one question.

When "position" or "scale" is selected, the app would work very similar to how it does now except we'd swap in the corresponding "position"/"scale" transformation controller instead of the "rotation" controller.

The reason I did not implement position and scale was that I felt it won't help if we want to transform body parts. In theory if I move the hand, it will be detached from the body unless we find a way to keep the joints intact and make sure the hand is not stretched.

Scale can work if we want to bulk up the body. But should we instead use a slider that controls the muscles instead of scaling individual body parts if that's our use case?

As for the inverse kinematics I need to do more due diligence here. I'd like to examine any closed/open source implementations of reverse kinematics and relevant UI, particularly any 3D UI. Then draw from the best of all worlds as much as possible.

👍🏼 Sounds good

ritz078 avatar Oct 08 '20 20:10 ritz078

Makes sense! I think it'd be cool to scale the size of certain body parts individually or in groups as you describe. Floating body parts could also be cool but probably not on by default.

Going to be playing around a bit with: https://github.com/jsantell/THREE.IK https://jsantell.github.io/THREE.IK/

Not sure if it's an exact fit for what's needed here but hopefully I can learn about how one actually programs iterative inverse kinematics.

Bug-Reaper avatar Oct 22 '20 03:10 Bug-Reaper

https://jsantell.github.io/THREE.IK/examples/#multi-effector looks exactly like the one we might have to implement.

ritz078 avatar Oct 22 '20 12:10 ritz078

Thank you for introducing me to this. It looks like this can solve a lot of problems we have right now.

ritz078 avatar Oct 22 '20 12:10 ritz078

My AI friends tell me the FABRIK method for inverse kinematics is famous, so it should be pretty battle tested for our needs here.

There's another repo from around the same time that implements the same thing, possibly more fully featured in terms of constraints: https://github.com/lo-th/fullik http://lo-th.github.io/fullik/#3D_demo_0

It looks less documented, but their example is in THREE so it's definitely also compatible. Gonna peek into the source code for both [:eye:]

Bug-Reaper avatar Oct 22 '20 22:10 Bug-Reaper

@Bug-Reaper Are you working on this ? If not, I can take this over.

ritz078 avatar Nov 10 '20 16:11 ritz078

Unfortunately, I won't have time to dive into this for another week at least. Just been swamped with some work projects behind schedule. If you're down to take a stab, go for it! You certainly won't be stepping on my toes :+1: @ritz078

Bug-Reaper avatar Nov 12 '20 19:11 Bug-Reaper