How to create a vegetation billboard texture in Unreal Engine 4
In this article we will talk about how to create a billboard texture of vegetation in the Unreal Engine 4. Such vegetation is a simple multiply multiplied quadrangle, all copies of which are always turned towards the camera. I will try to argue in favor of this approach, talk about potential shortcomings and separately address the issue of performance.
In Unreal Engine 4, by default, there is a built-in tool for working with vegetation called the Foliage tool. It adds cloned static meshes (more generally, skeleton-free models). Each asset with vegetation can be added to the map thousands of times with different settings of rotation, location, etc. for all instances.
With relatively small (up to 10,000 copies) and simple (less than 100 polygons) assets, everything will work fine even with shade and good lighting of plants. But you need to intelligently adjust the clipping distance so that the graphics hardware does not attempt to display all 10,000 copies at once.
')
However, for relatively large clusters of vegetation (for example, whole forests) this can be a problem.
Consider an example from my game. In the north of the map is a large forest, the player can enter it from the south. All that is outside the southern side of the forest is a non-game zone. But it still needs to be rendered to give the player the impression of a vast and immense forest.
If we decided to render the whole forest, even using low poly models of trees, this would lower the performance on weak computers.
In this case billboards come to the rescue.
Unreal Engine 4 in the basic configuration supports the Billboard Material Component . It is well suited for working with single or few meshes in a level, as shown in the example above. Unfortunately, it cannot be used for the Foliage tool, which only supports the placement of static meshes. To use the Billboard Component, it must be inside the Actor class, which is not supported by this tool.
You need to make your own Billboard Material. How to do this can be found in the documentation link here in the section on stylized rendering (some do not immediately find the necessary information, therefore I recommend reading it more carefully).
I will not retell this document. In return, I will add a screenshot of my material created from the documentation and tell you how to use it in the game.
To get started, import simple 2D textures that will act as a sprite with a billboard. To this end, I made screenshots of the tree model on a transparent background. When viewed from a certain distance, they are very similar to high-poly models.
It is important to leave a little variety: I created 4 variants of one tree so that the models did not look the same.
The next step is to create a material that will be responsible for ensuring that the vertices of the static mesh are always facing the camera. As a static mesh, take a quadrilateral formed by two triangles (more on that later).
Go to the Content Browser panel, right-click and create a new Material.
Select the following settings:
You can then place the nodes on the graphic panel of the material. Let's make some important clarifications. The material adjusts the position of the vertices so that they are turned toward the camera. Due to the nodes attached to the World Position Offset, the material adjusts the position of its vertices so that they are turned towards the camera.
The 'Custom' node contains a special HLSL code inside the section responsible for billboard effects. It is needed to calculate the correct rotation of the quadrilateral. The parameters of this node look like this: opposite to 'Inputs', you need to select one value and name it 'In', and opposite to 'Output Type' CMOT Float 2. The documentation describes this differently, but there are incorrect names of the parameters:
The nodes attached to the PivotPosition are responsible for ensuring that the rectangle is transferred to three-dimensional space in accordance with the coordinates and rotates around the original point.
But this material is not intended for direct use. The texture has been converted to a Material Parameter that instances of the material will use.
After saving the material, right-click on it in the Content Browser panel and make several copies. Each of them must use the correct texture of your billboard. So the code will not be duplicated, and resources will be spent more efficiently.
Having defined the material, we load a simple rectangle into the Unreal Engine 4 that will be used as a static mesh for the Foliage tool.
For a billboard model, only a rectangle consisting of two triangles is needed. Create such an asset using the Blender program or download the one that I used. It is available for download at the link, feel free to use it in any projects.
When importing a triangle, you may have to adjust its translation and rotation so that it initially faces the camera and lies on the surface. If this is not done, the material will turn sideways to the camera or turn upside down (or both at once) and it will be wrong to transfer its position to three-dimensional space. As a result, the material will always be turned in the wrong direction.
I used the following settings for the quad:
When the import is complete, give the quadrilateral a name (I called mine TreeBillboard_Quad_1) and assign the quadrilateral to the billboard material.
Theoretically, we could already place a quad on a map and make sure that when the camera moves, it always turns towards the viewer. But it would be wiser to drag this static mesh into the Foliage tool and work on its placement:
When adding a mesh to the Foliage tool, make sure that the Align to Normal and Random Yaw options are disabled: they rotate the mesh and violate the effect of the material.
This mesh should always be located outside the playing area, where the player will not be able to approach or bypass it, otherwise the whole illusion will be broken and it will look, to put it mildly, bad.
When you add a few thousand of these trees, you get a forest. The quality of the result depends on the quality of the original textures:
Please note: in my game I use the low quality tree model - only this could be found in the public domain on the OpenGameArt website. Again, the result depends on the quality and detail of the mesh used for creating images, as well as on the resolution of these images.
Below are for comparison trees with shadows and lighting and simple unlit billboards:
And then it shows what these trees look like in the resolution and size that is best suited for display. The image shows both meshes (closer) and billboards (further). At first glance, they are difficult to distinguish, and with better mesh and images, it will look even more impressive:
Since we draw only 2 triangles for each tree, the performance with this approach is more than acceptable for modern computers. I managed to fill the entire map with trees without noticeable performance degradation of the average video card (AMD R9 270X). The method is also great for working with cane, grass or other small plants. The player will not notice that they are flat, even if they come closer.
It is not easy to apply lighting or shadow to billboards, so they do not have a shadow in my game.
The player is unlikely to notice this from a long distance, but if he comes close enough, the lack will be revealed.
True, the performance in this case is not ideal. The 'Custom' node that we use for the material does not allow the engine to optimize the shader. Now it does not matter, but you may be different. If in doubt, use a profiler.
Another approach is to use low poly LOD chains, which are generated using tools like Simplygon or Meshlab . Imposters can also be used as vegetation. It is even better to combine 3 approaches using a high-poly tree model (for example, with speedtree.com) and the least detailed model in your LOD chain. So you save resources. When a tree is far away, it does not differ from a flat sprite in terms of detail and shadows. Therefore, it is not necessary to draw it completely.
I hope this article will benefit your game and will allow you not to spend a fortune on expensive video cards. There are many ways to render vegetation, and this is only one of them.
Vegetation in the Unreal Engine 4
In Unreal Engine 4, by default, there is a built-in tool for working with vegetation called the Foliage tool. It adds cloned static meshes (more generally, skeleton-free models). Each asset with vegetation can be added to the map thousands of times with different settings of rotation, location, etc. for all instances.
With relatively small (up to 10,000 copies) and simple (less than 100 polygons) assets, everything will work fine even with shade and good lighting of plants. But you need to intelligently adjust the clipping distance so that the graphics hardware does not attempt to display all 10,000 copies at once.
')
However, for relatively large clusters of vegetation (for example, whole forests) this can be a problem.
Consider an example from my game. In the north of the map is a large forest, the player can enter it from the south. All that is outside the southern side of the forest is a non-game zone. But it still needs to be rendered to give the player the impression of a vast and immense forest.
If we decided to render the whole forest, even using low poly models of trees, this would lower the performance on weak computers.
In this case billboards come to the rescue.
Is billboard advertising?
Unreal Engine 4 in the basic configuration supports the Billboard Material Component . It is well suited for working with single or few meshes in a level, as shown in the example above. Unfortunately, it cannot be used for the Foliage tool, which only supports the placement of static meshes. To use the Billboard Component, it must be inside the Actor class, which is not supported by this tool.
You need to make your own Billboard Material. How to do this can be found in the documentation link here in the section on stylized rendering (some do not immediately find the necessary information, therefore I recommend reading it more carefully).
I will not retell this document. In return, I will add a screenshot of my material created from the documentation and tell you how to use it in the game.
To get started, import simple 2D textures that will act as a sprite with a billboard. To this end, I made screenshots of the tree model on a transparent background. When viewed from a certain distance, they are very similar to high-poly models.
It is important to leave a little variety: I created 4 variants of one tree so that the models did not look the same.
Material preparation
The next step is to create a material that will be responsible for ensuring that the vertices of the static mesh are always facing the camera. As a static mesh, take a quadrilateral formed by two triangles (more on that later).
Go to the Content Browser panel, right-click and create a new Material.
Select the following settings:
- Blend Mode: Masked;
- Shading Model: Unlit;
- a checkmark in front of the Two Sided parameter.
You can then place the nodes on the graphic panel of the material. Let's make some important clarifications. The material adjusts the position of the vertices so that they are turned toward the camera. Due to the nodes attached to the World Position Offset, the material adjusts the position of its vertices so that they are turned towards the camera.
The 'Custom' node contains a special HLSL code inside the section responsible for billboard effects. It is needed to calculate the correct rotation of the quadrilateral. The parameters of this node look like this: opposite to 'Inputs', you need to select one value and name it 'In', and opposite to 'Output Type' CMOT Float 2. The documentation describes this differently, but there are incorrect names of the parameters:
float2 output; output = atan2 (In.y,In.x); return (output); The nodes attached to the PivotPosition are responsible for ensuring that the rectangle is transferred to three-dimensional space in accordance with the coordinates and rotates around the original point.
But this material is not intended for direct use. The texture has been converted to a Material Parameter that instances of the material will use.
After saving the material, right-click on it in the Content Browser panel and make several copies. Each of them must use the correct texture of your billboard. So the code will not be duplicated, and resources will be spent more efficiently.
Having defined the material, we load a simple rectangle into the Unreal Engine 4 that will be used as a static mesh for the Foliage tool.
Creating and loading a mesh
For a billboard model, only a rectangle consisting of two triangles is needed. Create such an asset using the Blender program or download the one that I used. It is available for download at the link, feel free to use it in any projects.
When importing a triangle, you may have to adjust its translation and rotation so that it initially faces the camera and lies on the surface. If this is not done, the material will turn sideways to the camera or turn upside down (or both at once) and it will be wrong to transfer its position to three-dimensional space. As a result, the material will always be turned in the wrong direction.
I used the following settings for the quad:
- Roll: 270 degrees.
- Pitch: 180 degrees.
- Yaw: 0 degrees.
- Import Uniform Scale: Adjust according to the size of your map, the quadrilateral itself is large enough.
- Import translation, Z axis: Adjust according to the landscape. I put on 190 units.
When the import is complete, give the quadrilateral a name (I called mine TreeBillboard_Quad_1) and assign the quadrilateral to the billboard material.
Theoretically, we could already place a quad on a map and make sure that when the camera moves, it always turns towards the viewer. But it would be wiser to drag this static mesh into the Foliage tool and work on its placement:
When adding a mesh to the Foliage tool, make sure that the Align to Normal and Random Yaw options are disabled: they rotate the mesh and violate the effect of the material.
This mesh should always be located outside the playing area, where the player will not be able to approach or bypass it, otherwise the whole illusion will be broken and it will look, to put it mildly, bad.
When you add a few thousand of these trees, you get a forest. The quality of the result depends on the quality of the original textures:
Appearance
Please note: in my game I use the low quality tree model - only this could be found in the public domain on the OpenGameArt website. Again, the result depends on the quality and detail of the mesh used for creating images, as well as on the resolution of these images.
Below are for comparison trees with shadows and lighting and simple unlit billboards:
And then it shows what these trees look like in the resolution and size that is best suited for display. The image shows both meshes (closer) and billboards (further). At first glance, they are difficult to distinguish, and with better mesh and images, it will look even more impressive:
Performance
Since we draw only 2 triangles for each tree, the performance with this approach is more than acceptable for modern computers. I managed to fill the entire map with trees without noticeable performance degradation of the average video card (AMD R9 270X). The method is also great for working with cane, grass or other small plants. The player will not notice that they are flat, even if they come closer.
It is not easy to apply lighting or shadow to billboards, so they do not have a shadow in my game.
The player is unlikely to notice this from a long distance, but if he comes close enough, the lack will be revealed.
True, the performance in this case is not ideal. The 'Custom' node that we use for the material does not allow the engine to optimize the shader. Now it does not matter, but you may be different. If in doubt, use a profiler.
Alternatives
Another approach is to use low poly LOD chains, which are generated using tools like Simplygon or Meshlab . Imposters can also be used as vegetation. It is even better to combine 3 approaches using a high-poly tree model (for example, with speedtree.com) and the least detailed model in your LOD chain. So you save resources. When a tree is far away, it does not differ from a flat sprite in terms of detail and shadows. Therefore, it is not necessary to draw it completely.
Conclusion
I hope this article will benefit your game and will allow you not to spend a fortune on expensive video cards. There are many ways to render vegetation, and this is only one of them.
Source: https://habr.com/ru/post/332608/
All Articles