Grass Field
Instanced Meshes + Custom Shaders
A procedurally generated grass field rendered with 50,000 instanced blades. Each blade sways independently using vertex shader displacement driven by a wind noise function, creating an organic and immersive landscape effect.
The scene uses instanced rendering to keep draw calls minimal despite the high blade count. Wind is visualised with animated line particles that sweep across the field, reinforcing the sense of direction and flow.
Tech Stack
Three.jsReact Three FiberDreiGLSLInstanced Meshes
Key Learnings
- InstancedMesh lets you render tens of thousands of objects in a single draw call by varying per-instance attributes like position and rotation.
- Vertex shader displacement is ideal for organic motion — you can animate geometry on the GPU without touching JavaScript each frame.
- Wind visualisation lines help sell the environment; small ambient details make 3D scenes feel alive.