New `animation / skinning / ik` example #24652

abernier · 2022-09-16T15:26:23Z

Note Merged
see animation / skinning / ik example

Following up my previous PR about CCDIKSolver documentation, I'm now submitting a new animation / skinning / ik example I've made with CCDIKSolver applied on a GLTF skinned mesh:

This PR is deployed here with github-pages so you can preview it: https://abernier.github.io/three.js/examples/#webgl_animation_skinning_ik

I've added some useful lil-gui options, so users can play with the IK solver and bones.

Hope this could be useful and fun :)

TODO

formatting
uncommented lines should be removed
remove gsap and use tween.js
convert the new glTF asset into a single glb
downgrade to lil-gui 0.16
add to screenshots' exception list

docs/examples/en/animations/CCDIKSolver.html

examples/jsm/animation/CCDIKSolver.js

Mugen87 · 2022-09-17T08:51:30Z

The example looks awesome! However, there are some open poinst that have to be fixed: webgl_animation_skinning_ik.html needs some updates to make it more consistent to the other examples. The formatting is off, all uncommented lines should be removed, it would be good to remove gsap and use tween.js from the repository instead. Also convert the new glTF asset into a single glb.

abernier · 2022-09-17T09:07:15Z

@Mugen87 thank you

Sure, I've listed your points in a TODO tasks list in the PR description 👍🏻.

Also, because I needed the latest lil-gui version (v0.17.0), I have imported it from skypack:

three.js/examples/webgl_animation_skinning_ik.html

Lines 85 to 86 in 6f58595

    
           // import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; 
        
           import GUI from "https://cdn.skypack.dev/lil-gui@0.17.0";

-> do you want I'd rather upgrade the jsm/libs/lil-gui.module.min.js directly in this PR, or maybe in a separate one?

abernier · 2022-09-17T09:14:20Z

And just for my info, why not including gsap into jsm/libs: license issue? I find the Timeline feature often very handy...

Mugen87 · 2022-09-17T09:15:23Z

license issue?

Yes. And because one animation library should be sufficient for the repo (like having lil-gui is sufficient for GUI stuff).

What features are missing in the current lil-gui version that you need for the example?

abernier · 2022-09-17T09:19:01Z

What features are missing in the current lil-gui version that you need for the example?

controller.show() and controller.hide()

Mugen87 · 2022-09-17T09:28:51Z

Any chances to rewrite the code or simplify the example so you don't have to use a higher version of lil-gui? I really have no good feeling if we start using external libs from different releases.

abernier · 2022-09-17T09:48:30Z

but can't we just upgrade lil-gui repo lib to its latest 0.17.0 version?

--

otherwise if not possible, yes, what I can do is to put the controllers I wanted to show/hide into a folder (because gui.show()/gui.hide() already existed on folders in 0.16)

I would prefer not to but I will, if you confirm it is too "risky"

Mugen87 · 2022-09-17T13:56:39Z

I'm not in favor to upgrade a lib that is used extensively in the repo just because one example needs a new feature.

However, if you want to make a separate PR with upgrading lil-gui and verify that the existing examples work, that's fine with me.

abernier · 2022-09-17T14:01:41Z

I understand, I will downgrade to 0.16 then -> added to my tasks ;)

abernier · 2022-09-17T20:05:49Z

~~@Mugen87 About formatting, is there a tool to run against my code? Thank you~~

Ok, found the eslint tooling

abernier · 2022-09-18T08:34:46Z

✅ ok, all my tasks are now complete if you want to review @Mugen87 ;)

abernier · 2022-09-18T18:32:00Z

About the screenshot, I've initially and naively generated it manually...

Since I've checked on this failed CI task and now I understand it is supposed to be auto-generated to diff them...

So I've tried generated a new one locally npm run make-screenshot examples/webgl_animation_skinning_ik.html and the screenshot generated is always my preloader "loading..."

Is there a way to delay the moment the screenshot is taken? (in my case 2.5s may be enough)

LeviPesin · 2022-09-18T18:36:44Z

Is there a way to delay the moment the screenshot is taken? (in my case 2.5s may be enough)

