Grass shader
Grass that plants itself on any model's surface, moves with the wind and parts when you blow on it.
- Real-time 3D
Share
Technology
About the project
Every blade is one triangle drawn as an instance, and everything that makes it look alive happens in the vertex shader: it bends in its own upright space - resting droop, its own sway, a wave crossing the surface, noise - and only then stands up along the normal it was planted at. The other way round would mean working out what 'leaning downwind' means for a blade already lying sideways.
Planting them is the other problem, and the one that makes it work on any shape: a model's triangles are nowhere near equal, so picking one at random crowds the small ones and leaves the big ones bald. Instead the mesh is walked once into a running total of area and each blade is drawn against that total, so it lands in every triangle exactly as often as its share of the surface.
You can blow on it. A resting pointer raises a steady gust that combs the blades away from it, and a click sends a ring rolling out from where it struck. The whole coat is one draw call, with no lights bound and no shadows.
What it does
- One blade is one triangle; the whole coat, one draw call
- Plants on any geometry, undersides included
- Its own sway, a travelling wave and noise, all in the vertex shader
- Answers the pointer: a steady gust and a ring on impact
- Platform
- Web (desktop and mobile)
- Stack
- Three.js · GLSL · R3F
- Type
- Shader lab
Gallery

The same grass on a torus knot

The same grass on a cube, standing straight out of every face

The blade's colours changed from the control panel