Godot Visual Shader: Cloudy Sky (GLES2)

Game Development Jul 15, 2019

Introduction

One evening I was tinkering with my shaders. I was trying to make a tornado like effect. Then I changed the blending effect to add. Unfortunately I was having the camera pointed to the sky and sun. What I saw was an opportunity for a nice "clouds".

This is optimized for GLES2. It needs some visual tweaking for GLES3.

Basic Overview

Animated sky!

Beauty of this shader is in its simplicity. It's a 2D noise texture moved in one direction while alpha in another. Alpha itself is also based on noise. This mimic layers of clouds and it's gas "movement".  The final look is achieved by add blending. And that's it.

Shader Breakdown

Overview of the shader. ProTip: You can RMB -> View Image to get the full screen shader map. Use it to navigate this tutorial.

Let's start with making a UV scaling as a parameter. Sky should be rectangular that's why same value is given for X, Y and Z.

UV scaling

We'll also need a timer and corresponding parameter to scale it.

Time scaling

First noise texture. Decompose the UV position and add a little sinus wobbling to X and constant Y movement. In the end compose it back as UV for the noise.

Main noise movement

Second texture. Do same compose/decompose but only add time value to the Y position. It's the same file just loaded second time.

Second noise texture

This second texture will be used for few things. Firstly add Dodge color operator with grey color. Decompose just one value from it (X). Will be needed later.

Dodged second texture

Back to the first texture. Add burn color op and connect with the second texture.

Burned clouds

Now this already would be enough but the clouds would ends hardly. To avoid that just make ends of the material transparent using circular mask. To do this calculate length from the UV but with .5 subtract to make it centred. Then reverse and make it bigger by multiplying by -2.0.

Circular alpha mask

Now connect all the things together. First texture (Burn) to Albedo. Set Metallic to 1, Roughness to 0.5.

Output connections

Lastly the alpha. Remember that one value decomposed from second texture? Add it to the circular alpha texture. Set it as material Alpha.

Now tweak all the values, sun amount, scaling, etc. Sky color also needs tweaking (darker blue).

Conclusion

Comparing to real life it looks very good. It's fast and easy to make. Useful thing to have in the game dev arsenal ;)