skills.rest
CK42BB
CK42BBCOMMUNITY
Explore all skills by this author →
Website𝕏@ckingsleyGitHub

procedural-grass

Generate GPU-accelerated procedural grass fields in Three.js with wind and LOD.

9|3|Updated Feb 6, 2026
Search Tags:#shaders#three.js#terrain#webgpu#instancing#procedural#grass
One-click install
npx skills add https://github.com/CK42BB/procedural-grass-threejs --skill procedural-grass
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: procedural-grass
Source: https://github.com/CK42BB/procedural-grass-threejs/tree/main
Command: npx skills add https://github.com/CK42BB/procedural-grass-threejs --skill procedural-grass

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Procedural Grass provides a scalable, GPU-accelerated system to generate dense, animated grass fields on terrain in Three.js, eliminating manual blade modeling and slow, manual grass placement in scenes.

Core Features & Use Cases

  • Bezier-curved blade geometry with tapered triangles for natural curvature and low vertex count
  • Instanced rendering capable of hundreds of thousands of blades in a single draw call
  • Multi-layer wind system (global sway, gusts, turbulence) for realistic motion
  • Subsurface scattering approximation for backlit translucency
  • Terrain-aware placement with density modulation, slope rejection, and jittered grids
  • Interactive displacement from players/objects and distance-based LOD with density falloff
  • 8 built-in grass type presets (lawn, meadow, tall prairie, wheat, savanna, reeds, tundra, tropical)
  • WebGPU compute placement with WebGL2 fallback; WGSL shaders and storage buffers
  • Seasonal color modulation and mixed multi-type fields

Quick Start

Install the procedural-grass skill and load the sample scene to generate a dense, animated grass field on terrain.

Frequently Asked Questions about procedural-grass

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render dense animated grass fields on terrain in Three.js without manually placing individual blades?▼

To render dense animated grass fields on terrain in Three.js, use a GPU-accelerated procedural system that generates instanced blade geometry with shader-based wind, eliminating manual modeling and slow placement.

Does procedural grass rendering in Three.js require WebGPU, or can I use a WebGL2 fallback?▼

Procedural grass rendering in Three.js does not strictly require WebGPU; the system uses WebGPU compute placement with WGSL shaders and storage buffers, but includes a WebGL2 fallback for environments lacking WebGPU support.

Can I achieve high blade counts for large terrain scenes using instanced rendering in Three.js?▼

You can achieve high blade counts for large terrain scenes using instanced rendering in Three.js, capable of drawing hundreds of thousands of tapered grass blades with per-blade variation in a single draw call.

What is the best way to create realistic wind-driven motion for grass shaders in Three.js?▼

The best way to create realistic wind-driven motion for grass shaders in Three.js is applying a multi-layer wind system that combines global sway, localized gusts, and turbulence for natural animation.

How does terrain-aware grass placement handle slopes and density modulation in WebGPU?▼

Terrain-aware grass placement in WebGPU handles slopes and density modulation by using compute shaders to jitter blade grids, reject steep slopes, and adjust distribution based on terrain surfaces.

What are the limitations of using procedural grass systems for WebGPU terrain rendering?▼

Limitations of using procedural grass systems for WebGPU terrain rendering include requiring a WebGPU-enabled runtime for optimal compute placement, though a WebGL2 fallback is available with potential performance trade-offs for large scenes.

Related Skills

Explore More Software Engineering Skills→
linegellinegel
5

threejs-procedural-vegetation

Generate procedural trees and grass for Three.js scenes with WebGPU.

Community
Advanced
CarlosDoersCarlosDoers

threejs-shaders

Integrate custom GLSL shaders into Three.js scenes via ShaderMaterial or RawShaderMaterial.

Community
Intermediate
Bbeierle12Bbeierle12
8

terrain-integration

Analyze terrain slope and generate auto-leveled foundations with pillars in Three.js.

Community
Intermediate
tanepipertanepiper
27

particles-gpu

Render large particle counts via GPU instancing and custom shaders in Three.js.

Community
Advanced