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.- 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.
Once you have imported the quad, name it something sensible (I named mine TreeBillboard_Quad_1) and assign it your billboard material.
You could now place this into your map, and observe how as you move the camera, the quad will always face your viewpoint. Alternately, and more sensibly, you can now drag this static mesh into the foliage tool, and start placing it:
[sharedmedia=gallery:images:7033]
When you add the mesh to the foliage tool you should be sure to disable the Align to Normal and Random Yaw options, as both of these rotate your mesh and will break the effect put in place by the material.
Be aware that you should always place this mesh outside the playable area, where the player cannot reach it and attempt to walk behind or at the side of it. If they do so, the illusion will be broken and it won't look good at all.
Once you have placed many thousands of these trees they will start to look like a forest. The quality of your result is directly related to the quality of the initial textures you used:
[sharedmedia=gallery:images:7034]
Appearance
Note that I am using a poor quality tree model in my game (i am restricted to what i can find for free on opengameart) and as previously stated the quality of the result is directly related to the quality and detail of the mesh you take images of, and the resolution of the image you use. Below is a side by side comparison of shaded, lit trees vs unlit billboards: [sharedmedia=gallery:images:7043] Below is an image of the trees at the resolution and size they are designed to be viewed at. The view below contains a mix of meshes (at close range) and billboards (at distant range). It is difficult to tell the two apart, and with high quality images and meshes, the effect would be far superior: [sharedmedia=gallery:images:7042]Performance
As we are only drawing two triangles for each tree, the performance of this solution is more than acceptable on modern hardware. I was able to place enough trees to fill my map without noticable slowdown on my mid-range graphics card (AMD R9 270X). Although I used this for trees, the same approach could be used for grass, reeds, or any other smaller plants that the player might be close to, but wouldn't notice the flatness. It is also difficult to properly light and display shadows for billboards. In my game, I have turned off shadows for the billboard meshes. As they are usually placed very far from the camera, the player should not notice this. If they get too close, all bets are off. It is worth noting however that the performance of this solution is not perfect. By using the 'Custom' node in our material we prevent Unreal Engine 4 from making various optimisations to our shader. This has not been noticable for me, but your mileage may vary. If you are unsure, always profile your game.Alternatives
As an alternative to this approach you could consider using low-poly LOD chains, which you can generate using something like Simplygon or Meshlab. You can also use imposters as foliage. You can also combine all three techniques, having a high poly tree model (for example from speedtree) and the lowest LOD in your LOD chain using this method to save on complexity when the tree is so far away shadows and detail would be indistinguishable from a flat sprite.Conclusion
I hope this has been a useful article on how to render many pieces of foliage without breaking the bank in terms of your GPU budget. There are many ways of rendering foliage of which this is just one. If you have any questions, improvements or other feedback as always please feel free to comment below.Article Update Log
17 Dec 2015: Updated to add alternatives section and add further detail to performance section. Added apperance section based on discussion in article comments. 26 Nov 2015: Initial release
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.