This article will guide you through how to create billboarded folage in Unreal Engine 4. That is, foliage which is a simple quad repeated many times, all of which always face the camera. I will also discuss why this is a good idea (along with some of the potential downsides, too) and the performance implications.
Foliage in Unreal Engine 4
By default, Unreal Engine 4 supports foliage via its foliage editing tool. This tool allows placement if instanced static meshes (static meshes meaning non-skeletal models, in more generic terms). Each of these foliage assets can be drawn many thousands of times onto the map, each with instance-specific parameters, e.g. rotation, location, etc. For relatively small (e.g. under 10,000) assets, which are simple (e.g. less than 100 polygons) this generally performs OK with shadows and good quality lighting on the foliage, so long as you set a reasonable culling distance so that the graphics hardware doesn't try to draw all 10,000 instances at once. For relatively large amounts of foliage (e.g. entire forests) this can pose problems. Let's discuss a scenario which happened in my game to clarify. To the north of the map is a large forest, and the player may enter the southern edge of that forest. Everything beyond the southern edge of that forest is outside the playable area, but still needs to be rendered and needs to give the impression of a huge, impassible forested area. If we were to render the entire forest using even low-poly versions of the trees, this can and does cause a performance issue for players with lower end hardware. The solution is to create a billboard.A billboard? Isn't that something to do with advertising?
Out of the box, Unreal Engine 4 supports a component known as a Billboard Material Component. These are great for one-off or small numbers of static meshes placed into the level, as shown in the example above. Unfortunately they cannot be used for the foliage tool, as the foliage tool only accepts placement of static meshes and to make use of the Billboard Component, it must be contained within an Actor which is not a supported type for this tool. So, we must make our own Billboard Material. The base instructions on this to get you started can be found on Epic's documentation in a section that discussed stylized rendering (this is obscure enough that many may not find it). I will not reproduce Epic's content here, however I will provide a screenshot of my own material, based upon theirs, and discuss its creation and how to use it in your game. Start out by importing some simple 2D textures which represent your billboarded sprite. For this, I took screenshots of my actual tree model, and made the backgrounds transparent. This makes them look identical to the actual high poly models, at any reasonable distance. It is important to have some variety here, for my game I chose four different views of the same tree, so that they look different when displayed: [table][tr] [td][sharedmedia=gallery:images:7066][/td][td][sharedmedia=gallery:images:7067][/td][td][sharedmedia=gallery:images:7068][/td] [td][sharedmedia=gallery:images:7069][/td] [/tr][/table]Preparing the material
The next step in creation of the billboards is to create a material which will ensure that the verticies of your static mesh face the camera. This works because the static mesh we will use will be a simple quad built from two triangles (more on this later). Go into Unreal Engine's Content Browser, right click and choose to create a new Material. You should create a material which has a blend mode of Masked, Shading model of Unlit and is Two Sided: [sharedmedia=gallery:images:7029] You may then place your nodes in the material's graph pane. These are similar to the one on Epic's documentation, however the parts missing from their documentation are shown here in my implementation (click the image to enlarge): [sharedmedia=gallery:images:7030] There are some important things to note about this material. As discussed already the material adjusts the position of its verticies to face the camera. It does this via the nodes connected to the World Position Offset. The 'Custom' node, within the billboard effect section, contains some custom HLSL code which is used to calculate the correct rotation of the quad. The content should read as follows, with the 'Inputs' set to one value named 'In' and the output type as "CMOT Float 2" (note, this differs slightly from Epic's version, which had broken parameter names):float2 output;
output = atan2 (In.y,In.x);
return (output);
The nodes attached to the PivotPosition ensure that the quad rotates around its origin, and is translated to world space so that the coordinates make some sense.
Note that this material is not intended to be used directly. The Texture has been promoted to a Material Parameter, which can then be used by material instances.
You should right click on this material in the content browser once you have saved it, and make multiple instances of it, each of which uses the correct texture that you want to use as a billboard. This will prevent code duplication and is slightly more efficient on resources.
[sharedmedia=gallery:images:7031]
Now we have defined the material, we can move on to loading a simple quad into Unreal Engine 4, which can be used as the static mesh for the foliage tool.
Creating and loading the mesh
All we need in terms of a model for the billboard is a simple quad, built from two triangles. You can create such an asset in Blender, or alternatively I have attached mine to this article, it may be downloaded below and used freely in any project. When you import the quad, be aware you may need to adjust the rotation and translation of the quad so that it sits squarely initially facing the camera, and on the surface of your terrain. If you do not do this, then your material will face sideways, or upside down (or both!) and the material will translate its position to always face in the wrong direction! For example, to import my quad, you could use:- Roll: 270 degrees
- Pitch: 180 degrees
- Yaw: 0 degrees
- Import Uniform Scale: Adjust this to suit your map, the quad is quite large.
- Import translation, Z axis: Adjust this to suit your terrain. I used 190 units.
The problem I have with this technique is that the trees look like shit. This would be acceptable in 1998, but not in 2015. You also run a risk of losing out on a lot of the foliage specific rendering code.
My recommendations:
1) Use distance based levels of detail. There's no reason to render a 10,000 polygon tree if it is going to be very small on screen because it is really far away. There are third party tools which can be used to automatically generate various LOD's for each static mesh. This is cheaper than paying for extra artist time.
2) Look carefully at the geometry of your foliage. For the lowest LOD, you could simply get away with 2 textured quads (works better for pine trees which are viewed from the side). You could also take advantage of the super high tech "sprite imposter" tool within UE4 which allows you to create sprites out of a static mesh and still light them properly.
3) GPU's are really fast at rendering triangles. Especially when they're in instanced batches. You're not going to get a huge performance change by rendering fewer triangles. But you will get a performance boost out of using less complex shaders. So, look at the shader complexity and instruction count, and actually run the performance diagnostic tool within UE4 before trying to make any optimizations. (use Ctrl + Shift + Comma)
You can get beautiful looking foliage within UE4 if you carefully manage your scene with LOD's, culling, shader complexity, instancing, and limiting point light sources.