2D Blizzard/Snowstorm Effect

Question

How can I implement a blizzard/snowstorm effect in a 2D platformer? I have a particle system for snow particles, but I need some kind of windblown texture similar to this as well: How do I create this windblown snow effect?

Could I generate a windblown texture using perlin noise in Photoshop or something and sample it similar to the answer in this question about fog? How to create a 2D fog shader?

In that case it would have to be more dense than the fog texture, so holes don't appear that you can peak through when sampling the texture.

BTW I have a wind speed variable for my snow particles, could that be used for the windblown texture as well somehow?

Answer 1

Making Snow by particle system

as you mentioned in your question you need some noisy windblown. particle system have part that called noise that you can moving your particles based on noise.

2D Snow

you can easily make 2D snow effect by offsetting snowTexture by time.

Shader "Hidden/SimpleSnow"
{
    Properties
    {
        _SnowTexture ("SnowTexture", 2D) = "white" {}
        _OffsetDirection("OffsetDirection",Vector) = (1,2,0,0)
        _NoiseMask("NoiseMask",2D) = "white"{}
        _Speed("Speed",Float) = 2
    }
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _SnowTexture,_NoiseMask;
            float4 _OffsetDirection;
            float _Speed;

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float2 uvnoise : TEXCOORD1;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float2 uvnoise : TEXCOORD1;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                v.uv += _OffsetDirection.xy * _Time.x * _Speed + sin(_Time.x);
                o.uv = v.uv;
                o.uvnoise = v.uvnoise;
                return o;
            }



            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_SnowTexture, i.uv);
                col *= tex2D(_NoiseMask,i.uvnoise);
                return col;
            }
            ENDCG
        }
    }
}

also to making hot bath effect you can make cloud noise and use it:

Shader "Hidden/HotBath"
{
    Properties
    {
        _CloudNoiseMask("CloudNoiseMask",2D) = "white"{}
        _OffsetDirection("OffsetDirection",Vector) = (1,0,0,0)
        _Alpha("Alpha",Range(0,1)) = 0.5
        _Speed("Speed",Float) = 2
    }
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always
        Blend One One

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _CloudNoiseMask;
            float4 _OffsetDirection;
            float _Speed;
            float _Alpha;

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                v.uv += _OffsetDirection.xy * _Time.x * _Speed;
                o.uv = v.uv;
                return o;
            }



            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_CloudNoiseMask, i.uv);
                col = smoothstep(0.05,0.9,col);
                return float4(col.rgb,col.r)*_Alpha;
            }
            ENDCG
        }
    }
}

another way is making snow effect by shader:

 //source: https://www.shadertoy.com/view/ldsGDn
    Shader "Snow"
    {
        Properties
        {
            LAYERS("Layers",Int) = 100
            DEPTH("Depth",Range(0.0,1.0)) = 0.2
            WIDTH("Width",Range(0.0,2.0)) = 0.9 
            SPEED("Speed",Range(0.0,2.0)) = 0.9                  
        }
        Subshader
        {
            Pass
            {
                CGPROGRAM
                #pragma vertex vertex_shader
                #pragma fragment pixel_shader
                #pragma target 3.0

                int LAYERS ;
                float DEPTH,WIDTH,SPEED ;
                static const float3x3 p = float3x3(13.323122,23.5112,21.71123,21.1212,28.7312,11.9312,21.8112,14.7212,61.3934);

                struct custom_type
                {
                    float4 vertex : SV_POSITION;
                    float2 uv : TEXCOORD0;
                };

                custom_type vertex_shader (float4 vertex : POSITION, float2 uv : TEXCOORD0)
                {
                    custom_type vs;
                    vs.vertex = UnityObjectToClipPos (vertex);
                    vs.uv = uv;
                    return vs;
                }

                float4 pixel_shader (custom_type ps) : COLOR
                {
                    float2 uv = ps.uv.xy;
                    float3 acc = float3(0.0,0.0,0.0);
                    float dof = 5.*sin(_Time.g*.1);
                    for (int i=0;i<LAYERS;i++) 
                    {
                        float f = float(i);
                        float2 q = uv*(1.+f*DEPTH);
                        q += float2(q.y*(WIDTH*fmod(f*7.238917,1.)-WIDTH*.5),SPEED*_Time.g/(1.+f*DEPTH*.03));
                        float3 n = float3(floor(q),31.189+f);
                        float3 m = floor(n)*.00001 + frac(n);
                        float3 mp = (31415.9+m)/frac(mul(m,p));
                        float3 r = frac(mp);
                        float2 s = abs(fmod(q,1.)-0.5+0.9*r.xy-0.45);
                        s += 0.01*abs(2.*frac(10.*q.yx)-1.0); 
                        float d = .6*max(s.x-s.y,s.x+s.y)+max(s.x,s.y)-.01;
                        float edge = .005+.05*min(.5*abs(f-5.-dof),1.);
                        float t = smoothstep(edge,-edge,d)*(r.x/(1.+.02*f*DEPTH));
                        acc += float3(t,t,t);
                    }
                    return float4(float3(acc),1.0);     
                }
                ENDCG
            }
        }
    }

