mcpbeat

Threejs Volumetric Clouds

scottstts/threejs-volumetric-clouds

Implement volumetric cloud systems in Three.js. Use for weather-driven density, bounded raymarching, shape/detail erosion, vertical profiles, lighting cones, silver lining, temporal reconstruction, cloud shadows, multiple layers, and scalable quality modes.

2114k tokens
context cost
the whole folder, loaded on every use
150
files
ships runnable scripts
0
copies elsewhere
how many repositories repackaged it
527
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-volumetric-clouds

The instruction itself

5 sections, as written by the author

Volumetric Clouds

Cloud quality comes from density organization, lighting, and temporal stability—not from increasing march steps over unstructured noise.

System order

  • Define the cloud volume and layer bounds.
  • Generate or source weather, base-shape, detail, and turbulence fields.
  • Build a density function with vertical and weather profiles.
  • Raymarch only the bounded occupied segment.
  • Integrate transmittance and lighting front-to-back.
  • Reconstruct low-resolution output temporally.
  • Project a separate low-cost cloud-shadow solution.

Read references/weather-volume-and-reconstruction.md before implementing or auditing the cloud system.

Read the weather volume cloud entry

and its source/ modules for weather-layer ownership, spherical shell bounds,

authored shape/detail sampling, cloud shadow maps, temporal upscale,

atmospheric composition, and package-owned diagnostics.

Required controls

  • coverage, cloud type, precipitation, and anvil bias;
  • base/top altitude and vertical density profile;
  • shape/detail scales and erosion;
  • wind for each field;
  • primary step count, light step count, and empty-space policy;
  • history weight and disocclusion threshold;
  • cloud-shadow extent, resolution, and update rate.

Failure conditions

  • density is only fbm(position);
  • the raymarch traverses the full camera range;
  • detail noise adds density instead of eroding shaped masses;
  • temporal history is accepted across disocclusion;
  • shadows use the full beauty raymarch;
  • every cloud layer shares the same wind and density profile.

Routing boundary

Use $threejs-atmosphere-aerial-perspective for molecular/aerosol scattering

without weather density. Use $threejs-procedural-vfx for emissive aurora

curtain slabs or bounded interactive voxel fire and smoke with velocity,

pressure, emitter, and collision fields. This skill owns weather-shaped cloud

volumes, reconstruction, cloud lighting, and cloud shadows.

How to use it

Copy the folder

Take scottstts/threejs-volumetric-clouds from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.