Faking flipbook frames with this simple shader trick!

Look, I know it is hard to draw flipbooks frame by frame, it would be really cool if we just fake it in the shader right? In this topic, I will show faking that frame by frame animation COMPLETELY IN SHADER! (I’ve used this trick in my latest VFX)

First, let’s look at these very basic particle systems. As you can see they are moving & dissolving pretty smooth and nothing like a flipbook.
gif1

and this is the setup I use, pretty basic. (dissolve_stream is the value coming from particle system)

Now, we have to change a couple of things. First let’s modify the time for our needs.


(FPS is also coming from particle system)
We will use this instead of just time so we can have control over the “FPS”.

So our texture offset setup should look like this now.

Let’s go to the particle systems and look at the changes!
gif2 fps: 6
Done! But wait, what about the dissolve itself? Yes! Now our textures are scrolling like a flipbook but dissolving itself is still smooth. Let’s quickly fix that too!

We’ll just apply the exact same equation to our dissolve stream (and to your other values that you want to control the “FPS”)

gif3 fps:3-6
Now that is what I’m talking about! Feel free to ask anything and I will try my best to answer!

BONUS
You can expand the equation like this if you want to have a repeating time value!


(this is a amplify function, it’s like shader graph’s subgraph)

2 Likes

Neat idea, thanks for sharing!