Billboarded Foliage in Unreal Engine 4

Published June 08, 2016 by Craig Edwards, posted by Brain
Do you see issues with this article? Let us know.
Advertisement

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. squareplane.zip 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. 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

Cancel Save
0 Likes 10 Comments

Comments

slayemin

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.

November 30, 2015 08:03 PM
Kridian

The problem I have with this technique is that the trees look like shit.

I concur. They do look like shit.

Here's the quality bar for trees in UE4. https://www.youtube.com/watch?v=AphIofwFnUU

November 30, 2015 09:14 PM
swiftcoder

I mean, one could clearly use higher-resolution images for the trees, and some form of normal/relief mapping can make billboarded leaves look a lot better... I don't see that as being a reason to dismiss the technique out of hand.

I would love it if the author could post side-by-side screenshots of their game with and without billboarded trees, to demonstrate how the quality affects the actual game (my guess would be that the billboards are sufficiently far away that the closer polygonal trees catch the users attention instead).

December 02, 2015 11:31 PM
Brain

(my guess would be that the billboards are sufficiently far away that the closer polygonal trees catch the users attention instead).

This is exactly correct. The billboarded trees are so far away that they can't be distinguished from the models.

I am using a poor quality tree model in my game (i am restricted to what i can find for free on opengameart for example and don't have speetree) and as stated in the article 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]
Do these perhaps belong in the article?

December 03, 2015 05:17 PM
Brain

The problem I have with this technique is that the trees look like shit.

I concur. They do look like shit.

Here's the quality bar for trees in UE4. (snip)

Looking at the video these trees are beautiful. There aren't many of them in the scene though. I wonder how powerful your machine would need to be to draw an entire realistic sized forest of them?

Note that as slayemin indicates (as i understand it) you could use this method to have a billboard as the lowest detail LOD in your LOD chain for static mesh trees. This would be best of both worlds in my opinion.

December 03, 2015 05:22 PM
Dave Hunt

Below is a side by side comparison of shaded, lit trees vs unlit billboards:

sml_gallery_171313_1033_654501.png
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:
sml_gallery_171313_1033_253284.png
Do these perhaps belong in the article?

I think they would make a nice addition to the article.

December 07, 2015 02:28 AM
riuthamus

well, part of the problem is that the billboards are not shaded correctly, they do not have alpha on them either. So you are getting a really bad look at what they would look like. Another neat trick you could do is to use this past your clipping plane. Stuff in the background is rarely ever looked at with massive detail and thus can make a great effect for low level scenes that just need something to fill the space. As you get closer remove the billboard with the actual model and walla... problem solved.

December 08, 2015 09:17 PM
slayemin

I am using a poor quality tree model in my game (i am restricted to what i can find for free on opengameart for example and don't have speetree) and as stated in the article 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.


Since you're using UE4, you have full access to all sorts of free content via the market place. Check out the Kite Demo, there's a lot of foliage assets you can use in there.

December 09, 2015 07:59 PM
Brain

Thanks everyone for your feedback, i have amended the article based on discussions here.

If anyone has any further input i would be happy to hear it.

@Slayemin, thanks, I was aware of these assets in the open world demo. They are very large though, and it seems that unless i have a GTX Titan and a monster rig, using this in a game and having many thousands of them isnt something i can get right and get performing well. I would be interested in seeing if anyone has ever used these assets in a well-performing open world game outside the kite demo.

December 17, 2015 03:54 PM
samoth

The concerns about quality are not that big if one uses them correctly (in the very distance, with sufficient quality textures, and with normal information / relief map / whatever), in my opinion.

However, one thing I'd like to object:

Billboards cause a lot of discard/blending/ROP work. So much that actually drawing two triangles is often a very bad idea. It is usually much better to tightly fit a polygon (with anywhere from half a dozen to a dozen vertices) because the extra polygons make zero difference to the GPU whereas discarding or blending the empty pixels is outright killing it. A freely available tool has been around for years, e.g. at the Humus 3d site (particle trimmer).

The importance of emtpy pixels rises with trees in particular, which not only have "holes" in between leaves, but also a thin trunk at the bottom with a big, bulging crown. This overall form doesn't lend to covering a quad of any kind very well. That means about half of the pixels you shade are being discarded (or worse, blended). It's even more a factor when you say "millions, not thousands".

March 23, 2016 02:36 PM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Advertisement