Run any Skill in Manus with one click

threejs-volumetric-clouds

Stars263

Forks32

UpdatedJuly 12, 2026 at 18:30

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

scottstts

scottstts/Threejs-Awesome-Graphics-Agent-Skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

100 files

SKILL.md

readonly

name	threejs-volumetric-clouds
description	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.

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. This skill owns weather-shaped cloud volumes, reconstruction, cloud lighting, and cloud shadows.

More from this repository

same repository

threejs-spectral-ocean

scottstts/Threejs-Awesome-Graphics-Agent-Skills

Build large procedural oceans in Three.js from directional wave spectra. Use for WebGPU/TSL FFT oceans, multi-cascade wavelength bands, hybrid FFT plus Gerstner clear-water oceans, stylized above/below surface optics, permanently submerged Snell-window views, total internal reflection, aquatic perspective, caustic god rays, choppy displacement, spectral derivatives, Jacobian whitecaps, temporal foam, analytic sky reflection, underwater absorption, crest scatter, and GPU validation.

2026-07-14263

threejs-skill-router

scottstts/Threejs-Awesome-Graphics-Agent-Skills

Route ambitious Three.js graphics work to the smallest expert skill set. Use for new visual experiences, graphics rewrites, reference matching, or requests spanning geometry, materials, atmosphere, shadows, temporal effects, and final image treatment.

2026-07-13263

threejs-atmosphere-aerial-perspective

scottstts/Threejs-Awesome-Graphics-Agent-Skills

Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space transitions, Rayleigh/Mie scattering, precomputed LUTs, depth-based transmittance and inscattering, sun/moon discs, and atmosphere-aware lighting.

2026-07-12263

threejs-parallax-occlusion-mapping

scottstts/Threejs-Awesome-Graphics-Agent-Skills

Build silhouette-aware parallax occlusion mapping in Three.js WebGPU and TSL. Use for height-field ray marching, relief UVs, clipped flat or curved silhouettes, inflated shells, self-shadowing, relief-aware shadow depth, and height-derived normals.

2026-07-12263

threejs-precipitation-surfaces

scottstts/Threejs-Awesome-Graphics-Agent-Skills

Build coupled precipitation and affected surfaces in Three.js. Use for falling snow, snow accumulation, model snow caps, wet asphalt puddles, procedural ripple normals, splash flipbooks, rain streaks, shared weather envelopes, and surface wetness or coverage transitions.

2026-07-12263

threejs-procedural-geometry

scottstts/Threejs-Awesome-Graphics-Agent-Skills

Build production procedural mesh systems in Three.js. Use for sculpted rail and frame profiles, oriented branch rings, semantic mesh writers, deliberate skins and caps, UV density, custom normals, material slots, instancing decisions, and close-inspection geometry budgets.

2026-07-12263

name	threejs-volumetric-clouds
description	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.

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.

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. This skill owns weather-shaped cloud volumes, reconstruction, cloud lighting, and cloud shadows.