Rive state machines not supported

[UmungoBungo]

I have worked on this over many days but I'm stumbling at the last step!

https://stackblitz.com/edit/github-gmmxfvca?file=src%2FstateMachineSupport%2FRiveComp.tsx

Compositions in the 'existing-package' folder make use of the existing @remotion/rive package. You can see that the state machine animation isn't animating, while the linearAnimation is fine.

I've pulled apart the @remotion/rive package and added support for the state machine, and that can be viewed in the RiveComposition composition. The difficulty with state machines is that you can't get the current time. And when rendering with concurrency, you aren't advancing it from frame 0, and incrementing 1 frame at a time. My solution is to delete all of the Rive instance for every frame, and re-initialise it.

For some reason when I first load my Rive file (not the scooter animation from the stackblitz example), the state machine is not at 0 seconds. At least, it doesn't look the same as it does in the Rive editor at 0 seconds.
To get around this, I advance the state machine forward by a small increment, and then back again by a small increment. This initializes it to a known value of 0. Not ideal, but I can live with that if I really need to.

Things seem to be ok as you click along the Remotion timeline in the studio - the frames are deterministic 🎉

[UmungoBungo]

But things fall apart when you are rendering - not all the frames are in the correct sequence. Or put another way, the state machine has not arrived at it's final destination by the time the screenshot is taken?

I'm pretty sure what i really need is for the Rive renderer to return a promise, so I can be sure that the frame is ready to be captured.

Here is what the video looks like when I render it, a big steaming mess:

RiveComposition2.mp4

I hacked together a frame splitting tool, so i could see what each frame was doing at the time of render. At this point in time, you can see that the ball should just be progressing to the right with each frame, but it isn't:

videoSplit.mp4

[UmungoBungo]

The first frames make it easy to see what is going on. Frame 2 here has the correct Animation time. It is also the first frame rendered by that process. But then when it needs to render it's next frame, it still renders out frame 2 data 🤔

[UmungoBungo]

In summary, I can't get the delayRender to properly await the frame to be ready to be rendered. But when viewed in the browser and in the studio, the frame being displayed is deterministic.

[JonnyBurger]

Seems like a bit complicated and probably you have a better understanding of it by now - do you also have an idea what we need to do to support state machines?