scottstts/threejs-awesome-graphics-agent-skills

threejs-procedural-vegetation

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

Quelltext ansehen
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

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.
  1. Spawn children with stratified longitudinal slots and independently permuted angular slots.
  2. Generate leaves only after branch topology is stable.
  3. Build foliage normals from both card orientation and local crown volume.
  4. Choose wind scope explicitly. Leaf-root deformation, branch hierarchy deformation, and whole-tree sway are separate systems.

Read 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 with its authored preset for a contract-accurate implementation and its diagnostic attributes.

Read the stylized meadow grass implementation 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.

Read the GPU-computed grass implementation for MRT blade-parameter generation, deterministic terrain-conforming placement, Voronoi clumps, Bezier blade folding, wind-facing yaw, distance LOD/culling, normal/color fading, translucency, and field diagnostics.

Read references/gpu-culled-flower-field.md for the exact virtual-address, ecology, hierarchical-compaction, indirect-draw, distance-tier, atlas, wind, contact, resource, and diagnostic contracts.

Read the GPU-culled flower-field entry and its complete raw WebGPU implementation for zero-record integer candidate reconstruction, 32 by 32 tile culling, three visible-ID streams, indirect near/middle/far draws, curved textured petals, identity-preserving horizon heads, and rooted moving-contact response.

Read the procedural surface ivy entry and its complete TypeScript implementation for seeded spline-following stems, repeated mesh reprojection, tangent-plane creep and droop, parallel-transport tube rings, growth reveal, instanced leaves and umbels, and rigid petiole-hinge wind. Treat the TypeScript modules as the only implementation; the entry file only re-exports them.

Visual failure conditions

  • branches form visible helices;
  • dense grass ignores terrain height or clump-level variation;
  • every child emerges at the same relative height;
  • bark texture scale changes with branch radius;
  • leaves reveal flat card normals under rotation;
  • leaf wind moves card roots instead of remaining anchored;
  • branch wind is claimed to match a reference whose branches are static;
  • different seeds change species identity rather than controlled variation;
  • geometry cost grows without a per-level budget;
  • surface-following stems are offset from the host or flip normals across seams;
  • ivy branches ignore the tangent plane while attached;
  • leaf wind rotates around the card center instead of the petiole.
  • a million-flower field allocates CPU transforms or per-candidate records;
  • distant flower LOD replaces species identity with one generic sprite;
  • compaction and direct rendering reconstruct different roots or acceptance;
  • flower heads stay world-up after their stems bend.

Routing boundary

Use $threejs-procedural-geometry for generic branch-ring emission without a growth model. This skill owns species tables, vine and branch topology, surface-following growth, foliage, grass fields, roots, and rooted wind.

aus demselben Repository

Weitere Skills

Alle Skills
scottstts
Community

threejs-atmosphere-aerial-perspective

Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space transitions, Rayleigh/Mie scattering, precomputed LUTs, depth-based transmittance and inscattering, sun/moon discs, and atmosphere-aware lighting.

Installationen
2
GitHub Stars
911
Aktualisiert
15. Okt.
scottstts
Community

threejs-bloom

Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom with guaranteed material restoration, scene-relative emissive hierarchy, and effect-isolation diagnostics.

Installationen
2
GitHub Stars
911
Aktualisiert
15. Okt.
scottstts
Community

threejs-camera-direction

Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up vectors, quaternion handoffs, authored cinematic framing, floating origins, pointer-look controls, camera collision constraints, projection ownership, and lifecycle restoration.

Installationen
2
GitHub Stars
911
Aktualisiert
15. Okt.
scottstts
Community

threejs-exposure-color-grading

Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.

Installationen
2
GitHub Stars
911
Aktualisiert
15. Okt.