procedural-weather

name

procedural-weather

description

Generate dynamic procedural weather effects in Three.js using WebGPU compute with WebGL2 fallback. Covers rain (drizzle to monsoon), snow (flurries to blizzard), hail, fog and mist (ground fog, volumetric), lightning (bolt, sheet, cloud-internal), dust/sandstorms, wind-driven debris, rainbows, aurora borealis, and a weather state machine for smooth transitions. All precipitation uses GPU particle systems with collision, splashes, and accumulation. Provides per-effect lighting changes, ambient sound cue hints, and camera post-processing (wet lens, frost). Use when building weather systems, atmospheric effects, environmental ambience, climate simulation, or any scene needing dynamic weather. Triggers: "procedural weather", "rain effect", "snow particles", "lightning", "fog shader", "weather system", "storm", "blizzard", "sandstorm", "aurora", "rainbow", "precipitation", "weather transition", "wet lens".

Procedural Weather

Dynamic, layered weather effects in Three.js — GPU particle precipitation, volumetric fog, lightning, and smooth state transitions.

Architecture Overview

┌──────────────────────────────────────────────────────┐
│                Weather System                         │
│                                                      │
│  WeatherController (state machine)                   │
│    ├── current state + target state                  │
│    ├── transition progress (0→1)                     │
│    └── drives all subsystems:                        │
│                                                      │
│  ┌─ Precipitation ──────────────────────────────┐    │
│  │  GPU particles: rain, snow, hail             │    │
│  │  Ground splashes, accumulation               │    │
│  └──────────────────────────────────────────────┘    │
│  ┌─ Atmosphere ─────────────────────────────────┐    │
│  │  Fog, mist, dust, haze                       │    │
│  │  Volumetric (WebGPU) or exponential (WebGL)  │    │
│  └──────────────────────────────────────────────┘    │
│  ┌─ Electrical ─────────────────────────────────┐    │
│  │  Lightning bolts, sheet flashes              │    │
│  │  Cloud-internal illumination                 │    │
│  └──────────────────────────────────────────────┘    │
│  ┌─ Optical ────────────────────────────────────┐    │
│  │  Rainbows, aurora, god rays                  │    │
│  │  Wet lens, frost overlay                     │    │
│  └──────────────────────────────────────────────┘    │
│  ┌─ Environment ────────────────────────────────┐    │
│  │  Sky darkening, light color shift            │    │
│  │  Wind direction (shared across systems)      │    │
│  └──────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────┘

Renderer Setup

import * as THREE from 'three';

async function createRenderer(canvas) {
  let renderer, gpuAvailable = false;
  try {
    const WebGPU = (await import('three/addons/capabilities/WebGPU.js')).default;
    if (WebGPU.isAvailable()) {
      const { default: WebGPURenderer } = await import(
        'three/addons/renderers/webgpu/WebGPURenderer.js'
      );
      renderer = new WebGPURenderer({ canvas, antialias: true });
      await renderer.init();
      gpuAvailable = true;
    }
  } catch (e) {}
  if (!renderer) {
    renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
  }
  renderer.setSize(innerWidth, innerHeight);
  renderer.setPixelRatio(Math.min(devicePixelRatio, ));
   { renderer, gpuAvailable };
}

Shared Wind System

Wind drives all weather subsystems — precipitation angle, fog drift, debris direction.

class WindSystem {
  constructor() {
    this.direction = new THREE.Vector3(1, 0, 0.3).normalize();
    this.baseSpeed = 5;       // m/s
    this.gustSpeed = 0;
    this.gustFrequency = 0.5;
    this.turbulence = 0.1;
    this._time = 0;
  }

  update(dt) {
    this._time += dt;
    // Gusts: low-frequency intensity variation
    const gustEnvelope = Math.sin(this._time * this.gustFrequency) * 0.5 + 0.5;
    this.gustSpeed = gustEnvelope * this.baseSpeed * 0.6;
  }

  get speed() { return this. + .; }

  
   () {
     s = .;
     turb =  .(
      .(. * ) * .,
      ,
      .(. * ) * .
    );
     ..().(s).(turb);
  }
}

Precipitation System

GPU particle system for rain, snow, and hail. Particles spawn in a box above the camera, fall with gravity + wind, and recycle when below ground.

Particle Buffer Layout

function createPrecipitationBuffers(maxParticles) {
  // Each particle: vec4(x, y, z, life) + vec4(vx, vy, vz, size)
  const positions = new Float32Array(maxParticles * 4);
  const velocities = new Float32Array(maxParticles * 4);
  return { positions, velocities, count: maxParticles };
}

Rain System

