# Threejs Procedural Vegetation

Generate authored procedural trees, grass, ivy, flowers, and vegetation in Three.js or...

- Repository: https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills (956 stars)
- Category: Marketing
- License: MIT
- Last updated: 2026-10-22
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-vegetation -g -a claude-code -y`
Codex: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-vegetation -g -a codex -y`
Cursor: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-vegetation -g -a cursor -y`
Gemini CLI: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-vegetation -g -a gemini-cli -y`

## Description

Generate authored procedural trees, grass, ivy, flowers, and vegetation in Three.js or raw WebGPU. Use for surface-following vines, painted ivy paths, stylized or GPU grass, GPU-culled virtual flower fields, trunks, recursive branches, roots, canopies, leaf cards, species presets, deterministic growth, distance-tiered plant geometry, and rooted blade, stem, or petiole-hinge wind.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Procedural Vegetation

Represent a plant as a growth hierarchy plus rendering adaptations. Do not model it as randomly scattered cylinders.

This skill contains exemplary examples and assets beyond descriptive guidance,
they're worth studying, referencing, or even copying. Use them sufficiently
when relevant and do NOT blindly skip them.

## Build sequence

1. Define a per-level species table: length, radius, taper, child count, emergence range, angle, twist, gnarliness, sections, radial segments.
2. Grow branches iteratively from a queue so recursion depth and budgets remain inspectable.
3. Emit each branch as oriented rings with an intentional UV seam.
4. Update section orientation from:
   - inherited direction;
   - stochastic curvature;
   - tropism or external force;
   - optional attraction constraints.
5. Spawn children with stratified longitudinal slots and independently permuted angular slots.
6. Generate leaves only after branch topology is stable.
7. Build foliage normals from both card orientation and local crown volume.
8. Choose wind scope explicitly. Leaf-root deformation, branch hierarchy deformation, and whole-tree sway are separate systems.

Read [references/structured-ash-growth-system.md](references/structured-ash-growth-system.md) and preserve its preset, continuation, child-placement, leaf, material, wind, and composition contracts before tuning.

Read the [Ash Growth System implementation](examples/structured-ash-growth/tree-system.js)
with its [authored preset](examples/structured-ash-growth/ash-preset.js) for a
contract-accurate implementation and its diagnostic attributes.

Read the
[stylized meadow grass implementation](examples/stylized-meadow-grass/grass-system.js)
for authored blade-cluster geometry with a procedural fallback, image-driven
path masking, per-instance origin/facing attributes, circular-arc rooted wind,
gust fronts, tip flutter, color clumps, macro variation, translucency, and rim
diagnostics.

The rest: https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills/blob/HEAD/skills/threejs-procedural-vegetation/SKILL.md