Phaser home
Log inCreate a game

← Expansion packsLook

Phaser AE

3D Grass

Pro packv3.0.0-43DLook

Real instanced grass: a dense carpet of individual blades around the camera, and a far ring of billboard clumps and flowers carrying the field to the horizon. It follows the camera, so a field of a few hundred thousand blades costs the same whatever the size of the world.

This is a Pro pack. Upgrade to Phaser Pro to use it in your games.See Phaser Pro →

Released October 14, 2026 · updated October 20, 2026

3D Grass: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

What it does

No blade meshes are stored. On the WebGPU backend a compute pass plants one candidate blade per cell of a lattice round the camera every frame, sets it on the terrain from a baked height texture, culls it against the ground mask and the view, and appends the survivors to a buffer that is drawn in a single indirect draw. The vertex stage builds each tapered, wind-bent blade from nothing but its index. The lattice snaps to whole world cells, so blades stay pinned to their places in the world and never swim as the camera moves. On WebGL2 the lattices are generated on the CPU and drawn as instanced strips and clumps, with the same masks, wind, tint and textures.

There are two layers. Geometry blades fill the near field, thinning and shortening towards the edge of their window until they fade out, and billboard cards of procedural grass clumps fill everything from there to the fog. One dial, dynamic, sets the mix between them and is the performance lever. Because you only ever see the wedge in front of you, the blade window can also be slid forward and narrowed, sending the same budget of blades further ahead.

You tell the grass where it may grow with a height function, a mask function for slopes, water or paths, and an optional ground colour, and all three are baked into textures once, so an expensive rule costs nothing per blade. Flowers, from poppies and daisies to cornflowers and buttercups, are baked into the clump textures and gated by low-frequency noise, so they bloom in drifts. Blades and cards share one lighting function, which keeps them in step at the handover and stops double-sided blades turning black when you look towards the sun or over a hill.

Features

  • Instanced blades — a dense near field built in the vertex stage with no vertex buffer, in one indirect draw on WebGPU.
  • A billboard far field — a much larger ring of grass-clump cards out to the fog, cross-fading with the blades.
  • World-pinned — the lattice snaps to world cells, so grass never swims or flickers as the camera moves.
  • One performance dial — dynamic mixes blades and cards, and viewBias and fanAngle fan the blade window forward.
  • Flower drifts — procedural poppy, daisy, cornflower, buttercup, campion and knapweed clusters baked into the cards, with flowerAmount for how much of the field blooms.
  • Masks baked once — groundAt, allowAt and groundColorAt become textures, with refresh() after the terrain changes.
  • Live wind and colour — wind strength, direction and speed, and a dryness dial towards hay yellow, all live.
  • Lighting that holds up — wrapped diffuse and sky-biased ambient, so blades never go black against the light.
  • WebGPU and WebGL2 — compute-spawned grass on WebGPU, and a CPU-generated path on WebGL2.

Good for

  • Open-world and exploration games, where walking through a meadow sells the place.
  • Rolling countryside for driving, flying low or riding, with grass to the horizon.
  • Wildflower meadows and gardens, with blooms in drifts.
  • Lakesides and coasts, with a waterline mask so grass stops at the shore.
  • Parks and paths, with a footpath kept clear by the mask.
  • Late summer and autumn scenes, with the dryness dial turning the field towards hay.

Make it yours

build takes the near field's span and cell count, the blend dynamic, blade height and width, the far ring's span, cells and card size, the number of flower variants and how much blooms, dryness, wind strength, direction and speed, the ground tint and grass colour, the view fan, the terrain's size and resolution, and the three ground functions. Wind, flowers, dryness, the view fan and visibility can all change live.

Two very different fields: a lush green meadow, dense blades with dynamic high, a gentle wind and drifts of poppies and daisies, kept off a footpath and out of a lake by the mask; and a dry upland on a lighter budget, mostly cards with a narrow forward fan, the dryness dial most of the way to yellow, no flowers and a strong gusting wind.

Works with

  • render-3d — required: the grass shades from the renderer's own camera and draws into its depth.
  • terrain-3d — the heights and masks the grass grows on.
  • forest-3d — trees planted over the same terrain.
  • water-3d — water whose edge the grass can stop at through the mask.

Good to know

  • Grass grows only within the terrain, never past its edge.
  • There is no collision or trampling: nothing that walks through the grass bends it.
  • Grass takes no shadow, by design, so a camera-following shadow box does not drag a dark patch around with you.
  • On WebGPU the reported blade and card counts are estimates from the lattice; on WebGL2 large lattices cost CPU time as well as GPU time.
  • Colour changes beyond the dryness dial, such as seasons, are not built in.

More Look packs

Show all →