What's the most performant way to make grass?

[panda_warrior]

I want to make some grass like from Lusion’s My Little Story Book.

What’s the more performant way to make this kind of grass?

I was thinking of either:

1. Use an alpha texture and then used instance geometry.
2. Use a shaped mesh from blender with a custom material and then used instance geometry.

Which of these is better for performances? Is there a better way to make grass?

Thank you!

[donmccurdy]

I think either of those options are OK, and probably pretty similar for performance. Probably don’t use .transparent=true for the alpha texture, use .alphaTest instead. If you use a custom mesh from Blender, also make sure each blade of grass doesn’t have too high of a poly count. Using THREE.InstancedMesh you can also set slightly different colors on different grass instances to get a bit of variation. If there’s a base color texture, the color will be multiplied against the texture, which can add some variation to the texture.

[Chaser_Code]

Field of grass swaying in the wind

Instanced blades of grass on an infinitely rolling rounded plane. SERENITY NOW This is an update of an older project to add lighting, translucency and movement to instanced blades of grass swaying in the wind. The camera orbits around a stationary point and the instances are moved to give the illusion of travel over an infinite plane. Rounding the ground hides the edges of the geometry and the appearance of the blades. [two] [one]

[byDezign]

(I know it’s because overfill) but can you expand a bit on what changing transparent and what alpha test is doing?

It’s one of those things that people say and you do but it’s not until you’re neck deep in bespoke render pipelines that anyone explains why…

As to mesh vs textures, it really depends on the style. Stylized grass makes total sense to use meshes of each blade and with per-instance attributes you can really make them move/look unique and place them in a very organic way.

If you want more natural, realistic grass you’ll probably want to base off textures/scans and then utilize some billboard mechanics (where the grass always points at the camera)

Common tactic is to use an X which looks decent at most angles except straight down.

I’ve seen some cool variants of the X where it zig-zags or even follows a spline/skeleton making animation very easy.

[donmccurdy]

(I know it’s because overfill) but can you expand a bit on what changing transparent and what alpha test is doing?

Fill rate and overdraw is one part, but probably another is just as important — .transparent = true uses alpha blending, and it’s very sensitive to sort order. three.js can sort discrete objects, but sorting each blade of grass at any framerate won’t scale, and so (assuming you merge blades or use instancing as perf would require) I’d expect to see visual problems pretty quickly.

By contrast alpha test (also called “clip” or “mask”) materials are opaque and don’t suffer from sorting issues, so you can optimize with merging or instancing without causing problems. Another good option that may be available eventually would be hashed alpha testing.