How do I make interactive grass patches

Ive seen other topics for just basic grass, but I want to make little “patches” of grass that the player can walk through, and when he does the grass is offset. like pokemon grass, but realistic. (Same thing for trees, ultimately, but just grass for now)


Since grass absolutely always fun and pretty to code, an example codepen just for ya :seedling::t_rex:

First, make grass patches out of InstancedMesh, then in the shader apply shading and wind to the grass blades.

Depending on the amount of colliders (ie. players / creatures walking on the ground etc.), pass either a vector or texture as a uniform to the shader (if there’s only a few colliders, you can get away with passing vectors, otherwise pass a 2D texture.) Then bend / shrink-wrap grass blades around the collider positions.

Since in case of using a texture you won’t have collider positions - instead, for each player raycast downwards and check collisions with the ground. Using CanvasTexture create a flat plane texture that can then store that raycaster intersection position as UV coordinates (you can paint positions on the plane taken by players white, while the rest of the texture remains black for example) - then pass that texture to the shader, and based on the color of specific UV coordinates, bend the grass blades similarly to when you’d be using vectors.


Thanks! like the pokeball reference for grass

will this work for extremely large terrains as well? I have an octree (based on octree example from threejs) for the rest of my stuff, can an octree work with grass? Also I plan on using the new nodes system for compatibility with webgpu and (backompatibility with) webgl, would webgpu help?