
3d Falling Leaves
Build recognizable falling leaves in world space using instanced geometry, independent...
Install
npx skills add MengTo/Skills --skill 3d-falling-leaves -g -a claude-code -y- Repository
- MengTo/Skills7.2k
- Category
- Media
- Updated
- 3d ago
- License
- MIT
- Context cost
- Lightabout 1,218 tokens
- Runs scripts
- No, instructions only
What it does
Build recognizable falling leaves in world space using instanced geometry, independent tumble, coupled sideways drift, shared wind, scene occlusion, and camera-aware recycling. Use for 3D autumn leaves or drifting foliage in Three.js and similar scenes; use falling-leaves for a 2D canvas overlay.
3D Falling Leaves
Make individual leaves turn through face, edge, and back while drifting through the scene. The visible edge-on moment is essential to the effect.
Build one convincing leaf
Use a two-sided quad or lightly bent mesh with a recognizable leaf silhouette, stem, and restrained vein detail. Camera-facing point sprites cannot turn edge-on. Begin with one slow leaf before increasing the count.
Give the back a slightly paler, less saturated appearance and orient its lighting normal correctly. For a custom shader, gl_FrontFacing can distinguish front/back; do not flip normals twice if the engine's material already handles double-sided lighting. Keep light transmission subtle and linked to the scene sun rather than using an unconditionally glowing leaf.
Use a padded texture atlas for multiple silhouettes. Extend edge colors into transparent texels and keep padding through mip levels to prevent dark rims and atlas bleed. Treat a color atlas as sRGB; treat an atlas encoding masks or material channels as data. Seijaku's procedural atlas encodes channels and is not an ordinary leaf photograph.
Couple tumble and drift
Assign persistent seeded values per leaf: position seed, scale, phase, tumble rate, roll rate, fall speed, lateral slip, and palette variation. Never generate new random values every frame.
The lateral velocity should follow the tumble, so a leaf slips fastest when edge-on. For angular speed omega bounded away from zero:
const angle = phase + omega * time;
const sideOffset = -(slip / omega) * Math.cos(angle);
// d(sideOffset)/dt = slip * sin(angle)
Apply that offset along the leaf's chosen horizontal direction. Use a separate slow roll and tilt; all leaves should not share one rhythm. Add a common wind field with small per-leaf response variation. Integrate changing wind over bounded simulation steps, or use a closed-form field; never catch up an entire hidden-tab interval with an unbounded loop.


