[Feature Request] Rotation keyframing via quaternions + multi-property keyframing at once

[jo-chemla]

Hi there, thanks for this amazing project!

Linked to this https://github.com/theatre-js/theatre/issues/86 discussion on Euler angles set in degrees for rotations, it would also be powerful to set keyframes on rotations via quaternions. Doing Slerp for quaternion interpolation would ensure correct interpolation whatever the two keyframes are, as well as smooth acceleration in the interpolation. So the solution could be to keyframe rotation via different modes - euler rotation (with a given order), quaternions, etc.

Another nice addition would be to make it easier to add a keyframe on multiple properties at once. At the moment, one has to keyframe pos.x, y, z and rot.x, y, z individually. If every node could be right-clicked and be marked for the sequence, then one could add a keyframe on the whole position vector directly by selecting it, or on the whole object (whatever is keyframed in pos+rot+scale) by selecting it in the hierarchy tree.

[vezwork]

Hi @jo-chemla, thanks for the issue!

In response to your first addition suggestion: I also am interested in Quaternion interpolation in Theatre, but I do not fully understand the issues and benefits of it... For now we do not have it. @AndrewPrifer may be able to comment more on this issue.

In response to your second addition suggestion: we have added multiple keyframe features in 0.5 :) You can try it out with the 0.5-rc3 release candidate! If I understand what you are suggesting correctly, we have added all of these features.

[jo-chemla]

Thanks, was testing on 0.4.x, the 0.5 indeed has the feature I meant - keyframing on a hierarchy for nested properties. Really nice! Regarding rotation interpolation, using quats resolves gimball lock issues and offer more smooth and more direct interpolation rather than lerping euler angles as a vec3. Threejs does offer Quaternion.slerp methods between quatA and quatB.

Quick question: how would I go about doing a nice and smooth interpolation via theatre.js for more than 2 keyframes? Cubic Splines and Bezier do ensure smooth acceleration since the functionals/curves are C2 continuous. Could I select all keyframe segments and set the same ease-in-out function easily, or do you think you will implement some spline interpolation at some point?

Thanks again for your answers!

[jo-chemla]

PS: The only thing missing is that I can in the top-right panel right-click on "Props" to add all nested children to the sequence, but I cannot do so on the timeline panel at the bottom - for the timeline I need to select each prop individually. But that's minor knowing adding keyframe on the whole object can be done fro mthe top-right panel!

[donmccurdy]

Note that quaternion interpolation does not allow you to animate a rotation >180º between two keyframes. Slerp always goes the "short way round", so you would need the Euler representation to represent a 720º spin without adding extra keyframes.

Quick question: how would I go about doing a nice and smooth interpolation via theatre.js for more than 2 keyframes?

Related:

• https://github.com/theatre-js/theatre/issues/244

euler rotation (with a given order)

If you are using three.js, you can set the order of the THREE.Euler and it will 'just work' with theatre/r3f:

object.rotation.reorder("ZYX");

A way to specify or override this in the theatre/r3f editable setup could make this easier though.

[jo-chemla]

True indeed for >180° rotations, so letting the user decide if he want to lerp euler angles or slerp quaternions would be teh way to go indeed for smooth acceleration for rotation interpolation. The other feature suggestion you pointed is indeed a good step in that direction as well, automatically matching derivative handles around keyframe. Thanks for all these ideas, looking great!