Painting the meadow

The picture

It looks rich but it isn't busy. Every distance gets its own treatment, and the far side is mostly big, calm shapes. Our game, by contrast, drew the same kinds of detail at every distance: the far side looked speckled where it carried detail and flat where it didn't.

Reading the picture

Far side: crisp shapes, few colours

Middle distance: light and shade, flowers grouped by colour

Beyond: fewer colours, merged darks, blue haze

Near: big flowers in a massed bed, flat shading

• Detail gives way to shapes, never to noise and never to nothing. Up close there are single cosmos. In the middle distance there are dashes of colour. Far off there are beds, fields and paths, drawn crisply but with almost no texture.
• Flowers follow the layout. On the far side they sit in beds along field edges and paths, not across the fields. In the middle distance they come in patches of one colour.
• Light and shade make the big shapes. A dark green slope in shade sits against lime slopes in sun, and that contrast does most of the work of showing depth.
• Quiet areas sit between busy ones. Plain lime stretches separate the clusters, and the cream paths lead the eye.
• Colours are soft. There are no pure primaries, and far colours lean toward the blue of the haze.

Detail by distance

Shipped games got here the hard way:

• Breath of the Wild first drew every plant in full detail across the map and found it "cluttered and messy". The fix was to simplify things with distance, treating near, middle and far differently, the way a painting leaves things out.
• Sea of Thieves had the rule "suggest structure and detail rather than define it" and removed granular noise. Their test was to blur the image and check that the scene still reads.
• Ghost of Tsushima stops drawing blades at range and shows an artist-painted ground texture in their place. It deliberately avoided letting fields of red spider lilies fade to plain green in the distance.
• Genshin Impact gives each grass clump the colour of the ground beneath it, so near and far stay one colour.
• Fortnite swaps in merged, simplified versions of its towns only beyond about 300 m, outside the range players fight at. Our whole world sits inside that range. So the calm has to come from how the far ground is painted, not from cheaper geometry.

That gives a working rule: at distance d, nothing smaller than about d/30 shows as a mark of its own. At 150 m that's 5 m. A flower bed survives as a shape. A 1.5 m clump becomes part of its drift's colour. The flower map holds clumps; read at a coarser, blurred level with distance, it gives exactly that.

Before: every clump drawn at every distance

After: clumps blur into their drifts with distance

Grass and flowers

Flowers now grow in clumps a metre or two across, one kind to a clump, more often in the drifts, with open grass and the odd single flower between. Heads face the Heart, each tipped its own way. Grass blades take the ground's colour, so the ring where they stop doesn't show. What the research adds:

• Plants clump in nature, and rare ones clump more. Seeds fall near their parent, so offspring gather around it. Across 1,768 tree species, clustering was the norm, and rarer species clustered more than common ones. In practice that means big, soft drifts for the common flower and small, tight clumps for accents.
• One colour per field or drift. Ghost of Tsushima's art director: "flood it with ferns first, like make that be the big read." Ghost of Yōtei's: "we might add only white flowers… but avoid mixing too many colors."
• Placing many species without overlap. Horizon Zero Dawn turns painted density maps into plants with a fixed pattern of thresholds per cell. It stacks species so each cell picks at most one, and places over 100,000 objects for about a quarter of a millisecond of GPU time. Our grid can do the same: one threshold per cell, the species densities stored in the flower map.
• Thin with distance, enlarge what's left. Ghost of Tsushima doubles the size of its distant grass tiles while keeping the blade count. Fortnite's Nanite foliage enlarges the remaining leaves as others are removed. Either way, coverage holds instead of going bare at the edge.
• Strokes lie along the ground, never upright on screen, and you never see where grass meets the ground. Wind moves in layers out of phase. One wind field can drive the blades and a slow brightness ripple on the far ground, so gusts read across the world.

Blades

Close up, blades used to read as sharp, dark spikes. Each was a long triangle, widest at a darkened root, so wherever ground showed between blades it left a dark wedge. Ghost of Tsushima's grass and the write-ups that followed it point to fixes that cost nothing or next to nothing:

• The ground's own colour at the root, not a darker one. Angelo Pesce faded out the root darkening in Call of Duty's grass because "it broke all the times we can clearly see the ground."
• The root starts under the ground, so no hard line shows where blade meets ground.
• A strap, not a spike. Narrower at the root, fullest a third of the way up, then tapering, with the same seven vertices.
• Rounded by shading. Ghost of Tsushima tilts each blade's normals outward across its width for "a more natural rounded look", which "is a lot cheaper than adding more verts". Ours darkens one half of the blade slightly, as if it were folded down the middle.
• No needles. A blade seen nearly edge-on is widened a little across the screen, as Ghost of Tsushima does, but not one seen exactly edge-on, where it would cross itself.
• Brightness by clump, not blade by blade, which only made speckle.
• No ring following you. Where the blades stop wanders with the ground, from about 10 to 16 m, and each blade stops at its own distance, shortening over the last third. Beyond them, ground seen at a low angle takes on the colour of the blades' upper halves, which is what a field of grass shows from the side.
• Farther grass is a second tier. It has half as many blades, each twice as wide and a little shorter, so the cover holds for a quarter of the count, as Ghost of Tsushima and Outerra do. It runs from the edge of the first tier out to wherever the "Plant reach" slider sets. Flowers reach half as much farther, since past about 30 m a flower is smaller than the distance rule allows. At 2× reach the plants cost about 2.5 times as much to draw, mostly because at eye level the far blades stack up behind one another.

Before

After

Heads

The picture's cosmos have eight broad petals that just meet. Each petal is a little its own length and shade, paler at the tip and deeper toward a warm yellow disc. Ours had thin, deep-cut petals stamped out identically, 13 of them on the white ones. Now every flower has five or eight broad petals with a scalloped tip and a slightly uneven outline, and each petal gets its own length and shade. Heads are about 1.4 times as wide, 13–22 cm across, and grow a little sparser to make up for it. Stems take the grass's colour, so they no longer read as pins. In the band the heads are bigger still and crowd together, the way the picture masses its flowers.

Before

After

Fields, paths, trees, clouds

Inside a sphere, the far side is seen from above. A point an angle φ round the world is seen from φ/2 above its own horizon (the sight rule on Landscape). Anything more than a quarter of the way round is seen from within 45° of straight above, and the opposite point straight down. The light sits at the centre, so every shadow falls straight beneath what casts it. Together these mean that painting the far side top-down into the ground map, trees and shadows included, is geometrically right, not a cheat.