Currently no (will be fixed in #24109). Please just add the example to the test's exception list for now.

abernier · 2022-09-18T18:49:17Z

Is there a way to delay the moment the screenshot is taken? (in my case 2.5s may be enough)

Currently no (will be fixed in #24109). Please just add the example to the test's exception list for now.

✅ done

Mugen87 · 2022-09-20T08:30:00Z

I've downloaded the branch today and studied the example code in detail. Sorry for saying this but the code is still way too complicated.

Yes, examples should be visually appealing but more importantly easy to understand and read. webgl_animation_skinning_ik is fully packed with stuff which is not required to demonstrate the unique feature the example is actually about: inverse kinematics.

I suggest to post the code in its current (or original) state in the showcase category at the forum. An example in the repository has to be more simple. An example about inverse kinematics does not need any camera animations, multiple controls selection as well as post processing.

Besides, the example does still not use the formatting and coding style of the other official examples.

Mugen87 · 2022-09-21T08:17:47Z

Looks much better now! Added a small clean up commit.

I see the following warnings in the browser console though:

THREE.CCDIKSolver: bone hand_l is not the child of bone Upperarm_l
THREE.CCDIKSolver: bone Upperarm_l is not the child of bone lowerarm_l
THREE.CCDIKSolver: bone lowerarm_l is not the child of bone hand_l

How can we get rid of these?

Mugen87 · 2022-09-21T08:25:46Z

Do you mind regenerating the screenshot? I've edited webgl_animation_skinning_ik.html over the GitHub UI.

examples/webgl_animation_skinning_ik.html

Mugen87 · 2022-09-21T09:59:30Z

It's quite easy to "break" the example by translating the sphere along the x-axis. The result is an endless ping-pong effect:

How do you think about setting transformControls.showX = false; and allowing translation only in a YZ plane.

Is that something that needs to be fixed in CCDIKSolver at some point (not with this PR)?

abernier · 2022-09-21T10:43:56Z

It's quite easy to "break" the example by translating the sphere along the x-axis. The result is an endless ping-pong effect

Indeed, I think this is due to rotationMin/rotationMax constraints on links... but those are needed in order her elbow stays below her hand.

I think this could ideally be solved by adding "pole targets" feature to CCDIKSolver, so we can tell some bones to always point somewhere in particular...

How do you think about setting transformControls.showX = false; and allowing translation only in a YZ plane.

Sure, or we could get rid of rotation* constraints, but should render strange... I don't know which is best, it's a trade-off, as you prefer

Mugen87 · 2022-09-21T11:49:46Z

Let's use transformControls.showX = false; for now. That should mitigate the most obvious glitches.

I think this could ideally be solved by adding "pole targets" feature to CCDIKSolver, so we can tell some bones to always point somewhere in particular...

Sounds good!

abernier · 2022-09-21T17:34:21Z

Let's use transformControls.showX = false; for now. That should mitigate the most obvious glitches.

I will add it tomorrow + some tweaks on the glb and will mark the PR as ready once it is done ;)

abernier · 2022-09-22T10:05:04Z

ok

showX=false
fixed broken link
updated screenshot

https://abernier.name/three.js/examples/#webgl_animation_skinning_ik

lgtm, but don't hesitate if anything else I can do

Mugen87 · 2022-09-23T08:13:40Z

I've realized right now that the model is from the Unity store and not available under a CC license. Since it is now part of a bigger asset, it is necessary to define a license for kira.glb (otherwise I'm afraid we can't add it).

abernier · 2022-09-23T11:21:48Z

it is necessary to define a license for kira.glb

How should I proceed for this?

Mugen87 · 2022-09-23T11:32:04Z

Since you have exported the model from Blender, you are the author of the final asset. So you can define the license, in most cases one of CC, see https://creativecommons.org/licenses/. We usually add the license in the description like in https://threejs.org/examples/webgl_animation_skinning_morph (CC0 in this case).

The important question is: Since you have purchased a model from the Unity store, you have to ensure if it's okay to reuse it for a different asset which is then licensed under CC.

abernier · 2022-09-23T13:39:51Z

done in #24688

mrdoob · 2022-09-29T02:19:18Z

@abernier Amazing example! 🔥

abernier added 5 commits September 16, 2022 08:59

kira example

da9ff23

kira example

9a38efa

adding link to the example into CCDIKSolver documentation

0c266d2

removing old file

520d05c

updating final url

6f58595

abernier commented Sep 16, 2022

View reviewed changes

docs/examples/en/animations/CCDIKSolver.html Show resolved Hide resolved

abernier commented Sep 16, 2022

View reviewed changes

examples/jsm/animation/CCDIKSolver.js Outdated Show resolved Hide resolved

lil-gui 0.16 + Tween

bc921e9

abernier added 3 commits September 18, 2022 10:07

fix eslint issues

f9b58f5

glb

0e84ca0

no dead comments

2a75c52

abernier marked this pull request as draft September 18, 2022 10:22

abernier marked this pull request as ready for review September 18, 2022 14:20

remaining dead comments

f52a382

adding to the screenshot's exceptionList

cb368a9

Mugen87 reviewed Sep 21, 2022

View reviewed changes

examples/webgl_animation_skinning_ik.html Show resolved Hide resolved

abernier added 3 commits September 21, 2022 11:12

fix(CCDIKSolver warning): links order count + removing 1 useless link

4afee72

chore: better camera angle

020a6a7

fix: eslint --fix

c400e9a

Mugen87 reviewed Sep 21, 2022

View reviewed changes

examples/webgl_animation_skinning_ik.html Outdated Show resolved Hide resolved

abernier added 4 commits September 22, 2022 10:58

transformControls showX false

3117e42

new glb version

78998b2

updating screenshot

1f8ec21

fixing link to the experiment

242e603

abernier marked this pull request as ready for review September 22, 2022 10:04

Mugen87 added 2 commits September 22, 2022 13:36

Update CCDIKSolver.js

890d80b

Update webgl_animation_skinning_ik.html

7decd1d

Mugen87 approved these changes Sep 22, 2022

View reviewed changes

Mugen87 added this to the r145 milestone Sep 22, 2022

Mugen87 merged commit a53977c into mrdoob:dev Sep 23, 2022

joshuaellis mentioned this pull request Sep 27, 2022

r145 three-types/three-ts-types#255

Closed

17 tasks

abernier deleted the kira branch September 29, 2022 06:32

WestLangley mentioned this pull request Sep 30, 2022

morphtargets example broken (flickering on Chrome) #24718

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New `animation / skinning / ik` example #24652

New `animation / skinning / ik` example #24652

abernier commented Sep 16, 2022 •

edited

Mugen87 commented Sep 17, 2022 •

edited

abernier commented Sep 17, 2022 •

edited

abernier commented Sep 17, 2022

Mugen87 commented Sep 17, 2022 •

edited

abernier commented Sep 17, 2022 •

edited

Mugen87 commented Sep 17, 2022

abernier commented Sep 17, 2022 •

edited

Mugen87 commented Sep 17, 2022

abernier commented Sep 17, 2022

abernier commented Sep 17, 2022 •

edited

abernier commented Sep 18, 2022

abernier commented Sep 18, 2022 •

edited

LeviPesin commented Sep 18, 2022

abernier commented Sep 18, 2022

Mugen87 commented Sep 20, 2022 •

edited

Mugen87 commented Sep 21, 2022 •

edited

Mugen87 commented Sep 21, 2022

Mugen87 commented Sep 21, 2022 •

edited

abernier commented Sep 21, 2022 •

edited

Mugen87 commented Sep 21, 2022 •

edited

abernier commented Sep 21, 2022 •

edited

abernier commented Sep 22, 2022 •

edited

Mugen87 commented Sep 23, 2022 •

edited

abernier commented Sep 23, 2022 •

edited

Mugen87 commented Sep 23, 2022 •

edited

abernier commented Sep 23, 2022

mrdoob commented Sep 29, 2022

New animation / skinning / ik example #24652

New animation / skinning / ik example #24652

Conversation

abernier commented Sep 16, 2022 • edited

TODO

Mugen87 commented Sep 17, 2022 • edited

abernier commented Sep 17, 2022 • edited

abernier commented Sep 17, 2022

Mugen87 commented Sep 17, 2022 • edited

abernier commented Sep 17, 2022 • edited

Mugen87 commented Sep 17, 2022

abernier commented Sep 17, 2022 • edited

Mugen87 commented Sep 17, 2022

abernier commented Sep 17, 2022

abernier commented Sep 17, 2022 • edited

abernier commented Sep 18, 2022

abernier commented Sep 18, 2022 • edited

LeviPesin commented Sep 18, 2022

abernier commented Sep 18, 2022

Mugen87 commented Sep 20, 2022 • edited

Mugen87 commented Sep 21, 2022 • edited

Mugen87 commented Sep 21, 2022

Mugen87 commented Sep 21, 2022 • edited

abernier commented Sep 21, 2022 • edited

Mugen87 commented Sep 21, 2022 • edited

abernier commented Sep 21, 2022 • edited

abernier commented Sep 22, 2022 • edited

Mugen87 commented Sep 23, 2022 • edited

abernier commented Sep 23, 2022 • edited

Mugen87 commented Sep 23, 2022 • edited

abernier commented Sep 23, 2022

mrdoob commented Sep 29, 2022

New `animation / skinning / ik` example #24652

New `animation / skinning / ik` example #24652

abernier commented Sep 16, 2022 •

edited

Mugen87 commented Sep 17, 2022 •

edited

abernier commented Sep 17, 2022 •

edited

Mugen87 commented Sep 17, 2022 •

edited

abernier commented Sep 17, 2022 •

edited

abernier commented Sep 17, 2022 •

edited

abernier commented Sep 17, 2022 •

edited

abernier commented Sep 18, 2022 •

edited

Mugen87 commented Sep 20, 2022 •

edited

Mugen87 commented Sep 21, 2022 •

edited

Mugen87 commented Sep 21, 2022 •

edited

abernier commented Sep 21, 2022 •

edited

Mugen87 commented Sep 21, 2022 •

edited

abernier commented Sep 21, 2022 •

edited

abernier commented Sep 22, 2022 •

edited

Mugen87 commented Sep 23, 2022 •

edited

abernier commented Sep 23, 2022 •

edited

Mugen87 commented Sep 23, 2022 •

edited