How to create a 2D fog shader?

Question

I am trying to write a fragment shader in GLSL for a fog effect in a 2D game.

Here are some links showing what I'm after.

Here the fog is in the foreground and near the ground: https://twitter.com/i/status/992811158318075904

Here the fog is on a background layer and fills the screen: https://twitter.com/i/status/963889084337983488

Here the fog is more subtle and denser near the ground: https://twitter.com/i/status/1001926421856563205

I am interested in learning how to create these effects. Unfortunately, I am pretty new to shaders and only know how to do elementary stuff like color swaps, outlines, and simple vignettes. It doesn't help that it's hard to find resources on shaders with a bent toward 2D.

In the environment in which I'm working, I can attach a shader script to any of my sprites, parallax background layers, etc.

Does anyone have advice on creating these kinds of effects?

Answer 1

I made a little demo :

Edit:

-Extra version: Applied with color banding

-Even better version : inverted the uv mapping as @Mario suggested

-Better version: Texture addressing/Wrapping set to Mirror - still fades on overlap

-First version: Texture addressing/Wrapping set to Repeat, non repeating texture

Basically what I've done here is taken a noise map ( source ):

And sampled it twice with 2 different uv coordinates ( see quad.frag.glsl ). In my example I just used a timer to offset in positive and negative direction. Then simply subtracted the second sample from the first.

vec4 n = texture(iTex,uv+iTime*0.1);
vec4 n2 = texture(iTex,uv-iTime*0.1);
n-=n2;
fragColor = n;

improved version using Mirror addressing and uv swapping;

vec4 n = texture(iTex,uv+iTime*0.1);
vec4 n2 = texture(iTex,vec2(uv.y,uv.x)-iTime*0.1);
n-=n2;
fragColor = n;

Alternatively you could have a second noise map and offset/subtract from the first image, or use an actual perlin noise function and calculate two different values. If you play around with this concept I'm sure you'll find something satisfactory. How you blend and color it is all up to you. It doesn't have to be a noise map, could be any arbitrary grey scale image.

I hope others can provide their solutions too, I too am interested in this concept further.

edit:

Here is an example with perlin noise

and with color

I snatched the code from computergraphics