Three.js From Zero · Article s12-04
S12-04 Procedural Cloud Rendering on TSL
Skip to demo
Season 12 · S12-04 · Specialized Production Patterns
Procedural Cloud Rendering on TSL — porting Horizon’s Nubis ideas
Clouds are not one texture with alpha. The interesting part is how density, lighting, and camera movement conspire to feel voluminous while staying inside a browser budget.
renderingtslatmosphere
1. Why this article exists
This is exactly the kind of rendering niche that sits in the “useful but underserved” pocket: visually rich, technically interesting, and helpful for world-building beyond plain skyboxes.
2. What we are building in the demo
- A layered cloud bank with controllable density and drift.
- A quick lighting model that differentiates sun-facing volume from shadowed interior.
- A browser-friendly framing of what to borrow from Nubis versus what to simplify.
3. Live demo
The demo below is a compact study model, not a full production system. The goal is to make the article’s mental model tactile: what changes, what matters, and what you would keep when the codebase graduates into a real project.
booting...
Season 12 is deliberately less single-vertical than Season 11. The throughline is still applied production: every demo is framed as a pattern you could reuse in paid work.
4. Implementation sketch
const density = fbm(samplePos * detail) * coverage;
const lit = mix(shadowColor, sunColor, saturate(noL * 0.7 + 0.3));
color += lit * density;5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- Do not oversell the approximation as “the full AAA cloud stack.”
- Noise without large-shape composition reads as mush.
- Expensive volumetric steps need a strong art-direction payoff.
6. Takeaways
- Big-shape composition matters more than microscopic noise detail.
- Lighting turns density into believable volume.
- The right simplification is often more teachable than a faithful port.