Three.js From Zero · Article s12-04
Procedural Cloud Rendering on TSL — porting Horizon’s Nubis ideas
Procedural Cloud Rendering on TSL — porting Horizon’s Nubis ideas is Article s12-04 of Three.js From Zero, a MasterAllArts free interactive lesson for artists learning creative 3D on the web.
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.
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.
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.