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

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.

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

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.

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

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.

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

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.