playcanvas / engine

JavaScript game engine built on WebGL, WebGPU, WebXR and glTF
https://playcanvas.com
MIT License
9.67k stars 1.35k forks source link

Animations: arbitrary properties #822

Closed yard closed 3 years ago

yard commented 7 years ago

Hi guys,

Just wanted to check if there is any planned work for supporting arbitrary properties' animation.

While this addition seems quite trivial, it's really handy for many cases when a non-transform paraneters get animated. The immediate example is light intensity, which is integer and cannot be animated using current functionaly.

I would be happy to add this possibility to animation system and issue a pull request :)

Maksims commented 7 years ago

We have thought about it. There are few vectors of approaching it. Would be great to get some ideas brainstormed first.

Considerations from me:

  1. How is animation data produced, is it timeline with curve? What about positional data, is it splines, how they are authored?
  2. We've got curves, they are good way to store value changing over time. And with curveset you can do vecs and colors. Will the system be a "link" that binds property and curve together and provides playing API?
yard commented 7 years ago

As you've probably noticed I usually refer to how stuff works in Unity when there's a similar functionality :)

So, in Unity we have animation curves, which seem to be Cubic Hermite spline. Each curve controls a scalar value (with the exception for boolean properties of course), meaning even positions and rotations are animated on a per-component basic. This gives a very straightforward and universal approach to animating properties as creating the math for controlling curve shapes for scalar values allows to re-use the same logic for animating both transforms and user-defined properties.

The only tricky thing to consider is, of course, rotations: while you can interpolate Euler angles pretty safely for rotating around 1 axis, for the case of needing perfectly smooth rotations a spherical interpolation has to be utilised. However, spherical interpolation doesn't allow for rotations of over 180 degrees around a given axis, meaning it's required to maintain intermediate keyframes for such cases. In case of Unity this is done by the editor – whichever type of interpolation you choose, internally the curve just controls different properties of a rotation (either quat's coords or euler angles coords), with the missing keyframes injected when needed. So it's really up to the way the curve data is going to be produced.

As for built-in curves of playcanvas, I am afraid they have a critical limitation – I don't see it supporting custom tangents / control points on the curve, so they probably have to be extended. The other concern I can immediately see is the way the curve computes its values: it seems to be quite computational-heavy (I refer to https://github.com/playcanvas/engine/blob/master/src/math/curve.js#L107), so for animations that run at FPS rate it might require some optimisations.

willeastcott commented 4 years ago

@slimbuck + @ellt92: assigning this to you guys for now. Do we have more engine PRs coming related to this? If so, please link them to auto-close this issue. Otherwise, if we already have our implementation merged, feel free to just go ahead and manually close this. 😄

ellthompson commented 3 years ago

Closing this as the anim component provides the ability to animate any arbitrary component property of type float / vec / quat / color. A demo can be seen here: https://playcanvas.github.io/#/animation/component-properties