FLOWING GRASS FIELDS
We created a real-time grass and wind simulation using WebGL and Three.js, powered by custom shaders. Each blade dynamically bends with procedural wind forces, creating a smooth and natural motion. Optimized to render over a million blades at 60 FPS on a M1 Mac in a web browser.
OVERVIEW
Client
Tech ReduxIndustry
Computer Graphics & SimulationLocation
Tech Redux LabsWhat We Did
WebGL DevelopmentShader ProgrammingProcedural AnimationPerformance OptimizationCHALLENGE
The challenge of this experiment was to simulate vast fields of grass in real time while maintaining high performance and visual realism. Rendering millions of individual blades required an efficient approach to avoid performance bottlenecks. Simulating natural wind movement added complexity, as each blade needed to bend dynamically without breaking immersion. Achieving a smooth, organic motion while keeping the system scalable and customizable, all within a browser.
WHAT WE DID
Building the Foundation with a Single Blade of Grass
The experiment began with a single blade of grass, focusing on its structure, movement, and efficiency. We developed a dynamic detail system, allowing each blade to adjust its complexity based on performance needs. Using a vertex shader, we introduced curvature control, ensuring the blade bends naturally—less at the base, more at the tip, mimicking real grass behavior. This foundation set the stage for scaling up to millions of blades.
Adaptive Grass Distribution Across the Environment
To ensure a natural and varied grass field, each blade was assigned a dedicated square region, where it was randomly placed with random rotation for each blade instead of following a uniform grid. This method introduced subtle randomness, preventing the grass from looking artificial. The square size was adjustable, allowing control over blade density, making it possible to create anything from dense fields to sparse landscapes. For performance optimization, all blades were combined into a single geometry, significantly reducing draw calls and allowing us to render far more blades than would be possible with separate geometries.
Bringing Grass to Life with Wind and Color Dynamics
To make the grass feel more alive and dynamic, we used procedural noise to control wind behavior, allowing each blade to bend and sway naturally over time. The wind applied smooth, continuous motion across the field, creating an organic and ever-changing effect. To enhance realism, each blade featured a base-to-tip color gradient, while noise-driven color variations introduced subtle shifts in tone and lighting, mimicking natural shadows and depth. This blend of motion and color dynamics resulted in a visually rich and immersive simulation.
Crafting Lifelike Landscapes with Adjustable Terrain
To make the grass fields more immersive and visually realistic, we developed an adjustable terrain system that adds vertical depth and enhances the overall environment. This system allows the terrain to be dynamically shaped, creating hills, valleys, and other natural features that integrate seamlessly with the grass. By incorporating this feature, the grass adapts naturally to the terrain’s contours, resulting in a landscape that feels alive and believable.
RESULTS
A High-Performance and Visually Lifelike Grass System
The experiment successfully rendered over a million grass blades at 60 FPS on a M1 Mac in a web browser, maintaining smooth performance without compromising visual quality. The combination of procedural wind movement, dynamic curvature, and noise-driven color variation created a realistic and immersive experience. By using optimized geometry and shader-based animation, we achieved a responsive and scalable system, demonstrating the potential of WebGL and procedural rendering for large-scale natural simulations.
Grass blades renderedSmooth performanceAdjustable simulation controls 
by the team at Tech Redux