class RainSystem {
  constructor(scene, options = {}) {
    this.scene = scene;
    this.count = options.count ?? 50000;
    this.spawnRadius = options.spawnRadius ?? 40;
    this.spawnHeight = options.spawnHeight ?? 30;
    this.dropLength = options.dropLength ?? 0.3;
    this.intensity = options.intensity ?? 1.0; // 0-1

    this._buildGeometry();
  }

  _buildGeometry() {
    // Each raindrop: a short line segment (2 vertices)
    const positions = new Float32Array(this.count * 6); // 2 verts × xyz
    const randoms = new Float32Array(this.count * 2);   // per-drop seed + phase

    for (let i = 0; i < this.; i++) {
       x = (.() - ) * . * ;
       y = .() * .;
       z = (.() - ) * . * ;

      
      positions[i * ]     = x;
      positions[i *  + ] = y;
      positions[i *  + ] = z;
      
      positions[i *  + ] = x;
      positions[i *  + ] = y - .;
      positions[i *  + ] = z;

      randoms[i * ]     = .();     
      randoms[i *  + ] = .();     
    }

     geometry =  .();
    geometry.(,  .(positions, ));
    geometry.(,  .(randoms, , , .));

    . =  .({
      : {
        :       { :  },
        :  { : . },
        :  { :  .() },
        :    { : - },
        : { : . },
        : { : . },
        : { : . },
        :    { :  },
        :  { :  .() },
      },
      : ,     
      : ,   
      : ,
      : ,
      : .,
    });

    . =  .(geometry, .);
    .. = ;
    ..(.);
  }

  () {
    .... = time;
    .....(wind.);
    .....(cameraPos);
    .... = .;
    
    ... = cameraPos.;
    ... = cameraPos.;
  }

  () {
    ..(.);
    ...();
    ..();
  }
}

Snow System

Snow uses Points with per-particle flutter and tumble. Larger particles, slower fall, more wind influence.

class SnowSystem {
  constructor(scene, options = {}) {
    this.scene = scene;
    this.count = options.count ?? 20000;
    this.spawnRadius = options.spawnRadius ?? 50;
    this.spawnHeight = options.spawnHeight ?? 25;
    this.intensity = options.intensity ?? 1.0;

    this._build();
  }

  _build() {
    const positions = new Float32Array(this.count * 3);
    const seeds = new Float32Array(this.count * 3); // seed, phase, size

    for (let i = 0; i < this.count; i++) {
      positions[i * 3]     = (Math.random() - 0.5) * this.spawnRadius * 2;
      positions[i *  + ] = .() * .;
      positions[i *  + ] = (.() - ) * . * ;
      seeds[i * ]     = .();
      seeds[i *  + ] = .() * . * ;
      seeds[i *  + ] =  + .() * ; 
    }

     geometry =  .();
    geometry.(,  .(positions, ));
    geometry.(,  .(seeds, ));

    . =  .({
      : {
        :        { :  },
        :   { : . },
        :   { :  .() },
        :     { : - },
        : { : . },
        : { : . },
        :  { :  },
        :     { :  },
        :   { :  },
        :   { :  .() },
      },
      : ,     
      : ,   
      : ,
      : ,
    });

    . =  .(geometry, .);
    .. = ;
    ..(.);
  }

  () {
    .... = time;
    .....(wind.);
    .....(cameraPos);
    .... = .;
    ... = cameraPos.;
    ... = cameraPos.;
  }

  () {
    ..(.);
    ...();
    ..();
  }
}

Splash / Impact System

Ground splashes when rain hits surfaces — instanced ring sprites at impact points.

class SplashSystem {
  constructor(scene, maxSplashes = 500) {
    this.scene = scene;
    this.max = maxSplashes;
    const geo = new THREE.PlaneGeometry(0.15, 0.15);
    geo.rotateX(-Math.PI / 2);

    this.material = new THREE.ShaderMaterial({
      uniforms: { time: { value: 0 } },
      vertexShader: SPLASH_VERT,
      fragmentShader: SPLASH_FRAG,
      transparent: true,
      depthWrite: false,
    });

    this.mesh = new THREE.InstancedMesh(geo, this.material, maxSplashes);
    this.mesh.frustumCulled = false;
    this.lifetimes = new Float32Array(maxSplashes);
    . = ;
    ..(.);
  }

  () {
     dummy =  .();
    dummy..(position);
    dummy.. += ;
    dummy..( + .() * );
    dummy.();
    ..(., dummy.);
    .[.] = ;
    ... = ;
    . = (. + ) % .;
  }

  () {
     ( i = ; i < .; i++) {
       (.[i] > ) {
        .[i] -= dt * ; 
      }
    }
    .... += dt;
  }
}

