ENDLESS PROCEDURAL
GRASS FIELD

Create thousands of animated grass blades with realistic rolling wind using Three.js InstancedMesh and custom GLSL shaders.

Endless Procedural Grass Field with Wind Shaders

By Shane Brumback · May 19, 2026

Frequently Asked Questions

How do you create thousands of grass blades efficiently in Three.js?

Use THREE.InstancedMesh, which renders thousands of identical geometries in a single draw call. Define a simple blade shape (a tapered plane or triangle), then set each instance's position, rotation, and scale via instance matrices. This can render 50,000+ grass blades at 60fps.

How does procedural infinite terrain work in Three.js?

Track the camera or player position and recycle grass instances that fall behind. When a grass blade moves outside the visible area, reposition it ahead of the player with a new random offset. The player perceives an endless field while only a fixed number of instances exist in memory.

How do you create realistic wind animation on grass with shaders?

Use a custom vertex shader that displaces the top vertices of each grass blade using a sine wave based on time and world position. Multiply displacement by the vertex height so the base stays fixed while the tip sways. Adding multiple sine waves at different frequencies creates natural-looking wind.

What is InstancedMesh and why is it important for performance?

InstancedMesh renders many copies of the same geometry with one GPU draw call instead of thousands of individual calls. You provide a matrix for each instance (position, rotation, scale). This reduces CPU overhead dramatically — rendering 100,000 grass blades uses the same GPU resources as a few hundred individual meshes.

Introduction

One of the most visually striking effects in modern 3D games is a vast field of grass swaying in the wind. From open-world RPGs to relaxing exploration games, procedural grass adds an incredible sense of life and immersion to any scene. But rendering thousands of individual grass blades efficiently in a web browser requires some clever techniques.

In this tutorial, you will learn how to create an endless procedural grass field using Three.js InstancedMesh and custom GLSL shaders. The grass follows the camera as it moves, creating the illusion of an infinite meadow. Each blade sways independently with a rolling wind wave effect that simulates gusts traveling across the landscape — all running at smooth frame rates even with 10,000+ blades on screen.

The key to performance is InstancedMesh, which lets the GPU render thousands of copies of the same geometry in a single draw call. Combined with a custom vertex shader that applies wind displacement based on world position, you get a beautiful, organic-looking grass field without taxing the CPU. This is the same technique used in production 3D browser games.

What You'll Learn

  • How to build grass blade geometry from scratch using BufferGeometry with multiple fan blades
  • Using Three.js InstancedMesh to render 10,000+ grass blades in a single draw call
  • Writing custom GLSL vertex shaders for realistic rolling wind wave animation
  • Recycling grass blade positions as the camera moves for an endless field effect
  • Color gradients from base to tip using fragment shaders

Prerequisites

Basic familiarity with Three.js (scene, camera, renderer setup) and an understanding of what shaders are. You don't need to be a GLSL expert — the shader code is explained line by line in the premium section below.