procedural-weather

Generate procedural weather effects in Three.js using WebGPU compute and shaders.

8|1|Updated Feb 8, 2026
One-click install
npx skills add https://github.com/CK42BB/procedural-weather-threejs --skill procedural-weather
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: procedural-weather
Source: https://github.com/CK42BB/procedural-weather-threejs/tree/main
Command: npx skills add https://github.com/CK42BB/procedural-weather-threejs --skill procedural-weather

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables developers to easily integrate complex, dynamic, and visually stunning weather effects into Three.js applications without needing to write intricate shader code or particle system logic from scratch.

Core Features & Use Cases

  • GPU-Accelerated Particles: Realistic rain, snow, and dust storms using WebGPU compute for high performance.
  • Atmospheric Effects: Volumetric fog, lightning strikes, auroras, and rainbows.
  • Smooth Transitions: A state machine interpolates seamlessly between 12 distinct weather types (clear, rain, blizzard, sandstorm, etc.).
  • Use Case: Create an immersive open-world game scene where weather dynamically changes from a clear day to a sudden thunderstorm, complete with lightning and heavy rain, all while maintaining high frame rates.

Quick Start

Create a Three.js scene with gentle rain and ground fog.

Frequently Asked Questions about procedural-weather

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add procedural weather effects to a Three.js scene?

To add procedural weather effects to a Three.js scene, use this Skill to generate precipitation, fog, and lightning via advanced shaders and WebGPU compute. It integrates directly with your rendering pipeline for real-time environmental simulation.

Can I use WebGPU compute for GPU particles in Three.js weather systems?

Yes, you can use WebGPU compute for GPU particles in Three.js weather systems. This Skill leverages WebGPU to handle realistic rain, snow, and dust storms with high performance, avoiding the need to write custom particle logic from scratch.

Does this approach support smooth transitions between different weather states?

This approach supports smooth transitions between 12 distinct weather states including clear, rain, blizzard, and sandstorm. A built-in state machine interpolates seamlessly between these weather types for dynamic environmental changes.

What is the best way to render volumetric fog and auroras in real-time graphics?

The best way to render volumetric fog and auroras in real-time graphics is using procedural generation with advanced shaders. This Skill provides these atmospheric effects alongside optical phenomena like rainbows within the Three.js rendering pipeline.

Do I need to write custom shader code to simulate lightning in Three.js?

You do not need to write custom shader code to simulate lightning in Three.js. This Skill generates lightning strikes and other complex atmospheric phenomena automatically, enabling high frame rates without intricate manual shader programming.