Fog & Atmosphere

Exponential Fog (WebGL — built-in)

function applyFog(scene, density = 0.01, color = 0xcccccc) {
  scene.fog = new THREE.FogExp2(color, density);
  scene.background = new THREE.Color(color);
}

Ground Fog (Shader-based)

Height-attenuated fog that pools in valleys. Applied as a post-process or scene material.

function createGroundFog(size = 200, maxHeight = 8) {
  const geo = new THREE.PlaneGeometry(size, size, 1, 1);
  geo.rotateX(-Math.PI / 2);

  const material = new THREE.ShaderMaterial({
    uniforms: {
      time:      { value: 0 },
      fogColor:  { value: new THREE.Color(0xdddddd) },
      maxHeight: { value: maxHeight },
      density:   { value: 0.8 },
      windDir:   { value: new THREE.Vector2(1, 0) },
      windSpeed: { value: 2.0 },
    },
    vertexShader: `
      varying vec3 vWorldPos;
      varying vec2 vUv;
      void main() {
        vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: GROUND_FOG_FRAG, // See references/weather-shaders.md
    : ,
    : ,
    : .,
  });

   mesh =  .(geo, material);
  mesh.. = maxHeight * ;
  mesh. = ;
   mesh;
}

Dust / Sandstorm

Dense particle field with color tinting and reduced visibility.

function createDustStorm(scene, options = {}) {
  const count = options.count ?? 30000;
  const color = options.color ?? new THREE.Color(0xc4a060);
  const positions = new Float32Array(count * 3);
  const seeds = new Float32Array(count);

  for (let i = 0; i < count; i++) {
    positions[i * 3]     = (Math.random() - 0.5) * 80;
    positions[i * 3 + 1] = Math.random() * 15;
    positions[i * 3 + 2] = (Math.random() - 0.5) * 80;
    seeds[i] = Math.random();
  }

  const geo = new THREE.BufferGeometry();
  geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  geo.setAttribute(,  .(seeds, ));

   material =  .({
    : {
      :      { :  },
      : { : color },
      : { :  .(, , ) },
      :   { :  },
      : { :  },
    },
    : ,
    : ,
    : ,
    : ,
    : .,
  });

   mesh =  .(geo, material);
  mesh. = ;
  scene.(mesh);
   { mesh, material };
}

Lightning System

Procedural branching lightning bolts with flash illumination.

class LightningSystem {
  constructor(scene) {
    this.scene = scene;
    this.bolts = [];
    this.flashLight = new THREE.PointLight(0xccccff, 0, 500);
    this.flashLight.position.set(0, 80, 0);
    this.scene.add(this.flashLight);
    this._nextStrike = 2 + Math.random() * 8;
    this._flashDecay = 0;
  }

  // Generate a branching bolt path
  generateBolt(start, end, generations = 5, jitter = 15) {
    if (generations <= 0) return [start, end];

    const mid = start.clone().lerp(end, 0.4 + Math.random() * 0.2);
     perpX = (.() - ) * jitter;
     perpZ = (.() - ) * jitter;
    mid. += perpX;
    mid. += perpZ;

     left = .(start, mid, generations - , jitter * );
     right = .(mid, end, generations - , jitter * );

    
     branch = [];
     (.() <  && generations > ) {
       branchEnd = mid.().(
         .((.() - ) * jitter * , -jitter, (.() - ) * jitter * )
      );
      branch = .(mid, branchEnd, generations - , jitter * );
    }

     [...left, ...right.(), ...branch];
  }

  () {
     positions =  (points. * );
     ( i = ; i < points.; i++) {
      positions[i * ]     = points[i].;
      positions[i *  + ] = points[i].;
      positions[i *  + ] = points[i].;
    }
     geo =  .();
    geo.(,  .(positions, ));

     material =  .({
      : ,
      : ,
      : ,
      : ,
    });

    
     line =  .(geo, material);
    
     glowMat =  .({
      : ,
      : ,
      : ,
      : ,
    });
     glow =  .(geo.(), glowMat);
    glow..();

     group =  .();
    group.(line);
    group.(glow);
     { group, material, glowMat, :  };
  }

  () {
     start = origin ??  .(
      (.() - ) * ,  + .() * , (.() - ) * 
    );
     end =  .(start. + (.() - ) * , groundY, start. + (.() - ) * );

     points = .(start, end, , );
     bolt = .(points);
    ..(bolt.);
    ..(bolt);

    
    ...(start);
    .. = ;
    . = ;
  }

  () {
    
    . -= dt;
     (. <=  && stormIntensity > ) {
      .();
      . = ( / stormIntensity) * ( + .() * );
    }

    
     ( i = .. - ; i >= ; i--) {
       bolt = .[i];
      bolt. -= dt;
       alpha = .(bolt. / , );
      bolt.. = alpha;
      bolt.. = alpha * ;
       (bolt. <= ) {
        ..(bolt.);
        bolt..( {  (c.) c..(); });
        ..(i, );
      }
    }

    
     (. > ) {
      . -= dt;
      .. *= ;
    }  {
      .. = ;
    }
  }

  () {
     ( bolt  .) {
      ..(bolt.);
    }
    ..(.);
  }
}

Optical Effects

Rainbow

Arc rendered as a screen-space shader overlay or a mesh arc in world space.

function createRainbow(scene, sunDir) {
  const geo = new THREE.TorusGeometry(120, 3, 16, 64, Math.PI);
  const material = new THREE.ShaderMaterial({
    uniforms: {
      opacity: { value: 0.25 },
    },
    vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      varying vec2 vUv;
      uniform float opacity;
      void main() {
        float t = vUv.x;
        // ROYGBIV spectrum across the arc width
        vec3 col;
        if (t < 0.14)      col = vec3(1.0, 0.0, 0.0);
        else if (t < 0.28) col = vec3(1.0, 0.5, 0.0);
        else if (t < 0.42) col = vec3(1.0, 1.0, 0.0);
        else if (t < 0.57) col = vec3(0.0, 0.8, 0.0);
        else if (t < 0.71) col = vec3(0.0, 0.4, 1.0);
        else if (t < 0.85) col = vec3(0.3, 0.0, 0.8);
        else               col = vec3(0.5, 0.0, 0.5);
        // Soft edges
        float edge = smoothstep(0.0, 0.05, t) * smoothstep(1.0, 0.95, t);
        gl_FragColor = vec4(col, opacity * edge);
      }
    `,
    transparent: true,
    depthWrite: false,
    side: THREE.DoubleSide,
  });

  const rainbow = new THREE.Mesh(geo, material);
  // Position opposite to sun direction
  rainbow.position.(-sunDir. * , , -sunDir. * );
  rainbow.. = .;
  rainbow.. = .(-sunDir., -sunDir.);
  scene.(rainbow);
   rainbow;
}

