← Devlog

Devlog · October 14, 2026

Grass, and the three things that made it work

The new ground cover is live on Savannah One. Three things made the difference between grass that reads as grass and grass that reads as a field of paper cards.

The walkthrough: Savannah One, the river, and the new live ground cover. Watch it on YouTube.

My video walkthrough, Making a World Feel Alive in Your Browser, showed the new ground cover on Savannah One. The grass there is built from cards: flat rectangles with a picture of grass on them, scattered across the terrain. That is an old, honest technique, and it is easy to do badly. Here are the three things that made ours work, and one bonus.

An illustration titled Grass cards: three tricks, in three panels. Panel 1, The cost is the empty space: a grass card drawn over a checkerboard of transparency, with a dashed gold outline trimmed tightly around the blades; the caption says every pixel of the rectangle is shaded, even the see-through ones that get thrown away, and that stacking hundreds of cards multiplies the cost. Panel 2, Stagger the bases: two patches of grass on brown soil. On the left, the blades all run off the bottom edge in a hard straight line, marked wrong with a red cross. On the right, the bases sit at different depths with the roots darkened toward the soil color, marked right with a green check. Panel 3, Shear, don't tilt: three cards on a rising slope. An upright card is buried on the uphill side and floats on the downhill side (wrong); a card tilted to match the ground leans the grass sideways (wrong); a sheared card becomes a parallelogram that hugs the slope while the blades stay upright (right). The caption says to move each corner straight up or down to the ground, so the card becomes a parallelogram and vertical stays vertical.
The three tricks at a glance (tap for full size)

1. Optimization is 90% about the alpha

Grass cards are mostly empty space. Each card is a rectangle with a few blades painted in, and the GPU pays for every pixel of that rectangle, including the transparent ones it throws away. Stack hundreds of cards behind each other and you pay that cost many times over for the same spot on screen. That is called overdraw, and it is the real bill.

When we measured, roughly 60% of the pixels the grass shader worked on were transparent corners that got discarded. So most of the work went there: a simpler material, fewer cards as distance grows, and thinning the field wherever the eye won't notice. On a laptop's integrated graphics, that is the difference between grass you can afford and grass you can't.

The next big step is trimming the cards to the shape of the grass inside them, so the GPU stops shading empty air. That is the dashed gold outline in the first panel.

2. Stagger the bottoms of the cards

If every blade on a card runs straight off the bottom edge of the texture, you get a hard horizontal line wherever the card meets the ground, and the eye finds those lines instantly. Instead, the blade bases sit at different heights inside the card, as if you were looking back through rows of grass in depth. The bottom edge goes soft, and the grass seems to come out of the ground instead of standing on it.

Darkening the roots toward the soil color helps too. It hides the seam and reads as shadow down among the blades.

3. Shear the cards to fit the slope

Terrain is almost never flat, and a flat card on a slope has two bad options. Keep it upright, and it cuts into the hill on the uphill side, so the bottom is chopped off at an angle. Tilt it to match the ground, and the grass leans sideways. Plants don't grow that way, and you notice.

The fix is a shear rather than a rotation. Each bottom corner of the card drops to the ground height under it, and the top moves by the same amount. The card becomes a parallelogram that hugs the slope, and because points only move straight up or down, every blade still points straight up. It is like squishing putty instead of tipping a board.

It's a small piece of math, and it made the ledges and sideways grass disappear.

Bonus: break the grid

Every card gets its own random rotation, size, color variation and a slightly different phase in the wind. The eye is very good at spotting repetition, and that randomness is what keeps it from noticing the cards.

See it live, and what's next

Open Savannah One in pOqpOq World and walk around (sign in with Google first): the link turns the grass on. Look along the ground where a slope rises, and at the places where the grass meets bare soil. That's where the second and third tricks earn their keep.

Next up: brushes, so sim owners can paint where grass grows.

— Allen