0 votes
asked May 24, 2017 in Shaders by moheroux (120 points) | 10 views

1 Answer

0 votes

Let's begin by the basis. 

A flipbook is a texture which contains all the frames of an animation displayed in a grid. Based on an interpolant, you are able sample a specific frame in the flipbook. 

Let's say we use the flipbook pictured below. It represents a 64 frames animation of an expanding square displayed in a 8x8 grid layout. 

To find out the index of a frame in the flipbook based on an interpolant, you will need the following code :

Interpolant : Value
Index : floor(GridWidth * GridHeight * Interpolant)

So for an interpolant of 0.75, you will resolve it the following way. You will also have to limit the index to respect the maximum range of the flipbook, but I will not cover this here.

index = floor(8 * 8 * 0.83) = 53

This is reprensented in the flipbook below by the red square.

I will assume that you already have the code to sample the flipbook at this index. In order to fade between the flipbook frames, you will need to sample the next index of the flipbook, then blend it with the current index. This is fairly simple and straightforward

First, you need to get the next flipbook index, which can be found by adding 1 to the current index. Again, you will also need to limit the index to respect the maximum range of the flipbook, which is not in the following code.

next = index + 1 = 54;

Then, you will need to know exactly how much of every frame you want to show. This is the part of the index that is cut by the floor operation :

Difference: (GridWidth * GridHeight * Interpolant) % 1

diff = (8 * 8 * .83) % 1 = 0.12

Having that, the only thing that is left is the blending part. Blending two samples can be done this way.

Output: Sample1 * (1 - Difference) + Sample2 * (Difference)

So in this case, you will keep 84% of your first frame, and 12% of your last frame.

If I resume : 

  1. Resolve the index of the frame using the interpolant.
  2. Resolve the index of the following frame.
  3. Get the difference between the frames using the interpolant.
  4. Sample both frames using the two indexes.
  5. Blend the frames using the difference.
answered May 30, 2017 by Maxime Bergeron (240 points)
Before asking a question, please make sure it is not already asked by somebody else. You can also check the Wiki for the boxes documentations and user guides.