Procedural Grass Threejs

Procedural Grass — Claude Three.js Skill

A Claude Code skill for generating dense, animated procedural grass fields in Three.js, emphasizing **WebGPU compute with WebGL fallback**.

Part of the **Teaching Three.js** skill series.

What This Skill Does

When installed, this skill teaches Claude Code how to generate procedural grass including:

• Bezier-curved blade geometry with tapered triangle strips and configurable segments
• Instanced rendering — hundreds of thousands of blades in a single draw call
• Multi-layer wind system — global sway, rolling gust waves, per-blade turbulence
• Subsurface scattering approximation for realistic backlit translucency
• Terrain-aware placement with slope rejection, density modulation, and jittered grids
• Interactive displacement — grass pushes aside from players/objects
• Distance-based LOD — density fade and blade simplification by camera distance
• 8 grass type presets — lawn, meadow, tall prairie, wheat, savanna, reeds, tundra, tropical
• GPU compute placement via WGSL for WebGPU-accelerated scatter
• Seasonal color modulation and mixed multi-type fields

Installation

Claude Code (CLI)

claude install-skill path/to/procedural-grass

Or copy the `procedural-grass/` folder into your Claude Code skills directory.

Manual Usage

Reference the skill files directly in conversations with Claude:

File	Purpose
SKILL.md	Main skill — blade geometry, placement, wind, materials, LOD, presets
references/blade-shaders.md	Complete GLSL vert/frag shaders, WGSL compute, TSL wind nodes
references/grass-types.md	8 species profiles with dimensions, colors, density, biome maps

Quick Start Prompts

Try these with Claude after installing:

"Create a meadow with procedural grass blowing in the wind"

"Build a wheat field with golden backlit grass and interactive displacement"

"Generate savanna-style grass with clumpy tuf