POLYMASON

Billboard trees in Unity

Part of LODs and billboards for low poly models

Past a few hundred metres, a tree is a picture of a tree. A billboard is that picture on a quad that turns to face the camera, four triangles in place of a few hundred, and a forest of them costs almost nothing. This is how to make one and show it in Unity. Billboards are the far end of levels of detail; the levels before them are the LOD Group, the trunk under them gets a collider, and the picture is one material like everything else, which the materials article explains.

The picture

Render the tree straight on against a transparent background, at a size that will be bigger on the texture than it will ever be on screen; 256 pixels tall is plenty for a far billboard. Light it the way the scene lights things, or unlit, since the quad will be lit as one flat surface and shading painted into the picture will look wrong from the other side. For a crossed pair of quads, render the side view too.

PolyMason renders both when you tick billboards at export: front and side PNGs of the tree on transparent backgrounds, and an OBJ of the crossed quads with the pictures mapped onto them.

A quad with a cutout material

The simplest billboard is a quad in the scene:

  1. Import the PNG. On its import settings, set Alpha Is Transparency on, and Filter Mode to Bilinear.
  2. Make a material: in Built-in, Standard with Rendering Mode Cutout; in URP, Lit with Surface Type Opaque and Alpha Clipping on. Put the PNG in the albedo slot. Set smoothness to zero.
  3. Make a Quad, scale it to the tree's width and height in metres, and put the material on it. Set its pivot at the base by parenting it to an empty offset half its height, so it stands on the ground where the tree stood.
  4. Add it as the last level of the tree's LOD Group, before Culled.

A single quad shows its edge when seen from the side. The crossed pair, two quads at right angles, fixes that for a static billboard and is what PolyMason's export is. To turn one quad to face the camera instead, a small script sets the quad's rotation to look at the camera each frame, keeping it upright; that is the classic billboard and reads better for trees than the cross, at the cost of a script per instance.

A Billboard Renderer

Unity has a component for this. A Billboard Renderer shows a Billboard Asset, which holds the picture, the size, and how it is cut into images from different angles. SpeedTree makes these assets automatically; for your own tree you make one in code with BillboardAsset, setting its texture, width, height, bottom offset, image coordinates and the vertex layout, then assign it to the renderer. It always faces the camera, batches well, and needs no script per instance. For a handful of trees the quad is less work; for a forest, the renderer is.

Terrain trees

Trees painted onto a Unity Terrain get billboards for free. The terrain settings have a Billboard Start distance, beyond which every tree becomes a billboard the terrain generates from the model, and a Fade Length for the transition. Terrain trees also get their own LOD handling and a capsule collider. The catch is that terrain trees must be prefabs with a mesh renderer at their root, and the billboard is generated from the model's own look, so a flat-shaded, palette-textured tree billboards well.

Keeping it from looking flat

  • Match the lighting. A billboard lit as a flat surface looks lit from a different direction than the meshes around it. Unlit billboards with lighting painted in, rendered under the scene's light direction, match better than lit ones.
  • Match the colours. Render the picture with the tree's palette, not a placeholder, and at the same exposure the scene uses.
  • Cross-fade the swap. Set the LOD Group's Fade Mode to Cross Fade so the mesh dissolves into the picture rather than popping.
  • Keep the ground contact. The billboard's bottom should sit exactly where the trunk met the ground; a floating or buried billboard is the thing people notice first.

What PolyMason exports

Tick billboards at the export step and the zip includes the front and side pictures on transparent backgrounds, sized from the tree's own bounds, and an OBJ of the crossed quads with a material library that maps the pictures onto them. Drop them in with the tree's levels and add the quads as the last level of the group.

More in this guide

  • LODs and billboards for low poly modelsHow levels of detail work, what triangle counts are reasonable for low poly trees, rocks and buildings, how to make the levels so the swap does not pop, billboards and impostors for the far distance, and the LOD setup in Unity, Godot and Unreal.
  • Unity's LOD Group, set up from separate model filesHow to build a LOD Group in Unity from three separate model files, what the screen-height thresholds mean, the naming convention that makes the importer build the group for you, fade modes, LOD Bias, and how LOD Groups get on with batching and instancing.
  • Levels of detail in Godot 4: automatic mesh LODs and visibility rangesThe two LOD systems in Godot 4, the automatic mesh LODs the importer generates and the visibility ranges you set on nodes, how to control each, fading between levels, and how they work with MultiMesh for a forest.
  • Tree colliders in Unity: a capsule on the trunk, not a mesh on the canopyWhy a tree's collider should be a capsule round the trunk and nothing round the canopy, how to set it up on a placed tree and on a terrain tree, what Generate Colliders on the importer does wrong, and the same in Godot and Unreal.

Or build a tree and see what comes out.