Looping tileable textures with Adobe After Effects

If you're like me, you love noise. So much in fact, that you start running procedural noise for minor things to get that sweet "always different" feel.

Turns out noise, fractals or anything procedurally generated can be taxing on your game, so you start looking into lightweight alternatives and a small texture is a good alternative most of the time. Unfortunately, it's hard to find a noise texture that can be tiled in both axis an loop indefinitely, not to mention in a single file.

Adobe After Effects comes to the rescue, with a suite of effects and a plethora of plugins to achieve whatever noise style you're looking for. The results can be quite hypnotic.

Please don't take this. It has bad compression and I'll teach you how to make your own to import later into Unreal Engine or Unity.

Start by opening After Effects and create a new composition with these settings. I set my framerate to 32 and the lenght to 2 seconds, for a total of 64 frames, for reasons you'll understand later. My noise is pretty big already (1024px squared) but it's for display purposes and to see if my animation looks right. You can start with a smaller resolution if you want.

Now we'll set up these layers, which I'll explain in detail soon. Please ignore the unselected layers. I wanted to create a more complex noise with 3 color channels and alpha, but you can do it anyway you see fit. Our main noise layer is the one named "Red" for this tutorial. "Vertical tiling" and "Horizontal tiling" are two adjustment layers.

Create a new solid layer (which I named "Red" in my example") and add your noise plugin of choice. You'll soon discover that the "Cell pattern" plugin can generate really cool Voronoi (or Worley) fractals and is also tileable, which is really convenient, but all its styles behave really similar to each other. That's the reason I'm often using the "Fractal noise" plugin instead. I've set up my plugin like this, You only need to pay attention to the "Cycle" setting, which lets us repeat the evolution of the fractal in 2 seconds, which is also the duration of the composition. I automated the evolution property to save time but you can easily animate it yourself by clicking on the little stopwatch on the left of the evolution property and adding a keyframe with 0 revolutions at the start of your composition and a keyframe with 2 revolutions at the end of the composition. This will force the noise to loop indefinitely without sudden jumps in the animation.

The next step is fixing the horizontal and vertical tiling. Create an adjustment layer above your noise and add the "Offset" effect. If you set it up like the image below you shouldn't have too many problems, except the big seam in the middle of the texture. The quick way to fix this is creating a mask that covers the seam and expands to the sides with some feather to blend the effect. Repeat this process with another adjustment layer to fix the vertical tiling and setting the "Offset" effect and mask accordingly.

Your noise is now complete, but we can take it further. I imported my noise in a new "Style" composition and added some color correction effects to achieve the look I wanted. This is the right time to manipulate the colors of your noise in any way you need.

You can now export your animation as a png sequence and you'll obtain 64 frames that will fit perfectly in any square texture in a 8x8 grid. To see why I did this, check out how I animated the water in Unreal Engine.

But why build the texture yourself when you can have AE do the heavy lifting? Create a new composition that is wide and tall 8 times your "Style" composition. Import your "Style" composition and expand its properties. Right-clik it and select "Time" -> "Enable Time remapping". This will allow us to manipulate the timing of the animated noise. Alt-click on the stopwatch for the "Time-Remap" and "Position" properties and add the following javascript functions.

Now duplicate the "Style" layer 63 times and the composition will fill up automatically with all the frames from the animation.

How cool is that?

I hope this tutorial has been useful to you. If you need help setting up a dastardly noise drop me a DM on twitter!