ENDLESS PROCEDURAL
GRASS FIELD

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.