Play Morph Target animation in reverse

nikita_osyak · October 29, 2019, 7:30am

Hello.

I’m using gltf library to load and play morph target animation (https://github.com/playcanvas/playcanvas-gltf). At this point I’m wondering is it possible to play animation in reverse or even blend current state to reversed animation state.

I have just one animation I want to use to make character recoil back and forth, but only able to do it one way, like so:

Oct-29-2019%2010-32-51

But I want also to blend it back to beginning in reverse, and also blend animation state to start what i start walking.

I tried to dig in the code and it seem to me that it’s possible to just blend animation via blending to AnimationClipSnapshot at zero time somehow, but i’m not sure how to do that.

Anyone able to give me a hint?

Thanks.

ayrin · October 29, 2019, 8:52am

have you seen this? Playing Animation in Reverse

nikita_osyak · October 29, 2019, 9:05am

Nope. Sorry for double posting. Should’ve search the forum. Thanks!

nikita_osyak · October 29, 2019, 6:33pm

Actually, @ayrin, I wasnt paying attention earlier. As I said in start post, it’s about gltf animations, and pointed thread though helpful is about regular PC animations. So question still stands.

Leonidas · October 29, 2019, 7:01pm

It seems that the playcanvas-gltf loader includes functions to fully control the animation (even blend, linear, toTarget etc):

github.com

playcanvas/playcanvas-gltf/blob/master/src/playcanvas-anim.js

Object.assign(window, function () {

    // *===============================================================================================================
    // * class AnimationKeyable
    // *
    // *===============================================================================================================
    /**
     * @enum {number}
     */
    var AnimationKeyableType = { NUM: 0, VEC: 1, QUAT: 2 };

    /**
     * @constructor
     * @param {AnimationKeyableType} [type]
     * @param {number} [time]
     * @param {BlendValue} [value]
     */

    var AnimationKeyable = function (type, time, value) {
        this.init(type, time, value);

This file has been truncated. show original

I haven’t used it myself, you can explore the source code of the viewer on how to use/interact with the API:

github.com

playcanvas/playcanvas-gltf/blob/master/viewer/src/timeline.js

Timeline = function() {
    this.curveHeight = 12;
    this.colorLines        = "rgba(0,0,  0, 0.4)"; // grayish
    this.colorLinesHovered = "rgba(0,0,255, 0.8)"; // quite blue
    this.colorRectHovered  = "rgba(0,0,255, 0.1)"; // blueish transparent
    this.colorRectSelected = "rgba(0,255,0, 0.1)"; // greenish transparent
    this.colorLineSlider   = "white";
    
    this.anim_timeline_toggle = document.getElementById("anim_timeline_toggle");
    this.anim_timeline_toggle.onclick = function(e) {
        this.toggle();
    }.bind(this);
    
    this.anim_timeline = document.getElementById("anim_timeline");
    this.anim_timeline_context = this.anim_timeline.getContext("2d");
    this.anim_timeline.onmousemove = function(e) {
        var pos_left = e.pageX - e.currentTarget.offsetLeft;
        var pos_top  = e.pageY - e.currentTarget.offsetTop;
        this.mouseMove(pos_left, pos_top);
    }.bind(this);

This file has been truncated. show original

kungfooman · October 31, 2019, 7:37am

Can you try this?

viewer.gltf.animComponent.animClips[0].bySpeed = -1