New animation / skinning / ik example

[abernier]

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

[Mugen87]

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]

@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/[email protected]";

-> 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]

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

[Mugen87]

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]

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

controller.show() and controller.hide()

[Mugen87]

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]

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]

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]

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

[abernier]

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

Ok, found the eslint tooling

[abernier]

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

[abernier]

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]

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]

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]

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]

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]

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

[Mugen87]

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]

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]

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]

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]

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]

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]

it is necessary to define a license for kira.glb

How should I proceed for this?

[Mugen87]

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]

done in #24688

[mrdoob]

@abernier Amazing example! 🔥