• Fields. Irregular cells laid out on the sphere, the large ones split into parcels across their long side. Each parcel gets a colour from the region's palette and, sometimes, crop stripes along its length, with hedge bands at the edges. They're worked out per texel when the painter runs, so cube faces don't show seams.
• Paths. Routes between neighbouring towns found by a shortest-path search, where following field edges is cheap and crossing fields costs more. The route is then smoothed into curves and drawn from a distance field: a little wobble in the width and a worn centre. Paths walked by both routes can merge, the way real desire paths do.
• Flower beds. Along field edges, paths and the band, which is where the picture puts its colour.
• Trees in three tiers. Near you, leaf cards shaded as if they were one sphere, which gives the soft round canopy, with alpha-to-coverage edges and two-level wind. In the middle distance, flat stand-ins pre-rendered from every angle above (Fortnite uses these for its trees, and there's a three.js port). Far off, canopies and their blob shadows painted into the ground map.
• Clouds. Flat cards in two tones, lit and shaded, with soft edges. Raymarched clouds are out. Clouds overhead show their shaded undersides; far-side clouds show their lit tops. Their shadow on the land is a small coverage map read in the cloud's own direction: one texture fetch.

Light and shade

"Light is what decides everything in animation art," says Takumi Tanji, Makoto Shinkai's art director. Painters keep large areas of mid-value shade so that the lit patches stand out. Our ground is lit almost evenly: the light sits at the centre and there are no hills yet. So the picture's biggest device is missing.

Relief will bring slopes that face away from the light. Until then, cloud shade can make the big shapes. The test below uses soft patches drifting with the wind that turn the land a deep blue-green, not grey. That matches Blue Protocol's rule that shadows shift hue rather than just darken.

Cloud shade off

Cloud shade at 80%

• Far means fewer colours. Distant grass is grass mixed with the sky's colour, and the shadows in it are a darker sky colour.
• Muted, never primary. Hayao Miyazaki asked for "subdued but beautiful" colours. Ghibli background painter Nizo Yamamoto mixes four paints to dull one bright one.
• One humidity control. Haze density, edge softness and glow belong together.

A starting palette to test. These colours are a proposal, not from any one source:

Light brighter than white

In the picture the whites (cosmos, clouds, the rabbits) glow a little into what's around them, and that's much of why they stand out. The frame is now drawn into a buffer that can hold values brighter than white, and only those glow. White petals reflect more of the Heart's light than the screen can show, and the odd blade tip catches it toward you. Greens stay below white, so the meadow itself never glows.

• Dense near the source, then a quick fall-off. One wide blur sits on top of the picture like fog. Six blurs of doubling width stacked together, the narrow ones strongest, stay bright close to the source, the way light effects in cel animation did ("Dangerous Light").
• The colour shifts outward. The narrow blurs keep the light's warm white; the wide ones lean toward the sky's cyan, as film bloom does, because blue light scatters more. Only very hot light, such as muzzle flashes, blasts and the Heart's core, gets the orange fringe film puts round its brightest highlights.
• Brighter than white burns toward white, so a hot core reads as light rather than as a flat colour.
• Cheap. The blurs run at half size and smaller, with five taps on the way down and eight on the way up: the "dual filter" made for mobile GPUs. In a software-rendering test the whole pass cost about 4% of drawing the world.

Glow off

Glow 1×

Strokes and filters

Nothing in the picture is beyond the engine. three.js is a thin layer over WebGL, and most of what's on screen already comes from shaders we write. What looks rendered rather than painted comes from choices made so far: crisp outlines, flat fills, identical copies, polygon spikes. The real limits are three. Each effect must fit in a fraction of a millisecond. Marks must stay put as you move, which a painting, being one frame, never has to manage. And players must stay readable.

• Strokes belong to the ground, not the screen. Painting the screen afterwards makes the texture swim as you move. Strokes fixed to the ground at a few scales, faded so they keep a constant size on screen, stay put and cost almost nothing.
• Every stroke direction on a sphere has a flaw. A smooth direction field must pinch or swirl somewhere: the hairy ball theorem. Our wind blows round an axis, so its two still points belong under a gate or at a landmark.
• Screen filters finish the picture; they don't make it. The frame already passes through one full-screen pass, the light, and colour grading, outlines and chromatic aberration can join it cheaply. A painterly filter such as Kuwahara is heavier: the anisotropic version ran at about 12 frames a second at DVD size on a 2008 graphics card, and its strokes slide across the world as you move. Worse, a far-off player a few pixels wide falls inside the filter and gets averaged into the meadow. So it's worth testing only with players kept out of it, and with the frame readout watching.
• Edges by MSAA and alpha-to-coverage, which the game already uses. Temporal anti-aliasing blurs strokes and outlines, so we avoid it.

Keeping players readable

A softer, painted world must not hide people. The haze already keeps its amount, so a target 120° away keeps about half its contrast (Landscape, Haze as sky). The anime games add two things:

• Characters get their own lighting, separate from the scenery (Guilty Gear Xrd gives each character its own light; Genshin Impact renders characters and scenery separately).
• An outline of constant width on screen (Blue Protocol). Sable fades the outlines of its scenery with distance; ours must stay on players at any range.

The plan

The research boils down to a handful of rules, each with a home in the code:

Most of the look is baked, so the budget per frame stays small. That means a texel or two of the ground and flower maps per pixel, one cloud-shade fetch, the plants near you, the light pass, and later the tree stand-ins. Real timings still have to come from real hardware, through the frame readout in the pause menu.

In order

1. Fields, paths and flower beds in the painter. This is the biggest change to the far side, and it gives the routes layer its first real content.
2. Trees, painted far off with their shadows, as cards near you, and later as stand-ins in between.
3. Clouds as flat two-tone cards, with their own shade in place of the noise test.
4. Relief: low hills, so slopes catch and lose the light.
5. Strokes at a constant screen size and a palette pass, checked by blurring screenshots.
6. Players' outline and lighting.