What do the in- and out-tangents in glTF's cubic splines visually represent?

Question

Keyframe animations in glTF support "cubic spline" interpolation, with the specification for them simply saying (with my added emphasis):

Let:
n be the total number of keyframes, n>0;
t_k be the timestamp of the k-th keyframe, k ∈ [1,n];
v_k be the animated property value of the k-th keyframe;
t_c be the current (requested) timestamp, t_k<t_c<t_k+1;
t_d = t_k+1 − t_k be the duration of the interpolation segment
t = (t_c − t_k) / td be the segment-normalized interpolation factor.

For each timestamp stored in the animation sampler, there are three associated keyframe values:
in-tangent, property value, and out-tangent.

Let a_k, v_k, and b_k be the in-tangent, the property value, and the out-tangent of the k-th frame respectively.

The interpolated sampler value v_t at the timestamp t_c is computed as follows.

v_t = (2t³ − 3t² + 1) × v_k + t_d(t³−2t²+t) × b_k + (−2t³+3t²) × v_k+1 + t_d(t³−t²) × a_k+1

In a traditional two-dimensional cubic Bézier curve each vertex and tangent have a two-dimensional location.

However, the glTF specification is associating the in- and out-tangents with the same timestamp as the vertex between them. In a traditional curve, this would represent a vertical section of the graph. Obviously that is incorrect, since the keyframe graph represents value per time, and thus a vertical line graph would represent an ambiguous situation where there are many possible values for the same time.

My question is, what do these tangent values represent, in a traditional cubic Bézier spline? Or, more to the point:

Given the tangent values per keyframe, how can I construct cubic Bézier control points as part of a Bézier curve that will accurately visually depict the time/value graph that occurs due to the equation specified?

---

Update: I've created a Desmos graph that performs the above calculation, to experiment with the curve. I've come to believe that the tangent values do not appear to represent actual target values. Instead, they are treated like offsets to the keyframe values on each side:

• The curve starts at v_k and trends towards v_k + b_k
• The curve ends at v_k+1 and on the way trends towards v_k+1 - a_k+1

Experimentally sketching cubic Bézier to fit over the Desmos curve shows that the time values of the control points should always be at t=1/3 and t=2/3 (as guessed at by this answer to a related question).

I'm still looking for the formula that incorporates t_d, but I'm close. It looks like the control points are exactly at (0.333, v_k + b_k) and (0.666, v_k+1 - a_k+1) when t_d = 3, but that may just be a coincidence in my experiments.

Answer 1

The glTF Tutorial on Animations offers this further explanation:

The input and output tangents are normalized vectors that will need to be scaled by the duration of the keyframe, we call that the deltaTime

deltaTime = nextTime - previousTime

In other words, a normalized incoming or outgoing direction has been encoded, but it does not contain any magnitude.

The tutorial goes on to offer this pseudocode implementation of the reference formula given in Appendix C of the glTF specification:

Point cubicSpline(previousPoint, previousTangent,
                  nextPoint, nextTangent, interpolationValue)
    t = interpolationValue
    t2 = t * t
    t3 = t2 * t
    
    return (2 * t3 - 3 * t2 + 1) * previousPoint +
           (t3 - 2 * t2 + t) * previousTangent +
           (-2 * t3 + 3 * t2) * nextPoint +
           (t3 - t2) * nextTangent;

The above code can be treated as all "floats" (or doubles) when animating scalar values, or can be treated as 3D vectors for interpolating X, Y, and Z animations in one pass. The "interpolationValue" is a normalized zero-to-one timeline position between adjacent keyframes.