Three.js From Zero · Article s12-05
S12-05 Foliage Rendering
Skip to demo
Season 12 · S12-05 · Specialized Production Patterns
Foliage Rendering — wind hierarchy, imposters, shells
Foliage performance problems are usually composition problems in disguise. The trick is not one shader. It is a hierarchy: hero blades, mid-distance cards, far imposters, and believable wind across all of them.
renderingfoliageperformance
1. Why this article exists
The curriculum has performance foundations, but not a dedicated “plants at scale” applied walkthrough. This closes that gap with a production bias.
2. What we are building in the demo
- Instanced blades swaying with a shared wind field.
- A density control that shows where the budget goes.
- A clear split between hero detail and distant cheating.
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
blade.rotation.z = baseLean + windField(sample.xz, time) * strength;
instanceMatrix.compose(position, rotation, scale);5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- Randomness without hierarchy looks noisy, not organic.
- Full-detail foliage everywhere is how scenes die on mobile.
- Wind should read across clusters, not as every blade acting alone.
6. Takeaways
- Foliage is a system of LOD and motion cues, not a single asset trick.
- Shared wind reads more naturally than independent random wiggle.
- Far distance is where imposters buy back your frame time.