Painting the meadow

The picture

The picture looks rich and still feels calm, because each distance is painted in its own way and the far side is mostly big, quiet shapes.

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

• With distance, detail turns into shapes: single cosmos up close, dashes of colour in the middle distance, and far off crisp beds, fields and paths with almost no texture.
• Flowers follow the layout, in beds along the edges of fields and paths.
• Plain lime stretches separate the busy clusters, and the cream paths lead the eye.

Detail by distance

• Breath of the Wild first drew every plant in full detail across the map and found it "cluttered and messy", so the team simplified things with distance, the way a painter leaves things out.
• Sea of Thieves removed fine-grained noise under the rule "suggest structure and detail rather than define it", and tested each scene by blurring it to check it could still be read.
• Ghost of Tsushima replaces far grass blades with a ground texture painted by an artist, and keeps its fields of red spider lilies red even in the distance.
• Fortnite merges and simplifies its towns only beyond about 300 m, farther than players fight. Our whole world fits inside that range, so a calm far side has to come from how we paint the far ground.

From these we take a working rule: at distance d, nothing smaller than about d/30 shows as a mark of its own. At 150 m the limit is 5 m, so a flower bed still shows as a shape and a 1.5 m clump blends into its drift's colour. The shader reads the flower map, which stores the clumps, at a blurrier level the farther away the ground is.

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 and more of them in the drifts, with open grass and the odd single flower between. Each head faces the Heart, tipped a little its own way. Grass blades take the ground's colour, as in Genshin Impact, so you can't see the ring where they stop.

• Plants clump in nature, and rare ones clump more. Seeds fall near the parent plant, and in a study of 1,768 tree species most grew in clusters, the rarer species more tightly. So the common flower gets big, soft drifts and the accents get small, tight clumps.
• One colour per field or drift. Ghost of Yōtei's art director: "we might add only white flowers… but avoid mixing too many colors."
• Placing many species without overlap. Horizon Zero Dawn compares density maps painted by artists with a fixed threshold in each grid cell, stacking the species so each cell picks at most one, and places over 100,000 objects in about a quarter of a millisecond of GPU time. Our grid can do the same with the species densities in the flower map.
• Strokes lie along the ground and never stand upright on the screen.

Blades

Close up, our blades used to look like sharp, dark spikes, because each was a long triangle widest at a darkened root. The fixes cost little or nothing:

• The root has the ground's colour and starts under the ground, so no line shows where blade meets ground. 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."
• A strap shape, narrow at the root, widest a third of the way up and tapering to the tip, still with seven vertices.
• Rounded by shading. Ghost of Tsushima tilts each blade's normals outward across its width, 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 would shrink to a thin line, so we widen it a little on screen, as Ghost of Tsushima does, except exactly edge-on, where widening would make it cross itself.
• Brightness varies by clump, because giving each blade its own brightness only made speckle.
• No ring following you. Blades stop between about 10 and 16 m, at a distance that changes across the ground and differs for each blade, and they shorten over the last third. Past them, ground seen at a low angle takes the colour of the blades' upper halves, which is what a field of grass shows from the side.
• Farther grass is a second tier, with half as many blades, each twice as wide and a little shorter, so the ground stays covered for a quarter of the count, as in Ghost of Tsushima and Outerra. Flowers go only half as far past the first tier, because 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.

Before

After

Heads

The cosmos in the picture have eight broad petals that just touch, each a slightly different length and shade. Ours had thin, identical, deeply cut petals, 13 on the white flowers. Now each flower has five or eight broad, scalloped petals of varying length and shade, on heads 13–22 cm across, about 1.4 times as wide as before and slightly sparser. Stems take the grass's colour, so they no longer look like pins. In the band the heads are bigger still and crowd together.

Before

After

Fields, paths, trees, clouds

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