Aurora Borealis

Undulating curtain of colored light using a displaced vertical plane.

function createAurora(scene) {
  const geo = new THREE.PlaneGeometry(300, 40, 128, 16);
  const material = new THREE.ShaderMaterial({
    uniforms: {
      time: { value: 0 },
      color1: { value: new THREE.Color(0x00ff88) },
      color2: { value: new THREE.Color(0x4400ff) },
      color3: { value: new THREE.Color(0xff0066) },
    },
    vertexShader: AURORA_VERT,     // See references/weather-shaders.md
    fragmentShader: AURORA_FRAG,   // See references/weather-shaders.md
    transparent: true,
    depthWrite: false,
    side: THREE.DoubleSide,
    blending: THREE.,
  });

   mesh =  .(geo, material);
  mesh..(, , -);
  mesh.. = -;
  scene.(mesh);
   { mesh, material };
}

Weather State Machine

Smooth transitions between weather states by interpolating all subsystem parameters.

class WeatherController {
  constructor(scene, camera, wind) {
    this.scene = scene;
    this.camera = camera;
    this.wind = wind;
    this.rain = null;
    this.snow = null;
    this.lightning = null;
    this.fog = null;
    this.currentState = 'clear';
    this.targetState = 'clear';
    this.transition = 1.0;     // 1 = fully arrived at target
    this.transitionSpeed = 0.3; // 0→1 over ~3 seconds
  }

  setState(stateName) {
    if (stateName === this.currentState && this.transition >= 1) return;
    this.currentState = this.targetState;
    this. = stateName;
    . = ;
  }

  () {
    ..(dt);

     (. < ) {
      . = .(. + dt * ., );
    }

     t = .;
      = [.];
     to = [.];

    
     rainIntensity = (., to., t);
     snowIntensity = (., to., t);
     fogDensity = (., to., t);
     stormIntensity = (., to., t);
     skyDarkness = (., to., t);
     windMult = (., to., t);

    .. =  * windMult;

    
     (.) {
      .. = rainIntensity;
      ..(performance.() * , ., ..);
    }
     (.) {
      .. = snowIntensity;
      ..(performance.() * , ., ..);
    }
     (.) {
      ..(dt, stormIntensity);
    }

    
     (..) {
      ... = fogDensity;
    }

    
     skyColor =  .().( .(), skyDarkness);
     (..  .) {
      ...(skyColor);
    }
  }
}

 () {  a + (b - a) * t; }

  = {
  :      { : , : , : , : , : , :  },
  :     { : , : , : , : , : , :  },
  :    { : , : , : , : , : , :  },
  :       { : , : , : , : , : , :  },
  :  { : , : , : , : , : , :  },
  :      { : , : , : , : , : , :  },
  :  { : , : , : , : , : , :  },
  :       { : , : , : , : , : , :  },
  :   { : , : , : , : , : , :  },
  :        { : , : , : , : , : , :  },
  :  { : , : , : , : , : , :  },
};

