Notes Of A Three.js Beginner: QuaternionKeyframeTrack Struggles
When I started researching how to programmatically animate object rotations in three.js, I was warned that quaternions are hard to work with and can easily bamboozle beginners. I gave it a shot anyway, and I can confirm caution is indeed warranted. Aside from my confusion between Euler angles and quaternions, I was also ignorant of how three.js keyframe track objects process their data arrays. Constructor of keyframe track objects like QuaternionKeyframeTrack accept (as their third parameter) an array of key values. I thought it would obviously be an array of quaternions like [quaterion1, quaternion2], but when I did that, my CPU utilization shot to 100% and the browser stopped responding. Using the browser debugger, I saw it was stuck in this for() loop:
class QuaternionLinearInterpolant extends Interpolant {
constructor(parameterPositions, sampleValues, sampleSize, resultBuffer) {
super(parameterPositions, sampleValues, sampleSize, resultBuffer);
}
interpolate_(i1, t0, t, t1) {
const result = this.resultBuffer, values = this.sampleValues, stride = this.valueSize, alpha = (t - t0) / (t1 - t0);
let offset = i1 * stride;
for (let end = offset + stride; offset !== end; offset += 4) {
Quaternion.slerpFlat(result, 0, values, offset - stride, values, offset, alpha);
}
return result;
}
}I only have two quaterions in my key frame values, but it is stepping through in increments of 4. So this for() loop immediately shot past end and kept looping. The fact it was stepping by four instead of by one was the key clue. This class doesn't want an array of quaternions, it wants an array of quaternion numerical fields flattened out.
- Wrong:
[quaterion1, quaternion2] - Right:
[quaterion1.x, quaterion1.y, quaterion1.z, quaterion1.w, quaternion2.x, quaternion2.y, quaternion2.z, quaternion2.w]
The latter can also be created via quaterion1.toArray().concat(quaternion2.toArray()).
Once I got past that hurdle, I had an animation on screen. But only half of the colors animated in the way I wanted. The other half of the colors went in the opposite direction while swerving wildly on screen. In a HSV cylinder, colors are rotated across the full range of 360 degrees. When I told them to all go to zero in the transition to a cube, the angles greater than 180 went one direction and the angles less than 180 went the opposite direction.
Having this understanding of the behavior, however, wasn't much help in trying to get things working the way I had it in my head. I'm sure there are some amateur hour mistakes causing me grief but after several hours of ever-crazier animations, I surrendered and settled for hideous hacks. Half of the colors still behaved differently from the other half, but at least they don't fly wildly across the screen. It is unsatisfactory but will have to suffice for now. I obviously don't understand quaternions and need to study up before I can make this thing work the way I intended. But that's for later, because this was originally supposed to be a side quest to the main objective: the Arduino color composite video out library I've released with known problems I should fix.
[Code for this project is publicly available on GitHub]