3d Falling Leaves
Meng ToCommunityCreated by Meng To
- Skill
- Guidelines
- Design and creative
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides technical guidance for creating 3D falling leaf effects in environments like Three.js. It covers the geometric construction of leaves, the mathematical coupling of tumble and drift, and strategies for managing large numbers of instances through recycling and camera-relative positioning. The approach emphasizes visual fidelity through proper lighting, texture atlas management, and integration with scene depth and occlusion.
What it does
- Defines methods for creating two-sided leaf meshes that support edge-on visibility.
- Provides formulas for coupling leaf tumble with lateral drift to simulate natural movement.
- Explains how to use instanced geometry to manage multiple leaf entities efficiently.
- Details camera-aware recycling techniques to maintain a consistent leaf field as the camera moves.
- Outlines strategies for depth-testing and alpha management to integrate leaves into 3D scenes.
- Suggests ways to handle seasonal variations and wind fields within the simulation.
When to use it
- When you need to add drifting foliage or autumn leaves to a 3D environment.
- When you want to move beyond simple camera-facing sprites to more complex, rotating 3D geometry.
- When you need to optimize the rendering of many individual leaf objects in a scene.
- When you are implementing custom shaders for leaf lighting and transparency.
Advantages
- Enables realistic leaf movement including independent tumble and sideways slip.
- Provides a structured approach to managing leaf recycling relative to camera movement.
- Offers techniques for maintaining visual quality through texture atlas padding and proper normal orientation.
- Ensures leaves interact correctly with scene depth and occlusion.
Usage examples
- “How do I make my 3D leaves look like they are tumbling naturally?”
- The skill explains how to assign persistent seeded values for tumble rate and roll, and provides a formula to couple lateral velocity with the leaf's rotation so it slips fastest when edge-on.
- “How should I handle leaf recycling as the camera moves through the scene?”
- The skill recommends centering a recycling volume ahead of the camera and wrapping leaves outside this volume, ensuring the spawn boundaries move with the camera rather than parenting leaves to it.
Install
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/mengto/3d-falling-leaves/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip 3d-falling-leaves.zip -d .agents/skills
Documentation by Meng To
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.
Instance and recycle
Use an InstancedMesh with reusable CPU scratch objects for moderate counts, or instanced attributes and shader animation for larger fields. Upload seeded attributes once; update time, wind, season amount, and camera anchor uniforms. Refresh instance matrices/bounds correctly when using the CPU path. See InstancedMesh.
Center the recycling volume ahead of the camera along its horizontal viewing direction. Retain a fallback horizontal direction when looking nearly straight up or down. Preserve existing world positions as the camera moves; move the spawn/wrap boundaries rather than parenting all live leaves to the camera.
Wrap outside the visible central volume. Fade near boundaries with 1.0 - smoothstep(inner, outer, distance), where inner < outer; reversed GLSL smoothstep edges are undefined. Hide reset events beyond the fog, near the volume top, or behind a soft boundary fade. Seed each fall cycle for variation without frame-to-frame jitter.
Start with a sparse field and tighten its visible volume before increasing the count. Distinguish capacity, active count, and leaves actually visible. Use a few near leaves, a readable middle layer, and smaller distant leaves. Keep the closest leaves from covering the camera as giant blurred shapes.
Integrate with the world
Depth-test against architecture and ground. Exclude covered interior volumes or provide roof/terrain collision proxies; depth testing alone does not prevent leaves falling inside rooms.
For crisp silhouettes, alpha testing with depth writes is a useful default. MSAA alpha-to-coverage can soften edges only when the actual target is multisampled. A custom shader must implement its alpha rejection; material settings alone do not insert arbitrary custom shader logic.
If alpha blending is needed, handle depth writes and sorting deliberately. Instances are not individually depth-sorted by default.
Match leaf cutouts and wind deformation in any shadow or occlusion pass. Disable leaf shadow casting when its cost or artifacts outweigh its visual contribution.
Let seasonal state control palette and active density; do not allocate a new leaf system per season.
Verify
Watch one leaf complete a tumble and a full fall cycle. Confirm its face/back differ, its edge thins, and its reset is hidden. Walk sideways, turn around, look up, enter a room, and resume after hiding the tab. Check the field at narrow and wide viewports, through the final tone mapper, and with reduced motion frozen at a composed state. Measure overdraw and update cost instead of assuming particles are free.
Read REFERENCES.md for the reference implementation. Seijaku's leafFall provides the closed-form animation pattern; replace its hardcoded roof rectangles with the target scene's geometry or volumes.
Files
- ATTRIBUTION.mdAdded by AutoGineer848 B
- LICENSELicence file added by AutoGineer1.0 KiB
- REFERENCES.md296 B
- SKILL.md5.1 KiB
- agents/openai.yaml234 B
SKILL.md
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.
Instance and recycle
Use an InstancedMesh with reusable CPU scratch objects for moderate counts, or instanced attributes and shader animation for larger fields. Upload seeded attributes once; update time, wind, season amount, and camera anchor uniforms. Refresh instance matrices/bounds correctly when using the CPU path. See InstancedMesh.
Center the recycling volume ahead of the camera along its horizontal viewing direction. Retain a fallback horizontal direction when looking nearly straight up or down. Preserve existing world positions as the camera moves; move the spawn/wrap boundaries rather than parenting all live leaves to the camera.
Wrap outside the visible central volume. Fade near boundaries with 1.0 - smoothstep(inner, outer, distance), where inner < outer; reversed GLSL smoothstep edges are undefined. Hide reset events beyond the fog, near the volume top, or behind a soft boundary fade. Seed each fall cycle for variation without frame-to-frame jitter.
Start with a sparse field and tighten its visible volume before increasing the count. Distinguish capacity, active count, and leaves actually visible. Use a few near leaves, a readable middle layer, and smaller distant leaves. Keep the closest leaves from covering the camera as giant blurred shapes.
Integrate with the world
Depth-test against architecture and ground. Exclude covered interior volumes or provide roof/terrain collision proxies; depth testing alone does not prevent leaves falling inside rooms.
For crisp silhouettes, alpha testing with depth writes is a useful default. MSAA alpha-to-coverage can soften edges only when the actual target is multisampled. A custom shader must implement its alpha rejection; material settings alone do not insert arbitrary custom shader logic.
If alpha blending is needed, handle depth writes and sorting deliberately. Instances are not individually depth-sorted by default.
Match leaf cutouts and wind deformation in any shadow or occlusion pass. Disable leaf shadow casting when its cost or artifacts outweigh its visual contribution.
Let seasonal state control palette and active density; do not allocate a new leaf system per season.
Verify
Watch one leaf complete a tumble and a full fall cycle. Confirm its face/back differ, its edge thins, and its reset is hidden. Walk sideways, turn around, look up, enter a room, and resume after hiding the tab. Check the field at narrow and wide viewports, through the final tone mapper, and with reduced motion frozen at a composed state. Measure overdraw and update cost instead of assuming particles are free.
Read REFERENCES.md for the reference implementation. Seijaku's leafFall provides the closed-form animation pattern; replace its hardcoded roof rectangles with the target scene's geometry or volumes.
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- Meng To
- Publisher
- Meng To (Community)
- Source
- MengTo/Skills · agent-skills/3d/3d-falling-leaves · commit 5ea1661
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Meng To.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download 3d-falling-leaves.zip