Controls

Drag to move camera. Scroll to zoom. WASD and arrow keys move the view around.

Overview

Instancing can be used to render tens of thousands of objects at interactive frame rates. This project creates 100,000 copies of a quad with eight triangles to simulate a field of grass swaying in the wind. It is based on "Realistic real-time grass rendering" by Eddie Lee and examples listed in the source.

The THREE.InstancedBufferGeometry class of three.js is used to create copies of THREE.PlaneBufferGeometry position, index and UV attributes. For each copy, additional attributes are added to describe procedural position offset, direction and scaling. The offset describes the position of the vertices on a rectangular plane that is warped using simplex noise to generate rolling hills. The direction sets where the quad geometry is facing while the stretch variable determines the height of the grass. The attributes create variety and produce organic looking shapes. The texture and alpha map are taken from "Realistic real-time grass rendering". After generation, all data is copied to the GPU at the start of the simulation.

Each frame a time variable is updated and sent to the shaders. The vertex shader transforms a copy of the quad geometry to position, scale and orient it according to the passed attributes. Wind is simulated as two sine waves which rotate the transformed vertices around the blade base. The fragment shader applies the alpha map to the quad and displays the texture data for visible fragments. A shadow is added towards the base of the blades to simulate occlusion.