mcpField
T
threejs-volumetric-clouds

threejs-volumetric-clouds

github.com/scottsttsCreative & media951104 installsUpdated 1w ago
Repository

About threejs-volumetric-clouds

A guidance skill for building weather-shaped volumetric clouds in Three.js. It covers density, bounded raymarching, lighting, temporal reconstruction, and cloud shadows.

Key features

  1. 01Weather-shaped density fields
  2. 02Bounded cloud-volume raymarching
  3. 03Front-to-back lighting integration
  4. 04Temporal low-resolution reconstruction
  5. 05Separate cloud-shadow rendering

Use cases

  1. 01Implementing weather-driven cloud layers
  2. 02Auditing cloud density and lighting
  3. 03Reducing cloud rendering cost
  4. 04Handling temporal disocclusion

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-volumetric-clouds

After installing, type/threejs-volumetric-cloudsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/weather-volume-clouds/
shape_detail.bin
THIRD_PARTY_LICENSES.md
assets/weather-volume-clouds/atmosphere/
irradiance.exr
transmittance.exr
examples/weather-volume-clouds/
cloud-effect.js
examples/weather-volume-clouds/source/atmosphere/
AerialPerspectiveEffect.ts
AtmosphereMaterialBase.ts
AtmosphereParameters.ts
blackBodyChromaticity.ts
celestialDirections.ts
constants.ts
getAltitudeCorrectionOffset.ts
getSunLightColor.ts
index.ts
IrradianceMaskPass.ts
PrecomputedTexturesLoader.ts
examples/weather-volume-clouds/source/atmosphere/helpers/
functions.ts
sampleTexture.ts
examples/weather-volume-clouds/source/atmosphere/shaders/
aerialPerspectiveEffect.frag
aerialPerspectiveEffect.vert
functions.glsl
index.ts
irradianceMask.frag
parameters.glsl
sky.frag
sky.glsl
sky.vert
stars.frag
stars.vert

Details

From the project README

Volumetric Clouds

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

This skill contains exemplary examples and assets beyond descriptive guidance, they're worth studying, referencing, or even copying. Use them sufficiently when relevant and do NOT blindly skip them.

System order

  1. Define the cloud volume and layer bounds.
  2. Generate or source weather, base-shape, detail, and turbulence fields.
  3. Build a density function with vertical and weather profiles.
  4. Raymarch only the bounded occupied segment.
  5. Integrate transmittance and lighting front-to-back.
  6. Reconstruct low-resolution output temporally.
  7. 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.

Comments

Markdown supported