[Performance] Optimizing 3M Instanced Grass in Three.js

Yeah. that’s one approach. but you’ll still be limited by poly count. the safe/sweet spot for total number of triangles is ~3million.. so.. if you’re rendering 3 million instances of an actual 3d blade of grass model (~20 triangles.. ) You’re about 20x over budget.

If, instead you use an image of a grass clump, on a 2 triangle quad.. you can probably push a few million of them.

If you try to merge your individual blades into a larger clump, you will probably get better performance, but you’re potentially moving the bottleneck from being transform bound, to vertex/triangle bound.

These numbers will vary from hardware to hardware, and also there are other major factors that influence rendering performance, a big one being “overdraw”… so if you can sort your instances front to back, you’ll get better performance, at the cost of doing the sorting somehow (probably on the CPU)..

From gpt.. list of major gpu bottlenecks:


1. **Shader/Compute Bound** – Too much math or complex shaders.
2. **Pixel Fill-Rate Bound** – Too many fragments per pixel (e.g. overdraw, transparency).
3. **Memory Bandwidth Bound** – Too much data moving to/from VRAM.
4. **Memory Latency Bound** – Random or inefficient memory access patterns.
5. **Geometry Bound** – Too many vertices or primitives.
6. **CPU/Draw Call Bound** – Too many draw calls or state changes from CPU.
7. **Synchronization Bound** – Stalls from GPU-CPU sync points or readbacks.

Let me know if you want a cheat-sheet or visual for quick reference.