Camera Post-Processing

Wet Lens Effect

Droplets on screen when raining, applied as a fullscreen overlay.

function createWetLensOverlay(intensity = 0.5) {
  return new THREE.ShaderMaterial({
    uniforms: {
      time:      { value: 0 },
      intensity: { value: intensity },
      tScene:    { value: null },
    },
    vertexShader: FULLSCREEN_VERT,
    fragmentShader: WET_LENS_FRAG, // See references/weather-shaders.md
    transparent: true,
  });
}

Frost Overlay

Progressive frost creep from screen edges during cold/blizzard conditions.

function createFrostOverlay(intensity = 0.0) {
  return new THREE.ShaderMaterial({
    uniforms: {
      intensity: { value: intensity }, // 0=clear, 1=fully frosted
      time:      { value: 0 },
    },
    vertexShader: FULLSCREEN_VERT,
    fragmentShader: FROST_FRAG,
    transparent: true,
  });
}

Complete Scene Assembly

async function init() {
  const canvas = document.querySelector('#canvas');
  const { renderer } = await createRenderer(canvas);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x87ceeb);
  scene.fog = new THREE.FogExp2(0x87ceeb, 0.001);

  const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.5, 500);
  camera.position.set(0, 5, 20);

  const { OrbitControls } = await import('three/addons/controls/OrbitControls.js');
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  // Ground
  const ground =  .(
     .(, ),
     .({ : , :  })
  );
  ground.. = -. / ;
  ground. = ;
  scene.(ground);

  
   sun =  .(, );
  sun..(, , );
  scene.(sun);
  scene.( .(, , ));

  
   wind =  ();
   weather =  (scene, camera, wind);
  weather. =  (scene);
  weather. =  (scene);
  weather. =  (scene);

  
  weather.();

   clock =  .();
  renderer.( {
    weather.(clock.());
    controls.();
    renderer.(scene, camera);
  });

  .(,  {
    camera. = innerWidth / innerHeight;
    camera.();
    renderer.(innerWidth, innerHeight);
  });
}

();

Performance Guidelines

Effect	Particle Count	Draw Calls	Notes
Rain	30K–80K	1 (LineSegments)	Additive blend, no depth write
Snow	10K–30K	1 (Points)	Larger point size = fewer needed
Splashes	200–500	1 (InstancedMesh)	Short lifetime, ring-buffer
Dust	15K–40K	1 (Points)	Camera-centered spawn box
Lightning	1–3 bolts	2–6 (Lines)	Ephemeral, negligible cost
Fog plane	1 quad	1	Fragment-heavy, keep simple
Aurora	1 plane	1	Vertex displacement only

Total budget: All weather combined stays under 5 draw calls and ~100K particles.

Key rules:

• All animation in vertex shaders via uniforms (time, wind). Zero per-frame JS particle loops.
• frustumCulled = false on all particle meshes — spawn box follows camera.
• Recenter spawn box on camera each frame so particles always surround the viewer.
• depthWrite: false on all transparent weather effects to avoid sorting artifacts.

Common Pitfalls

1. Rain falls through roof: Precipitation has no collision. For indoor scenes, cull particles below a Y threshold or use a height map mask uniform.
2. Snow accumulation: Not simulated per-particle. Use a ground plane shader that blends white coverage based on snowIntensity * time, or a decal system.
3. Lightning too regular: Randomize interval per stormIntensity. Real lightning is clustered — bursts of 2–3 strikes then silence.
4. Fog and sky mismatch: Always set scene.fog.color = scene.background. Mismatched colors create visible hard edges at the distance limit.
5. Weather pops on/off: Always use the state machine transition. Interpolating intensity from 0→target over 2–3 seconds looks natural.

References

• references/weather-shaders.md — Complete GLSL vertex/fragment shaders for rain, snow, dust, ground fog, aurora, wet lens, frost, and WGSL compute particles.
• references/weather-types.md — Detailed profiles for 12 weather states with parameter tables, artistic direction, environmental effects, and combination rules.