How can I render cloud patterns like in these examples?

Question

I have a quick question.

I see in many games, usually in the menu, some moving "clouds" in the background, apparently additive blended into each other, which does a really nice job immersing the player, in my opinion.

A couple of examples that jump to mind right now are the Far Cry 3 main menu background: https://www.youtube.com/watch?v=B5XcMx3GjPA

and the Plague Inc main menu background: https://www.youtube.com/watch?v=RQv60ywrLxU (the first seconds show it)

These cloudy patterns seem like some kind of noise to me, like Perlin or other. So, how would you proceed to achieve that kind of blurred cloud effect with vivid colors?

More specifically, would you pre-generate sets of clouds and include them in the game package? Or generate them on-the-fly? On the CPU as a regular texture or on-draw in the GPU shader program?

I am interested in mastering this kind of visual effect, and as such any help would be appreciated pointing me in the right way. Thanks.

Answer 1

Those kind of clouds are indeed rendered with perlin noise function. They can easily be generated on fly when the game starts, or they can be included in the game textures.

There are ton of great tutorials out there to render perlin noise clouds, this being one of them: Perlin Noise, or this: How to Use Perlin Noise in Your Games You can find more by googling for "perlin noise cloud" or just "perlin noise examples".

One other method could be Simplex noise. A comparison between simplex noise and perlin noise can be found here: Perlin noise versus Simplex noise in Javascript