• Fields are irregular cells on the sphere, the large ones split across their long side into parcels. Each parcel gets a colour from its region's palette, sometimes crop stripes along its length, and hedge bands at its edges. The painter works them out texel by texel, so no seams show between the cube map's faces.
• Paths follow routes between neighbouring towns, found by a shortest-path search in which following field edges is cheap and cutting across fields costs more. Each route is smoothed into curves and drawn from a distance field, with a little wobble in its width and a worn centre. Two routes that share a stretch can merge, the way real desire paths do.
• Trees in three tiers. Near you, leaf cards shaded as if they were one sphere give a soft, round canopy, with alpha-to-coverage edges and wind at two levels. In the middle distance a tree is a flat stand-in pre-rendered from every angle above, as Fortnite does (there is a three.js port). Far off, canopies and their round shadows are painted into the ground map.
• Clouds are flat two-tone cards with soft edges, and we won't raymarch them. Clouds overhead show their shaded undersides, and those over the far side show their lit tops. Since shadows fall straight down, each point of land looks up its shade in a small map of cloud cover: 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, because the light sits at the centre and there are no hills yet.

Until low hills add slopes that face away from the light, shade from clouds can make the big shapes. The test below uses soft patches that drift with the wind and turn the land a deep blue-green, following Blue Protocol's rule that a shadow shifts hue as well as darkening.

Cloud shade off

Cloud shade at 80%

• Far away there are fewer colours: distant grass is grass mixed with the sky's colour, and its shadows are a darker sky colour.
• Muted colours and no primaries. Hayao Miyazaki asked for "subdued but beautiful" colours, and Ghibli background painter Nizo Yamamoto mixes four paints to dull one bright one.

A starting palette to test, chosen by us:

Light brighter than white

In the picture the whites (cosmos, clouds, the rabbits) glow a little into what's around them, which is 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 reflecting the Heart's light, and the odd blade tip that catches it. Greens stay below white, so the meadow never glows.

• Dense near the source, then a quick fall-off. One wide blur lies over the picture like fog, so we stack six, each twice as wide as the last and the narrow ones strongest, which keeps the glow bright near the source, as in cel animation ("Dangerous Light").
• The colour shifts toward the edge. The narrow blurs keep the light's warm white and the wide ones lean toward the sky's cyan, as bloom on film does, because blue light scatters more. Only very hot light (muzzle flashes, blasts and the Heart's core) gets film's orange fringe.
• Very bright colours fade toward white, so the core of a hot light looks white-hot.
• Cheap. The blurs run at half size and smaller, reading five pixels on each step down and eight on each step up: the "dual filter" designed for mobile GPUs. In a software-rendering test the whole pass took about 4% of the time it takes to draw the world.

Glow off

Glow 1×

Strokes and filters

three.js is a thin layer over WebGL, and most of what's on screen comes from our own shaders, so the engine can draw everything in the picture. What looks rendered comes from our choices so far: crisp outlines, flat fills, identical copies and spiky polygons. The real limits are three: each effect must fit in a fraction of a millisecond, marks must stay in place on the world as you move, and players must stay easy to see.

• Strokes belong to the ground. Strokes painted over the finished screen image slide across the world as you move. Strokes fixed to the ground at a few scales, and faded between scales to keep a constant size on screen, stay in place and cost almost nothing.
• Any field of stroke directions on a sphere has a flaw. The hairy ball theorem says it must pinch or swirl somewhere. Our wind blows round an axis, so its two still points should sit under a gate or at a landmark.
• Screen filters add the finish. Colour grading, outlines and chromatic aberration can join the full-screen light pass cheaply. A painterly filter such as Kuwahara costs much more: the anisotropic version ran at about 12 frames a second at DVD size on a 2008 graphics card. Its strokes also slide across the world, and it averages a far-off player a few pixels wide into the meadow, so it's only worth testing with players left out of it and the frame readout on.
• Smooth edges come from MSAA and alpha-to-coverage, which the game already uses. We avoid temporal anti-aliasing, because it blurs strokes and outlines.

Keeping players readable

A softer, painted world must not hide people. The haze is already tuned so that a target 120° away keeps about half its contrast (Haze as sky, on Landscape). Anime-style games add two things:

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

The plan

Most of the look is computed ahead of time and stored in maps, so each frame does little: 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 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, the biggest change to the far side and the first real content for the routes layer.
2. Trees in their three tiers.
3. Clouds 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.