Clouds 2D

INTRODUCTION



Clouds2D is an efficient realtime shader which renders dynamic clouds on a 2D surface.

It can be used to create a constantly morphing or static background for a 2D game. A field of wraparound clouds is rendered into a quad, for example, which covers the camera.

The clouds are alpha-blended with the background. The cloud shapes and how they morph is partly controllable through generated data textures which are used as a way to pre-calculate some aspects of the effect.

REQUIREMENTS

Clouds2D is built with Shader Graph and so requires Shader Graph for editing and either Lightweight or High Definition Render Pipeline for rendering.

Minimum Unity editor version required is 2019.2

The shader uses one or two data textures which need to be a reasonable size, and a thin palette texture used to colorize the clouds. The “Clouds2D-SubGraph-Sampler” Shader Graph sub-graph is REQUIRED to be included with whichever Clouds2D-Render shader you use. So you’ll need e.g. Clouds2D-Render- LitePalette AND Clouds2D-SubGraph-Sampler, along with a material.

FEATURES

REALTIME:The cloud effect is redrawn every frame. Clouds can be re-colored, moved, scaled, faded in and out, have their edges softened/firmed, etc. Any of the parameters in the material can be adjusted in realtime via script or with animation curves. Various cloud effects are possible but mostly it produces “fluffy/bulging” or “patchy” style clouds, not whispy ones.

UNIQUE ALGORITHM: A completely unique approach to cloud generation is used. It’s based on an inverted square metaball/isosurface field, where hundreds of twisted and rotated metafields are additively blended which, when overlaid on a second field, produces “swelling and bubbling” effects which look like evolving clouds. There is no modeling of “volume” (the shader is 2D) but the shader can color and shade the data to look like lit clouds.


LIGHTING: The clouds render on a “flat” 2D surface and are not intended for most 3D applications. They render with a rotatable directional light source which produces a depth/ shading effect. This can make the clouds look more three-dimensional and “lit”, but the clouds are still 2D. The direction of the light can be rotated around 360 degrees on the Z axis only and cannot be aimed otherwise.

ANIMATED: Clouds can either remain static or can be automatically animated over time with offset and auto-scrolling controls. As the two cloud data layers move over each other the cloud shapes animate. The effect is designed mainly to look like “billowing fluffy clouds” but can also produce softer and more dispersed outputs.

GRADIENT COLOR: You can select top and bottom colors to colorize the clouds with a gradient. The gradient can also be plain white to have no effect, and can be offset and scaled.

LAYERS: One quad can render a wraparound cloud system but any number of quads can be layered to produce either parallax effects or to colorize differently.

GENERATOR TOOL: To generate clouds, the system overlays two layers of cloud “data” which is precomputed by the Clouds2D tool. These textures can be any size but higher resolution is better. Either one texture or two different textures can be used. As the textures scroll independently, a mathematical interaction produces cloud shapes and animation.

A massive amount of computation is performed to generate the textures but this allows the shader to perform efficiently at runtime and would be too slow otherwise. The Clouds2D tool (see below) has some adjustments for influencing some of the cloud’s appearance.

The textures can also be manipulated in graphics software to stylize the clouds somewhat. The Clouds2D tool can generate cloud data with up to 3 “octaves” (layers) and configurable blob sizes, plus can also apply twist and ripple effects for variation.


PALETTE CONTROL: A palette texture can be applied which is used to lookup colors. The colors map onto and wraparound a 360-degree edge contour, so some parts of the palette will color and shade the “lit” side of the cloud, other parts of the palette will manipulate the look of shadows. Palettes can be used to implement some sunset effects, colorful nebulas and so on. Palette mapping can be offset and scaled to make the most use of the dynamic range.

EDGE CONTROL: The threshold at which the cloud edges are “cut off” (to reveal sky) can be adjusted, and also faded out. A wide faded edge can produce more dispersed cloud edges while a tighter edge gives more defined cloud shapes. It’s also possible to have no edge thickness which produces a non-antialiased (or antialiased if desired) hard edge. Cloud shapes generally look best with a small range of edge softening.

SCENES: Several example scenes are included showing animated clouds and different styles and colorations. They are mostly the same full-screen material with different settings.

BLUR: A precomputed blur effect can be applied to the cloud data to slightly or extremely smooth the cloud shapes. High amounts of blur remove variegation and detail.

The Clouds2D script is a small script which is required as a first step in the workflow. It is used to generate a special texture containing precomputed “cloud data”. A huge amount of calculation is performed (which doesn’t take more than a few seconds usually) and is stored in the texture in an encoded format. The texture is later used by the Clouds2D shaders to perform the final steps in rendering and coloring the clouds. This allows the realtime shaders to be efficient and optimized for performance.

THE CLOUD SHADER

The main (best quality) cloud shader is the Clouds2D-Render-LitPalette shader. You can create a material from this shader (examples are included). You will also need the Clouds2D- SubGraph-Sampler file regardless of which shader you use - it is a sub-graph which is included in the main shader.

A couple of faster but less-appealing variations are included. Clouds2D-Render-Vertical applies a simple fake vertical lighting/shading effect. This fake light source cannot be rotated, but it does produce a “lit” effect. The simpler Clouds2D-Render shader is a “front-lit” shader as thought the sun is shining down the Z axis. These shaders are cheaper/faster but do not offer quality lighting or palette support.

Clouds2D-Render-LitPalette is the shader discussed below (the others share similar settings). It uses a lambert lighting model to simulate 3D-like lighting on a 2D cloud surface. The light can be moved 360 degrees around the Z axis but not in any other way, like a 2D directional light.

MODIFYING THE SHADER

The shaders are built with Shader Graph, which is part of the Unity Scriptable Rendering Pipeline. A lightweight or high definition render pipeline (or other) is needed for the shaders to work and to edit the shader. You’ll also need a rendering pipeline asset set up in your project. This does mean the shaders can be edited using Shader Graph. If you plan to edit the shaders I recommend making a copy first and editing the copy.


The default values of properties in the shader are set up to give approximately a “good looking” result when you first create the material. So if you select the shader and “create > material” it should be close to a result that useable and you can then adjust it from there.