backPRJ 008 · 2026

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

  • Three.js
  • GLSL
  • R3F
  • WebGL

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

Explore more

project 08 / 08
Tuxdi