Flowmap Generator for smooth particles

During my time at ForceField, I developed a small tool that would generate a flowmap between frames of animation in a sprite-based (particle) animation.

Take for example the fireball below: On the left, the frames are not interpolated — they are simple swapped out at a fixed interval. When running at 24 fps, this is not too noticeable, but at 60 fps or even 90 fps in case of VR, this is very noticeable. The middle animation is interpolated by blending the current frame and the next frame together. Better, but not great yet.

The right animation used a second texture which contains information about where the pixels will be in the next frame. This way it can warp the current frame towards the next one, and the next frame towards the current. Blending between these two results provides smooth motion, even at low playback speed.

The Flowmap interpolated animation is not without its artifacts, but it provides a clear sense of motion, even at low playback speeds.

The tool was written in C# using the WPF framework. Behind the scenes, to generate the actual flowmap, it uses slowmoVideo by Simon A. Eugster (Granjow). I use the softwares command line functionality to generate and render out the flow frames, and I assemble them in the tool, together with the original video, into a sprite sheet like so:

In UE4, these textures could be loaded into a Material Function, which would output the end result.

Flowmap Generator for smooth particles