Generating Perlin noise by shader :

You can use noise to make a procedural shape:

Here's a Fractal Brownian Motion (FBM) tutorial.

Shader "Smkgames/FbmNoise"
{
Properties
{
_TileAndOffset("Tile and Offset",Vector) = (1,1,0,0)
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog

#include "UnityCG.cginc"

struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};

struct v2f
{
float2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
float4 vertex : SV_POSITION;
};


float4 _TileAndOffset;
float _Step,_Min,_Ma;

v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv*_TileAndOffset.xy+_TileAndOffset.zw;
UNITY_TRANSFER_FOG(o,o.vertex);
return o;
}

// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com

float random (in float2 st) {
return frac(sin(dot(st.xy,
                    float2(12.9898,78.233)))*
    43758.5453123);
}

// Based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in float2 st) {
float2 i = floor(st);
float2 f = frac(st);

// Four corners in 2D of a tile
float a = random(i);
float b = random(i + float2(1.0, 0.0));
float c = random(i + float2(0.0, 1.0));
float d = random(i + float2(1.0, 1.0));

float2 u = f * f * (3.0 - 2.0 * f);

return lerp(a, b, u.x) +
        (c - a)* u.y * (1.0 - u.x) +
        (d - b) * u.x * u.y;
}

#define OCTAVES 6
float fbm (in float2 st) {
// Initial values
float value = 0.0;
float amplitude = .5;
float frequency = 0.;
//
// Loop of octaves
for (int i = 0; i < OCTAVES; i++) {
    value += amplitude * noise(st);
    st *= 2.;
    amplitude *= .5;
}
return value;
}

        fixed4 frag (v2f i) : SV_Target
        {


float2 st =i.uv;

float3 color = float3(0,0,0);
color += fbm(st*3.0);
return float4(color,1.0);

        }
ENDCG
}
}
}

The FBM above shouldn't be used directly in to your shader because it has many GPU calculations and decreases performance. Instead of using directly, you can render the result to a texture with RenderTexture.

Shadertoy uses multiple passes, one per "buffer". As the name indicates, this pass stores the results in a buffer, which is just a texture. Unity will let you render to textures too.

also this tutorial will learn you how to generate perlin noise.

Answer 2

I figured it out. You can create a blizzard/snowstorm effect using different windblown particles like here: https://www.unrealengine.com/marketplace/supergenius-weather-fx, this is used for pretty much all 3D games, but it requires a fancy particle system. The following is a simpler, cheaper method for 2D: https://assetstore.unity.com/packages/vfx/shaders/fullscreen-camera-effects/simple-2d-fog-storm-smoke-115617

example video

You can use this system both for a blizzard, fog, sandstorm, etc. effect by tuning the different shader parameters. The only asset you're interested in from this package is the shader "D2FogsNoiseTex.shader" it's in GLSL, but can be translated to any other shader language and used in any engine or framework. It takes a noise texture and applies the Perlin Noise algorithm to it using the shader parameters and scrolls it at a certain velocity.

To make it look like a blizzard the most important things are tinting it white and setting horizontal and vertical speed quite high. Make it be affected by wind direction and speed: Set horizontal and vertical speed to your normalized wind direction multiplied by wind speed. Size should be small and the density should be high.

Finally, add your own snow particles and make them be affected by the wind direction and speed as well. This will give a pretty convincing blizzard effect IMO.

Optional: Generate a texture with Perlin Noise

If you're unsatisfied with the look of the final texture being rendered on screen, you could use an external script with Python for example and generate a more specialized blizzard noise texture and edit the shader, so it doesn't apply the Perlin Algorithm, or simply edit the shader to give a different output from the noise texture.

Result (without snow particles):

Video